<template>
  <el-dialog
    :visible.sync="visible"
    title="选择设备"
    width="60%"
    @close="handleClose">
    <el-table
      :data="deviceList"
      highlight-current-row
      @current-change="handleDeviceSelect"
      v-loading="loading">
      <el-table-column prop="deviceId" label="设备ID"/>
      <el-table-column prop="deviceNo" label="设备编号"/>
      <el-table-column prop="deviceName" label="设备名称"/>
      <el-table-column label="状态" width="120">
        <template slot-scope="{ row }">
          <dict-tag
            :options="dict.type.device_status"
            :value="row.status"
          />
        </template>
      </el-table-column>
      <template slot="empty">
        <el-empty description="请先绑定设备后再为卡座增加设备哦"></el-empty>
      </template>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        @click="handleConfirm"
        :disabled="!selectedDevice">
        确认绑定（{{ selectedDevice ? selectedDevice.deviceName : '' }}）
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'DeviceSelectDialog',
  dicts:['device_status'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    deviceList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedDevice: null
    }
  },
  methods: {
    handleDeviceSelect(currentRow) {
      this.selectedDevice = currentRow
    },
    handleClose() {
      this.selectedDevice = null
      this.$emit('close')
      this.$emit('update:visible', false)
    },
    handleConfirm() {
      if (this.selectedDevice) {
        this.$emit('confirm', this.selectedDevice)
        this.handleClose()
      }
    }
  }
}
</script>
