<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.ifCode" :placeholder="'支付通道'" />
      </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_DIVISION_TEMPLATE_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新增分账模版</a-button>
          </div>
        </template>
        <template #bodyCell="{column,record}">
          <template v-if="column.key == 'ifCode'">
            --
          </template>
          <template v-if="column.key == 'divisionMode'">
            <a-tag
                :key="record.divisionMode"
                :color="record.divisionMode === 0 ?'orange':record.divisionMode === 1?'blue':''"
            >
              {{ record.divisionMode === 0?'按比例分账':record.divisionMode === 1?'按金额分账':'未知' }}
            </a-tag>
          </template>
          <template v-if="column.key == 'divisionType'">


            <a-tag
                :key="record.divisionType"
                :color="record.divisionType === 0 ?'orange':record.divisionType === 1?'orange':record.divisionType === 2?'blue':''"
            >
              {{ record.divisionType === 0?'实时分账':record.divisionType === 1?'延时分账':record.divisionType === 2?'延时分账':'未知' }}
            </a-tag>
          </template>
          <template v-if="column.key == 'receiver'">
            --
          </template>
          <template v-if="column.key == 'divider'">
            --
          </template>

          <template v-if="column.key === 'state'">
            <JeepayTableColState :state="record.state"  :showSwitchType="true"  :onChange="(state) => { return updateState(record.id, state)}" />
          </template>
          <template v-if="column.key == 'op'">
            <!-- 操作列插槽 -->
            <a-button v-if="$access('ENT_DIVISION_TEMPLATE_EDIT')" type="link" style="padding-left: 10px;padding-right: 10px;" @click="groupAddFunc(record)">分账设置</a-button>
            <a-button v-if="$access('ENT_DIVISION_TEMPLATE_EDIT')" type="link" style="padding-left: 10px;padding-right: 10px;" @click="editFunc(record)">修改</a-button>
            <a-button v-if="$access('ENT_DIVISION_TEMPLATE_DELETE')" type="link" style="color: red" @click="delFunc(record.id)">删除</a-button>
          </template>
        </template>
      </JeepayTable>
    </a-card>

    <!-- 新增 / 修改 页面组件  -->
    <InfoAddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc" />
    <ReceiverGroupAdd ref="ledgerGroupAdd" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import {
  API_URL_DIVISION_RECEIVER_GROUP,
  API_URL_DIVISION_TEMPLATE_DEL, API_URL_DIVISION_TEMPLATE_EDIT,
  API_URL_DIVISION_TEMPLATE_LIST, API_URL_MCH_QR_CODE_LIST,
  req, reqLoad
} from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import ReceiverGroupAdd from "./ReceiverGroupAdd.vue";
import { reactive, ref,getCurrentInstance } from 'vue'
import {message} from "ant-design-vue";
const { $access,$infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const tableColumns = reactive([
  { key: 'name', dataIndex: 'name', title: '分账模版名称' },
  { key: 'ifName', dataIndex: 'ifName', title: '支付通道' },
  { key: 'divisionMode', dataIndex: 'divisionMode', title: '分账模式' },
  { key: 'divisionType', dataIndex: 'divisionType', title: '分账类型' },
  // { key: 'receiver', dataIndex: 'receiver', title: '分账接收方' },
  // { key: 'divider', dataIndex: 'divider', 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 ({
  tableColumns: tableColumns,
  searchData: {} as any,
  btnLoading: false
})


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

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

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

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

function  delFunc (recordId) { // 业务通用【删除】 函数

   $infoBox.confirmDanger('确认删除？', '', () => {
      // 需要【按钮】loading 请返回 promise对象， 不需要请直接返回null
      return req.delById(API_URL_DIVISION_TEMPLATE_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_DIVISION_TEMPLATE_EDIT, recordId, { state: state }).then(res => {
            searchFunc()
            resolve()
          }).catch(err => reject(err))
        },
        () => {
          reject(new Error())
        })
  })
}
</script>
