<template>
    <!-- 权限信息弹出框 -->
<el-dialog :model-value="dialogVisible" title="设备绑定" v-bind="dialogBig" @close="handleCancel" width="600" draggable>
    <div>
        <el-transfer v-model="value" 
        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 = [
      '模拟装置1',
      '模拟装置2',
      '模拟装置3',
      '模拟装置4',
      '中电送检装置',
      '易司拓测试装置',
      '山大电力测试装置1',
      '山大电力测试装置2',
      '滚动条测试1',
      '滚动条测试2',
      '滚动条测试3',
      '滚动条测试4',
      '滚动条测试5',
      '滚动条测试6',
    ]
    const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT', 'GT', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT', 'GT']
    states.forEach((city, index) => {

        data.push({
        label: city,
        key: index,
        initial: initials[index],
        tips:"PQS882A 192.16.1.136",
      })
    })
    return data
  }
  const generateValue = () => {
  const data: number[] = []
  const states = [
    '山大电力测试装置1',
    '山大电力测试装置2',
  ]
  const initials = ['AB', 'CD']
  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>