<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <JeepaySearchForm :searchConditionNum="6" :searchFunc="searchFunc" :resetFunc="onReset">
        <jeepay-text-up v-if="$hasAgentEnt()" v-model:value="vdata.searchData['mchServiceName']" :placeholder="'服务商号/名称'" />
        <JeepaySearchInfoInput v-model:value="vdata.searchData['mchUserName']" placeholder="用户号/名称" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />

        <jeepay-text-up v-model:value="vdata.searchData.batchId" :placeholder="'批次号'" />
        <jeepay-text-up v-model:value="vdata.searchData.deviceId" :placeholder="'设备ID'" />
        <jeepay-text-up v-model:value="vdata.searchData.deviceNo" :placeholder="'设备号'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.provider" placeholder="所属厂商">
            <a-select-option value="">全部</a-select-option>
            <a-select-option v-for="item in speakerList" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.state" placeholder="状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">禁用</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.bindState" placeholder="绑定状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">未绑定</a-select-option>
            <a-select-option value="1">已绑定</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>
      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :init-data="false"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="vdata.searchData"
        :rowSelection="{ type: 'checkbox', selectedRowKeys: vdata.allotDeviceIdList, onChange: infoTableSelectChangeFunc }"
        row-key="deviceId"
        @btnLoadClose="btnLoading=false"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_DEVICE_SPEAKER_DEVICE_ADD')" type="primary" @click="addFunc"><plus-outlined />批量入库</a-button>
          <a-button v-if="$access('ENT_DEVICE_SPEAKER_DEVICE_ALLOT') && $hasAgentEnt()" type="primary" @click="allotBatchFunc"><partition-outlined />勾选划拨/收回</a-button>
          <a-button v-if="$access('ENT_DEVICE_SPEAKER_DEVICE_ALLOT') && $hasAgentEnt()" type="primary" @click="allotByBatchIdFunc"><partition-outlined />批次划拨/收回</a-button>
          <a-button v-if="$access('ENT_DEVICE_SPEAKER_DEVICE_DEL')" type="danger" @click="deleteBatchFunc"><delete-outlined />批量删除</a-button>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'bindState'">
            <template v-if="record.bindState == 0"><exclamation-circle-outlined />未绑定</template>

            <template v-else>
              <div style="text-align: left;">
                <p v-if="record.appName">应用： {{ record.appName }}({{ record.appId }})</p>
                <p v-if="record.mchApplyName">商户： {{ record.mchApplyName }} ({{ record.mchApplyId }})</p>
                <p v-if="record.storeName">门店： {{ record.storeName }} ({{ record.storeId }})</p>
              </div>
            </template>
          </template>

          <template v-if="column.key === 'bindType'">
            <a-tag v-if="record.bindType == 0" color="green">门店</a-tag>
            <a-tag v-if="record.bindType == 1" color="purple">码牌</a-tag>
          </template>

          <template v-if="column.key === 'state'">
            <JeepayTableColState :state="record.state" :showSwitchType="$access('ENT_DEVICE_SPEAKER_DEVICE_EDIT')" :onChange="(state) => { return updateState(record.deviceId, state)}" />
          </template>

          <template v-if="column.key === 'provider'">
            <a-popover title="厂商配置" trigger="hover">
              <template #content>
                <p>
                  配置ID：{{ record.configId }}
                  <a-button v-clipboard:copy="record.configId" v-clipboard:success="() => $infoBox.message.success('复制成功')" type="link">复制</a-button>
                </p>
                <p>
                  配置备注：{{ record.configDesc }}
                  <a-button v-clipboard:copy="record.configDesc" v-clipboard:success="() => $infoBox.message.success('复制成功')" type="link">复制</a-button>
                </p>
              </template>
              <a-tag :key="record.provider" color="processing">
                {{ (speakerList.find(item => item.value == record.provider) as any).text || '其他' }}&nbsp;<info-circle-outlined />
              </a-tag>
            </a-popover>
          </template>
          <template v-if="column.key === 'mchUserName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>用户名称：{{record.mchUserName}}</span><br>
                <span>用户手机号：{{record.mchUserPhone}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.mchUserName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'mchServiceName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>服务商名称：{{record.mchServiceName}}</span><br>
                <span>服务商号：{{record.agentNo}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.mchServiceName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_DEVICE_SPEAKER_DEVICE_EDIT')" type="link" @click="editFunc(record)">修改</a-button>
              <a-button v-if="$access('ENT_DEVICE_SPEAKER_DEVICE_EDIT')" type="link" @click="bindFunc(record)">绑定管理</a-button>
              <a-button v-if="$access('ENT_DEVICE_SPEAKER_DEVICE_EDIT') && record.bindState == 1" type="link" @click="unBindFunc(record.deviceId)">解绑</a-button>
              <a-button v-if="$access('ENT_DEVICE_SPEAKER_DEVICE_ALLOT') && $hasAgentEnt()" type="link" @click="allotFunc(record)">划拨/收回</a-button>
              <a-button v-if="$access('ENT_DEVICE_SPEAKER_DEVICE_TEST')" type="link" @click="test(record.deviceId)">播报测试</a-button>
              <a-button v-if="$access('ENT_DEVICE_SPEAKER_DEVICE_DEL')" type="link" style="color: red" @click="delFunc(record.deviceId)">删除</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>

    <!-- 批次号划拨弹窗 -->
    <a-modal v-model:visible="vdata.allotByBatchIdVisible" title="按批次号划拨设备" @ok="allotOk">
      <a-form ref="allotFormModel" :model="vdata.allotObject" layout="vertical" :rules="vdata.allotRules">
        <a-form-item label="批次号：" name="batchId">
          <a-input v-model:value="vdata.allotObject.batchId" placeholder="请输入批次号" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 新增云喇叭组件  -->
    <CommonAdd ref="commonAdd" :callbackFunc="searchFunc" />
    <!-- 修改云喇叭组件  -->
    <CommonEdit ref="commonEdit" :callbackFunc="searchFunc" />
    <!-- 绑定组件  -->
    <Bind ref="bind" :callbackFunc="searchFunc" />
    <!-- 测试设备组件  -->
    <TestDevice ref="testDevice" :callbackFunc="searchFunc" />

    <JeepayModelAgentList ref="jeepayModelAgentList" showType="AGENT" @selectFinishFunc="searchAgentFinishFunc" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { $allotDevice, API_URL_STORE_DEVICE, req, reqLoad, $batchDelDevice, $unbindDevice } from '@/api/manage'
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import Bind from './Bind.vue'
import TestDevice from '../TestDevice.vue'
import CommonAdd from './CommonAdd.vue'
import CommonEdit from './CommonEdit.vue'
import provider from '../../provider.json'

const speakerList = provider.speaker

const { $infoBox, $access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties

const jeepayModelAgentList = ref()
const commonAdd = ref()
const commonEdit = ref()
const bind = ref()
const testDevice = ref()
const infoTable = ref()
const allotFormModel = ref()
const deviceType = ref(1)

let tableColumns = reactive([
  { title: '设备ID', fixed: 'left', dataIndex: 'deviceId' },
  { title: '设备号', dataIndex: 'deviceNo' },
  { title: '批次号', dataIndex: 'batchId' },
  { title: '绑定码牌ID', dataIndex: 'bindQrcId' },
  { key: 'provider', title: '设备厂商', dataIndex: 'provider', },
  { key: 'mchUserName', title: ' 所属用户', dataIndex: 'mchUserName', agentEntCol: true ,align: 'center',},
  { key: 'mchServiceName', title: ' 所属服务商', dataIndex: 'mchServiceName', agentEntCol: true ,align: 'center',},
  { key: 'bindState', title: '绑定商户信息', },
  { key: 'bindType', title: '绑定类型', },
  { key: 'state', title: '状态', },
  { dataIndex: 'createdAt', title: '创建日期', },
  { key: 'operation', title: '操作', fixed: 'right', align: 'center'}
])

  let btnLoading = ref(false)
  const vdata = reactive({
    allotByBatchIdVisible: false, // 批次划拨设备弹窗
    searchData: {} as any,
    allotObject: {
      agentNo: null, // 划拨代理商号
      allotType: null, // 划拨类型：select-勾选划拨  batch-批次划拨
      batchId: null, // 批次号，划拨类型为 batch-批次划拨 时必填
      allotDeviceIds: [] as any, // 要划拨的设备ID，划拨类型为 select-勾选划拨 时必填
    } as any, // 划拨设备对象
    allotDeviceIdList: [] as any, // 要划拨的设备ID，划拨类型为 select-勾选划拨 时必填
    allotRules: {
      batchId: [{ required: true, message: '请输入批次号', trigger: 'blur' }]
    }
  }) as any

  onMounted(() => {
    vdata.searchData.mchNo = useRoute().query.mchNo
    vdata.searchData.deviceId = useRoute().query.deviceId
    searchFunc()
  })

  function reqTableDataFunc(params: any) { // 请求table接口数据
    return req.list(API_URL_STORE_DEVICE, Object.assign({ deviceType: deviceType.value }, params))
  }
  function searchFunc () { // 点击【查询】按钮点击事件
    btnLoading.value = true
    infoTable.value.refTable(true)
  }
  function addFunc () { // 业务通用【新增】 函数
    commonAdd.value.show({ deviceType: deviceType.value })
  }
  function editFunc (record: any) { // 业务通用【修改】 函数
    commonEdit.value.show(record)
  }
  function bindFunc (record: any) { // 绑定设备函数
    bind.value.show(record)
  }
  function test(recordId){ // 测试
    testDevice.value.show(recordId, 1)
  }
  function deleteBatchFunc() {  // 批量删除
    if (vdata.allotDeviceIdList.length < 1) {
      $infoBox.message.error('请选择设备')
    } else {
      $infoBox.confirmDanger('确认删除？', '', () => {
        $batchDelDevice(vdata.allotDeviceIdList.join(',')).then((res: any) => {
          infoTable.value.refTable(true)
          $infoBox.message.success('删除成功')
        })
      })
    }
  }
  function delFunc (recordId: any) { // 业务通用【删除】 函数
    $infoBox.confirmDanger('确认删除？', '', () => {
        $batchDelDevice(recordId).then((res: any) => {
            infoTable.value.refTable(true)
            $infoBox.message.success('删除成功')
          })
    })
  }
  function onReset(){ //重置搜索内容
    vdata.searchData = {}
  }
  function updateState (recordId, state) { // 【更新状态】
    const title = state ? '确认启用？' : '确认禁用？'
    const content = state ? '' : '禁用后该设备将无法使用！'
    return new Promise<void>((resolve, reject) => {
      $infoBox.confirmDanger(title, content, () => {
        return reqLoad.updateById(API_URL_STORE_DEVICE, recordId, { state: state }).then(res => {
          searchFunc()
          resolve()
        }).catch(err => reject(err))
      },
        () => {
        reject(new Error())
      })
    })
  }

  // 按批次号划拨
  function allotByBatchIdFunc() {
    vdata.allotObject.allotType = 'batch'
    vdata.allotObject.batchId = ''

    vdata.allotByBatchIdVisible = true
  }
  
  // 按批次号划拨，批次号输入完成
  function allotOk() {
    allotFormModel.value.validate().then((valid: any) =>{
      vdata.allotByBatchIdVisible = false
      jeepayModelAgentList.value.show()
    })
  }

  // 表格多选
  function infoTableSelectChangeFunc(selectedRowKeys, selectedRows) {
    vdata.allotDeviceIdList = selectedRowKeys
  }

  // 勾选划拨设备
  function allotBatchFunc() {
    if (vdata.allotDeviceIdList.length < 1) {
      $infoBox.message.error('请选择设备')
    } else {
      vdata.allotObject.allotType = 'select'
      jeepayModelAgentList.value.show()
    }
  }

  // 划拨单个设备
  function allotFunc(record) {
    vdata.allotObject.allotType = 'select'
    vdata.allotDeviceIdList = []
    vdata.allotDeviceIdList.push(record.deviceId)

    jeepayModelAgentList.value.show()
  }

  // 解绑设备
  function unBindFunc(recordId) {
    const title = '确认解绑？'
    const content = '解绑后商户将无法使用该设备！'
    $infoBox.confirmDanger(title, content, () => {
      return $unbindDevice(recordId).then(res => {
        infoTable.value.refTable(true)
        $infoBox.message.success('解绑成功')
      })
    })
  }

  // 划拨/收回选择完成
  function searchAgentFinishFunc(selectObject) {

    vdata.allotObject.agentNo = selectObject[0]
    vdata.allotObject.allotOrRecover = selectObject[1]
    
    if (vdata.allotObject.allotOrRecover == 'allot' && !vdata.allotObject.agentNo) {
      $infoBox.message.error('请选择服务商')
      return
    }

    if (vdata.allotDeviceIdList.length > 0) {
      vdata.allotObject.allotDeviceIds = vdata.allotDeviceIdList.join(',')
    }

    $allotDevice(vdata.allotObject).then(res => {
      vdata.allotDeviceIdList = [] // 清空多选
      $infoBox.message.success('保存成功')
      jeepayModelAgentList.value.close()
      searchFunc()
    })
  }
</script>
