<template>
  <div>
    <a-modal v-model:visible="vdata.visible" width="80%" :class="vdata.storeType!=0?'storeType1':'storeType0'" title="选择门店" @ok="okFunc">
      <div class="modal-div">
        <!-- 门店列表 -->
        <div class="modal-div1">
          <div class="search">
            <a-input v-model:value="vdata.searchData.mchApplyName" class="rate-input" placeholder="商户名称/商户号" />
            <a-input v-model:value="vdata.searchData.storeId" class="rate-input" placeholder="门店名称/门店编号" />
            <a-input v-model:value="vdata.searchData.ifName" class="rate-input" placeholder="支付通道" />
            <a-input v-model:value="vdata.searchData.isvNo" class="rate-input" placeholder="渠道名称/渠道号" />
            <a-input v-model:value="vdata.searchData.bindAppIdName"  class="rate-input" placeholder="应用名称/应用ID" />
            <a-select  class="rate-input" v-model:value="vdata.searchData.settlementType" placeholder="结算类型"  >
              <a-select-option value="T1">T1</a-select-option>
              <a-select-option value="D1">D1</a-select-option>
              <a-select-option value="D0">D0</a-select-option>
              <a-select-option value="定时结算">定时结算</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" v-if="vdata.storeType == 0">
            <JeepayTable
              ref="infoTable"
              :initData="false"
              :reqTableDataFunc="reqTableDataFunc"
              :tableColumns="tableColumns"
              :searchData="vdata.searchData"
              rowKey="storeId"
              scrollX="100%"
            >
              <template #bodyCell="{ column, record,index }">
                <template v-if="column.key === 'storeId'">
                  {{ record.storeId }}
                </template>


                <template v-if="column.key === 'bindAppIdName'">
                  <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
                    <template #title>
                      <span>应用名称：{{record.bindAppIdName}}</span><br>
                      <span>应用ID：{{record.bindAppId}}</span>
                    </template>
                    <div class="my-tooltip-title-box"> {{record.bindAppIdName}}</div>
                  </a-tooltip>
                </template>


                <template v-if="column.key === 'isvNo'">
                  <a-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>
                </template>
                <template v-if="column.key === 'mchShortName'">
                  <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
                    <template #title>
                      <span>商户名称：{{record.mchApplyName}}</span><br>
                      <span>商户号：{{record.mchApplyId}}</span>
                    </template>
                    <div class="my-tooltip-title-box">
                      {{record.mchApplyName}}
                    </div>
                  </a-tooltip>
                </template>

                <template v-if="column.key === 'storeName'">
                  <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
                    <template #title>
                      <span>门店名称：{{record.storeName}}</span><br>
                    </template>
                    <div class="my-tooltip-title-box">
                      <a  ><b>{{ record.storeName }}</b></a ></div>
                  </a-tooltip>
                </template>
                <template v-if="column.key == 'isBind'">
                  <a-badge v-if="record.isBind == 0"  status="warning"  text="未绑定"></a-badge>
                  <a-badge v-if="record.isBind == 1" status="success"  text="已绑定"></a-badge>
                </template>
                <template v-if="column.key === 'bindState'">
                  <JeepayTableColState :state="vdata.selectRecordIdList.includes(record.storeId) ? 1 : 0" :showSwitchType="true" :onChange="(state) => { return updateBindState(record, state,index)}" />
                </template>
              </template>
            </JeepayTable>
          </div>
          <div class="list-table" v-if="vdata.storeType == 1">
            <JeepayTable
                ref="infoTable"
                :initData="false"
                :reqTableDataFunc="reqTableDataFunc"
                :tableColumns="tableColumns2"
                :searchData="vdata.searchData"
                rowKey="storeId"
                scrollX="100%"
            >
              <template #bodyCell="{ column, record,index }">
                <template v-if="column.key === 'storeId'">
                  {{ record.storeId }}
                </template>


                <template v-if="column.key === 'bindAppIdName'">
                  <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
                    <template #title>
                      <span>应用名称：{{record.bindAppIdName}}</span><br>
                      <span>应用ID：{{record.bindAppId}}</span>
                    </template>
                    <div class="my-tooltip-title-box"> {{record.bindAppIdName}}</div>
                  </a-tooltip>
                </template>


                <template v-if="column.key === 'isvNo'">
                  <a-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>
                </template>
                <template v-if="column.key === 'mchShortName'">
                  <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
                    <template #title>
                      <span>商户名称：{{record.mchApplyName}}</span><br>
                      <span>商户号：{{record.mchApplyId}}</span>
                    </template>
                    <div class="my-tooltip-title-box">
                      {{record.mchApplyName}}
                    </div>
                  </a-tooltip>
                </template>

                <template v-if="column.key === 'storeName'">
                  <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
                    <template #title>
                      <span>门店名称：{{record.storeName}}</span><br>
                    </template>
                    <div class="my-tooltip-title-box">
                      <a  ><b>{{ record.storeName }}</b></a ></div>
                  </a-tooltip>
                </template>
                <template v-if="column.key == 'isBind'">
                  <a-badge v-if="record.isBind == 0"  status="warning"  text="未绑定"></a-badge>
                  <a-badge v-if="record.isBind == 1" status="success"  text="已绑定"></a-badge>
                </template>
                <template v-if="column.key === 'bindState'">
                  <JeepayTableColState :state="vdata.selectRecordIdList.includes(record.storeId) ? 1 : 0" :showSwitchType="true" :onChange="(state) => { return updateBindState(record, state,index)}" />
                </template>
              </template>
            </JeepayTable>
          </div>


          <div class="list-table" v-if="vdata.storeType == 2">
            <JeepayTable
                ref="infoTable"
                :initData="false"
                :reqTableDataFunc="reqTableDataFunc"
                :tableColumns="tableColumns3"
                :searchData="vdata.searchData"
                :rowSelection="{ type: 'radio',selectedRowKeys: vdata.selectedRowKeys, onChange: mchAppTableSelectChangeFunc }"
                rowKey="storeId"
                scrollX="100%"
            >
              <template #bodyCell="{ column, record,index }">
                <template v-if="column.key === 'storeId'">
                  {{ record.storeId }}
                </template>


                <template v-if="column.key === 'bindAppIdName'">
                  <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
                    <template #title>
                      <span>应用名称：{{record.bindAppIdName}}</span><br>
                      <span>应用ID：{{record.bindAppId}}</span>
                    </template>
                    <div class="my-tooltip-title-box"> {{record.bindAppIdName}}</div>
                  </a-tooltip>
                </template>


                <template v-if="column.key === 'isvNo'">
                  <a-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>
                </template>
                <template v-if="column.key === 'mchShortName'">
                  <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
                    <template #title>
                      <span>商户名称：{{record.mchApplyName}}</span><br>
                      <span>商户号：{{record.mchApplyId}}</span>
                    </template>
                    <div class="my-tooltip-title-box">
                      {{record.mchApplyName}}
                    </div>
                  </a-tooltip>
                </template>

                <template v-if="column.key === 'storeName'">
                  <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
                    <template #title>
                      <span>门店名称：{{record.storeName}}</span><br>
                    </template>
                    <div class="my-tooltip-title-box">
                      <a  ><b>{{ record.storeName }}</b></a ></div>
                  </a-tooltip>
                </template>
                <template v-if="column.key == 'isBind'">
                  <a-badge v-if="record.isBind == 0"  status="warning"  text="未绑定"></a-badge>
                  <a-badge v-if="record.isBind == 1" status="success"  text="已绑定"></a-badge>
                </template>
              </template>
            </JeepayTable>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { API_URL_MCH_STORE_LIST, req } from '@/api/manage'
import { reactive, ref, defineExpose, nextTick, getCurrentInstance } from 'vue'
import {message} from "ant-design-vue";

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

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

const tableColumns = ref([
  { title: "商户名称", key: "mchShortName", dataIndex: "mchShortName" },
  { title: "门店名称",fixed: "left",  key: "storeName", dataIndex: "storeName"},
  { title: "门店编号", dataIndex: "storeId"},
  { key: "ifName", title: "支付通道", dataIndex: "ifName" },
  { key: "isvNo", title: "所属渠道", dataIndex: "isvNo" },
  { key: "settleType", title: "结算方式", dataIndex: "settleType" },
  { key: "isBind", title: "绑定状态", dataIndex: "isBind" },
  // { title: "是否默认", key: "defaultFlag", align: "center" },
  { title: "所属应用",key: "bindAppIdName", dataIndex: "bindAppIdName" },
  { key: 'bindState', fixed:'right',title: '是否绑定'},
])
const tableColumns2 = ref([
  { title: "商户名称", key: "mchShortName", dataIndex: "mchShortName" },
  { title: "门店名称", fixed: "left", key: "storeName", dataIndex: "storeName"},
  { title: "门店编号", dataIndex: "storeId"},
  { key: "ifName", title: "支付通道", dataIndex: "ifName" },
  { key: "isvNo", title: "所属渠道", dataIndex: "isvNo" },
  { key: "settleType", title: "结算方式", dataIndex: "settleType" },
  { title: "所属应用",key: "bindAppIdName", dataIndex: "bindAppIdName" },
  { key: 'bindState', fixed:'right',title: '是否绑定'},
])
const tableColumns3 = ref([
  { title: "商户名称", key: "mchShortName", dataIndex: "mchShortName" },
  { title: "门店名称", fixed: "left", key: "storeName", dataIndex: "storeName"},
  { title: "门店编号", dataIndex: "storeId"},
  { key: "ifName", title: "支付通道", dataIndex: "ifName" },
  { key: "isvNo", title: "所属渠道", dataIndex: "isvNo" },
  { key: "settleType", title: "结算方式", dataIndex: "settleType" },
  { title: "所属应用",key: "bindAppIdName", dataIndex: "bindAppIdName" },
])

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

// 响应式数据 
const vdata :any = reactive ({
  visible: false,
  storeType:0,
  searchData: {},
  selectRecordIdList: [],
  selectedRowKeys:'',
  belongInfoId: '',
  storeList:[] as any
})

// 请求table接口数据
async function reqTableDataFunc (params){
  var res = await req.list(API_URL_MCH_STORE_LIST, Object.assign({ mchNo: vdata.belongInfoId }, params))
  vdata.storeList = []
  vdata.storeList = res.records
  return res
}

// 表格搜索
function searchFunc () {
  nextTick(() => {
    infoTable.value.refTable(true)
  })
}
// 商户表格的选择事件
function mchAppTableSelectChangeFunc(selectedRowKeys) {
  vdata.selectRecordIdList = [] as any
   vdata.storeList.forEach((item,index) => {
        if(item.storeId == selectedRowKeys){
           vdata.selectRecordIdList = [item]
        }
    })
  vdata.selectedRowKeys = selectedRowKeys
}

// 表格行开关开启、关闭
function updateBindState(record, bindState,index) {

  if(record.isBind == 1 && vdata.storeType == 0){
     message.warn('当前门店已绑定路由策略，请在支付理由管理内解绑后添加')
     return  false;
  }
  return new Promise<void>((resolve, reject) => {
     nextTick(() => {
      if (bindState) {
        vdata.selectRecordIdList.push(record)
      } else {
        vdata.selectRecordIdList.splice(vdata.selectRecordIdList.indexOf(record), 1)
      }
      resolve()
    })
  })
}

// 选择完毕
function okFunc(){

  emit('selectFinishFunc',  vdata.selectRecordIdList)
}

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

  vdata.storeType = type
  if (bindList) {
    vdata.selectRecordIdList = JSON.parse(JSON.stringify(bindList))
    if(vdata.storeType == 2){
      vdata.selectedRowKeys = vdata.selectRecordIdList[0]
      console.log(vdata.selectedRowKeys,'selectedRowKeysselectedRowKeys')
    }
  }

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

  vdata.visible = true
}

function close(){
  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>
<style>

.storeType1{
  margin-top: -70px !important;
}
</style>
