<template>
  <div>
    <a-drawer class="modal-div-box" v-model:visible="vdata.visible" width="60%" title="选择人员" >
      <div class="modal-div">
        <!-- 码牌列表 -->
        <div class="modal-div1">
          <div class="search">
            <a-input v-model:value="vdata.searchData.accountName" class="rate-input" placeholder="搜索账号名称" />
            <a-input v-model:value="vdata.searchData.account" class="rate-input" placeholder="搜索账号" />
            <a-select class="rate-input" v-model:value="vdata.searchData['type']" placeholder="账户类型">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="1">个人支付宝</a-select-option>
              <a-select-option :value="2">企业支付宝</a-select-option>
              <a-select-option :value="3">个人银行卡</a-select-option>
              <a-select-option :value="4">对公账户</a-select-option>
            </a-select>
            <a-button type="primary" @click="searchFunc"><template #icon><search-outlined /></template>查询</a-button>
            <a-button style="margin-left: 8px" @click="() => vdata.searchData = {} "><reload-outlined />重置</a-button>
          </div>

          <div class="list-table">
            <JeepayTable
                ref="infoTable"
                :initData="false"
                :reqTableDataFunc="reqTableDataFunc"
                :tableColumns="tableColumns"
                :searchData="vdata.searchData"
                rowKey="id"
                scrollX="100%"
            >
              <template #bodyCell="{ column, record }">

                <template v-if="column.key === 'accountType'">
<!--                  <a-tag color="#096dd9" v-if="record.accountType == 'C' && record.entryType == 'ZFB'"> 个人支付宝</a-tag>-->
<!--                  <a-tag color="#d4380d" v-if="record.accountType == 'B' && record.entryType == 'ZFB'"> 企业支付宝</a-tag>-->
<!--                  <a-tag color="#389e0d" v-if="record.accountType == 'C' && record.entryType == 'BANK'"> 个人银行卡</a-tag>-->
<!--                  <a-tag color="#d46b08" v-if="record.accountType == 'B' && record.entryType == 'BANK'"> 对公账户</a-tag>-->
                  <a-tag
                      :key="record.accountType"
                      :color="record.accountTypeState == 4?'red':record.accountTypeState == 2?'orange':record.accountTypeState === 3?'blue':record.accountTypeState === 1?'green':'volcano'"
                  >
                    {{record.accountTypeStateDesc}}
                  </a-tag>

                </template>
                <template v-if="column.key === 'account'">
                  <a-popover placement="top" style="background: #0c2640 !important;">
                    <template #title >
                      <p style="padding: 5px">账号：{{record.account}}</p>
                      <p style="padding: 5px" v-if="record.message.instProvince">省：{{record.message.instProvince}}</p>
                      <p style="padding: 5px" v-if="record.message.instName">开户银行：{{record.message.instName}}</p>
                      <p style="padding: 5px" v-if="record.message.instBranchName">开户支行：{{record.message.instBranchName}}</p>
                    </template>
                    <div class="my-tooltip-title-box"><b><a >{{record.account}}</a></b></div>
                  </a-popover>
                </template>
                <template v-if="column.key === 'bindState'">
                  <JeepayTableColState :state="vdata.selectRecordIdList.includes(record.id) ? 1 : 0" :showSwitchType="true" :onChange="(id) => { return updateBindState(record.id, id)}" />
                </template>
              </template>
            </JeepayTable>
          </div>
<!--          <a-button    type="primary"   class="mg-b-30"  @click="addFunc()"  >  <plus-outlined /> 批量添加  </a-button>-->
        </div>
      </div>
      <div class="drawer-btn-center">
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          <close-outlined />
          取消
        </a-button>
        <a-button type="primary" :loading="vdata.confirmLoading" @click="okFunc">
          <check-outlined />
          保存
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
import {
  API_URL_MCH_QR_CODE_LIST,
  req,
  $qrcShellViewByQrc,
  API_URL_PRODUCT_LIST,
  API_URL_PAY_AQF_LIST
} from '@/api/manage'
import { reactive, ref, defineExpose, nextTick, getCurrentInstance } from 'vue'

// 导入全局函数
const { $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties

// 定义向父组件 通讯 func
const emit = defineEmits(['selectFinishFunc'])

const tableColumns = ref([
  {key:'accountType', title: '账户类型', dataIndex: 'accountType',align: 'center'  },
  { key: 'accountName', title: '姓名', fixed: 'left', dataIndex: 'accountName',align: 'center'   },
  { key: 'account', title: '账号', dataIndex: 'account',align: 'center'   },
  { key: 'bindState', dataIndex: 'bindState',fixed: 'right', title: '是否添加',align: 'center' },
])

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

// 响应式数据
const vdata :any = reactive ({
  visible: false,
  searchData: {},
  selectRecordIdList: []
})

// 请求table接口数据
async function reqTableDataFunc (params){
  params.transIfCode = 'aliaqf'
  params.subjectType = 'JS'
  // params.entryType = vdata.searchData.entryType
  let  res =  await  req.list(API_URL_PAY_AQF_LIST, params)
  for (let i = 0; i < res.records.length; i++) {

    res.records[i].accountTypeState = 0;
    res.records[i].accountTypeStateDesc = '';
    if(res.records[i].accountType == 'C' && res.records[i].entryType == 'ZFB'){
      res.records[i].accountTypeState = 1;
      res.records[i].accountTypeStateDesc = '个人支付宝';
    }else if(res.records[i].accountType == 'B' && res.records[i].entryType == 'ZFB'){
      res.records[i].accountTypeState = 2;
      res.records[i].accountTypeStateDesc = '企业支付宝';
    }else if(res.records[i].accountType == 'C' && res.records[i].entryType == 'BANK'){
      res.records[i].accountTypeState = 3;
      res.records[i].accountTypeStateDesc = '个人银行卡';
    }else if(res.records[i].accountType == 'B' && res.records[i].entryType == 'BANK'){
      res.records[i].accountTypeState = 4;
      res.records[i].accountTypeStateDesc = '对公账户';
    }
    if(!res.records[i].accountMessage){
      res.records[i].message = {};
    }else{
      var message = JSON.parse(res.records[i].accountMessage)
      // res.records[i].message = messgae.instProvince + "-"+messgae.instName + "-"+messgae.instBranchName
      res.records[i].message = message
    }
  }
  return res
}

// 表格搜索
function searchFunc () {

  if(vdata.searchData.type == 1){
    vdata.searchData.accountType = 'C'
    vdata.searchData.entryType = 'ZFB'
  }else if(vdata.searchData.type == 2){
    vdata.searchData.accountType = 'B'
    vdata.searchData.entryType = 'ZFB'
  }else if(vdata.searchData.type == 3){
    vdata.searchData.accountType = 'C'
    vdata.searchData.entryType = 'BANK'
  }else if(vdata.searchData.type == 4){
    vdata.searchData.accountType = 'B'
    vdata.searchData.entryType = 'BANK'
  }

  nextTick(() => {
    infoTable.value.refTable(true)
  })
}

// 表格行开关开启、关闭
function updateBindState(recordId, bindState) {
  return new Promise<void>((resolve, reject) => {
    nextTick(() => {
      if (bindState) {
        vdata.selectRecordIdList.push(recordId)
      } else {
        vdata.selectRecordIdList.splice(vdata.selectRecordIdList.indexOf(recordId), 1)
      }
      console.log(vdata.selectRecordIdList,'vdataselectRecordIdList')
      resolve()
    })
    // return reqLoad.updateById(API_URL_STORE_DEVICE, recordId, { state: state }).then(res => {
    //   searchFunc()
    //   resolve()
    // }).catch(err => reject(err))
  })
}

// 选择完毕
function okFunc(){
  console.log(vdata.selectRecordIdList,'vdataselectRecordIdList')



  emit('selectFinishFunc',  vdata.selectRecordIdList)
}

// 显示
function  show (bindQrcList) {
  vdata.selectRecordIdList = [] // 清空已选择的数据

  // vdata.searchData.qrcBelongType = 2
  // console.log(entryType,'entryType')
  // vdata.searchData.entryType = entryType
  if (bindQrcList) {
    vdata.selectRecordIdList =  JSON.parse(JSON.stringify(bindQrcList))
  }

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

  vdata.visible = true
}

function close(){
  vdata.visible = false
}

// 显示二维码图片
function showQrImgFunc(recordId){
  $qrcShellViewByQrc(recordId).then((res) => {
    $viewerApi({images: [res]})
  })
}
function onClose(){
  vdata.visible = false
}
// 定义对外输出函数
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;
  }
}

.search {

  display: flex;
  margin: 10px 0;
  .rate-input {
    width: 200px;
    margin-right: 10px;
  }
}

</style>
