<script setup lang="tsx">
import { ref } from 'vue';
import { NButton } from 'naive-ui';
// import dayjs from 'dayjs';
import { fetchOrderDetail, fetchOrderList } from '@/service/api/member-center/member-order';
import { useTable } from '@/components/zt/Table/hooks/useTable';
import { useModal } from '@/components/zt/Modal/hooks/useModal';

const orderInfo = ref({
  id: 0,
  memberOrderId: 0,
  memberOpenRecordId: 0,
  memberAccountId: 0,
  orderNumber: 'string',
  thirdOrderNo: 'string',
  memberId: 0,
  mobile: 'string',
  memberTypeId: 0,
  memberTypeName: 'string',
  businessType: 'string',
  orderAmount: 0,
  rechargePrice: 0,
  faceAmount: 0,
  settleAmount: 0,
  orderStatus: 0,
  orderStatusName: 'string',
  status: 0,
  createTime: '2019-08-24T14:15:22.123Z',
  activateTime: '2019-08-24T14:15:22.123Z',
  effectiveTime: '2019-08-24T14:15:22.123Z',
  expireTime: '2019-08-24T14:15:22.123Z',
  openSource: 'string',
  thirdPlatform: 'string',
  openTimes: 0,
  updateTime: '2019-08-24T14:15:22.123Z',
  lastCancelReason: 'string',
  actionType: 0,
  actionTypeName: 'string',
  remark: 'string',
  benefitRecords: [] as Array<any>
});
const types: Record<string, string> = {
  COUPON: '优惠券',
  GIFT: '自选赠品'
};
const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    key: 'orderNumber',
    title: '订单号',
    align: 'center'
  },
  {
    key: 'mobile',
    title: '手机号',
    align: 'center'
  },
  {
    key: 'memberTypeName',
    title: '会员信息',
    align: 'center'
  },
  {
    key: 'orderAmount',
    title: '订单金额（元）',
    align: 'center'
  },
  {
    key: 'orderStatusName',
    title: '订单状态',
    align: 'center'
    // render: row => {
    //   const orderStatus = {
    //     '1': '生效中',
    //     '2': '已取消',
    //     '3': '已过期'
    //   };
    //   return <NTag class={'mt7'}>{orderStatus[row.status as keyof typeof orderStatus]}</NTag>;
    // }
  },
  {
    key: 'createTime',
    title: '创建时间',
    align: 'center',
    width: 100
  },
  {
    key: 'openSource',
    title: '开通来源',
    align: 'center',
    render: row => {
      return <dictTag value={row.openSource} dictCode="open_channel" immediate={true}></dictTag>;
    }
  },
  {
    key: 'activateTime',
    title: '激活时间',
    align: 'center',
    width: 100
  }
];

const [registerTable] = useTable({
  searchFormConfig: {
    schemas: [
      {
        label: '订单号',
        component: 'NInput',
        field: 'orderNumber'
      },
      {
        label: '手机号',
        component: 'NInput',
        field: 'mobile'
      },
      {
        label: '订单状态',
        field: 'status',
        component: 'NSelect',
        componentProps: {
          options: [
            {
              label: '生效中',
              value: 1
            },
            {
              label: '已取消',
              value: 2
            },
            {
              label: '已过期',
              value: 3
            }
          ]
        }
      },
      {
        label: '开放渠道',
        component: 'dictSelect',
        field: 'openSource',
        componentProps: {
          dictCode: 'open_channel',
          immediate: true
        }
      },
      {
        label: '会员类型ID',
        component: 'NInput',
        field: 'memberTypeId'
      },
      {
        label: '会员名称',
        component: 'NInput',
        field: 'memberTypeName'
      },

      {
        label: '创建时间',
        component: 'NDatePicker',
        field: 'createTime',
        componentProps: {
          type: 'datetimerange',
          defaultTime: ['00:00:00', '23:59:59']
        }
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    opWdith: 160,
    keyField: 'skuId',
    title: '活动列表',
    showAddButton: false,
    scrollX: 1800,
    fieldMapToTime: [['createTime', ['createTimeStart', 'createTimeEnd']]]
  }
});

const [registerModal, { openModal }] = useModal({
  title: `订单详情`,
  height: 600,
  width: 1200,
  showFooter: false
});

async function getDetail(id: any) {
  const res = await fetchOrderDetail(id);
  orderInfo.value = res.data;
}

function handleDetail(id: any) {
  openModal();
  getDetail(id);
}
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchOrderList" @register="registerTable">
      <template #op="{ row }">
        <NButton size="small" @click="handleDetail(row.id)">查看详情</NButton>
      </template>
    </ZTable>

    <BasicModal @register="registerModal">
      <div class="py-20px font-semibold">基本信息</div>

      <div class="flex">
        <div class="flex-1">
          <div>订单号：{{ orderInfo.orderNumber }}</div>
          <div>手机号：{{ orderInfo.mobile }}</div>
          <div>订单金额：{{ orderInfo.orderAmount }}</div>
          <div>合作方订单号：{{ orderInfo.thirdOrderNo }}</div>
          <div>激活时间：{{ orderInfo.activateTime }}</div>
        </div>
        <div class="flex-1">
          <div>状态：{{ orderInfo.orderStatusName }}</div>
          <div>用户ID：{{ orderInfo.memberAccountId }}</div>
          <div>开通来源：{{ orderInfo.openSource }}</div>
          <div>创建时间：{{ orderInfo.createTime }}</div>
          <div>到期时间：{{ orderInfo.expireTime }}</div>
        </div>
      </div>

      <div class="py-20px font-semibold">权益发放记录</div>
      <NTable class="" :single-line="false">
        <NThead>
          <NTr>
            <NTh>权益类型</NTh>
            <NTh>发放时间</NTh>
            <NTh>发放结果</NTh>
            <NTh>关联业务单号</NTh>
          </NTr>
        </NThead>
        <NTbody>
          <NTr v-for="(item, index) in orderInfo.benefitRecords" :key="index">
            <NTd>{{ types[item.benefitType] }}</NTd>
            <NTd>{{ item.createTime }}</NTd>
            <NTd>{{ item.grantStatus == 1 ? '成功' : '失败' }}</NTd>
            <NTd>{{ item.businessNo }}</NTd>
          </NTr>
        </NTbody>
      </NTable>
    </BasicModal>
  </LayoutTable>
</template>

<style scoped></style>
