<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchConditionNum="3" :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <jeepay-text-up v-model:value="vdata.searchData.name" :placeholder="'交易路由策略名称'" />
        <jeepay-text-up v-model:value="vdata.searchData.appId" placeholder="应用名称/应用ID" />
        <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.ruleStrategy" placeholder="策略规则">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="TRADE_NUM">收款笔数</a-select-option>
            <a-select-option value="TRADE_AMOUNT">累计收款金额</a-select-option>
            <a-select-option value="TRADE_TIME">收款时间段</a-select-option>
            <a-select-option value="TRADE_AMOUNT_INTERVAL">交易金额区间</a-select-option>
<!--            <a-select-option value="4">交易类型</a-select-option>-->
          </a-select>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.sortStrategy" placeholder="交易顺序策略">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="ORDER">商户排列顺序</a-select-option>
            <a-select-option value="RANDOM">随机排序</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
          ref="infoTable"
          :initData="true"
          :reqTableDataFunc="reqTableDataFunc"
          :tableColumns="tableColumns"
          :searchData="vdata.searchData"
          rowKey="receiverGroupId"
          @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <div>
            <a-button v-if="$access('ENT_MCH_ROUTE_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新增交易路由策略</a-button>
          </div>
        </template>
        <template #bodyCell="{column,record}">

          <template v-if="column.key == 'name'">
            {{record.name}}
<!--            <QrcodeOutlined style="font-size: 16px" @click="showQrImgFunc(record.routeId)" />-->
          </template>
          <template v-if="column.key == 'ruleStrategy'">

            <a-tag v-if="record.ruleStrategy == 'TRADE_NUM'" color="orange">按收款笔数</a-tag>
            <a-tag v-if="record.ruleStrategy == 'TRADE_AMOUNT'" color="green">按累计收款金额</a-tag>
            <a-tag v-if="record.ruleStrategy == 'TRADE_TIME'" color="processing">按收款时间</a-tag>
            <a-tag v-if="record.ruleStrategy == 'TRADE_AMOUNT_INTERVAL'" color="warning">按交易金额区间</a-tag>

          </template>
          <template v-if="column.key == 'sortStrategy'">
            <a-tag
                :key="record.sortStrategy"
                :color="record.sortStrategy === 'ORDER' ?'orange':record.sortStrategy === 'RANDOM'?'blue':''"
            >
              {{ record.sortStrategy === 'ORDER'?'商户排列顺序':record.sortStrategy === 'RANDOM'?'随机排序':'未知' }}
            </a-tag>
          </template>
          <template v-if="column.key == 'receiver'">
            --
          </template>
          <template v-if="column.key == 'divider'">
            --
          </template>

          <template v-if="column.key === 'appName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>应用名称：{{record.appName}}</span><br>
                <span>应用ID：{{record.appid}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.appName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'state'">
            <JeepayTableColState :state="record.state"  :showSwitchType="true"  :onChange="(state) => { return updateState(record.routeId, state)}" />
          </template>
          <template v-if="column.key == 'op'">
            <!-- 操作列插槽 -->
<!--            <a-button v-if="$access('ENT_MCH_ROUTE_CONFIG')" type="link" style="padding-left: 10px;padding-right: 10px;" @click="groupAddFunc(record)">路由配置</a-button>-->
            <a-button v-if="$access('ENT_MCH_ROUTE_EDIT')" type="link" style="padding-left: 10px;padding-right: 10px;" @click="editFunc(record)">修改</a-button>
            <a-button v-if="$access('ENT_MCH_ROUTE_DEL')" type="link" style="color: red" @click="delFunc(record.routeId)">删除</a-button>
          </template>
        </template>
      </JeepayTable>
    </a-card>

    <!-- 新增 / 修改 页面组件  -->
    <InfoAddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc" />
    <ReceiverGroupAdd ref="ledgerGroupAdd" :callbackFunc="searchFunc" />
  </page-header-wrapper>
  <a-modal
      v-model:visible="vdata.visibleAdd"
      :footer="null"
      @cancel="handleCancel"
      style="top: 35% !important;"
      wrap-class-name="full-modal"
      width="330px"
      :maskClosable="false"
  >

    <div class="modal-body">
      <!-- 扫条码与刷脸 -->

      <div >
        <img
            v-if="vdata.qrCodeUrl"
            :src="vdata.qrCodeUrl"
            alt=""
            style="width: 200px; height: 200px"
        >
        <div class="zfb-wx" style="margin: 10px 0">
          <img src="/src/assets/svg/alipay.svg" alt="">
          <img
              src="/src/assets/svg/wechatpay.svg"
              alt=""
              style="margin: 0 5px"
          >
          <span style="color: grey">支持支付宝与微信支付</span>
        </div>
      </div>

      <!-- 提示文字 来自函数-->
      <p style="font-size: 20px; font-weight: 500; color: grey">
        请扫描二维码付款
      </p>
      <a-button
          type="primary"
          class="cancel"
          size="large"
          block
          @click="vdata.visibleAdd = false"
      >
        取消
      </a-button>
    </div>

  </a-modal>
</template>
<script setup lang="ts">
import {
  $getMchRouteQrcode,
  $qrcShellViewByQrc,
  API_URL_DIVISION_RECEIVER_GROUP,
  API_URL_DIVISION_TEMPLATE_DEL,
  API_URL_DIVISION_TEMPLATE_EDIT,
  API_URL_DIVISION_TEMPLATE_LIST,
  API_URL_ENT_MCH_ROUTE_DEL,
  API_URL_ENT_MCH_ROUTE_EDIT,
  API_URL_ENT_MCH_ROUTE_LIST, API_URL_ENT_MCH_ROUTE_SAVE,
  API_URL_MCH_QR_CODE_LIST,
  req,
  reqLoad
} from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import ReceiverGroupAdd from "./GroupAdd.vue";
import { reactive, ref,getCurrentInstance } from 'vue'
import {message} from "ant-design-vue";
const { $access,$infoBox,$viewerApi } = getCurrentInstance()!.appContext.config.globalProperties

const tableColumns = reactive([
  { key: 'name', dataIndex: 'name', title: '交易路由策略名称' },
  { key: 'ruleStrategy', dataIndex: 'ruleStrategy', title: '策略规则' },
  { key: 'appName', dataIndex: 'appName', title: '应用名称' },
  { key: 'sortStrategy', dataIndex: 'sortStrategy', title: '交易顺序策略' },
  { key: 'state', title: '是否启用', },
  { key: 'createdAt', dataIndex: 'createdAt', title: '创建时间' },
  { key: 'op', title: '操作', width: '200px', fixed: 'right', align: 'center' }
])


const infoAddOrEdit  =ref()
const ledgerGroupAdd =ref()
const infoTable = ref()
const vdata = reactive ({
  visibleAdd:false,
  qrCodeUrl:"" as any,
  tableColumns: tableColumns,
  searchData: {} as any,
  btnLoading: false
})


// 请求table接口数据
function  reqTableDataFunc(params){
  return req.list(API_URL_ENT_MCH_ROUTE_LIST, params)
}

function  searchFunc () { // 点击【查询】按钮点击事件
  vdata.btnLoading = true // 打开查询按钮上的loading
  infoTable.value.refTable(true)
}

function  addFunc() { // 业务通用【新增】 函数
  infoAddOrEdit.value.show()
}

function  editFunc(record) { // 业务通用【修改】 函数
  infoAddOrEdit.value.show(record)
}

function handleCancel(e) {
  vdata.visibleAdd = false;
}
function  delFunc (recordId) { // 业务通用【删除】 函数

  $infoBox.confirmDanger('确认删除？', '', () => {
    // 需要【按钮】loading 请返回 promise对象， 不需要请直接返回null
    return req.delById(API_URL_ENT_MCH_ROUTE_DEL, recordId).then(res => {
      $infoBox. message.success('删除成功！')
      infoTable.value.refTable(false)
    })
  },() => {
  })
}
function groupAddFunc(record) { // 业务通用【新增】 函数
  ledgerGroupAdd.value.show(record)
}
function  updateState (recordId, state) { // 【更新状态】

  const title = state === 1 ? '确认[启用]？' : '确认[停用]？'
  return new Promise<void>((resolve, reject) => {
    $infoBox.confirmDanger(title, '', () => {
          return reqLoad.updateById(API_URL_ENT_MCH_ROUTE_SAVE, recordId, { state: state }).then(res => {
            searchFunc()
            resolve()
          }).catch(err => reject(err))
        },
        () => {
          reject(new Error())
        })
  })
}

function showQrImgFunc(recordId){
  $getMchRouteQrcode(recordId).then((res) => {
    // $viewerApi({images: [res]})
    vdata.qrCodeUrl = res
    vdata.visibleAdd = true
  })
}
</script>
