<template>
  <el-dialog :visible.sync="dialogFormVisible" title="设备绑定" append-to-body @close="cancel">
    <el-form ref="dataForm" :model="doorForm" label-well-code="right" label-width="100px">
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-form-item label="门禁名称" prop="doorName">
            <el-input v-model.trim="doorForm.doorName" :disabled="true" type="text" placeholder="必填"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-form-item label="进门设备" prop="description">
            <el-select v-model="doorForm.inDeviceIds" multiple placeholder="请选择">
              <el-option
                v-for="item in deviceList"
                :key="item.id"
                :label="item.devCode"
                :value="''+item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-form-item label="出门设备" prop="description">
            <el-select v-model="doorForm.outDeviceIds" multiple placeholder="请选择">
              <el-option
                v-for="item in deviceList"
                :key="'device_'+item.id"
                :label="item.devCode"
                :value="''+item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveData">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { bindDevice } from '@/api/door'
import { getDeviceListAll } from '@/api/device'

export default {
  name: 'BindDevice',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update
      doorForm: {
        doorId: '', // id
        doorName: '', // 门禁名称
        inDeviceIds: [], // 门禁编码
        outDeviceIds: [] // 门禁名称
      }, // 表单
      deviceList: [],
      textMap: {
        update: '编辑',
        create: '新增',
        detail: '详情'
      }, // 表头显示标题
      isEditMode: false,
      deptShowTop: false, // 权属单位下拉是否显示顶级
      deptShow: true
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 初始化对话框
    initDialog: function(row = null) {
      let inDeviceIds = []
      let outDeivceIds = []
      if (row.inDeviceIds) { inDeviceIds = row.inDeviceIds.split(',') }
      if (row.outDeviceIds) { outDeivceIds = row.outDeviceIds.split(',') }
      debugger
      this.dialogFormVisible = true
      this.doorForm = {
        doorId: row.id,
        doorName: row.doorName, // 门禁名称
        inDeviceIds: inDeviceIds, // 进门设备
        outDeviceIds: outDeivceIds // 出门设备
      }
    },
    fetchData() {
      const params = {
        devType: '1'
      }
      getDeviceListAll(params).then(response => {
        this.deviceList = response.data
      })
    },
    // 重置表单
    resetForm() {
      this.doorForm = {
        id: '', // id
        doorName: '', // 门禁名称
        inDeviceIds: [], // 门禁编码
        outDeviceIds: [] // 门禁名称
      }
    },
    // 保存数据
    saveData: function() {
      if (this.validateForm(this.doorForm)) {
        bindDevice(this.doorForm).then(response => {
          if (response.code === 200) {
            this.$message.success('修改成功')
            this.cancel()
          }
        })
      }
    },
    validateForm(doorForm) {
      // if (doorForm.inDeviceIds.length <= 0) {
      //   this.$message.warning('进门设备必选')
      //   return false
      // }
      return true
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
</style>