<template>
  <div>
      <div class="modal-div">
        <!-- 码牌列表 -->
        <div class="modal-div1">

          <div class="list-table" style="border:none">
            <a-table bordered :data-source="vdata.receiveList" :columns="props.selectIfCode =='AQF'?tableColumns:tableColumns" :pagination="false" style="margin-left: -1px;">
              <template #infoType="{  record }">
                <span v-if="record.infoType == 'ISV'">渠道商</span>
                <span v-if="record.infoType == 'AGENT'">
                  <span v-if="props.infoId != record.infoId">上级服务商</span>
                  <span v-if="props.infoId == record.infoId">当前服务商</span>
                </span>
                <span v-if="record.infoType == 'MCH'">商户</span>
              </template>
              <template #isvName="{  record }">
                <a-tooltip v-if="record.infoType == 'ISV'" class="my-tooltip" overlayClassName="tooltip-box-name">
                  <template #title>
                    <span>渠道名称：{{record.isvName}}</span><br>
                    <span>渠道号：{{record.isvNo}}</span>
                  </template>
                  <div class="my-tooltip-title-box"> {{record.isvName}}</div>
                </a-tooltip>
                <a-tooltip v-if="record.infoType == 'AGENT'" class="my-tooltip" overlayClassName="tooltip-box-name">
                  <template #title>
                    <span>服务商名称：{{record.infoName}}</span><br>
                    <span>服务商号：{{record.infoId}}</span>
                  </template>
                  <div class="my-tooltip-title-box"> {{record.infoName}}</div>
                </a-tooltip>
                <a-tooltip v-if="record.infoType == 'MCH'" class="my-tooltip" overlayClassName="tooltip-box-name">
                  <template #title>
                    <span>商户名称：{{record.infoName}}</span><br>
                    <span>商户号：{{record.infoId}}</span>
                  </template>
                  <div class="my-tooltip-title-box"> {{record.infoName}}</div>
                </a-tooltip>
              </template>
              <template #mchMax="{  record }">
                <a-input-number :disabled="props.infoId != record.infoId" class="con-flex-div"  addon-after="%" :min="0" :max="100" :precision="2" v-model:value="record.self.ZFB.feeRate"  placeholder="请输入付款率"/>
              </template>
              <template #self="{  record }">
                <a-input-number :disabled="props.infoId != record.infoId" class="con-flex-div" addon-after="%" :min="0" :max="100" :precision="2" v-model:value="record.self.BANK.feeRate"  placeholder="请输入付款率"/>
              </template>
              <template #subAgentDef="{  record }">
                <a-input-number   class="con-flex-div" addon-after="%" :min="0" :max="100" :precision="2" v-model:value="record.self.WX.feeRate"  placeholder="请输入付款率"/>
              </template>

              <template #operation="{  record }" >
                <a-button type="primary" v-if="props.infoId == record.infoId" :loading="vdata.confirmLoading" @click="saveRateFunc(record)">
                  <check-outlined />
                  保存
                </a-button>
              </template>
            </a-table>
          </div>
        </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>
  </div>
</template>

<script lang="ts" setup>
import {
  API_URL_MCH_QR_CODE_LIST,
  req,
  $qrcShellViewByQrc,
  API_URL_PAY_AQF_LIST,
  $getRateConfigTateInfoDetail,
  $savetRateConfigResetV2
} from '@/api/manage'
import {reactive, ref, defineExpose, nextTick, getCurrentInstance, defineProps, onMounted} from 'vue'
import {message} from "ant-design-vue";

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

// 定义父组件的传值
const props : any = defineProps({
  selectIfCode: { type: String ,default: '' }, // 默认选中的支付接口
  infoId: { type: String, default: '' }, // 当前配置的所属infoId
  infoType: { type: String, default: '' }, // 当前配置的所属infoId
  configMode: { type: String, default: '' },   // 模式
  isvNo: { type: String, default: '' },   // 模式
  selectDetail:{},//内容数据
})
// 定义向父组件 通讯 func
const emit = defineEmits(['selectFinishFunc'])

const tableColumns = ref([
   {key:'isvName', title: '名称', dataIndex: 'isvName',align: 'center',slots: { customRender: 'isvName' }  },
  { key: 'infoType', title: '类型',dataIndex: 'infoType',align: 'center' ,slots: { customRender: 'infoType' }  },
  // { key: 'isvNo', title: '渠道号',dataIndex: 'isvNo',align: 'center' ,slots: { customRender: 'isvNo' }  },
  { key: 'mchMax', title: '支付宝费率', dataIndex: 'mchMax',align: 'center' ,slots: { customRender: 'mchMax' }  },
  { key: 'self', title: '银行卡费率', dataIndex: 'self',align: 'center' ,slots: { customRender: 'self' }  },
  { key: 'operation', title: '操作', dataIndex: 'operation',align: 'center' ,slots: { customRender: 'operation' }  },
  // { key: 'subAgentDef', title: '微信费率', dataIndex: 'subAgentDef',align: 'center' ,slots: { customRender: 'subAgentDef' }  },
])

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

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

function getReqTableDataFunc(){
  $getRateConfigTateInfoDetail(props.isvNo, props.selectIfCode,props.infoId,props.infoType).then((res) => {
    vdata.receiveList = [];
   res.forEach(item=>{
         if(isObject(item.self)){
           item.self = {
             "BANK": {
               "wayCode": "BANK",
               "state": 1,
               "feeType": "SINGLE",
               "applymentSupport": 1,
               "feeRate": 0
             },
             "ZFB": {
               "wayCode": "ZFB",
               "state": 1,
               "feeType": "SINGLE",
               "applymentSupport": 1,
               "feeRate":0
             },
             "WX": {
               "wayCode": "WX",
               "state": 1,
               "feeType": "SINGLE",
               "applymentSupport": 1,
               "feeRate": 0
             }
           }
         }else{
           item.self.BANK.feeRate = item.self.BANK.feeRate*100
           item.self.ZFB.feeRate = item.self.ZFB.feeRate*100
           item.self.WX.feeRate = item.self.WX.feeRate*100
         }
        return item;
    })
    vdata.receiveList = res
    console.log(res,'vdatareceiveList')

  })
}
function isObject(obj) {
  return Object.keys(obj).length === 0;
}


// 表格搜索
function searchFunc () {
  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(){



}

function saveRateFunc(record){
   vdata.confirmLoading  = true
  record.self.BANK.feeRate = record.self.BANK.feeRate/100
  record.self.WX.feeRate = record.self.WX.feeRate/100
  record.self.ZFB.feeRate = record.self.ZFB.feeRate/100

  $savetRateConfigResetV2(record).then((res) => {
    message.success('保存成功')
    vdata.confirmLoading  = false
    getReqTableDataFunc()
  }).catch ((error) =>{
    vdata.confirmLoading  = false
    console.log(error)
  } )
}

// 显示
function  show () {
  vdata.selectRecordIdList = [] // 清空已选择的数据
  vdata.receiveList = [];
  vdata.visible = true
}
onMounted(() => {
  vdata.selectRecordIdList = [] // 清空已选择的数据
  vdata.receiveList = [];
  vdata.visible = true
  getReqTableDataFunc()
})
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;
  }
}
.ant-input-number-out-of-range input{
  color: #000 !important;
}
.con-flex-div{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}
.my-tooltip-title-box{
  max-width: 100%
}
</style>
