<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 $store = useStore();

let comboInfo = ref({}); // 套餐详情
let selectIds = ref([]); // 选中自选ID
let itemsInfo = ref({}); // 自选项目详情
let comboId = ref(""); // 套餐id
let personId = ref(""); // 患者id
let groupId = ref(""); // 团检id
let tabIndex = ref(0); // 标签索引
let totalPrice = ref(0); // 总折扣价格

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

const mountedAction = async () => {
  selectIds.value = $props.itemIds?.split(",") || [];

  comboId.value = $props.comboId || "";
  personId.value = $props.personId || "";
  groupId.value = $props.groupId || "";
  uni.showLoading({
    title: "加载中",
  });
  getBuyInfo(); // 获取购买信息
};

const getBuyInfo = async () => {
  // 获取购买信息
  let obj = {
    item_ids: selectIds.value,
    combo_id: comboId.value,
    hospital: $store.save_info.hospital,
    person_id: personId.value,
    group_id: groupId.value,
  };
  const response = await $api("BuyInfo", obj);
  $response(response, () => {
    comboInfo.value = response.data.combo_info;
    itemsInfo.value = response.data.items_info;
    totalPrice.value = response.data.true_price;
    uni.hideLoading();
  });
};

const addCombo = () => {
  const itemIds = selectIds.value.length > 0 ? selectIds.value.join(",") : "";
  uni.navigateTo({
    url:
      "/pages/main/optionalProject/optionalProject?comboId=" +
      comboId.value +
      "&itemIds=" +
      itemIds,
  });
};

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="px-30rpx box-border comboInfo">
    <view
      class="pt-35rpx rounded-15rpx px-10rpx bg-#fff pb-30rpx box-border b-0 b-t-1 b-solid b-#E1ECEE"
    >
      <view class="flex w-full" v-if="comboId">
        <image
          :src="$image(comboInfo.img)"
          class="w-190rpx h-190rpx mr-37rpx"
          mode="widthFix"
        />
        <view class="flex flex-col grow">
          <text>{{ comboInfo.combo_name }}</text>
          <view class="mt-13rpx mb-18rpx">
            <uni-tag
              v-for="(val, i) in comboInfo.tag"
              :key="i"
              size="small"
              :inverted="true"
              :text="val.text"
              class="mr-8rpx"
              :custom-style="
                'background-color:' +
                val.color +
                ';border-color:' +
                val.color +
                '; color:' +
                val.text_color +
                ';'
              "
            />
          </view>
          <view>
            <text
              v-for="(val, i) in comboInfo.tags2"
              :key="i"
              class="text-#8B8B8B text-20rpx line-height-[1] px-5rpx b-0 b-solid b-#8B8B8B"
              :class="i == comboInfo.tags2.length - 1 ? 'b-r-0' : 'b-r-2'"
              >{{ val }}</text
            >
          </view>
          <view class="mt-20rpx w-full flex items-end">
            <text class="text-18rpx text-#EC3D15">¥</text>
            <text class="text-38rpx text-#EC3D15 mx-10rpx -mb-8rpx">{{
              comboInfo.price
            }}</text>
            <text class="text-18rpx text-#878787 line-through">{{
              comboInfo.original_price
            }}</text>
            <text class="text-18rpx text-#878787 ml-auto mr-55rpx"
              >已售{{ comboInfo.sale_count }}</text
            >
          </view>
        </view>
      </view>
      <view
        v-if="comboId"
        class="mt-25rpx pt-25rpx b-0 b-t-1 b-solid b-#E1ECEE bettween flex-col text-24rpx"
      >
        <view>
          <text class="text-#8B8B8B">适用人群：</text>
          <text class="text-#0E0E0E">{{ comboInfo.crowd_name }}</text>
        </view>
        <view>
          <text class="text-#8B8B8B">适用院区：</text>
          <text class="text-#0E0E0E">{{ comboInfo.hospital_name }}</text>
        </view>
      </view>
    </view>
    <view class="pb-300rpx">
      <view
        class="flex items-center justify-around px-30rpx mt-30rpx"
        v-if="comboId"
      >
        <text
          @click="tabIndex = 0"
          :class="tabIndex == 0 ? 'active' : ''"
          class="text-30rpx text-#2E2E2E"
          >套餐内容</text
        >
        <text
          @click="tabIndex = 1"
          :class="tabIndex == 1 ? 'active' : ''"
          class="text-30rpx text-#2E2E2E"
          >体检须知</text
        >
      </view>
      <view
        v-if="tabIndex == 0"
        class="mt-20rpx bg-#fff py-40rpx px-14rpx box-border flex-col flex"
      >
        <!-- 套餐内容 -->
        <view v-if="comboId" class="mb-20rpx">
          <!-- 套餐 -->
          <view class="text-#2E2E2E text-30rpx center mb-20rpx"
            >套餐项目（{{ comboInfo.items?.length }}项）</view
          >
          <view
            class="flex h-67rpx bg-#239ea3 text-#fff text-26rpx rounded-10rpx"
          >
            <view
              class="min-w-155rpx max-w-155rpx center b-0 b-r-4 b-solid b-#fff"
              >检查项目</view
            >
            <view class="grow center">检查指标意义</view>
          </view>
          <view v-for="(val, index) in comboInfo.items" :key="index">
            <view
              class="flex h-55rpx bg-#9f9f9f text-#fff text-24rpx rounded-10rpx mt-10rpx"
            >
              <view
                class="min-w-155rpx max-w-155rpx center b-0 b-r-4 b-solid b-#fff"
              ></view>
              <view class="grow center"
                >{{ val.keshi_name }}（{{ val.children.length }}）</view
              >
            </view>
            <view
              class="flex bg-#efefef text-#000 text-24rpx rounded-10rpx mt-10rpx"
              v-for="(v, i) in val.children"
              :key="i"
            >
              <view
                class="min-w-155rpx break-all max-w-155rpx center b-0 b-r-4 b-solid b-#fff p-10rpx box-border text-center"
                >{{ v.name }}</view
              >
              <view class="grow center p-10rpx box-border">{{
                v.desc || "-"
              }}</view>
            </view>
          </view>
        </view>

        <view v-if="itemsInfo.items?.length">
          <!-- 自选 -->
          <view class="text-#2E2E2E text-30rpx center mb-20rpx"
            >自选项目（{{ itemsInfo.items?.length }}项）</view
          >
          <view
            class="flex h-67rpx bg-#239ea3 text-#fff text-26rpx rounded-10rpx"
          >
            <view
              class="min-w-155rpx max-w-155rpx center b-0 b-r-4 b-solid b-#fff"
              >检查项目</view
            >
            <view class="grow center">检查指标意义</view>
          </view>
          <view v-for="(val, index) in itemsInfo.items" :key="index">
            <view
              class="flex h-55rpx bg-#9f9f9f text-#fff text-24rpx rounded-10rpx mt-10rpx"
            >
              <view
                class="min-w-155rpx max-w-155rpx center b-0 b-r-4 b-solid b-#fff"
              ></view>
              <view class="grow center"
                >{{ val.keshi_name }}（{{ val.children.length }}）</view
              >
            </view>
            <view
              class="flex bg-#efefef text-#000 text-24rpx rounded-10rpx mt-10rpx"
              v-for="(v, i) in val.children"
              :key="i"
            >
              <view
                class="min-w-155rpx break-all max-w-155rpx center b-0 b-r-4 b-solid b-#fff p-10rpx box-border text-center"
                >{{ v.name }}</view
              >
              <view class="grow center p-10rpx box-border">{{
                v.desc || "-"
              }}</view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="tabIndex == 1">
        <!-- 体检须知 -->
      </view>
    </view>
    <view
      class="fixed bottom-0 left-0 w-full bg-#fff p-30rpx box-border between"
    >
      <view class="grow">
        <view class="flex items-end" v-if="comboId != 0">
          <text class="text-18rpx text-#878787">套餐价格</text>
          <text class="text-21rpx text-#ED6907 mx-20rpx"
            >¥ {{ comboInfo.price }}</text
          >
        </view>
        <view class="flex items-end">
          <text class="text-18rpx text-#878787">自选项目价格</text>
          <text class="text-21rpx text-#ED6907 mx-20rpx"
            >¥ {{ itemsInfo.price || 0 }}</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>
        </view>
      </view>
      <view>
        <nut-button
          @click="addCombo()"
          class="bg-#ED6907 text-30rpx text-#fff rounded-l-full px-34rpx py-15rpx"
          >增加项目</nut-button
        >
        <nut-button
          class="bg-#239EA3 text-30rpx text-#fff rounded-r-full px-34rpx py-15rpx"
          >立即购买</nut-button
        >
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
.comboInfo {
  position: relative;
  z-index: 1;
  &::after {
    content: "";
    width: 100%;
    height: 50rpx;
    background-color: #239ea3;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .active {
    color: #239ea3;
    font-weight: bold;
    position: relative;

    &::after {
      content: "";
      width: 26rpx;
      height: 3rpx;
      background-color: #239ea3;
      position: absolute;
      left: 50%;
      bottom: -10rpx;
      transform: translateX(-50%);
    }
  }
}
</style>
