<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.payUserId" :placeholder="'顾客uid'" />
        <jeepay-text-up v-model:value="vdata.searchData.storeId" :placeholder="'门店名称/门店编号'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.bizType" placeholder="变动类型">
            <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>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
          ref="infoTable"
          :initData="true"
          :reqTableDataFunc="reqTableDataFunc"
          :tableColumns="tableColumns"
          :searchData="vdata.searchData"
          rowKey="hid"
          @btnLoadClose="vdata.btnLoading=false"
      >
        <!--          :statisticsIsShow="$access('ENT_MEMBER_ACCOUNT_HISTORY_LIST')"-->
<!--        <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>-->
<!--                <span v-if="item.isAmount">元</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </template>-->
        <template #topBtnSlot />
        <template #bodyCell="{column,record}">
          <template v-if="column.key == 'nickName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                顾客名称：{{ record.nickName}}
              </template>
              {{ record.payUserId }}
            </a-tooltip>
          </template>
          <template v-if="column.key == 'storeId'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                门店ID：{{ record.storeId}}
              </template>
              {{ record.storeName }}
            </a-tooltip>
          </template>
          <template v-if="column.key == 'changeAmt'">
            <b style="color: #1890ff">￥{{ record.changeAmt/100 }} </b>
          </template>
          <template v-if="column.key == 'beforeAmt'">
            <b style="color: #1890ff">￥{{ record.beforeAmt/100 }} </b>
          </template>
          <template v-if="column.key == 'afterAmt'">
            <b style="color: #1890ff">￥{{ record.afterAmt/100 }} </b>
          </template>
          <template v-if="column.key == 'type'">
            <a-tag v-if="record.type == 1" color="green">下单奖励</a-tag>
            <a-tag v-if="record.type == 2" color="red">订单退款</a-tag>
            <a-tag v-if="record.type == 3" color="blue">消费抵扣</a-tag>
          </template>

          <template v-if="column.key == 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_MEMBER_ACCOUNT_HISTORY_VIEW')" type="link" @click="detailFunc(record.hid)">详情</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_ACCOUNT_HISTORY_LIST,
  req,
  $memberAccountHistoryCount,
  API_URL_MCH_STORE_LIST, API_URL_MCH_REF_PACKET_INFO_LIST, API_URL_MCH_REF_PACKET_CHANGE
} 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: 'flowNo', fixed: 'left', title: '流水号', dataIndex: 'flowNo' },
  { key: 'payUserId', title: '顾客uid', dataIndex: 'payUserId' },
  { key: 'storeId', title: '门店', dataIndex: 'storeId' },
  { key: 'type', title: '变动类型', dataIndex: 'type' },
  { key: 'beforeAmt', title: '变动前余额', dataIndex: 'beforeAmt' },
  { key: 'changeAmt', title: '变动金额', dataIndex: 'changeAmt' },
  { key: 'afterAmt', title: '变动后余额', dataIndex: 'afterAmt' },
  { key: 'updatedAt', title: '更新日期', dataIndex: 'updatedAt' },
  // { 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
  queryFunc()
  getCount()
})

// 数据统计
const getCount = () => {
  $memberAccountHistoryCount(vdata.searchData).then( res => {
    countList.value = [
      {title: '变动条数', content: res.countNum, isAmount: false},
      {type: 'line'},
      {title: '变动金额', textColor: '#1A66FF', isAmount: true, content: (Math.abs(res.changeAmount) / 100).toFixed(2)},
    ]
  })
}

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

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

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

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

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

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

</script>

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