<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm v-if="$access('ENT_UR_ROLE_SEARCH')" :searchConditionNum="6" :searchFunc="searchFunc" :resetFunc="() => { data.searchData= {} }">
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker ref="dateRangePicker" v-model:value="data.searchData['queryDateRange']" customDateRangeType="dateTime" />
        </a-form-item>
        <jeepay-text-up v-model:value="data.searchData['mchNo']" v-if="props.configMode != 'mch'" :placeholder="'用户号/名称/手机号'" />

        <jeepay-text-up  v-model:value="data.searchData['applyId']"  :placeholder="'商户号/商户名称'"  />
        <jeepay-text-up   v-model:value="data.searchData['storeId']"  :placeholder="'门店名称/门店编号'"  />
        <jeepay-text-up   v-model:value="data.searchData['routeId']"  :placeholder="'策略/策略ID'"  />

      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
          ref="infoTable"
          :init-data="true"
          :req-table-data-func="reqTableDataFunc"
          :statisticsIsShow="false"
          :tableExportFunc="tableExportFunc"
          :table-columns="tableColumns"
          :search-data="data.searchData"
          row-key="sysUserId"
          @btnLoadClose="data.btnLoading=false"
      >
        <template #statistics>
          <div class="statistics-list">
            <div v-for="(item, index) in count" :key="index" class="item">
              <div v-if="item.type == 'line'" class="line" />
              <div class="title">{{ item.title }}</div>
              <div v-if="item.title" class="amount" :style="{color: item.textColor}">
                <span class="amount-num">{{ item.content }}</span>
              </div>
            </div>
          </div>
        </template>
        <template #bodyCell="{column,record}">


          <template v-if="column.key === 'orderId'">
              <b @click="getOrderId(record)"><a>{{record.orderId}}</a></b>
          </template>
          <template v-if="column.key === 'applyId'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>商户名称：{{record.mchShortName}}</span><br>
                <span>商户号：{{record.applyId}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.mchShortName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'storeId'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>门店名称：{{record.storeName}}</span><br>
                <span>门店编号：{{record.storeId}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.storeName}}</div>
            </a-tooltip>
          </template>


          <template v-if="column.key === 'result'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                {{record.result}}
              </template>
              <div class="my-tooltip-title-box">{{record.result}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'remark'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                {{record.remark}}
              </template>
              <div class="my-tooltip-title-box" ><a >{{record.remark}}</a></div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'routeName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>策略名称：{{record.routeName}}</span><br>
                <span>策略ID：{{record.routeId}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.routeName}}</div>
            </a-tooltip>
          </template>

          <template v-if="column.key === 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
                  <a-button  type="link" @click="storeFunc(record)">删除</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>


  </page-header-wrapper>
</template>
<script setup lang="ts">
import {
  req,
  reqLoad,
  $exportExcel,
  exportExcelUrl,
  API_URL_ROUTE_RECORD
} from '@/api/manage'
import {reactive, ref, getCurrentInstance, onMounted} from 'vue'
import fileDownload from "js-file-download";
import {message} from "ant-design-vue";
import { useRouter, useRoute } from 'vue-router'
const router = useRouter() //这是全部路由

const props = defineProps({
  configMode: { type: String, default: '' },   // 模式
})

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


const tableColumns = reactive([
  {key:'orderId', title: '订单号',   dataIndex: 'orderId' },
  {key:'applyId', title: '商户信息',   dataIndex: 'applyId' },
  {key:'storeId', title: '门店信息', dataIndex: 'storeId' },
  {key:'routeName', title: '策略名称', dataIndex: 'routeName', },
  {key:'condition', title: '满足条件', dataIndex: 'condition', },
  {key:'result', title: '运行结果', dataIndex: 'result', },
  {key:'remark', title: '备注', dataIndex: 'remark', },
  {key:'updatedAt', title: '运行时间', dataIndex: 'updatedAt', },
  // {key:'target', title: '运行对象', dataIndex: 'target', },
  // {key: 'op',title: '操作',   fixed: 'right',align: 'center' }
])

const infoTable = ref()

let data : any = reactive ({
  tableColumns: tableColumns,
  searchData: { 'queryDateRange': 'today' } as any,
  btnLoading: false
})

let count:any = ref([]) // 数据统计数组
let vdata : any = reactive({
  storeList:[] as any,
  mchApplyList:[] as any,
  filteredMchApplyList:[] as any,
  filteredStoreInfoList:[] as any,
  saveObject:{queryDateRange: "today" } as any,
  userAddTitle:"",
  visible:false,
  showRechargeModal:false,
  rechargeModalLoading: false,  // loading
  rechargeObject: {}, // 预审核结果

  showPreRouteModal: false,  // 是否显示预审核弹层
  preRouteModalLoading: false,  // loading
  preRouteResult: {}, // 预审核结果
})
onMounted(() => {

  console.log(useRoute().query,'useRoute().query')
  if(useRoute().query.routeId !== undefined){
    data.searchData['routeId'] = useRoute().query.routeId
    setTimeout(()=>{
      searchFunc()
    },500)
  }

})
// 请求table接口数据
function reqTableDataFunc(params){
  // reqTableCountFunc(params)
  return req.list(  API_URL_ROUTE_RECORD, params)
}
function storeFunc(record,type=0) { // 点击【查询】按钮点击事件
  router.push({
    path:'/tradeRouteList',
    query:{routeId:record.routeId}
  })

}
function reqTableCountFunc(params: any) {
  params.method = 'transaction' as any
  req.list(  API_URL_ROUTE_RECORD, + '/total',).then(res => {
    count.value = [
      {title: '总成交金额', symbol: 'add', textColor: '#1A66FF', content: ((res.totalSuccAmt) / 100).toFixed(2)},
      {type: 'line'},
      {title: '总成交笔数', content: (res.totalSuccNum)},
      {type: 'line'},
      {title: '总退款金额', symbol: 'sub', content: ((res.totalRefundAmt) / 100).toFixed(2)},
      {type: 'line'},
      {title: '总退款笔数', content: (res.totalRefundNum)},
    ]
  })
}
function searchFunc() { // 点击【查询】按钮点击事件
  data.btnLoading = true // 打开查询按钮的loading
  infoTable.value.refTable(true)
}

function tableExportFunc() {
  return $exportExcel(exportExcelUrl.statistic, Object.assign({}, vdata.searchData, {})).then(res => {
    fileDownload(res.data, '商户统计.xlsx')
  }).catch((error) => { console.log(error) })
}

function getOrderId(record){
  router.push({
    path:'/pay',
    query:{unionOrderId:record.orderId}
  })
}

</script>
