<template>
  <div>
    <a-modal v-model:visible="vdata.visible" width="70%" title="关联设备" @ok="() => vdata.visible = false">
      <div class="modal-div">
        <!-- 受支持的设备列表 -->
        <div class="modal-div1">
          <div class="list-table">
            <JeepayTable
              ref="infoTable"
              :initData="false"
              :reqTableDataFunc="reqTableDataFunc"
              :tableColumns="tableColumns"
              rowKey="deviceId"
              :scrollX="400"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'provider'">
                  <a-tag :key="record.provider" color="processing">
                    {{ (speakerList.find(item => item.value == record.provider) as any).text || '其他' }}
                  </a-tag>
                </template>
                <template v-if="column.key === 'storeId'">
                  <a-tooltip   class="my-tooltip">
                    <template #title>
                      门店编号：{{record.storeId}}
                    </template>
                    {{record.storeName}}
                  </a-tooltip>
                </template>
                <template v-if="column.key === 'op'">
                  <!-- 操作列插槽 -->
                  <JeepayTableColumns>
                    <a-button type="link" @click="editFunc(record.deviceNo)">设备管理</a-button>
                  </JeepayTableColumns>
                </template>
              </template>
            </JeepayTable>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { $bindDeviceList } from '@/api/manage'
import { reactive, ref, defineExpose, nextTick } from 'vue'
import provider from './provider.json'
const speakerList = provider.speaker
import router from '@/router'

// 定义组件的传入参数 
const props = defineProps({
    sysType: { type: String, default: 'PLATFORM' }, // 系统类型： PLATFORM
})

const tableColumns = [
  { key: 'provider', title: '设备厂商', },
  { key: 'deviceNo', title: '设备号', dataIndex: 'deviceNo' },
  // { key: 'deviceId', title: '设备ID', dataIndex: 'deviceId' },
  // { title: '批次号', dataIndex: 'batchId' },
  { title: '设备名称', dataIndex: 'deviceName' },
  { key: 'storeId', title: '门店名称', dataIndex: 'storeId',  },
  { key: 'op', title: '操作', width: 260, fixed: 'right', align: 'center' }
]

// 当前 table 组件
const infoTable = ref()

// 响应式数据 
const vdata :any = reactive ({
  visible: false,
  recordId: null
})

// 请求table接口数据
function reqTableDataFunc (params){
  return $bindDeviceList(vdata.recordId, params)
}

// 表格搜索
function searchFunc () {
  nextTick(() => {
    infoTable.value.refTable(true)
  })
}

function close(){
  vdata.visible = false
}

// 绑定管理
function editFunc(recordId) {
  if (props.sysType == 'MCH') {
    router.push({
      path: '/speaker',
      query: { deviceName: recordId }
    })
  } else {
    router.push({
      path: '/speaker/device',
      query: { deviceId: recordId }
    })
  }
}

// 显示
function  show (recordId) {
  vdata.selectedRowKeys = { agent: [] } //清空已选择的数据
  vdata.recordId = recordId // 默认划拨

  nextTick(() => {
    searchFunc()
  })

  vdata.visible = true
}

// 定义对外输出函数
defineExpose( { show, close } )
</script>

<style scoped lang="less">
.modal-div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;

  .modal-div1 {
    width: 100%
  }

  .list-table {
    border: 1px solid #ddd;
    border-radius: 6px;
  }
}


</style>
