<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :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>
        <jeepay-text-up v-model:value="vdata.searchData.mbrId" :placeholder="'会员ID'" />
        <jeepay-text-up v-model:value="vdata.searchData.mbrTel" :placeholder="'会员手机号'" />
        <jeepay-text-up v-model:value="vdata.searchData.mbrName" :placeholder="'会员名称'" />
        <jeepay-text-up v-model:value="vdata.searchData.payOrderId" :placeholder="'关联订单号'" />
        <a-form-item v-if="$access('ENT_PAY_ORDER_SEARCH_PAY_WAY')" label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.wayCode" placeholder="支付方式">
            <a-select-option value="">全部</a-select-option>
            <a-select-option v-for="item in vdata.payWayList" :key="item.wayCode" :value="item.wayCode">
              {{ item.wayName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.wayCodeType" placeholder="支付类型">
            <a-select-option value="">全部类型</a-select-option>
            <a-select-option value="ALIPAY">支付宝</a-select-option>
            <a-select-option value="YSFPAY">云闪付</a-select-option>
            <a-select-option value="WECHAT">微信</a-select-option>
            <a-select-option value="UNIONPAY">银联</a-select-option>
            <a-select-option value="DCEPPAY">数字人民币</a-select-option>
            <a-select-option value="OTHER">其他</a-select-option>
          </a-select>
        </a-form-item>
        <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-option value="2">充值成功</a-select-option>
            <a-select-option value="3">充值失败</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="rechargeRecordId"
        :statisticsIsShow="$access('ENT_MEMBER_RECHARGE_RECORD_LIST')"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #statistics>
          <div class="statistics-list">
            <div v-for="(item, index) in countList" :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 #topBtnSlot />
        <template #bodyCell="{column,record}">
          <template v-if="column.key == 'payAmount'">
            <b>￥{{ record.payAmount / 100 }}</b>
          </template>
          <template v-if="column.key == 'giveAmount'">
            <b>￥{{ record.giveAmount / 100 }}</b>
          </template>
          <template v-if="column.key == 'entryAmount'">
            <b>￥{{ record.entryAmount / 100 }}</b>
          </template>

          <template v-if="column.key == 'state'">
            <a-tag
              :key="record.state"
              :color="record.state === 0?'blue':record.state === 1?'orange':record.state === 2?'green':'volcano'"
            >
              {{ record.state === 0?'初始化':record.state === 1?'充值中':record.state === 2?'充值成功':'充值失败' }}
            </a-tag>
          </template>

          <template v-if="column.key == 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_MEMBER_RECHARGE_RECORD_VIEW')" type="link" @click="detailFunc(record.rechargeRecordId)">详情</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增  -->
    <Detail ref="detail" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>

<script lang="ts" setup>
import { API_URL_MEMBER_RECHARGE_RECORD_LIST, API_URL_PAYWAYS_LIST, $rechargeRecordCount, req } from '@/api/manage'
import Detail from './Detail.vue'
import {ref, onMounted, reactive, getCurrentInstance } from 'vue'

import { useRoute } from 'vue-router'

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

// eslint-disable-next-line no-unused-vars
const tableColumns = reactive([
  { key: 'rechargeRecordId', fixed: 'left', title: '充值记录ID', dataIndex: 'rechargeRecordId' },
  { key: 'payOrderId', title: '关联订单号', dataIndex: 'payOrderId' },
  // { key: 'mbrId', title: '会员ID', dataIndex: 'mbrId' },
  { key: 'mbrTel', title: '手机号', dataIndex: 'mbrTel' },
  { key: 'mbrName', title: '会员名称', dataIndex: 'mbrName' },
  { key: 'payAmount', title: '支付金额', dataIndex: 'payAmount' },
  { key: 'giveAmount', title: '赠送金额', dataIndex: 'giveAmount' },
  { key: 'entryAmount', title: '入账金额', dataIndex: 'entryAmount' },
  { key: 'wayName', title: '支付方式', dataIndex: 'wayName' },
  { key: 'state', title: '充值状态', dataIndex: 'state' },
  { key: 'successTime', title: '成功时间', dataIndex: 'successTime',},
  { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt',},
  { key: 'op', title: '操作', fixed: 'right', align: 'center' }
])

  const detail = ref()
  const infoTable = ref()
  const dateRangePicker = ref()
  let countList:any = ref([]) // 数据统计数组

  onMounted(()=>{
    vdata.searchData.mbrId = useRoute().query.mbrId

    if ($access('ENT_PAY_ORDER_SEARCH_PAY_WAY')) {
        initPayWay()
      }
      queryFunc()
      getCount()
  })

  // 数据统计
  const getCount = () => {
    $rechargeRecordCount(vdata.searchData).then( res => {
      console.log(res)
      
      countList.value = [ 
        {title: '总支付金额', symbol: 'add', textColor: '#1A66FF', content: ((res.payAmount) / 100).toFixed(2)},
        {type: 'line'},
        {title: '总赠送金额', content: (res.giveAmount / 100).toFixed(2)},
        {type: 'line'},
        {title: '总入账金额',symbol: 'sub', content: (res.entryAmount / 100).toFixed(2)},
      ]
    })
  }

  const queryFunc = () => {
    
    vdata.btnLoading = true
    infoTable.value.refTable(true)
  }

  const vdata = reactive({
    btnLoading: false,
    tableColumns: tableColumns,
    searchData: {} as any,
    payWayList: [] as any
  })

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

  function searchFunc () { // 点击【查询】按钮点击事件
    getCount()
    infoTable.value.refTable(true)
  }

  function detailFunc (recordId) { // 业务通用【详情】 函数
    detail.value.show(recordId)
  }

  function  initPayWay () {
    req.list(API_URL_PAYWAYS_LIST, { 'pageSize': -1 }).then(res => { // 支付方式下拉列表
      vdata.payWayList = res.records
    })
  }

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

<style lang="less" scoped>
</style>
