<template>
    <!-- 权限信息弹出框 -->
<el-dialog :model-value="dialogVisible" title="检测源绑定" v-bind="dialogBig" @close="handleCancel" width="600" draggable>
    <div>
        <el-transfer v-model="value" 
        class="custom-transfer"
        filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入内容搜索"
      :data="data" 
      :titles="['未绑定检测源', '已绑定检测源']">
      <template #default="{ option }">
        <el-tooltip :content="option.tips" placement="top" :show-after=1000>
          <span>{{ option.label }}</span>
        </el-tooltip>
      </template>
      </el-transfer>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleCancel">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import type { Device } from '@/api/device/interface'
  import deviceDataList from '@/api/device/deviceData'
  import { dialogBig } from '@/utils/elementBind'
  
  const {dialogVisible} = defineProps<{
  dialogVisible: boolean;
}>()

  interface Option {
    key: number
    label: string
    initial: string
    tips: string
  }
  
    const generateData = () => {
    const data: Option[] = []
    const states = [
      '标准源-福禄克-6100A',
      '标准源-昂立-PF2',
      '标准源-丹迪克-DKLN1',
      '标准源-博电源-PQC600A',
      '高精度设备-PQV520-1',
      '高精度设备-PQV520-2',
    ]
    const initials = ['FLUKE.6100A', 'ANGLI-FP2', 'DKLN-1', 'PQC600A', 'PQV520-1', 'PQV520-2']
    states.forEach((city, index) => {

        data.push({
        label: city,
        key: index,
        initial: initials[index],
        tips:"IP:192.16.1.124",
      })
    })
    return data
  }
  const generateValue = () => {
  const data: number[] = []
  const states = [
  '高精度设备-PQV520-1',
  '高精度设备-PQV520-2',
  ]
  const initials = ['PQV520-1', 'PQV520-2']
  states.forEach((city, index) => {
    const key = states.indexOf(city)
    if (key !== -1) {
      data.push(key)
    }
  })
  return data
}
//   const generateValue = () => {
//     const data: Option[] = []
//     const states = [
//       '山大电力测试装置1',
//       '山大电力测试装置2',
//     ]
//     const initials = ['AB', 'CD']
//     states.forEach((city, index) => {

//         data.push({
//         label: city,
//         key: index,
//         initial: initials[index],
//       })
//     })
//     return data
//   }
  const data = ref<Option[]>(generateData())
  const value = ref<number[]>(generateValue())
  const emit = defineEmits<{
  (e:'update:visible',value:boolean):void;
  }>();

  const handleCancel = () => {
    emit('update:visible',false)
  }
  const filterMethod = (query, item) => {
    return item.label.toLowerCase().includes(query.toLowerCase())
  }
  </script>
  <style scoped>
  .custom-transfer .el-transfer-panel{
    overflow-x: auto !important;
  }

  </style>