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

let groupInfo = ref({});

const mountedAction = () => {
  groupInfo.value = $store.getGroupInfo();
  console.log(groupInfo.value);
};

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

onShow(() => {
  if (!!config_ref.value) {
    mountedAction();
  }
});

const toDetails = (type) => {
  let url = "";
  if(type == 1){
    url = "/pages/main/combo/combo?groupId=" + groupInfo.value.group_id;
  }else{
    url = "/pages/main/tj/tjzx?groupId=" + groupInfo.value.group_id;
  }
  uni.navigateTo({
    url: url,
  });
};
</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="px-15rpx pt-10rpx">
        <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">{{ groupInfo.name }}</text>
          </view>
        </view>
        <view class="text-24rpx mt-40rpx">
          <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">
            <text class="text-#8B8B8B">套餐名称：</text>
            <text>{{ groupInfo.combo_name }}</text>
          </view>
          <view>
            <text class="text-#8B8B8B">体检额度：</text>
            <text>{{ groupInfo.tongshou_xiane }}</text>
          </view>
        </view>
      </view>
      <!-- <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 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="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="mt-30rpx pt-35rpx px-25rpx pb-200rpx box-border bg-#fff">
      <view v-if="groupInfo.tongshou_xiane" class="mb-70rpx bg-#FFF8EB text-center text-#DA9616 text-24rpx py-22rpx">
        <text>本次团队体检您有</text>
        <text class="text-#239EA3">{{ groupInfo.tongshou_xiane }}元</text>
        <text>体检额度</text>
        <br />
        <text>我们提供如下两种方式供您自由选择</text>
      </view>
      <view>
        <view class="py-30rpx pl-50rpx pr-130rpx between box-border rounded-15rpx shadow-[0px_1rpx_4rpx_0px_rgba(0,164,172,0.16)]" @click="toDetails(1)">
          <view class="center w-82rpx h-82rpx">
            <image class="w-40rpx h-40rpx" src="@/static/assets/taocan.png" />
          </view>
          <text class="text-#000000 text-32rpx">按套餐选择</text>
          <uni-icons
            type="right"
            color="#595757"
            size="26"
          ></uni-icons>
        </view>
        <view class="py-30rpx mt-70rpx pl-50rpx pr-130rpx between box-border rounded-15rpx shadow-[0px_1rpx_4rpx_0px_rgba(0,164,172,0.16)]" @click="toDetails(2)">
          <view class="center w-82rpx h-82rpx">
            <image class="w-40rpx h-40rpx" src="@/static/assets/xiangmu.png" />
          </view>
          <text class="text-#000000 text-32rpx">按项目选择</text>
          <uni-icons
            type="right"
            color="#595757"
            size="26"
          ></uni-icons>
        </view>
      </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>
