<!-- 搜索表单 -->
<template>
  <a-space :size="10" style="flex-wrap: wrap">
    <!--    <a-button-->
    <!--      danger-->
    <!--      type="primary"-->
    <!--      class="ele-btn-icon"-->
    <!--      :disabled="selection?.length === 0"-->
    <!--      @click="removeBatch"-->
    <!--    >-->
    <!--      <template #icon>-->
    <!--        <DeleteOutlined/>-->
    <!--      </template>-->
    <!--      <span>批量删除</span>-->
    <!--    </a-button>-->
    <a-input-search
      allow-clear
      v-model:value="where.orderNo"
      placeholder="订单编号"
      style="width: 260px"
      @search="reload"
      @pressEnter="reload"
    />
<!--    <a-select-->
<!--      v-model:value="where.type"-->
<!--      style="width: 150px"-->
<!--      placeholder="订单类型"-->
<!--      @change="search"-->
<!--    >-->
<!--      <a-select-option value="">全部</a-select-option>-->
<!--      <a-select-option :value="1">普通订单</a-select-option>-->
<!--      <a-select-option :value="2">秒杀订单</a-select-option>-->
<!--      <a-select-option :value="3">拼团订单</a-select-option>-->
<!--    </a-select>-->
<!--    <a-select-->
<!--      v-model:value="where.payStatus"-->
<!--      style="width: 150px"-->
<!--      placeholder="付款状态"-->
<!--      @change="search"-->
<!--    >-->
<!--      <a-select-option value="">全部</a-select-option>-->
<!--      <a-select-option :value="1">已付款</a-select-option>-->
<!--      <a-select-option :value="0">未付款</a-select-option>-->
<!--    </a-select>-->
    <a-select
      v-model:value="where.orderStatus"
      style="width: 150px"
      placeholder="订单状态"
      @change="search"
    >
      <a-select-option value="">全部</a-select-option>
      <a-select-option :value="1">已完成</a-select-option>
<!--      <a-select-option :value="0">未完成</a-select-option>-->
<!--      <a-select-option :value="2">未使用</a-select-option>-->
      <a-select-option :value="3">已取消</a-select-option>
      <a-select-option :value="4">退款中</a-select-option>
      <a-select-option :value="5">退款被拒</a-select-option>
      <a-select-option :value="6">退款成功</a-select-option>
    </a-select>
<!--    <a-select-->
<!--      :options="getPayType()"-->
<!--      v-model:value="where.payType"-->
<!--      style="width: 150px"-->
<!--      placeholder="付款方式"-->
<!--      @change="search"-->
<!--    />-->

    <a-range-picker
      v-model:value="dateRange"
      @change="search"
      value-format="YYYY-MM-DD"
    />
    <a-input-search
      allow-clear
      :placeholder="getSearchPlaceholder()"
      style="width: 320px"
      v-model:value="where.keywords"
      @search="reload"
    >
      <template #addonBefore>
        <a-select v-model:value="type" style="width: 88px" @change="onType">
          <a-select-option value="">不限</a-select-option>
          <a-select-option value="userId"> 用户ID</a-select-option>
          <a-select-option value="phone"> 手机号</a-select-option>
          <a-select-option value="nickname"> 昵称</a-select-option>
        </a-select>
      </template>
    </a-input-search>
    <a-button @click="reset">重置</a-button>
    <a-button @click="handleExport">导出</a-button>
  </a-space>
</template>

<script lang="ts" setup>
import {ref, watch} from 'vue';
import {utils, writeFile} from 'xlsx';
import {message} from 'ant-design-vue';
import useSearch from '@/utils/use-search';
import {ShopOrder, ShopOrderParam} from '@/api/shop/shopOrder/model';
import {listShopOrder} from '@/api/shop/shopOrder';
import {getPayType} from '@/utils/shop';

const props = withDefaults(
  defineProps<{
    // 选中的订单
    selection?: ShopOrder[];
  }>(),
  {}
);

const emit = defineEmits<{
  (e: 'search', where?: ShopOrderParam): void;
  (e: 'add'): void;
  (e: 'remove'): void;
  (e: 'batchMove'): void;
}>();

// 表单数据
const {where, resetFields} = useSearch<ShopOrderParam>({
  keywords: '',
  orderId: undefined,
  orderNo: undefined,
  createTimeStart: undefined,
  createTimeEnd: undefined,
  userId: undefined,
  payUserId: undefined,
  nickname: undefined,
  phone: undefined,
  payStatus: undefined,
  orderStatus: undefined,
  payType: undefined
});

const reload = () => {
  emit('search', {
    ...where,
    keywords: type.value == '' ? where.keywords : undefined
  });
};

// 批量删除
// const removeBatch = () => {
//   emit('remove');
// };

const onType = () => {
  resetFields();
};

// 获取搜索框placeholder
const getSearchPlaceholder = () => {
  switch (type.value) {
    case 'userId':
      where.userId = Number(where.keywords);
      return '请输入用户ID';
    case 'phone':
      where.phone = where.keywords;
      return '请输入手机号';
    case 'nickname':
      where.nickname = where.keywords;
      return '请输入用户昵称';
    default:
      return '请输入搜索内容';
  }
};

/* 搜索 */
const search = () => {
  const [d1, d2] = dateRange.value ?? [];
  xlsFileName.value = `${d1}至${d2}`;
  where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
  where.createTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
  emit('search', {
    ...where
  });
};

/*  重置 */
const reset = () => {
  resetFields();
  search();
};

const dateRange = ref<[string, string]>(['', '']);
// 变量
const loading = ref(false);
const orders = ref<ShopOrder[]>([]);
const xlsFileName = ref<string>();
const type = ref('');

// 配送方式中文（0快递配送 1无需发货/自提 2商家送货）
const getDeliveryTypeLabel = (t?: number) => {
  switch (t) {
    case 0:
      return '快递配送';
    case 1:
      return '无需发货(自提)';
    case 2:
      return '商家送货';
    default:
      return '未设置';
  }
};

// 发货状态中文（10未发货 20已发货 30部分发货）
const getDeliveryStatusLabel = (s?: number) => {
  switch (s) {
    case 10:
      return '未发货';
    case 20:
      return '已发货';
    case 30:
      return '部分发货';
    default:
      return '未知';
  }
};

// 商品明细汇总（商品名 x 数量）
const getGoodsSummary = (goods?: any[]) => {
  if (!goods || !goods.length) return '';
  return goods
    .map((g) => `${g.goodsName || '未知商品'} x${g.totalNum || 1}`)
    .join('；');
};

// 自提/发货店铺名称
const getShopName = (d: ShopOrder) => {
  if (d.deliveryType === 1) return d.selfTakeMerchantName || '';
  return d.expressMerchantName || '';
};

// 导出
const handleExport = async () => {
  loading.value = true;
  const array: (string | number)[][] = [
    [
      '订单编号',
      '收货人',
      '联系电话',
      '收货地址',
      '配送方式',
      '商品明细',
      '商品总数量',
      '实付金额(元)',
      '配送时间',
      '自提码',
      '发货/自提店铺',
      '买家备注',
      '支付方式',
      '发货状态',
      '下单时间'
    ]
  ];

  await listShopOrder(where)
    .then((list) => {
      orders.value = list;
      list?.forEach((d: ShopOrder) => {
        array.push([
          `${d.orderNo || ''}`,
          `${d.realName || ''}`,
          `${d.phone || d.mobile || ''}`,
          `${d.address || ''}`,
          `${getDeliveryTypeLabel(d.deliveryType)}`,
          `${getGoodsSummary(d.orderGoods)}`,
          `${d.totalNum ?? ''}`,
          `${d.payPrice || ''}`,
          `${
            d.sendStartTime && d.sendEndTime
              ? `${d.sendStartTime} - ${d.sendEndTime}`
              : ''
          }`,
          `${d.selfTakeCode || ''}`,
          `${getShopName(d)}`,
          `${d.buyerRemarks || ''}`,
          `${getPayType(d.payType)}`,
          `${getDeliveryStatusLabel(d.deliveryStatus)}`,
          `${d.createTime || ''}`
        ]);
      });
      const sheetName = `订单数据`;
      const workbook = {
        SheetNames: [sheetName],
        Sheets: {}
      };
      const sheet = utils.aoa_to_sheet(array);
      workbook.Sheets[sheetName] = sheet;
      // 设置列宽（与上方表头一一对应）
      sheet['!cols'] = [
        {wch: 22}, // 订单编号
        {wch: 12}, // 收货人
        {wch: 16}, // 联系电话
        {wch: 40}, // 收货地址
        {wch: 14}, // 配送方式
        {wch: 40}, // 商品明细
        {wch: 12}, // 商品总数量
        {wch: 12}, // 实付金额(元)
        {wch: 28}, // 配送时间
        {wch: 12}, // 自提码
        {wch: 20}, // 发货/自提店铺
        {wch: 30}, // 买家备注
        {wch: 12}, // 支付方式
        {wch: 10}, // 发货状态
        {wch: 20} // 下单时间
      ];
      message.loading('正在导出...');
      setTimeout(() => {
        writeFile(
          workbook,
          `${
            where.createTimeEnd ? xlsFileName.value + '_' : ''
          }${sheetName}.xlsx`
        );
        loading.value = false;
      }, 1000);
    })
    .catch((msg) => {
      message.error(msg);
      loading.value = false;
    })
    .finally(() => {
    });
};

watch(
  () => props.selection,
  () => {
  }
);
</script>
