<template>
  <confirm-dialog
    ref="configDialog"
    :title="title"
    @confirm="onSave"
  >
    <div class="c-grid-form mini u-align-self--center">
      <span class="c-grid-form__label u-bold">开启：</span>
      <div class="l-flex--row c-grid-form__option">
        <el-switch
          v-model="deviceServiceConfig.enabled"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </div>
    </div>
  </confirm-dialog>
</template>

<script>
import {
  getDeviceServiceConfig,
  addDeviceServiceConfig,
  updateDeviceServiceConfig
} from '../api'

export default {
  name: 'DeviceServiceConfigDialog',
  data () {
    return {
      title: '',
      deviceServiceConfig: {}
    }
  },
  methods: {
    show (deviceId, name) {
      this.title = name ? `${name}服务配置` : '设备服务配置'
      getDeviceServiceConfig(deviceId).then(({ data }) => {
        this.deviceServiceConfig = data || {
          deviceId,
          service: 1,
          enabled: false
        }
        this.$refs.configDialog.show()
      })
    },
    onSave (done) {
      (this.deviceServiceConfig.id ? updateDeviceServiceConfig : addDeviceServiceConfig)(this.deviceServiceConfig).then(done)
    }
  }
}
</script>
