<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();

// groupId

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); // 总折扣价格
let groupInfo = ref({}); // 团检信息
let status = ref(0); // 1个检套餐 2个检自选 3团检套餐 4团检自选
let buyText = ref("立即购买"); // 购买按钮文字
let notice = ref({}); // 体检须知

const GetReadmeDetails = async () => {
  const response = await $api("GetReadme");
  $response(response, () => {
    notice.value = response.data || false;
    if (tabIndex.value == 0) {
    let num = 5;
    buyText.value = "0" + num;
    tabIndex.value = 1;
    let timer = setInterval(() => {
      num--;
      buyText.value = "0" + num;
      if (num == 0) {
        buyText.value = "立即购买";
        clearInterval(timer);
      }
    }, 1000);
    return;
  }
    uni.hideLoading();
  });
};

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

const mountedAction = async () => {
  selectIds.value = $props.itemIds?.split(",") || [];
  console.log($store.user);
  comboId.value = $props.comboId || "";
  personId.value = $store.getUser().person_id || "";
  groupId.value = $props.groupId || "";
  // 团检空项目 - 套餐列表 - 套餐详情 - 自选 - 弹剩余额度提醒 - 团检详情
  //   ｜
  //   自选   - 弹推荐套餐/剩余额度提醒 - 团检详情

  // 团检有项目 - 团检详情 - 自选 - 团检详情

  // comboId && person_id
  // 个检 - 套餐列表 - 套餐详情 - 自选 - 个检详情
  //  ｜
  // 自选 - 弹推荐套餐 - 个检详情

  if (groupId.value) {
    if (comboId.value) {
      // 团检套餐
      status.value = 3;
    } else {
      // 团检自选
      status.value = 4;
    }
  } else {
    if (comboId.value) {
      // 个检套餐
      status.value = 1;
    } else {
      // 个检自选
      status.value = 2;
    }
  }
  console.log(status.value, "1个检套餐 2个检自选 3团检套餐 4团检自选");
  uni.showLoading({
    title: "加载中",
  });
  getBuyInfo(); // 获取购买信息
};

const buy = () => {
  if (tabIndex.value == 0) {
    GetReadmeDetails();
  }
  if (tabIndex.value == 1 && buyText.value == "立即购买") {
    $store.setBuyInfo({
      combo_id: comboId.value,
      person_id: personId.value,
      group_id: groupId.value,
      item_ids: selectIds.value,
      hospital: $store.save_info.hospital,
    });
    $store.setYytjInfo({});
    uni.navigateTo({
      url: "/pages/main/tjyy/tjyy",
    });
  }
};

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, () => {
    uni.hideLoading();
    if (groupId.value && response.data.group_info.length) {
      // 团检
      groupInfo.value = response.data.group_info[0];
      if(response.data.group_info[0].items?.length){
        status.value = 3;
      }
    }
    comboInfo.value = response.data.combo_info;
    itemsInfo.value = response.data.items_info;
    totalPrice.value = response.data.true_price;
  });
};

const addCombo = () => {
  // 增加项目
  let itemIds = $props.itemIds ? $props.itemIds : "";
  let query = "?comboId=" + comboId.value + "&itemIds=" + itemIds;
  if (groupId.value) {
    query += "&groupId=" + groupId.value;
  }
  uni.navigateTo({
    url: "/pages/main/tj/tjzx?" + query,
  });
};

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="status == 1">
        <!-- 1个检套餐 显示套餐信息 -->
        <image
          v-if="comboInfo.img"
          :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.tags"
              :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 v-if="comboInfo.tags2?.length">
            <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="status == 1"
        class="mt-25rpx pt-25rpx b-0 b-t-1 b-solid b-#E1ECEE bettween flex-col text-24rpx"
      >
        <!-- 1个检套餐显示 -->
        <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 v-if="status != 1" class="px-15rpx pt-10rpx">
        <!-- 2个检自选 和 3团检套餐 4团检自选 都要显示头像和名字 -->
        <view class="flex items-center">
          <image
            src="@/static/assets/userm.png"
            class="w-70rpx h-70rpx mr-35rpx"
          />
          <view class="flex items-center grow">
            <text class="text-#707070 text-24rpx">您好，</text>
            <text class="text-#0E0E0E text-32rpx">{{
              groupId ? groupInfo.name : $store.getUser().name
            }}</text>
          </view>
        </view>
        <view v-if="status != 2" class="text-24rpx mt-40rpx">
          <!-- 3团检套餐 4团检自选 都要显示单位部门等信息 -->
          <view class="pb-30rpx">
            <text class="text-#8B8B8B">单位名称：</text>
            <text>{{ groupInfo.group_name }}</text>
          </view>
          <view class="pb-30rpx">
            <text class="text-#8B8B8B">部门名称：</text>
            <text>{{ groupInfo.bumen_name }}</text>
          </view>
          <view
            class="pb-30rpx"
            v-if="groupInfo.combo_name || comboInfo?.combo_name"
          >
            <text class="text-#8B8B8B">套餐名称：</text>
            <text>{{ groupInfo.combo_name || comboInfo?.combo_name }}</text>
          </view>
          <view>
            <text class="text-#8B8B8B">体检额度：</text>
            <text>{{ groupInfo.tongshou_xiane }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="pb-300rpx">
      <view class="flex items-center justify-around px-30rpx mt-30rpx">
        <text
          v-if="status == 1 || status == 3"
          @click="tabIndex = 0"
          :class="tabIndex == 0 ? 'active' : ''"
          class="text-30rpx text-#2E2E2E"
          >套餐内容</text
        >
        <text
          v-else
          @click="tabIndex = 0"
          :class="tabIndex == 0 ? 'active' : ''"
          class="text-30rpx text-#2E2E2E"
          >自选内容</text
        >
        <text
          @click="GetReadmeDetails"
          :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="comboInfo?.items?.length" 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="groupInfo?.items?.length" class="mb-20rpx">
          <!-- 套餐 -->
          <view class="text-#2E2E2E text-30rpx center mb-20rpx"
            >套餐项目（{{ groupInfo?.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 groupInfo?.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
          style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04)"
          class="rounded-15rpx mt-20rpx bg-#fff py-40rpx px-14rpx box-border flex-col flex"
        >
          <view class="text-#2E2E2E text-30rpx font-500 text-center">
            体检须知
          </view>
          <view>
            <image
              class="w-5rpx h-26rpx"
              src="@/static/assets/slices/tjcol2x.png"
            ></image>
            体检须知
          </view>

          <view
            class="flex flex-justify-around text-#111111 text-28rpx pt-24rpx pb-50rpx"
          >
            <view class="flex flex-col flex-items-center">
              <image
                class="w-80rpx h-80rpx"
                src="@/static/assets/slices/xgtc.png"
              ></image>
              选购套餐
            </view>
            <view class="pt-25rpx">
              <image
                class="w-30rpx h-30rpx"
                src="@/static/assets/slices/lt.png"
              ></image>
            </view>
            <view class="flex flex-col flex-items-center">
              <image
                class="w-80rpx h-80rpx"
                src="@/static/assets/slices/yytj.png"
              ></image>
              预约体检
            </view>
            <view class="pt-25rpx">
              <image
                class="w-30rpx h-30rpx"
                src="@/static/assets/slices/lt.png"
              ></image>
            </view>
            <view class="flex flex-col flex-items-center">
              <image
                class="w-80rpx h-80rpx"
                src="@/static/assets/slices/qwty.png"
              ></image>
              前往体检
            </view>
            <view class="pt-25rpx">
              <image
                class="w-30rpx h-30rpx"
                src="@/static/assets/slices/lt.png"
              ></image>
            </view>
            <view class="flex flex-col flex-items-center">
              <image
                class="w-80rpx h-80rpx"
                src="@/static/assets/slices/lqbg.png"
              ></image>
              领取报告
            </view>
          </view>
          <view class="pb-40rpx">
            <image
              class="w-5rpx h-26rpx"
              src="@/static/assets/slices/tjcol2x.png"
            ></image>
            体检注意事项
          </view>
          <view v-html="notice.content"> </view>
        </view>
      </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 class="flex">
        <button
          @click="addCombo()"
          class="bg-#ED6907 text-30rpx text-#fff rounded-l-full px-34rpx w-200rpx h-full"
        >
          增加项目
        </button>
        <button
          @click="buy()"
          class="bg-#239EA3 text-30rpx text-#fff rounded-r-full px-34rpx w-200rpx h-full"
        >
          {{ buyText }}
        </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>
