<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="date" />
        </a-form-item>
        <jeepay-text-up v-model:value="vdata.searchData.nickName" :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.type" placeholder="顾客来源">
            <a-select-option value="">全部类型</a-select-option>
            <a-select-option value="WECHAT">微信</a-select-option>
            <a-select-option value="ALIPAY">支付宝</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
          ref="infoTable"
          :initData="true"
          :reqTableDataFunc="reqTableDataFunc"
          :tableColumns="tableColumns"
          :searchData="vdata.searchData"
          rowKey="mbrId"
          :statisticsIsShow="$access('ENT_MEMBER_LIST')"
          :tableExportFunc="tableExportFunc"
          @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>
                <span v-if="item.isAmount">元</span>
              </div>
            </div>
          </div>
        </template>
        <template #topBtnSlot>
          <div>
            <a-button v-if="$access('ENT_MEMBER_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
          </div>
        </template>
        <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 == 'balance'">
            <b style="color: #1890ff">￥{{ record.balance/100 }} </b>
          </template>
          <template v-if="column.key == 'type'">
            <a-tag v-if="record.type == 'WECHAT'" color="green">微信</a-tag>
            <a-tag v-if="record.type == 'ALIPAY'" color="blue">支付宝</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>
    <!-- 新增  -->
<!--    <MemberAddOrEdit ref="memberAddOrEdit" :callbackFunc="searchFunc" />-->
    <!-- 调账  -->
<!--    <ChangeBalance ref="changeBalance" :callbackFunc="searchFunc" />-->
  </page-header-wrapper>
</template>

<script lang="ts" setup>
import {
  API_URL_MEMBER_LIST,
  req,
  $exportExcel,
  exportExcelUrl,
  $memberInfoCount,
  API_URL_MCH_STORE_LIST, API_URL_MCH_REF_PACKET_USER_LIST, $redUserInfoCount
} from '@/api/manage'
// import MemberAddOrEdit from './AddOrEdit.vue'
// import ChangeBalance from './ChangeBalance.vue'
import {ref, reactive, getCurrentInstance } from 'vue'
import router from '@/router'
import fileDownload from 'js-file-download'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// eslint-disable-next-line no-unused-vars
const tableColumns = reactive([
  // { key: 'headImg', fixed: 'left', title: '顾客头像', dataIndex: 'headImg' },
  { key: 'nickName',fixed: 'left', title: '顾客uid', dataIndex: 'nickName' },
  // { key: 'phone', title: '顾客手机号', dataIndex: 'phone' },
  { key: 'storeId', title: '门店', dataIndex: 'storeId' },
  { key: 'type', title: '顾客来源', dataIndex: 'type' },
  { key: 'balance', title: '红包余额', dataIndex: 'balance' },
  { key: 'lastTransTime', title: '最新一次下单时间', dataIndex: 'lastTransTime' },
  { key: 'createdAt', title: '首次下单时间', dataIndex: 'createdAt' },
  // { key: 'op', title: '操作', fixed: 'right', align: 'center' }
])

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

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

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

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

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

function editFunc (recordId) { // 业务通用【修改】 函数
  memberAddOrEdit.value.show(recordId)
}
function  detailFunc(recordId){

}
function accountChangeFunc (recordId) { // 调账 函数
  changeBalance.value.show(recordId)
}

function accountFunc (recordId: any) { // 账户流水
  router.push({
    path: '/member/account',
    query: { mbrId: recordId }
  })
}

function rechargeFunc (recordId: any) { // 充值记录
  router.push({
    path: '/member/recharge',
    query: { mbrId: recordId }
  })
}

function delFunc (appId) {
  $infoBox.confirmDanger('确认删除？', '', () => {
    req.delById(API_URL_MEMBER_LIST, appId).then(res => {
      $infoBox.message.success('删除成功！')
      searchFunc()
    })
  },() => {
    console.log(1111)
  })
}

// 数据统计
const getCount = () => {
  $redUserInfoCount(vdata.searchData).then( res => {
    console.log(res)
    countList.value = [
      {title: '总顾客数', symbol: 'add', content: res.total, isAmount: false},
      {type: 'line'},
      {title: '总余额', symbol: 'add', textColor: '#1A66FF', isAmount: true, content: ((res.totalBalance) / 100).toFixed(2)},
      {type: 'line'},
    ]
  })
}

function tableExportFunc(){
  return $exportExcel(exportExcelUrl.memberInfo, Object.assign({}, vdata.searchData, {'pageSize': -1})).then(res => {
    fileDownload(res.data, '会员信息.xlsx')
  }).catch ((error) =>{console.log(error)} )
}

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

</script>

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