<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2024年9月11日 19:24:50
 */
import { ref } from "vue";
import { $api, $response, $image } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";

const $props = defineProps({
  hospital: {
    type: String,
    default: "",
  },
  comboId: {
    type: String,
    default: "",
  },
  itemIds: {
    type: String,
    default: "",
  },
});

const $store = useStore();

let leftList = ref({}); // 左侧列表
let tabIndex = ref(""); // 默认选中
let rightLeft = ref([]); // 右侧列表
let selectIds = ref([]); // 选中id列表
let headImg = ref(""); // 头部图片
let packagePrice = ref(0); //套餐折扣价格
let packageOriginalPrice = ref(0); //套餐原始价格
let optionalPrice = ref(0); //自选折扣价格
let optionalOriginalPrice = ref(0); //自选原始价格
let totalPrice = ref(0); // 总折扣价格
let totalOriginalPrice = ref(0); // 总原始价格
let total = ref(0); // 总项目数

const getAllItems = async (e) => {
  // 获取全部项目
  const response = await $api("GetAllItems", {
    search: e?.value,
  });
  $response(response, () => {
    leftList.value = response.data.list;
    if (Object.keys(leftList.value).length) {
      let keys = Object.keys(leftList.value);
      tabIndex.value = keys[0];
      rightLeft.value = leftList.value[keys[0]].children;
      headImg.value = leftList.value[keys[0]].head_img;
    }
  });
};

const getBuyInfo = async () => {
  const response = await $api("BuyInfo", {
    item_ids: selectIds.value,
    hospital: $props.hospital,
    combo_id: $props.comboId,
  });
  $response(response, () => {
    packagePrice.value = response.data.combo_info.price;
    packageOriginalPrice.value = response.data.combo_info.original_price;
    optionalPrice.value = response.data.items_info.price;
    optionalOriginalPrice.value = response.data.items_info.original_price;
    totalPrice.value = response.data.true_price;
    totalOriginalPrice.value = response.data.original_price;
    total.value = response.data.pay_item_count;
  });
};

const mountedAction = () => {
  selectIds.value = $props.itemIds?.split(",") || [];
  getAllItems(); // 获取全部项目
  getBuyInfo(); // 获取购买信息
};

const config_ref = ref(null);
const configRef = (e) => {
  if (!config_ref.value) {
    config_ref.value = e;
    mountedAction();
  }
};

onShow(() => {
  if (!!config_ref.value) {
    mountedAction();
  }
});
</script>
<template>
  <view>
    <view v-if="!!$store.config">
      <view :ref="configRef"></view>
    </view>
  </view>
  <view class="bg-#d8edf2">
    <uni-search-bar
      class="search"
      radius="100"
      placeholder="请输入关键字搜索"
      @clear="getAllItems()"
      @cancel="getAllItems()"
      @confirm="getAllItems"
    />
  </view>
  <view class="mt-20rpx flex min-h-100%">
    <view class="min-w-214rpx max-w-214rpx mr-20rpx h-100% text-center">
      <view
        class="w-100% rounded-r-full text-#0E0E0E text-25rpx px-20rpx w-100% center h-84rpx box-border"
        v-for="(item, index) in leftList"
        :key="index"
        :class="{
          'bg-gradient-to-r from-#edf6f5 to-#bbdfe2': tabIndex == index,
        }"
        @click="
          (tabIndex = index),
            (rightLeft = item.children),
            (headImg = item.head_img)
        "
      >
        {{ item.title }}
      </view>
    </view>
    <view class="grow h-100% bg-#fff">
      <image class="w-full" mode="widthFix" :src="$image(headImg)"></image>
      <view
        v-for="(item, index) in rightLeft"
        :key="index"
        :class="{
          '!b-0': index == rightLeft.length - 1,
        }"
        class="flex justify-between center py-30rpx px-20rpx b-b-1px b-b-solid b-b-#e5e5e5"
        @click="
          () => {
            if (selectIds.includes(item.id)) {
              selectIds.splice(selectIds.indexOf(item.id), 1);
            } else {
              selectIds.push(item.id);
            }
            getBuyInfo();
          }
        "
      >
        <text class="w-40% text-#0E0E0E text-25rpx">{{ item.title }}</text>
        <view class="w-58% items-end flex justify-between">
          <text class="text-#EC3D15 text-26rpx">¥ {{ item.price }}</text>
          <text class="text-#9e9d9d text-20rpx line-through"
            >¥ {{ item.original_price }}</text
          >
          <view
            :class="{
              '!bg-#EEA61E !b-#EEA61E': selectIds.includes(item.id),
            }"
            class="w-24rpx h-24rpx b-1 b-solid b-#DCDCDC bg-#F8F8F8 rounded-3rpx center"
          >
            <image
              v-if="selectIds.includes(item.id)"
              class="w-20rpx"
              src="@/static/assets/select.png"
              mode="widthFix"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
  <view
    class="fixed bottom-0 left-0 w-100% h-135rpx bg-#fff px-20rpx py-30rpx box-border items-center flex justify-between"
  >
    <text
      class="text-26rpx text-#121212 b-r-1 b-r-solid b-#8D9698 pr-12rpx mr-12rpx min-w-120rpx max-w-120rpx"
    >
      您需付费 \n{{ total }}个项目
    </text>
    <view class="grow">
      <view class="flex items-end">
        <text class="text-18rpx text-#878787">套餐价格</text>
        <text class="text-21rpx text-#ED6907 mx-20rpx"
          >¥ {{ packagePrice }}</text
        >
        <text class="text-18rpx text-#878787 line-through"
          >¥ {{ packageOriginalPrice }}</text
        >
      </view>
      <view class="flex items-end">
        <text class="text-18rpx text-#878787">自选项目价格</text>
        <text class="text-21rpx text-#ED6907 mx-20rpx"
          >¥ {{ optionalPrice }}</text
        >
        <text class="text-18rpx text-#878787 line-through"
          >¥ {{ optionalOriginalPrice }}</text
        >
      </view>
      <view class="flex items-end">
        <text class="text-18rpx text-#ED6907">合计费用</text>
        <text class="text-24rpx text-#ED6907 ml-20rpx mr-5rpx">¥</text>
        <text class="text-36rpx text-#ED6907 mr-20rpx font-bold">{{
          totalPrice
        }}</text>
        <text class="text-18rpx text-#878787 line-through"
          >¥ {{ totalOriginalPrice }}</text
        >
      </view>
    </view>
    <button
      type="primary"
      class="text-#F8F8F8 w-240rpx h-hull rounded-full !bg-#239EA3 !mx-0 text-30rpx"
    >
      确定
    </button>
  </view>
</template>
<style scoped>
.search > .uni-searchbar__box {
  justify-content: flex-start !important;
}
</style>
