<script lang="ts" setup>
import { computed, ref } from 'vue';

import { useVbenDrawer, useVbenModal } from '@vben/common-ui';

import { Button, Card, Descriptions, Image, Space, Tag, Timeline } from 'ant-design-vue';

import OrderTraceDrawer from '#/views/business/order/components/order-trace-drawer.vue';

import OrderPricePercentAdjustDrawer from '#/views/business/order/components/OrderPricePercentAdjustDrawer.vue';
import { getOrderPriceAdjustConfig, adjustOrderPercent } from '#/api/order/priceAdjust';
import type { QuickDiscountOption } from '#/utils/pricePercentAdjust';
import { formatPriceDiscountLabel, normalizeQuickOptions } from '#/utils/pricePercentAdjust';

import { expressDetailByOrderId, getOrderInfo } from '../api';

defineOptions({
  name: 'DetailModal',
});

const gridApi = ref();
// 订单信息
const data = ref();
// 快递信息
const expressDetail = ref({});
// 订单发货方式
const deliveryMethod = ref(-1);

const [TraceDrawer, traceDrawerApi] = useVbenDrawer({
  connectedComponent: OrderTraceDrawer,
});

const [PercentAdjustDrawer, percentAdjustDrawerApi] = useVbenDrawer({
  connectedComponent: OrderPricePercentAdjustDrawer,
});

const priceAdjustMeta = ref({
  scope: 'sale_only' as 'both' | 'sale_only',
  quickOptions: [] as QuickDiscountOption[],
});

const priceDiscountLabel = computed(() =>
  formatPriceDiscountLabel(Number(data.value?.price_discount ?? 100)),
);

const canPercentAdjust = computed(() => {
  return (
    Number(data.value?.is_pay) !== 1 &&
    Number(data.value?.store?.enable_order_price_percent_adjust) === 1
  );
});

async function reloadOrder() {
  if (!data.value?.id) return;
  data.value = await getOrderInfo(data.value.id);
}

async function openOrderPercentAdjust() {
  await reloadOrder();
  const discount = Number(data.value?.price_discount ?? 100);
  percentAdjustDrawerApi.setData({
    stage: 'post_order',
    priceDiscount: discount,
    price_discount: discount,
    productOrderId: data.value.id,
    quickOptions: normalizeQuickOptions(priceAdjustMeta.value.quickOptions),
    onSuccess: reloadOrder,
  });
  percentAdjustDrawerApi.open();
}

async function clearOrderPriceDiscount() {
  if (!data.value?.id) return;
  await adjustOrderPercent({
    product_order_id: data.value.id,
    price_discount: 100,
  });
  await reloadOrder();
}

async function loadPriceAdjustMeta() {
  const cfg = await getOrderPriceAdjustConfig();
  priceAdjustMeta.value = {
    scope: cfg?.order_price_adjust_scope === 'both' ? 'both' : 'sale_only',
    quickOptions: normalizeQuickOptions(cfg?.order_discount_quick_options),
  };
}

loadPriceAdjustMeta();

function openOrderTrace() {
  if (!data.value?.id) {
    return;
  }
  traceDrawerApi.setData({
    scene: 'product',
    order_id: data.value.id,
    order_no: data.value.order_no,
  });
  traceDrawerApi.open();
}

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
    if (isOpen) {
      const { values, id } = modalApi.getData<Record<string, any>>();
      if (id) {
        getOrderInfo(id).then((res) => {
          data.value = res;
          deliveryMethod.value = data.value.delivery_method;
          getExpressDetail();
        });
      }
      if (values) {
        data.value = values;
        deliveryMethod.value = data.value.delivery_method;
        getExpressDetail();
      }
    }
  },
});

async function getExpressDetail() {
  expressDetail.value = await expressDetailByOrderId({
    order_id: data.value.id,
  });
}

/**
 * 获取物流信息标签颜色
 * @param status
 */
function getColor(status: any) {
  switch (status) {
    case '在途': {
      return '';
    }
    case '揽收': {
      return 'orange';
    }
    case '派件': {
      return 'blue';
    }
    case '签收': {
      return 'green';
    }
    default: {
      return '';
    }
  }
}

const orderTypeMap = {
  1: '处方订单',
  2: '预约购药订单',
  3: '商城处方订单',
};

const prescriptionStatusMap: Record<number, string> = {
  0: '待审核',
  1: '已审核',
  2: '已驳回',
  3: '已过期',
};

const showPrescriptionStatus = computed(() => {
  const row = data.value;
  if (!row?.p_id || row.order_type === 2 || row.order_type === 3) {
    return false;
  }
  return row.prescription?.status != null;
});

function prescriptionStatusText() {
  const status = data.value?.prescription?.status;
  return prescriptionStatusMap[Number(status)] ?? '未知';
}

function prescriptionStatusColor() {
  const status = Number(data.value?.prescription?.status);
  if (status === 1) return 'green';
  if (status === 2) return 'red';
  if (status === 0) return 'orange';
  return 'default';
}
</script>
<template>
  <Modal class="w-[80%]" title="订单详情">
    <div v-if="data" class="flex flex-col gap-4">
      <Space>
        <Button type="primary" size="small" @click="openOrderTrace">
          查看溯源
        </Button>
      </Space>
      <h3 class="mt-4">订单信息</h3>
      <Descriptions
        :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
        bordered
        class="mt-4"
      >
        <Descriptions.Item label="订单号">
          {{ data.order_no }}
        </Descriptions.Item>
        <Descriptions.Item label="订单类型">
          {{ orderTypeMap[data.order_type] || '其他' }}
        </Descriptions.Item>
        <Descriptions.Item label="总支付价格">
          {{ data.total_pay_price }} 元
        </Descriptions.Item>
        <Descriptions.Item label="物品总价">
          药品：
          <Button
            v-if="canPercentAdjust"
            type="link"
            class="!p-0"
            @click="openOrderPercentAdjust"
          >
            {{ data.items_price }} 元
          </Button>
          <template v-else>{{ data.items_price }} 元</template>
          ， 加工费：{{ data.process_price }} 元
        </Descriptions.Item>
        <Descriptions.Item v-if="priceDiscountLabel" label="价格浮动">
          {{ priceDiscountLabel }}（{{ data.price_discount }}%）
          <Button
            v-if="canPercentAdjust && Number(data.price_discount) !== 100"
            type="link"
            size="small"
            @click="clearOrderPriceDiscount"
          >
            清除浮动
          </Button>
        </Descriptions.Item>
        <Descriptions.Item label="供货价">
          {{ data.market_price }} 元
        </Descriptions.Item>
        <Descriptions.Item label="运费">
          {{ data.trans_expenses }} 元
        </Descriptions.Item>
        <Descriptions.Item label="是否免邮">
          {{ data.free_ship === 1 ? '是' : '否' }}
        </Descriptions.Item>
        <Descriptions.Item label="状态">
          <Tag v-if="data.status === 0" color="red">待支付</Tag>
          <Tag v-else-if="data.status === 1" color="orange">待发货</Tag>
          <Tag v-else-if="data.status === 2" color="blue">待收货</Tag>
          <Tag v-else-if="data.status === 3" color="purple">待评价</Tag>
          <Tag v-else-if="data.status === 4" color="green">已退款</Tag>
          <Tag v-else-if="data.status === 5" color="pink">退款中</Tag>
          <Tag v-else-if="data.status === 6" color="cyan">已收货</Tag>
          <Tag v-else-if="data.status === 7" color="green">确认收货</Tag>
          <Tag v-else-if="data.status === 8" color="#B22222">拒绝退款</Tag>
          <Tag v-else-if="data.status === 9" color="gray">已取消</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="配送方式">
          {{ deliveryMethod === 0 ? '快递到家' : '药店自提' }}
        </Descriptions.Item>
        <Descriptions.Item label="患者">{{ data.patient }}</Descriptions.Item>
        <Descriptions.Item label="医生">
          {{ data.doctor.name }}
        </Descriptions.Item>
        <Descriptions.Item label="处方来源">
          {{ data.store.name }}
        </Descriptions.Item>
        <Descriptions.Item label="订单来源">
          <Tag v-if="data.is_online === 1" color="blue">在线问诊</Tag>
          <Tag v-else-if="data.is_online === 2" color="green">在线复诊</Tag>
          <Tag v-else color="default">线下就诊</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="处方类型">
          <Tag v-if="data.prescription_type === 1" color="orange">中药</Tag>
          <Tag v-else-if="data.prescription_type === 2" color="blue">西药</Tag>
          <Tag v-else-if="data.prescription_type === 3" color="purple">保健食品</Tag>
          <Tag v-else-if="data.prescription_type === 5" color="pink">产品服务包</Tag>
          <Tag v-else-if="data.prescription_type === 6" color="cyan">非药品</Tag>
          <Tag v-else-if="data.prescription_type === 7" color="geekblue">医疗器械</Tag>
          <Tag v-else>其他</Tag>
        </Descriptions.Item>
        <Descriptions.Item v-if="showPrescriptionStatus" label="处方状态">
          <Tag :color="prescriptionStatusColor()">
            {{ prescriptionStatusText() }}
          </Tag>
        </Descriptions.Item>
      </Descriptions>

      <div class="mt-4">
        <h3>{{ deliveryMethod === 0 ? '收货人' : '就诊人' }}信息</h3>
        <Descriptions
          :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          bordered
          class="mt-4"
        >
          <Descriptions.Item
            :label="deliveryMethod === 0 ? '收货人' : '就诊人'"
          >
            <span v-if="deliveryMethod === 0">{{ data.address?.name }}</span>
            <span v-else>
              {{
                data.express_name || data.patient?.name || data.cancel_remark
              }}
            </span>
          </Descriptions.Item>
          <Descriptions.Item label="联系电话">
            {{ data.address?.mobile || data.patient_mobile }}
          </Descriptions.Item>
          <Descriptions.Item v-if="deliveryMethod === 0" label="配送地址">
            {{
              `${data.address?.province || ''} ${data.address?.region || ''} ${data.address?.detail_address || ''}`
            }}
          </Descriptions.Item>
          <Descriptions.Item v-else label="自提地址">
            {{ `${data.store?.position || ''} ` }}
          </Descriptions.Item>
          <Descriptions.Item label="发货备注">
            {{ data.cancel_remark || '无' }}
          </Descriptions.Item>
        </Descriptions>
      </div>
      <div class="mt-4">
        <h3>订单商品</h3>
        <div v-if="data.prescription_type === 1">
          <span class="mb-3 block font-medium">药品明细</span>
          <div class="flex flex-wrap gap-3">
            <div
              v-for="(item, index) in data.product_order_items"
              :key="index"
              class="tcm-detail-chip w-[220px] max-w-full flex-shrink-0 rounded-lg border border-gray-200 bg-gray-50 p-3 text-sm dark:border-gray-600 dark:bg-gray-900"
            >
              <div class="font-medium">
                【{{ item.drug?.drug_number }}】{{ item.drug_name }}
              </div>
              <div class="mt-1 text-gray-600 dark:text-gray-400">
                数量：*{{ item.number * (item.dosage > 0 ? item.dosage : 1) }}
              </div>
              <div class="mt-1 text-gray-600 dark:text-gray-400">
                供货价：{{
                  item.buy_price != null && item.buy_price !== ''
                    ? `${item.buy_price} 元/g`
                    : '—'
                }}
              </div>
              <div class="mt-1 text-gray-600 dark:text-gray-400">
                售价：{{
                  item.buy_price != null && item.buy_price !== ''
                    ? `${item.price} 元/g`
                    : '—'
                }}
              </div>
            </div>
          </div>
        </div>
        <Card
          v-for="(item, index) in data.product_order_items"
          v-else
          :key="index"
          class="mb-4 mt-5"
        >
          <div class="flex items-center space-x-4">
            <div
              class="mr-6 h-32 w-32 overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800"
            >
              <Image
                :src="item.drug_image || '/img/empty.png'"
                alt="/img/empty.png"
                height="100%"
                width="100%"
              />
            </div>
            <div>
              <h4>{{ item.drug_name }}</h4>
              <p>规格: {{ item.drug.specification || 'g' }}</p>
              <p>数量: {{ item.number }}</p>
              <p>单价: {{ item.price }} 元</p>
              <p>
                厂家:
                {{
                  item.drug
                    ? item.drug.source_info != null
                      ? item.drug.source_info.name
                      : item.drug.source
                    : '暂无'
                }}
              </p>
              <!--              <p>总价: {{ item.total_price }} 元</p>-->
            </div>
          </div>
        </Card>
      </div>
      <div class="mt-4" v-if="data.order_type !== 2 && data.order_type !== 3 && data.prescription.content">
        <h3>处方信息</h3>
        <Descriptions
          :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          bordered
          class="mt-4"
        >
          <Descriptions.Item label="处方编号">
            {{ data.prescription.content.prescription_no }}
          </Descriptions.Item>
          <Descriptions.Item label="诊断">
            {{ data.prescription.content.clinical_diagnose }}
          </Descriptions.Item>
          <Descriptions.Item label="医嘱">
            {{ data.prescription.content.doctor_order }}
          </Descriptions.Item>
          <Descriptions.Item label="开药医生">
            {{ data.prescription.content.doctor.name }}
          </Descriptions.Item>
          <Descriptions.Item label="科室">
            {{ data.prescription.content.doctor.depart.name }}
          </Descriptions.Item>
          <Descriptions.Item label="职称">
            {{ data.prescription.content.doctor.title.name }}
          </Descriptions.Item>
        </Descriptions>
      </div>
      <div v-if="deliveryMethod === 0">
        <div class="mt-4">
          <h3>物流信息</h3>
          <Descriptions
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
            bordered
            class="mt-4"
          >
            <Descriptions.Item label="物流公司">
              {{ expressDetail.express_company_name }}
            </Descriptions.Item>
            <Descriptions.Item label="运单号">
              {{ expressDetail.express_no }}
            </Descriptions.Item>
            <Descriptions.Item label="最新状态">
              {{ expressDetail.state_txt }}
            </Descriptions.Item>
          </Descriptions>
        </div>
        <div class="mt-4">
          <h3>物流追踪</h3>
          <Timeline class="mt-4">
            <Timeline.Item
              v-for="(detail, index) in expressDetail.detail"
              :key="index"
            >
              <Tag :color="getColor(detail.status)">
                {{ detail.status }}
              </Tag>
              <p>{{ detail.detail_at }}</p>
              <p>{{ detail.detail }}</p>
            </Timeline.Item>
          </Timeline>
        </div>
      </div>
    </div>
  </Modal>
  <TraceDrawer />
  <PercentAdjustDrawer />
</template>

<style scoped>
.tcm-detail-chip {
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.ant-descriptions-item-label {
  font-weight: bold;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.space-x-4 > * + * {
  margin-left: 1rem;
}
</style>
