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

import { Page, useVbenModal } from '@vben/common-ui';
import { useUserStore } from '@vben/stores';

import {
  ContainerOutlined,
  DeleteOutlined,
  MinusOutlined,
  PlusOutlined,
  ShoppingCartOutlined,
} from '@ant-design/icons-vue';
import {
  Badge,
  Button,
  Card,
  CardMeta,
  Col,
  Image,
  InputNumber,
  InputSearch,
  message,
  Popover,
  Row,
  Select,
  SelectOption,
  Tag,
} from 'ant-design-vue';
import { debounce } from 'lodash-es';

import {
  getDrugUseList,
  getProductListDoctorReception,
} from '#/views/doctor/doctor-reception/api';
import { usePrescriptionStore } from '#/store/prescription'

// 使用 Pinia store
const prescriptionStore = usePrescriptionStore();
const { currentDrugs, initializeForModal, updateCurrentDrugs } = prescriptionStore;

// 获取用户信息
const userStore = useUserStore();

// 搜索关键词
const searchKey = ref('');
// 药品类型：1-中药，2-西药
const type = ref(1);
// 当前药品回调函数
const currentDrugsWestern = ref();
// 当前患者ID
const activePatientId = ref(0);
// 药品列表
const drugList = ref([]);
// 已选择的药品列表
const selectList = ref([]);
// 药品使用相关数据
const drugUseNum = ref([]);
const drugUseFrequency = ref([]);
const drugUseType = ref([]);
const drugUnit = ref([]);
const drugTime = ref([]);
const drugUseWay = ref([]);
// 当前选中的药品ID
const selectProductId = ref(0);
const ChatTypeCheck = ref('');
// 缓存前缀（用于区分接诊和在线复诊）
const storagePrefix = ref('');
// 预览图片URL
const previewImage = ref('');

// 图片预览控制
const visible = ref(false);
// 设置图片预览状态
const setVisible = (value, instruction = '') => {
  visible.value = value;
  previewImage.value = instruction;
};

// 本地存储键名（支持前缀区分不同场景）
const storageKey = computed(() => {
  const prefix = storagePrefix.value ? `${storagePrefix.value}-` : '';
  return `${prefix}prescriptionData_${type.value}_${activePatientId.value}`;
});

// 获取当前患者的药品数据
const getCurrentDrugs = () => {
  try {
    // 从localStorage获取数据并解析
    const storedData = localStorage.getItem(storageKey.value);
    selectList.value = storedData ? JSON.parse(storedData) : [];
  } catch (error) {
    console.error('解析处方数据失败:', error);
    selectList.value = [];
  }
};

/**
 * 获取药品列表
 * @param {string} searchText - 搜索关键词
 */
const getDrugListByWesternModal = debounce(async (searchText = '') => {
  if (searchText === '' && type.value === 1) {
    drugList.value = [];
    return;
  }

  getCurrentDrugs();

  try {
    const res = await getProductListDoctorReception({
      store_id: userStore.userInfo?.store_id || 0,
      type: type.value,
      name: searchText,
    });

    drugList.value = res.map((item) => {
      const matched = selectList.value.find((v) => v.index_id === item.id);
      return {
        ...item,
        select_number: matched?.select_number || 0,
        drug: {
          ...item.drug,
          // 如果已选，使用已选的数量，否则默认为1
          number: matched?.number || 1,
          // 如果已选，同步已选的用法
          frequency_id: matched?.frequency_id || item.drug.frequency_id,
          type_id: matched?.type_id || item.drug.type_id,
          time_id: matched?.time_id || item.drug.time_id,
          unit_id: matched?.unit_id || item.drug.unit_id,
        },
      };
    });
  } catch (error) {
    console.error('获取药品列表失败:', error);
    message.error('获取药品列表失败');
  }
}, 300);

/**
 * 获取药品使用方式列表
 */
async function getDrugUseListByWesternModal() {
  try {
    // 调用API获取药品使用方式列表
    const res = await getDrugUseList();

    // 更新各种药品使用相关数据
    drugUseNum.value = res.drug_use_num;
    drugUseFrequency.value = res.drug_use_frequency;
    drugUseType.value = res.drug_use_type;
    drugUnit.value = res.drug_unit;
    drugTime.value = res.drug_time;
    drugUseWay.value = res.drug_use_way;
  } catch (error) {
    console.error('获取药品使用方式列表失败:', error);
    message.error('获取药品使用方式列表失败');
  }
}

/**
 * 添加商品到处方
 * @param {object} data - 商品对象
 */
function addProducts(data) {
  // 查找是否已存在于选择列表中
  const existItem = selectList.value.find((item) => item.index_id === data.id);

  // 创建新的商品对象（避免直接修改原始数据）
  const newProduct = {
    // 索引ID（用于在列表中查找）
    index_id: data.id,
    // 药品ID
    id: data.drug.id,
    // 药品名称
    drug_name: data.drug.drug_name,
    // 药品数量
    number: data.drug.number,
    // 药品使用数量信息
    use_num: drugTime.value.find((item) => item.id === data.drug.time_id),
    // 药品使用类型信息
    use_type: drugUseType.value.find((item) => item.id === data.drug.type_id),
    // 药品使用频率信息
    use_frequency: drugUseFrequency.value.find(
      (item) => item.id === data.drug.frequency_id,
    ),
    // 药品单位信息
    unit: drugUnit.value.find((item) => item.id === data.drug.unit_id),
    // 药品价格
    price: data.price,
    // 药品使用方式ID
    way_id: data.drug?.way_id,
    // 药品使用方式信息
    use_ways: drugUseWay.value.find((item) => item.id === data.drug.way_id),
    // 药品使用时间ID
    time_id: data.drug.time_id,
    // 药品类型ID
    type_id: data.drug.type_id,
    // 药品使用频率ID
    frequency_id: data.drug.frequency_id,
    // 药品单位ID
    unit_id: data.drug.unit_id,
    // 药品图片
    image: data.drug.image,
    // 药品说明书
    instruction: data.drug.instruction,
    // 药品类型
    type: data.drug.type,
  };

  if (existItem) {
    // 已存在，增加数量
    const newNumber = existItem.select_number + 1;

    // 验证数量上限
    if (newNumber > 100 && type.value === 2) {
      message.error(`${existItem.drug_name}数量不能大于100！`);
      return;
    }

    // 更新选中列表中的数量
    selectList.value = selectList.value.map((item) =>
      item.index_id === data.id ? { ...item, select_number: newNumber } : item,
    );

    // 同步更新药品列表中的数量
    syncDrugList(data.id, newNumber);

    // 更新本地存储
    updateSelectStorage();

    // 提示成功
    message.success(`${existItem.drug_name}数量已增加至${newNumber}！`);
  } else {
    // 首次添加，初始化数量为1
    newProduct.select_number = 1;

    // 添加到选中列表
    selectList.value.push(newProduct);

    // 同步更新药品列表
    syncDrugList(newProduct.index_id, 1);

    // 更新本地存储
    updateSelectStorage();

    // 提示成功
    message.success(`已将${newProduct.drug_name}添加到清单中！`);
  }
}

/**
 * 减少商品数量
 * @param {object} data - 商品对象
 */
function propProducts(data) {
  // 查找是否存在于选择列表中
  const existItem = selectList.value.find((item) => item.index_id === data.id);

  // 如果不存在，提示错误并返回
  if (!existItem) {
    message.error(`${data.drug.drug_name}不在清单中！`);
    return;
  }

  // 计算新的数量
  const newNumber = existItem.select_number - 1;

  // 验证数量下限
  if (newNumber < 0) {
    message.error(`${data.drug.drug_name}数量不能小于0！`);
    return;
  }

  if (newNumber === 0) {
    // 数量为0，从清单中移除
    selectList.value = selectList.value.filter(
      (item) => item.index_id !== data.id,
    );

    // 同步更新药品列表
    syncDrugList(data.id, 0);

    // 更新本地存储
    updateSelectStorage();

    // 提示成功
    message.success(`${data.drug.drug_name}已从清单移出！`);
  } else {
    // 更新数量
    selectList.value = selectList.value.map((item) =>
      item.index_id === data.id ? { ...item, select_number: newNumber } : item,
    );

    // 同步更新药品列表
    syncDrugList(data.id, newNumber);

    // 更新本地存储
    updateSelectStorage();

    // 提示成功
    message.success(`${data.drug.drug_name}数量已减少至${newNumber}！`);
  }
}

/**
 * 直接设置商品数量 (用于输入框)
 * @param {object} data - 商品对象
 * @param {number} value - 新数量
 */
function setProductQuantity(data, value) {
  if (value < 0) return;
  if (value === 0) {
    propProducts(data); // 如果设为0，走删除逻辑
    return;
  }

  const existItem = selectList.value.find((item) => item.index_id === data.id);
  if (existItem) {
    selectList.value = selectList.value.map((item) =>
      item.index_id === data.id ? { ...item, select_number: value } : item,
    );
    syncDrugList(data.id, value);
    updateSelectStorage();
  } else {
    // 如果还没添加，先添加一次，然后再设置数量
    addProducts(data);
    // 这里因为addProducts是异步或者状态更新可能滞后，简单处理为再次调用以修正数量，
    // 或者更严谨地构造新对象。鉴于addProducts逻辑较重，这里假设用户是先点加号再改数量。
    // 如果用户直接在输入框输入数字（目前UI没开放未选中的输入框），需要额外处理。
  }
}

/**
 * 更新本地存储中的选择列表
 */
function updateSelectStorage() {
  try {
    localStorage.setItem(storageKey.value, JSON.stringify(selectList.value));
    if (ChatTypeCheck.value === 'chat') {
      // 使用 Pinia store 的方法更新 currentDrugs
      updateCurrentDrugs(selectList.value);
    }
  } catch (error) {
    console.error('保存处方数据失败:', error);
    message.error('保存处方数据失败');
  }
}

/**
 * 同步更新药品列表中的数量
 * @param {number} productId - 药品ID
 * @param {number} number - 新的数量
 */
function syncDrugList(productId, number) {
  // 使用map创建新数组，避免直接修改原数组
  drugList.value = drugList.value.map((item) =>
    item.id === productId ? { ...item, select_number: number } : item,
  );
}

// 使用modal组件
const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    // 调用回调函数
    if (typeof currentDrugsWestern.value === 'function') {
      currentDrugsWestern.value();
    }
    // 关闭modal
    modalApi.close();
    // 提示成功
    message.success('保存成功');
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      // 获取回调函数
      const data = modalApi.getData();
      currentDrugsWestern.value = data?.getCurrentDrugs;

      // 获取参数
      const { values, activePatient_id, isChat, storagePrefix: prefix } = data || {};

      if (values) {
        // 设置缓存前缀
        storagePrefix.value = prefix || '';
        // 设置药品类型
        type.value = values;
        // 设置患者ID
        activePatientId.value = activePatient_id;
        if (isChat === 'chat') {
          ChatTypeCheck.value = isChat;
          // 使用轻量级初始化，不获取患者信息
          initializeForModal(activePatient_id);
        }
        // 获取药品列表
        getDrugListByWesternModal();
        // 获取药品使用方式列表
        getDrugUseListByWesternModal();
      }
    }
  },
});

/**
 * 选择药品
 * @param {number} id - 药品ID
 */
function selectProductChange(id) {
  selectProductId.value = id;
}

/**
 * 选择药品使用方式
 * @param {number} id - 使用方式ID
 */
function selectDrugUseWayChange(id) {
  // 更新药品列表中的使用方式
  drugList.value = drugList.value.map((item) =>
    item.id === selectProductId.value
      ? {
        ...item,
        drug: {
          ...item.drug,
          way_id: id,
        },
      }
      : item,
  );

  // 更新选择列表中的使用方式
  selectList.value = selectList.value.map((item) =>
    item.index_id === selectProductId.value
      ? {
        ...item,
        way_id: id,
        use_ways: drugUseWay.value.find((value) => value.id === id),
      }
      : item,
  );

  // 更新本地存储
  updateSelectStorage();
}

/**
 * 选择药品使用频率
 * @param {number} id - 频率ID
 */
function selectFrequencyChange(id) {
  // 更新选择列表中的频率
  selectList.value = selectList.value.map((item) =>
    item.index_id === selectProductId.value
      ? {
        ...item,
        frequency_id: id,
        use_frequency: drugUseFrequency.value.find(
          (value) => value.id === id,
        ),
      }
      : item,
  );

  // 更新本地存储
  updateSelectStorage();
}

/**
 * 选择药品使用时间
 * @param {number} id - 时间ID
 */
function selectTimeChange(id) {
  // 更新选择列表中的时间
  selectList.value = selectList.value.map((item) =>
    item.index_id === selectProductId.value
      ? {
        ...item,
        time_id: id,
        use_num: drugTime.value.find((value) => value.id === id),
      }
      : item,
  );

  // 更新本地存储
  updateSelectStorage();
}

/**
 * 选择药品使用类型
 * @param {number} id - 类型ID
 */
function selectTypeChange(id) {
  // 更新选择列表中的类型
  selectList.value = selectList.value.map((item) =>
    item.index_id === selectProductId.value
      ? {
        ...item,
        type_id: id,
        use_type: drugUseType.value.find((value) => value.id === id),
      }
      : item,
  );

  // 更新本地存储
  updateSelectStorage();
}

/**
 * 选择药品单位
 * @param {number} id - 单位ID
 */
function selectUnitChange(id) {
  // 更新选择列表中的单位
  selectList.value = selectList.value.map((item) =>
    item.index_id === selectProductId.value
      ? {
        ...item,
        unit_id: id,
        unit: drugUnit.value.find((value) => value.id === id),
      }
      : item,
  );

  // 更新本地存储
  updateSelectStorage();
}

/**
 * 更新药品数量 (单次剂量)
 * @param {number} id - 药品ID
 * @param {number} number - 新的数量
 */
function updateProductNumber(id, number) {
  // 验证数量范围
  if ((number > 100 || number <= 0) && type.value === 2) {
    message.error('数量不能大于100或小于1');
    return;
  }

  // 更新选择列表中的数量
  selectList.value = selectList.value.map((item) =>
    item.index_id === id
      ? {
        ...item,
        number,
      }
      : item,
  );

  // 更新本地存储
  updateSelectStorage();
}
</script>

<template>
  <Modal class="w-[60%]" title="商品列表">
    <!-- 图片预览组件 -->
    <Image
      :preview="{
        visible,
        onVisibleChange: setVisible,
      }"
      :src="previewImage"
      :style="{ display: 'none' }"
      :width="200"
    />
    <Page>
      <Row :gutter="12">
        <!-- 搜索框 -->
        <Col :span="24" class="mb-4">
          <InputSearch
            v-model:value="searchKey"
            enter-button
            placeholder="请输入商品名称或拼音首拼"
            size="large"
            @input="(e) => getDrugListByWesternModal(e.target.value)"
            @search="getDrugListByWesternModal"
          />
        </Col>

        <!-- 西药列表视图 (参考EditModal) -->
        <Col :span="24" v-if="type === 2">
          <div v-if="drugList.length === 0" class="text-center py-8 text-gray-400 bg-gray-50 rounded-lg border border-dashed border-gray-200">
            暂无药品，请搜索添加
          </div>
          <div v-else class="flex flex-col gap-2">
            <Card
              v-for="item in drugList"
              :key="item.id"
              size="small"
              class="drug-row-card"
              :class="{ 'is-selected': item.select_number > 0 }"
              hoverable
            >
              <div class="flex items-center gap-4">
                <!-- 1. 图片区 -->
                <div class="w-12 h-12 flex-shrink-0 cursor-pointer relative group" @click="setVisible(true, item.drug.instruction)">
                  <Image
                    v-if="item.drug?.image"
                    :src="item.drug.image"
                    :width="48"
                    :height="48"
                    class="rounded object-cover"
                    :preview="false"
                  />
                  <div
                    v-else
                    class="w-12 h-12 bg-gray-100 rounded flex items-center justify-center text-gray-400 text-xs"
                  >
                    无图
                  </div>
                  <!-- 说明书图标遮罩 -->
                  <div class="absolute inset-0 bg-black/40 hidden group-hover:flex items-center justify-center rounded transition-all">
                    <ContainerOutlined class="text-white" />
                  </div>
                </div>

                <!-- 2. 信息区 -->
                <div class="flex-1 min-w-0">
                  <div class="flex items-center gap-2 mb-1">
                    <span class="font-bold text-gray-800 truncate" :title="item.drug?.drug_name">{{ item.drug?.drug_name }}</span>
                    <Tag v-if="item.select_number > 0" color="blue" class="m-0 text-xs scale-90">已选</Tag>
                  </div>
                  <div class="text-xs text-gray-500 truncate mb-1" :title="item.drug?.function">
                    {{ item.drug?.pinyin_simple }}
                  </div>
                  <div class="text-red-500 font-medium text-sm">
                    ¥{{ item.price }} <span class="text-gray-400 text-xs font-normal">/ {{ item.drug?.unit?.name || '单位' }}</span>
                  </div>
                </div>

                <!-- 3. 用法选择区 (仅当选中或一直显示但未选中时置灰) -->
                <div class="flex gap-2">
                  <!-- 用法 -->
                  <Select
                    v-model:value="item.drug.type_id"
                    placeholder="用法"
                    style="width: 90px"
                    size="small"
                    @change="selectTypeChange"
                    @dropdown-visible-change="selectProductChange(item.id)"
                  >
                    <SelectOption v-for="val in drugUseType" :key="val.id" :value="val.id">{{ val.name }}</SelectOption>
                  </Select>

                  <!-- 频率 -->
                  <Select
                    v-model:value="item.drug.frequency_id"
                    placeholder="频率"
                    style="width: 100px"
                    size="small"
                    @change="selectFrequencyChange"
                    @dropdown-visible-change="selectProductChange(item.id)"
                  >
                    <SelectOption v-for="val in drugUseFrequency" :key="val.id" :value="val.id">{{ val.name }}</SelectOption>
                  </Select>

                  <!-- 时间 (可选) -->
                  <Select
                    v-model:value="item.drug.time_id"
                    placeholder="时间"
                    style="width: 90px"
                    size="small"
                    @change="selectTimeChange"
                    @dropdown-visible-change="selectProductChange(item.id)"
                  >
                    <SelectOption v-for="val in drugTime" :key="val.id" :value="val.id">{{ val.name }}</SelectOption>
                  </Select>
                </div>

                <!-- 4. 单次剂量 -->
                <div class="flex items-center gap-1 bg-gray-50 p-1 rounded border border-gray-100">
                  <span class="text-xs text-gray-400 px-1">每次</span>
                  <InputNumber
                    v-model:value="item.drug.number"
                    :min="1"
                    :max="100"
                    size="small"
                    style="width: 50px"
                    :controls="false"
                    class="text-center-input"
                    @change="updateProductNumber(item.id, item.drug.number)"
                  />
                  <Select
                    v-model:value="item.drug.unit_id"
                    class="no-border-select"
                    style="width: 50px"
                    size="small"
                    @change="selectUnitChange"
                    @dropdown-visible-change="selectProductChange(item.id)"
                  >
                    <SelectOption v-for="val in drugUnit" :key="val.id" :value="val.id">{{ val.name }}</SelectOption>
                  </Select>
                </div>

                <!-- 5. 数量操作区 -->
                <div class="flex items-center gap-2 pl-2 border-l border-gray-100">
                  <template v-if="item.select_number > 0">
                    <Button size="small" shape="circle" @click="propProducts(item)">
                      <template #icon><MinusOutlined class="text-xs" /></template>
                    </Button>
                    <span class="font-bold w-6 text-center text-primary">{{ item.select_number }}</span>
                    <Button size="small" shape="circle" @click="addProducts(item)">
                      <template #icon><PlusOutlined class="text-xs" /></template>
                    </Button>
                    <Button type="text" danger size="small" @click="propProducts({ ...item, select_number: 1 })">
                      <DeleteOutlined />
                    </Button>
                  </template>
                  <Button v-else type="primary" size="small" ghost @click="addProducts(item)">
                    <template #icon><ShoppingCartOutlined /></template>
                    添加
                  </Button>
                </div>
              </div>
            </Card>
          </div>
        </Col>

        <!-- 中药列表视图 (保持 Grid 但优化样式) -->
        <Col v-else-if="type === 1" v-for="item in drugList" :key="item.id" :span="6">
          <Badge :count="item.select_number" class="w-full mt-4">
            <Card hoverable size="small" class="chinese-drug-grid-card" :class="{ 'is-selected': item.select_number > 0 }">
              <div class="flex flex-col gap-2">
                <div class="flex justify-between items-start">
                  <div>
                    <div class="font-bold text-base text-gray-800">{{ item.drug?.drug_name }}</div>
                    <div class="text-xs text-gray-400 mt-1">{{ item.drug?.pinyin_simple }}</div>
                  </div>
                  <div class="text-right">
                    <div class="text-red-500">¥{{ item.price }}</div>
                    <div class="text-xs text-gray-400">/g</div>
                  </div>
                </div>

                <!-- 煎法选择 -->
                <Select
                  :value="item.drug?.way_id"
                  class="w-full"
                  size="small"
                  placeholder="煎服"
                  @change="selectDrugUseWayChange"
                  @dropdown-visible-change="selectProductChange(item.id)"
                >
                  <SelectOption :value="0">煎服</SelectOption>
                  <SelectOption
                    v-for="(value, index) in drugUseWay"
                    :key="index"
                    :value="value.id"
                  >
                    {{ value.name }}
                  </SelectOption>
                </Select>

                <!-- 数量控制 -->
                <div class="flex items-center justify-between mt-1">
                  <!-- 数量输入 (dose) -->
                  <div class="flex items-center border rounded px-1 flex-1 mr-2 bg-gray-50">
                    <InputNumber
                      v-model:value="item.drug.number"
                      :controls="false"
                      size="small"
                      class="flex-1 !bg-transparent !border-0 shadow-none text-center"
                      @change="updateProductNumber(item.id, item.drug.number)"
                    />
                    <span class="text-gray-400 text-xs px-1">g</span>
                  </div>

                  <!-- 加减按钮 (Action) -->
                  <div class="flex items-center gap-1">
                    <Button v-if="item.select_number > 0" size="small" type="text" danger class="!px-1" @click="propProducts(item)">
                      移除
                    </Button>
                    <Button v-else size="small" type="primary" ghost class="!px-2" @click="addProducts(item)">
                      添加
                    </Button>
                  </div>
                </div>
              </div>
            </Card>
          </Badge>
        </Col>
      </Row>
    </Page>
  </Modal>
</template>

<style lang="scss" scoped>
.drug-row-card {
  transition: all 0.2s;
  border: 1px solid #f0f0f0;

  &.is-selected {
    border-color: #3b82f6;
    background-color: #f0f9ff;
  }

  &:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  :deep(.ant-card-body) {
    padding: 10px 12px;
  }
}

.chinese-drug-grid-card {
  transition: all 0.2s;
  &.is-selected {
    border-color: #10b981;
    background-color: #ecfdf5;
  }
}

.text-center-input {
  text-align: center;
  :deep(input) {
    text-align: center;
  }
}

.no-border-select {
  :deep(.ant-select-selector) {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

.drug-function {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-source {
  font-size: 0.8em;
}
</style>
