<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallOrderApi } from '#/api/mall/trade/order';

import { ref } from 'vue';

import { Page, prompt, SummaryCard } from '@vben/common-ui';
import { DeliveryTypeEnum } from '@vben/constants';
import { $t } from '@vben/locales';
import { fenToYuan } from '@vben/utils';

import { ElCard, ElImage, ElLoading, ElMessage, ElTag } from 'element-plus';

import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  getOrderPage,
  getOrderSummary,
  pickUpOrderByVerifyCode,
} from '#/api/mall/trade/order';

import { useGridColumns, useGridFormSchema } from './data';

const summary = ref<MallOrderApi.OrderSummary>();

/** 刷新表格 */
function handleRefresh() {
  gridApi.query();
}

/** 获取订单统计数据 */
async function getOrderSum() {
  const query = await gridApi.formApi.getValues();
  query.deliveryType = DeliveryTypeEnum.PICK_UP.type;
  summary.value = await getOrderSummary(query);
}

/** 核销订单 */
async function handlePickup(pickUpVerifyCode?: string) {
  // 如果没有传核销码，则弹窗输入
  if (pickUpVerifyCode) {
    // 执行核销
    const loadingInstance = ElLoading.service({
      text: '订单核销中 ...',
    });
    try {
      await pickUpOrderByVerifyCode(pickUpVerifyCode);
      ElMessage.success($t('ui.actionMessage.operationSuccess'));
      handleRefresh();
    } finally {
      loadingInstance.close();
    }
  } else {
    prompt<string>({
      componentProps: { placeholder: '输入核销码' },
      content: '输入核销码',
      title: '核销订单',
      icon: 'question',
      overlayBlur: 3,
    }).then(async (res) => {
      if (res) {
        // 执行核销
        const loadingInstance = ElLoading.service({
          text: '订单核销中 ...',
        });
        try {
          await pickUpOrderByVerifyCode(res);
          ElMessage.success($t('ui.actionMessage.operationSuccess'));
          handleRefresh();
        } finally {
          loadingInstance.close();
        }
      }
    });
  }
}

const port = ref('');
const ports = ref([]);
const reader = ref('');
const serialPort = ref(false); // 是否连接扫码枪

/** 连接扫码枪 */
async function connectToSerialPort() {
  try {
    // 判断浏览器支持串口通信
    if (
      'serial' in navigator &&
      navigator.serial !== null &&
      typeof navigator.serial === 'object' &&
      'requestPort' in navigator.serial
    ) {
      // 提示用户选择一个串口
      port.value = await (navigator.serial as any).requestPort();
    } else {
      ElMessage.error('浏览器不支持扫码枪连接，请更换浏览器重试');
      return;
    }

    // 获取用户之前授予该网站访问权限的所有串口
    ports.value = await (navigator.serial as any).getPorts();

    // 等待串口打开
    await (port.value as any).open({
      baudRate: 9600,
      dataBits: 8,
      stopBits: 2,
    });

    ElMessage.success('成功连接扫码枪');
    serialPort.value = true;
    await readData();
  } catch (error) {
    // 处理连接串口出错的情况
    console.error('Error connecting to serial port:', error);
  }
}

/** 监听扫码枪输入 */
async function readData() {
  reader.value = (port.value as any).readable.getReader();
  let data = ''; // 扫码数据
  // 监听来自串口的数据
  while (true) {
    const { value, done } = await (reader.value as any).read();
    if (done) {
      // 允许稍后关闭串口
      (reader.value as any).releaseLock();
      break;
    }
    // 获取发送的数据
    const serialData = new TextDecoder().decode(value);
    data = `${data}${serialData}`;
    if (serialData.includes('\r')) {
      // 读取结束
      const codeData = data.replace('\r', '');
      data = ''; // 清空下次读取不会叠加
      console.warn(`二维码数据:${codeData}`);
      // 处理拿到数据逻辑
      await handlePickup(codeData);
    }
  }
}

async function cutPort() {
  if (port.value === '') {
    ElMessage.warning('请先连接或打开扫码枪');
  } else {
    await (reader.value as any).cancel();
    await (port.value as any).close();
    port.value = '';
    console.warn('断开扫码枪连接');
    ElMessage.success('已成功断开扫码枪连接');
    serialPort.value = false;
  }
}

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
    cellConfig: {
      height: 80,
    },
    columns: useGridColumns(),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          await getOrderSum();
          return await getOrderPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            deliveryType: DeliveryTypeEnum.PICK_UP.type,
            ...formValues,
          });
        },
      },
    },
    rowConfig: {
      keyField: 'id',
      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
      search: true,
    },
  } as VxeTableGridOptions<MallOrderApi.Order>,
});
</script>

<template>
  <Page auto-content-height>
    <ElCard class="mb-2">
      <div class="flex flex-row gap-4">
        <SummaryCard
          class="flex flex-1"
          title="订单数量"
          icon="icon-park-outline:transaction-order"
          icon-color="bg-blue-100"
          icon-bg-color="text-blue-500"
          :value="summary?.orderCount || 0"
        />
        <SummaryCard
          class="flex flex-1"
          title="订单金额"
          icon="streamline:money-cash-file-dollar-common-money-currency-cash-file"
          icon-color="bg-purple-100"
          icon-bg-color="text-purple-500"
          prefix="￥"
          :decimals="2"
          :value="Number(fenToYuan(summary?.orderPayPrice || 0))"
        />
        <SummaryCard
          class="flex flex-1"
          title="退款单数"
          icon="heroicons:receipt-refundAfterSale"
          icon-color="bg-yellow-100"
          icon-bg-color="text-yellow-500"
          :value="summary?.afterSaleCount || 0"
        />
        <SummaryCard
          class="flex flex-1"
          title="退款金额"
          icon="ri:refundAfterSale-2-line"
          icon-color="bg-green-100"
          icon-bg-color="text-green-500"
          prefix="￥"
          :decimals="2"
          :value="Number(fenToYuan(summary?.afterSalePrice || 0))"
        />
      </div>
    </ElCard>

    <Grid class="h-4/5" table-title="核销订单">
      <template #spuName="{ row }">
        <div class="flex flex-col gap-2">
          <div
            v-for="item in row.items"
            :key="item.id!"
            class="flex items-start gap-2 text-left"
          >
            <ElImage
              :src="item.picUrl"
              :alt="item.spuName"
              style="width: 60px; height: 60px"
              :preview-src-list="item.picUrl ? [item.picUrl] : []"
            />
            <div class="flex flex-1 flex-col gap-1">
              <span class="text-sm">{{ item.spuName }}</span>
              <div class="flex flex-wrap gap-1">
                <ElTag
                  v-for="property in item.properties"
                  :key="property.propertyId!"
                  size="small"
                  type="info"
                >
                  {{ property.propertyName }}: {{ property.valueName }}
                </ElTag>
              </div>
              <span class="text-xs text-gray-500">
                {{ fenToYuan(item.price!) }} 元 x {{ item.count }}
              </span>
            </div>
          </div>
        </div>
      </template>
      <template #toolbar-tools>
        <TableAction
          :actions="[
            {
              label: '核销',
              type: 'primary',
              icon: 'lucide:circle-check-big',
              auth: ['trade:order:pick-up'],
              onClick: handlePickup.bind(null, undefined),
            },
            {
              label: serialPort ? '断开扫描枪' : '连接扫描枪',
              type: serialPort ? 'danger' : 'primary',
              icon: serialPort ? 'lucide:circle-x' : 'lucide:circle-play',
              onClick: serialPort ? cutPort : connectToSerialPort,
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
