<template>
  <ele-page flex-table>
    <page-search @search="reload"></page-search>

    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
      <template #toolbar>
        <div class="flex items-center mb-4">
          <el-statistic
            :value="693700"
            title="累计佣金金额"
            value-style="font-size:30px"
            class="mr-10"
          ></el-statistic>
          <el-statistic
            :value="693700"
            title="待结算佣金"
            value-style="font-size:30px"
            class="mr-10"
          ></el-statistic>
          <el-statistic
            :value="693700"
            title="已结算佣金"
            value-style="font-size:30px"
            class="mr-10"
          ></el-statistic>
          <el-statistic
            :value="693700"
            title="已失效佣金"
            value-style="font-size:30px"
            class="mr-10"
          ></el-statistic>
        </div>

        <div class="common-title mb-4">交易记录</div>

        <el-radio-group @change="handleStatusChange" v-model="useStatus">
          <el-radio-button label="全部" value="1" />
          <el-radio-button label="待结算" value="2" />
          <el-radio-button label="已结算" value="3" />
        </el-radio-group>
      </template>
    </common-table>
  </ele-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import pageSearch from '@/views/finance/withdrawal/components/page-search.vue';
  import { useDictData } from '@/utils/use-dict-data';

  defineOptions({ name: 'withdrawal' });
  const [useStatusDicts] = useDictData(['use_status']);

  const useStatus = ref('1');
  function handleStatusChange(value) {
    pageRef.value.reload({ useStatus: value });
  }

  /** 表格列配置 */
  const columns = ref([
    { label: '交易时间', prop: 'createTime', align: 'center', width: 180 },
    { label: '用户UID', prop: 'uid', align: 'center', minWidth: 140 },
    {
      label: '支付单号/流水号',
      prop: 'paymentCode',
      align: 'center',
      minWidth: 160
    },
    { label: '对方账户', prop: 'addressDetail', align: 'center' },
    { label: '结算金额', prop: 'money', align: 'center' },
    {
      label: '交易状态',
      prop: 'useStatus',
      align: 'center',
      formatter: (row) =>
        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
          ?.dictLabel
    },
    {
      label: '交易类型',
      prop: 'paymentType',
      align: 'center',
      formatter: (row) =>
        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
          ?.dictLabel
    },
    { label: '订单编号', prop: 'code', align: 'center' }
  ]);

  /** 页面组件实例 */
  const pageRef = ref(null);

  const pageConfig = reactive({
    pageUrl: '/baseinfo/godown/pagelist',
    exportUrl: '/baseinfo/godown/export',
    fileName: '佣金记录',
    cacheKey: 'commissionTable'
  });

  //刷新表格
  function reload(where) {
    pageRef.value?.reload(where);
  }
</script>
