<script setup lang="tsx">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { NButton } from 'naive-ui';
import dayjs from 'dayjs';
// import { fetchGetStoreList } from '@/service/api/xsb-manage/store-info';
import { fetchGetChannelList, fetchList } from '@/service/api/reconciliation-center/points-checking';
import { commonExport } from '@/utils/common';
import { useTable } from '@/components/zt/Table/hooks/useTable';
const router = useRouter();

const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    key: 'transactionDate',
    title: '交易日',
    align: 'left',
    width: 150
  },
  {
    key: 'enterpriseName',
    title: '企业',
    align: 'center',
    width: 200
  },
  {
    key: 'openingPoints',
    title: '期初积分',
    align: 'center',
    render: row => {
      return (
        <div class={'flex items-center justify-center'}>
          {row.openingPoints}
          {row.isFirst ? <div class={'ml-2 rounded-4px bg-black text-12px text-white'}>初始</div> : ''}
        </div>
      );
    }
  },
  {
    key: 'rechargePoints',
    title: '充值积分',
    align: 'center'
  },
  {
    key: 'consumePoints',
    title: '消费积分',
    align: 'center'
  },

  // {
  //   key: 'exchangePoints',
  //   title: '兑换',
  //   align: 'center'
  // },
  {
    key: 'returnPoints',
    title: '返还',
    align: 'center'
  },
  {
    key: 'expirePoints',
    title: '过期积分',
    align: 'center'
  },
  {
    key: 'adjustPoints',
    title: '冲正',
    align: 'center'
  },
  {
    key: 'expectedClosingPoints',
    title: '期末应有积分',
    align: 'center'
  },
  {
    key: 'actualBalancePoints',
    title: '实际余额积分',
    align: 'center'
  },
  {
    key: 'status',
    title: '状态',
    align: 'center',
    render(row) {
      return <div style={row.status == 1 ? 'color: white' : 'color: green'}>{row.status == 1 ? '异常' : '正常'}</div>;
    }
  }
];

const rowClassName = (row: any) => {
  if (row.status == 1) {
    return 'hight-light';
  }
  return '';
};

const [registerTable, { getTableData, getSeachForm, setTableLoading }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        label: '企业',
        component: 'ApiSelect',
        field: 'enterpriseId',
        componentProps: {
          api: fetchGetChannelList,
          resultFeild: 'data',
          labelFeild: 'channelName',
          valueFeild: 'channelId'
        }
      },
      {
        label: '交易日',
        component: 'NDatePicker',
        field: 'transactionDate',
        defaultValue: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
        componentProps: {
          type: 'date',
          valueFormat: 'yyyy-MM-dd'
        },
        labelMessage: '产生的业务账单，T+1日进行核对。即今天的账，明日才能完整核对'
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    keyField: 'skuId',
    title: '积分对账',
    showAddButton: false,
    scrollX: 1800,
    rowClassName
  }
});

const tableData = computed(() => {
  return getTableData();
});

function handle(row: any) {
  console.log(row);
  router.push({
    path: '/reconciliation-center/points-details',
    query: {
      transactionDate: row.transactionDate,
      channelId: row.enterpriseId,
      mode: 'reversal'
    }
  });
}

async function handleExport() {
  setTableLoading(true);
  try {
    await commonExport('/smqjh-system/app-api/v1/claim/export', getSeachForm(), '积分对账列表.xlsx');
  } finally {
    setTableLoading(false);
  }
}
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchList" @register="registerTable">
      <template v-if="false" #prefix="{ loading }">
        <NSpace>
          <NButton v-if="false" size="small" :disabled="tableData.length == 0" :loading="loading" @click="handleExport">
            导出全部
          </NButton>
        </NSpace>
      </template>

      <template #op="{ row }">
        <NButton v-if="row.status == 1" size="small" ghost type="primary" @click="handle(row)">去处理</NButton>
      </template>
    </ZTable>
  </LayoutTable>
</template>

<style scoped>
:deep(.hight-light td) {
  background-color: rgba(252, 4, 4, 0.6);
}
</style>
