<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchConditionNum="6" :searchFunc="searchFunc" :resetFunc="onReset">
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker ref="dateRangePicker" v-model:value="vdata.searchData.queryDateRange" customDateRangeType="dateTime" />
        </a-form-item>
        <JeepaySearchInfoInput v-model:value="vdata.searchData.mchNo" placeholder="用户号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />
        <jeepay-text-up v-model:value="vdata.searchData.isvNo" placeholder="渠道商号" />
        <jeepay-text-up v-model:value="vdata.searchData.agentNo" placeholder="服务商号" />
        <jeepay-text-up v-model:value="vdata.searchData.id" placeholder="结算ID" />
        <jeepay-text-up v-model:value="vdata.searchData.payOrderId" placeholder="支付订单号" />
        <jeepay-text-up v-model:value="vdata.searchData.channelOrderNo" placeholder="渠道订单号" />
        <jeepay-text-up v-model:value="vdata.searchData.subMchId" placeholder="渠道商户号" />
        <JeepaySelect ref="stateRef" placeholder="结算状态">
          <a-select v-model:value="vdata.searchData.state" @change="stateRef.textupHandle()">
            <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-option value="5">结算待重试</a-select-option>
          </a-select>
        </JeepaySelect>
      </JeepaySearchForm>
     
      <!-- 列表渲染 -->
      <JeepayTable
        ref="recordTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="id"
      >
        <template #topBtnSlot>
          <a-popover placement="bottom">
            <template #content>
              <span>根据查询条件筛选结算订单，执行结算</span>
            </template>
            <a-button v-if="$access('ENT_DEVICE_QRC_ADD')" type="primary" @click="settBatchFunc"> 批量结算</a-button>
          </a-popover>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
            <a v-if="$access('ENT_ZFT_SETT_RECORD_VIEW')" @click="detailFunc(record.id)"><b>{{ record.id }}</b></a>
          </template>
         
          <template v-if="column.dataIndex === 'payOrderId'">
            <p><span style="color:#729ED5;border-radius: 1px;padding: 3px 7px;height: auto;width: auto;">支付</span>{{ record.payOrderId }}</p>
            <p><span style="color:#56cf56;border-radius: 1px;padding: 3px 7px;height: auto;width: auto;">渠道</span>{{ record.channelOrderNo }}</p>
          </template>
          
          <template v-if="column.dataIndex === 'settTime'">
            <span>{{ record.settTime ? record.settTime : '-' }}</span>
          </template>

          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state == 1" status="warning" text="待结算" />
            <a-badge v-if="record.state == 2" status="processing" text="结算中" /> 
            <a-badge v-if="record.state == 3" status="success" text="结算成功" /> 
            <a-badge v-if="record.state == 4" status="error" text="结算失败" /> 
            <a-badge v-if="record.state == 5" status="error" text="结算待重试" /> 
          </template>

          <template v-if="column.key === 'payOrderAmount'">￥{{ record.payOrderAmount ? (record.payOrderAmount/100).toFixed(2) : 0 }}</template>
        </template>
      </JeepayTable>

      <!-- 区间划拨弹窗 -->
      <a-modal v-model:visible="vdata.batchSettVisible" title="批量结算">
        <template #footer>
          <a-button key="back" @click="() => vdata.batchSettVisible = false">取消</a-button>
          <a-button key="submit" type="primary" :disabled="!vdata.batchSettTips" @click="settBatchOkFunc">确认结算</a-button>
        </template>
      
        <a-row>
          <a-col :span="24">{{ vdata.batchSettTips }}</a-col>
        </a-row>
      </a-modal>
    </a-card>
    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" />
  </page-header-wrapper>
</template>

<script setup lang="ts">
import { req, API_URL_ZFT_SETT_RECORD, $zftBattchSett } from '@/api/manage'
import {ref, reactive, getCurrentInstance} from 'vue'
import InfoDetail from './Detail.vue'

const { $access, $infoBox } = getCurrentInstance()!.appContext.config.globalProperties


const tableColumns = reactive([
  { key: 'id', title: '结算ID', dataIndex: 'id', fixed: 'left'},
  { key: 'payOrderId', title: '支付订单号', dataIndex: 'payOrderId'},
  { key: 'mchNo', title: '用户号', dataIndex: 'mchNo'},
  { key: 'agentNo', title: '服务商号', dataIndex: 'agentNo'},
  { key: 'isvNo', title: '服务商号', dataIndex: 'isvNo'},
  { key: 'payOrderAmount', title: '支付金额', dataIndex: 'payOrderAmount'},
  { key: 'subMchId', title: '渠道商户号', dataIndex: 'subMchId'},
  { key: 'state', title: '结算状态', dataIndex: 'state'},
  { dataIndex: 'settTime', title: '结算时间'},
  { dataIndex: 'createdAt', title: '创建时间'},
])

const recordTable = ref()
const stateRef = ref()
const infoDetail = ref()
const dateRangePicker = ref()

const vdata:any = reactive({
  btnLoading: false,
  searchData: {queryDateRange: 'today'},

  batchSettVisible: false, // 批量结算弹窗
  batchSettTips: '', // 批量结算提示
})

// 请求table接口数据
function reqTableDataFunc (params) {
  return req.list(API_URL_ZFT_SETT_RECORD, params)
}
function searchFunc() { // 点击【查询】按钮点击事件
  recordTable.value.refTable(true)
}

function detailFunc (recordId: any) { // 详情
  infoDetail.value.show(recordId)
}

function settBatchFunc () { // 批量结算弹窗
  req.list(API_URL_ZFT_SETT_RECORD, Object.assign({ pageSize: -1, isBatchSett: 1 }, vdata.searchData)).then((res) => {
    if (res.total <= 0) {
      $infoBox.message.error('当前筛选条件未查询到结算订单')
      return
    }

    vdata.batchSettVisible = true
    vdata.batchSettTips = '按当前筛选条件总共查询到【' + res.total + '】条结算订单'
  })
}

function settBatchOkFunc() { // 执行批量结算
  $zftBattchSett(Object.assign({ pageSize: -1, isBatchSett: 1 }, vdata.searchData)).then((res) => {
    $infoBox.message.success('批量结算已发起，请稍后查看最新结算状态')
    vdata.batchSettVisible = false
  })
}

function onReset(){
  //重置搜索内容
  dateRangePicker.value.returnSelectModel()
  vdata.searchData = { queryDateRange: '' }
}
</script>

