<!-- 等待支付的弹层：  -->
<template>
  <div>
    <a-modal
      v-model:visible="vdata.visible"
      title="智能POS支付"
      :footer="null"
      width="80%"
    >
      <a-row>
        <a-col :span="9" :offset="1">
          <a-form-item label="支付渠道">
            <a-radio-group v-model:value="vdata.channelExtra.channelType">
              <a-radio value="SCAN">扫一扫</a-radio>
              <a-radio value="CARD">银行卡</a-radio>
              <a-radio value="QRCODE">付款码</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item label="支付方式">
            <a-radio-group v-model:value="vdata.channelExtra.payType">
              <a-radio value="ALIPAY">支付宝</a-radio>
              <a-radio value="WECHAT">微信</a-radio>
              <a-radio value="UNIONPAY">银联钱包</a-radio>
              <a-radio value="QR_CASHIER">聚合码</a-radio>
              <a-radio value="DCEP">数字人民币</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      
      <a-card class="table-card">
        <!-- 列表渲染 -->
        <JeepayTable
          ref="infoTable"
          :init-data="false"
          :req-table-data-func="reqTableDataFunc"
          :table-columns="tableColumns"
          :rowSelection="{ type: 'radio', selectedRowKeys: vdata.selectedRowKeys, onChange: infoTableSelectChangeFunc }"
          :customRow="customRow"
          row-key="deviceId"
          @btnLoadClose="btnLoading=false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'provider'">
              <a-tag :key="record.provider" color="processing">
                {{ (vdata.ifCodeList.find(item => item.ifCode == record.provider) as any)?.ifName || '其他' }}
              </a-tag>
            </template>
          </template>
        </JeepayTable>

        <div style="display:flex;flex-direction:row;justify-content: center;margin-bottom:14px;">
          <a-button type="primary" style="margin-left:10px;" :loading="vdata.loading" @click="handleOk">确认支付</a-button>
        </div>
      </a-card>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { API_URL_STORE_DEVICE, API_URL_IFDEFINES_LIST, req, $getAvailablePayInterfaceList } from '@/api/manage'
import { dataTool } from 'echarts'
import { ref, nextTick, reactive, onMounted } from 'vue'

const emit = defineEmits(['autoPosBizData'])

const infoTable = ref()

const vdata =  reactive({
  visible: false,
  selectedRowKeys: [],
  channelExtra: {
    deviceNo: '', // 设备号
    channelType: 'SCAN', // 支付渠道
    payType: 'ALIPAY', // 支付方式
  } as any,
   ifCodeList: [], // 通道列表
}) as any

let tableColumns = reactive([
  { title: '设备号', dataIndex: 'deviceNo', key: 'deviceNo' },
  { key: 'provider', title: '所属支付接口', dataIndex: 'provider'},
  { title: '设备名称', dataIndex: 'deviceName',  },
  { title: '门店编号', dataIndex: 'storeId',},
  { key: 'appId', dataIndex: 'appId', title: '应用ID',   }
])

  let btnLoading = ref(false)

  onMounted(() => {
    req.list(API_URL_IFDEFINES_LIST, { 'state': 1 }).then(res => { // 通道下拉选择列表
      vdata.ifCodeList = res.filter(r => r.wayCodes.some(s => s.wayCode == 'AUTO_POS'))
    })
  })

  function reqTableDataFunc(params: any) { // 请求table接口数据
    return req.list(API_URL_STORE_DEVICE, Object.assign({ deviceType: 4, bindState: 1, state: 1, provider: vdata.ifCode ? vdata.ifCode : -1 }, params))
  }

  function showModal (appId) {
    vdata.loading = false
    vdata.visible = true

    // 请求支付通道数据
    $getAvailablePayInterfaceList(appId, 'AUTO_POS').then(r => {
      const channel = r.records.find(item => item.configState == 1)
      if(channel) {
        vdata.ifCode = channel.ifCode

        infoTable.value.refTable(true)
      }
    })
  }

    // 按钮的点击事件，当使用扫码设备扫码后，也会自动吊起该事件
  function  handleOk () {
    if (vdata.barCodeValue === '') {
      return
    }

    vdata.loading = true
    emit('autoPosBizData', vdata.channelExtra)
  }
  function infoTableSelectChangeFunc(e, record) {
    const selectRecord = record[0]
    vdata.selectedRowKeys = []
    vdata.selectedRowKeys.push(selectRecord.deviceId)

    vdata.channelExtra.deviceNo = selectRecord.deviceNo
  }
  function customRow(record) {
    return {
      onClick: () => {
        infoTableSelectChangeFunc(null, [record])
      },
    }
  }
  function  getVisible () {
    return vdata.visible
  }
  function  processCatch () {
    vdata.loading = false
  }
  function closeVisible(){
    vdata.visible = false
  }

  defineExpose({showModal,getVisible,processCatch, closeVisible})
</script>
<style lang="less" scoped>
.describe {
  img {
    width: 30px;
    height: 25px;
  }
}
</style>
