<template>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleExport" v-if="getCheckPerm('aftermarket_export')" > 数据导出</a-button>
      </template>
    </BasicTable>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, h, onActivated, computed } from 'vue';
import { PageWrapper } from '/@/components/Page';
import {
  BasicTable,
  useTable,
  TableAction,
  BasicColumn,
  TableImg,
  FormProps,
} from '/@/components/Table';
import { Tabs } from 'ant-design-vue';
import { operateSceneList } from '/@/api/operate';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermissionStore } from '/@/store/modules/permission';
import recoveryModal from './recoveryModal.vue';
import { useModal } from '/@/components/Modal';
import { useRouter } from 'vue-router'
import { repairPayList, DownExport } from '/@/api/spares';
import { useMessage } from '/@/hooks/web/useMessage';
import { useLocaleStore } from '/@/store/modules/locale';
export default defineComponent({
  name:'售后订单',
  components: {
    BasicTable,
    TableAction,
    TableImg,
    recoveryModal,
    PageWrapper,
    [Tabs.name]: Tabs,
    [Tabs.TabPane.name]: Tabs.TabPane,
  },
  setup() {
    const { t } = useI18n();
    const permissionStore = usePermissionStore();
    const router = useRouter()
    const { getCheckPerm } = permissionStore;
    const tableType = ref<Recordable>(0); //0看看 、1看见、2深时
    const { createConfirm } = useMessage();
    const localeStore = useLocaleStore();
    const isEn = computed(() => localeStore.getLocale === 'en');
    onMounted(() => {
      // console.log(router.currentRoute.value.params.id);
    });
    const columns: BasicColumn[] = [
      {
        title: '下单时间',
        dataIndex: 'createTime',
        width: 180,
      },
      {
        title: '订单号',
        dataIndex: 'orderSn',
        width: 180,
      },
      {
        title: 'OpenId',
        dataIndex: 'wxPayOpenId',
        width: 230,
      },
      {
        title: '维修单号',
        dataIndex: 'repairId',
        width: 150,
      },
      {
        title: '订单金额（元）',
        dataIndex: 'payAmount',
        width: 130,
      },
      {
        title: '支付方式',
        dataIndex: 'payType	',
        width: 100,
        customRender: ({ record }) => {
          return record.payType	 == 0 ? '银行转账' : record.payType	 == 1 ? '微信' : '支付宝';
        },
      },
      {
        title: '支付时间',
        dataIndex: 'payTime',
        width: 150,
      },
      {
        title: '交易号',
        dataIndex: 'tradeNo',
        width: 250,
      },
      {
        title: '订单状态',
        dataIndex: 'payStatus',
        width: 100,
        customRender: ({ record }) => {
          return record.payStatus	 == 0 ? '未支付' : record.payStatus	 == 1 ? '已支付' : '支付失败';
        },
      },
    ];
    const searchForm: Partial<FormProps> = {
      labelWidth: 120,
      autoAdvancedLine: 1,
      actionColOptions: {
        span: 24,
      },
      schemas: [
        {
          field: 'repairId',
          component: 'Input',
          label: '维修单号',
          colProps: {
            xl: 7,
            xxl: 7,
          },
        },
        {
          field: 'tradeNo',
          component: 'Input',
          label: '交易号',
          colProps: {
            xl: 7,
            xxl: 7,
          },
        },
        {
          field: 'timeList',
          label: '支付时间',
          component: 'RangePicker',
          componentProps: {
            maxLength: 100,
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            showTime: true,
          },
          colProps: {
            xl: 7,
            xxl: 7,
          },
        },
      ],
    };
    const [registerRecovery, { openModal }] = useModal();
    const [registerTable, { reload }] = useTable({
      api: repairPayList,
      columns: columns,
      useSearchForm: true,
      searchInfo: { type: tableType },
      formConfig: searchForm,
      showTableSetting: true,
      showIndexColumn: false,
      fetchSetting: {
        pageField: 'pageNum',
        sizeField: 'pageSize',
        listField: 'list',
        totalField: 'total',
      },
      canResize: false,
    });
    async function handleDetail(record: Recordable) {
      console.log('record', record);
      router.push({path:`detail/${record.repairId||'20230215174919387'}`})
    }
    async function handleRecover(record: Recordable) {
      openModal(true, {
        ...record,
      });
    }
    onActivated(()=>{
      reload();
    })
    function handleExport() {
      createConfirm({
        iconType: 'warning',
        title: () => h('span', t('common.reminder')),
        content: () => h('span', t('routes.equity.excelTitle')),
        onOk: async () => {
          await DownExport({});
        },
      });
    }
    return {
      registerTable,
      reload,
      t,
      tableType,
      handleExport,
      getCheckPerm,
      handleDetail,
      handleRecover,
      registerRecovery,
    };
  },
});
</script>
<style lang="less" scoped>
.desc-wrap-BasicTable {
  background-color: #f0f2f5;
  .vben-basic-table-form-container {
    padding: 0;
  }
}
</style>
