<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2024年8月7日 20:05:05
 */
import { ref, computed } from "vue";
import { $image, $api, $response } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";
const $store = useStore();

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

const combo_active = ref("");
const person_active = ref("");
let popup = ref(null);
let selectKey = ref(""); // 整个选择的key
let sortIndex = ref(0); // 排序的索引
let comboIndex = ref(null); // 套餐类型索引
let crowdIndex = ref(null); // 适用人群索引
let priceIndex = ref(null); // 套餐价格索引
let projectIds = ref([]); // 项目id集合
let screenObj = ref({}); // 筛选条件
let combo_select = ref({}); // 套餐筛选条件
let comboIds = ref([]); // 套餐对比列表

const selectItemClick = async (index, key) => {
  // 选择套餐条件
  let data = combo_select.value;
  if (selectKey.value == "sort_list") {
    if (sortIndex.value == index) {
      sortIndex.value = 0;
    } else {
      sortIndex.value = index;
    }
    screenObj.value.combo_sort = data[selectKey.value][index]?.id;
  } else if (selectKey.value == "combo_type") {
    if (comboIndex.value == index) {
      comboIndex.value = null;
      delete screenObj.value.combo_type;
    } else {
      comboIndex.value = index;
      screenObj.value.combo_type = data[selectKey.value][index]?.id;
    }
  } else if (selectKey.value == "combo_crowd") {
    if (crowdIndex.value == index) {
      crowdIndex.value = null;
      delete screenObj.value.combo_crowd;
    } else {
      crowdIndex.value = index;
      screenObj.value.combo_crowd = data[selectKey.value][index]?.id;
    }
  } else {
    if (key == "combo_price") {
      if (priceIndex.value == index) {
        priceIndex.value = null;
        return;
      }
      priceIndex.value = index;
    } else {
      if (projectIds.value?.includes(index)) {
        projectIds.value.splice(projectIds.value.indexOf(index), 1);
      } else {
        projectIds.value.push(index);
      }
    }
    return;
  }
  await getComboList();
  popup.value.close();
};
const selectDone = async () => {
  if (priceIndex.value === null) {
    delete screenObj.value.combo_price;
  } else {
    screenObj.value.combo_price =
      combo_select.value["combo_price"][priceIndex.value]?.id;
  }
  if (projectIds.value.length) {
    screenObj.value.combo_item = projectIds.value;
  } else {
    delete screenObj.value.combo_item;
  }
  await getComboList();
  select_drawer_ref.value.close();
};

const remake = () => {
  // 重置筛选
  delete screenObj.value.combo_price;
  delete screenObj.value.combo_item;
  priceIndex.value = null;
  projectIds.value = [];
};
const getComboSelect = async () => {
  uni.showLoading();
  const response = await $api("GetComboSort");
  uni.hideLoading();
  $response(response, async () => {
    combo_select.value = response.data;
    if ("sort_list" in combo_select.value) {
      selectKey.value = "sort_list";
      sortIndex.value = 0;
    }
    await getComboList();
  });
};

const combo_list = ref({
  list: [],
  hospital: {
    id: 1,
  },
  doctor: {
    id: 0,
  },
  info: {
    name: "",
  },
});

const combo_list_computed = computed(() => {
  let list = [];
  for (let i in combo_list.value.list) {
    let push = false;
    if (!combo_active.value) {
      push = true;
    } else {
      if (combo_list.value.list[i].combo_type === combo_active.value) {
        push = true;
      }
    }
    if (!!push) {
      if (!person_active.value) {
        push = true;
      } else {
        if (combo_list.value.list[i].person_type === person_active.value) {
          push = true;
        } else {
          push = false;
        }
      }
    }
    if (!!push) {
      list.push(combo_list.value.list[i]);
    }
  }
  return list;
});
const getComboList = async () => {
  uni.showLoading();
  let obj = {
    doctor: $store.save.doctor,
    hospital: hospital_active.value,
  };
  if (screenObj.value) {
    obj = Object.assign(obj, screenObj.value);
  }
  const response = await $api("ComboList", obj);
  uni.hideLoading();
  $response(response, () => {
    combo_list.value = response.data;
  });
};

const contrastClick = async (item) => {
  if (comboIds.value.includes(item.combo_id)) {
    comboIds.value.splice(comboIds.value.indexOf(item.combo_id), 1);
  } else {
    if (comboIds.value.length < 3) {
      comboIds.value.push(item.combo_id);
    } else {
      uni.showToast({
        title: "最多对比3个套餐",
        icon: "none",
      });
    }
  }
  $store.setComboContrast(comboIds.value);
};

const hospital_active = ref(0);
const checkHospital = () => {
  let hospital_id = $store.save.hospital;
  comboIds.value = $store.getComboContrast() || [];
  if (!hospital_id) {
    hospital_id = $store.config.hospital[0].id;
  }
  hospital_active.value = hospital_id;
  $store.saveInfo({
    hospital: hospital_id,
  });
  getComboSelect();
};

const tabPatients = () => {
  uni.navigateTo({
    url: "/pages/user/choose/choose",
  });
};

const open = (key) => {
  if (key) {
    // 点击三个筛选条件
    selectKey.value = key;
    popup.value.close();
    let time = setTimeout(() => {
      popup.value.open("top");
      clearTimeout(time);
    }, 400);
  } else {
    // 点击筛选
    popup.value.close();
    selectKey.value = "screen";
    select_drawer_ref.value.open();
  }
};

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

const select_drawer_ref = ref(null);
const selectDrawerRef = (e) => {
  select_drawer_ref.value = e;
};

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

const buyClick = async (item) => {
  let query = "?comboId=" + item.combo_id;
  if ($props.groupId) {
    // 团检把团检ID加上
    query += "&groupId=" + $props.groupId;
  }
  // 个检只要套餐ID
  // 预约 跳转到个检/团检套餐详情
  uni.navigateTo({
    url: "/pages/main/tj/tjxq" + query,
  });
};

const toRouter = () => {
  if (!comboIds.value.length) {
    uni.showToast({
      title: "请先选择套餐",
      icon: "none",
    });
    return;
  }
  uni.navigateTo({
    url: "/pages/main/combo/tcdb",
  });
};
</script>
<template>
  <view>
    <view v-if="!!$store.config">
      <view :ref="configRef"></view>
    </view>

    <view class="header_wrapper">
      <view
        @click="toRouter"
        class="center fixed pt-10rpx box-border left-40rpx bottom-5% rounded-full w-110rpx h-110rpx bg-#239EA3 flex-col"
      >
        <uni-badge :text="comboIds.length" absolute="rightTop" size="small">
          <image
            src="@/static/assets/slices/duibi.png"
            mode="widthFix"
            class="w-42rpx"
          />
        </uni-badge>
        <text class="text-22rpx text-#fff -mt-5rpx">对比</text>
      </view>

      <view v-if="!!combo_list.hospital.id" class="hospital_wrapper">
        <view class="hospital_icon_wrapper">
          <image src="@/static/assets/dingwei@2x.png"></image>
        </view>
        <view class="hospital_name_wrapper">{{
          combo_list.hospital.name
        }}</view>
        <view class="hospital_select_wrapper">
          <image src="@/static/assets/gengduo@2x.png"></image>
        </view>
      </view>
      <view
        v-if="!!combo_list.info.name"
        class="user_wrapper"
        @click="tabPatients()"
      >
        <view class="user_title_wrapper">就诊人：</view>
        <view class="user_name_wrapper">{{ combo_list.info.name }}</view>
        <view v-if="combo_list.info.count > 1" class="user_choose_wrapper">
          <image src="@/static/assets/qiehuan@2x.png"></image>
        </view>
      </view>
    </view>
<!--    <view class="relative z-999 pt-10rpx center">
      <view class="doctor_wrapper">
        <view class="doctor_tip_wrapper">
          <text v-if="!!combo_list.doctor.id">已根据指定医生：</text>
          <text v-else>可选择指定医生：</text>
        </view>
        <view class="doctor_name_wrapper">
          {{ !!combo_list.doctor.id ? combo_list.doctor.name : "前往选择" }}
        </view>
        <view class="doctor_tip_wrapper">（自动筛选匹配套餐）</view>
      </view>
    </view> -->
    <view class="select_wrapper flex" v-if="selectKey">
      <template v-for="(value, key, index) in combo_select" :key="index">
        <view
          @click="open(key)"
          class="flex-1 center text-#2f2f2f text-26rpx line-height-[1]"
          v-if="key != 'combo_price' && key != 'combo_item'"
          :class="{
            '!text-#239EA3': selectKey == key,
          }"
        >
          <view v-if="key == 'sort_list'">
            {{ value[sortIndex]?.name || "综合排序" }}
          </view>
          <view v-if="key == 'combo_type'">
            {{ value[comboIndex]?.name || "套餐类型" }}
          </view>
          <view v-if="key == 'combo_crowd'">
            {{ value[crowdIndex]?.name || "适用人群" }}
          </view>
          <view class="select_item_icon_wrapper">
            <image src="@/static/assets/xuanzegengduo@2x.png"></image>
          </view>
        </view>
      </template>
      <view
        @click="open()"
        :class="{
          '!text-#239EA3': selectKey == 'screen',
        }"
        class="mx-20rpx center text-#2f2f2f text-26rpx"
      >
        <view>筛选</view>
        <view class="select_item_icon2_wrapper">
          <image src="@/static/assets/shaixuan@2x.png"></image>
        </view>
      </view>
    </view>
    <view class="list_wrapper">
      <view
        class="combo_wrapper"
        v-for="(i, k) in combo_list_computed"
        :key="k"
      >
        <view class="combo_info_wrapper">
          <view class="combo_cover_wrapper">
            <image v-if="i.cover" :src="$image(i.cover)"></image>
          </view>
          <view class="combo_content_wrapper">
            <view class="combo_name_wrapper">{{ i.name }}</view>
            <view class="combo_tags_wrapper">
              <view
                class="combo_tag_wrapper"
                v-for="(ii, kk) in i.tag"
                :key="kk"
                :style="{
                  color: ii.text_color,
                  background: ii.color,
                }"
              >
                {{ ii.text }}
              </view>
            </view>
            <view class="combo_desc_wrapper">
              {{ i.tags2?.join(" | ") }}
            </view>
            <view class="combo_price_wrapper">
              <view class="combo_price_box_wrapper">
                <view class="combo_true_price_wrapper">
                  <text class="combo_true_price_icon_wrapper">¥</text>
                  <text class="combo_true_price_number_wrapper">{{
                    i.price
                  }}</text>
                </view>
                <view class="combo_original_price_wrapper"
                  >¥{{ i.original_price }}</view
                >
              </view>
              <view class="combo_count_wrapper">已售{{ i.count }}</view>
            </view>
          </view>
        </view>
        <view class="combo_button_wrapper">
          <view @click="contrastClick(i)" class="combo_pick_button_wrapper">{{
            comboIds.includes(i.combo_id) ? "已加入" : "对比"
          }}</view>
          <view class="combo_buy_button_wrapper" @click="buyClick(i)"
            >预约</view
          >
        </view>
        <view class="combo_line_wrapper"></view>
      </view>
    </view>
    <uni-popup ref="popup" mask-background-color="transparent">
      <view class="pt-260rpx w-full h-100vh" @click="popup.close()">
        <view class="bg-[rgba(0,0,0,0.3)] h-100%">
          <view
            class="bg-#fff"
            :class="
              selectKey != 'sort_list'
                ? 'flex pt20rpx px10rpx pb0 box-border flex-wrap'
                : ''
            "
          >
            <view
              v-for="(val, index) in combo_select[selectKey]"
              :key="index"
              @click.stop="selectItemClick(index)"
              :class="{
                'min-w-23% mx-1% mb-20rpx': selectKey != 'sort_list',
              }"
            >
              <uni-list-item v-if="selectKey == 'sort_list'">
                <template v-slot:body>
                  <text
                    class="text-26rpx"
                    :class="{
                      '!text-#239EA3': sortIndex == index,
                    }"
                    >{{ val.name }}</text
                  >
                </template>
              </uni-list-item>
              <view
                v-else
                class="box-border px-28rpx py-20rpx text-26rpx center line-height-[1] rounded-5rpx"
                :class="{
                  '!bg-#239EA3 !text-#fff':
                    (selectKey == 'combo_type' && comboIndex == index) ||
                    (selectKey == 'combo_crowd' && crowdIndex == index),
                  '!text-#747474 !bg-#e0e0e0':
                    (selectKey == 'combo_type' && comboIndex != index) ||
                    (selectKey == 'combo_crowd' && crowdIndex != index),
                }"
                >{{ val.name }}</view
              >
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <uni-drawer :ref="selectDrawerRef" mode="right" :mask-click="false">
      <view>
        <scroll-view scroll-y="true">
          <view>
            <view class="select_group_wrapper">
              <view class="text-30rpx bold">套餐价格</view>
              <view class="select_group_line_wrapper mt-20rpx">
                <view
                  v-for="(val, index) in combo_select['combo_price']"
                  :key="index"
                  @click.stop="selectItemClick(index, 'combo_price')"
                  class="min-w-31% mx-1% mb-20rpx"
                >
                  <view
                    class="box-border px-20rpx py-20rpx text-22rpx center line-height-[1] rounded-5rpx"
                    :class="{
                      '!bg-#239EA3 !text-#fff':
                        selectKey == 'screen' && priceIndex == index,
                      '!text-#747474 !bg-#e0e0e0':
                        selectKey == 'screen' && priceIndex != index,
                    }"
                    >{{ val.name }}</view
                  >
                </view>
              </view>
            </view>
            <view class="select_group_wrapper">
              <view class="text-30rpx bold">适用人群</view>
              <view class="select_group_line_wrapper mt-20rpx">
                <view
                  v-for="(val, index) in combo_select['combo_item']"
                  :key="index"
                  @click.stop="selectItemClick(val.id, 'combo_item')"
                  class="min-w-31% mx-1% mb-20rpx"
                >
                  <view
                    class="box-border px-20rpx py-20rpx text-22rpx center line-height-[1] rounded-5rpx"
                    :class="{
                      '!bg-#239EA3 !text-#fff':
                        selectKey == 'screen' && projectIds.includes(val.id),
                      '!text-#747474 !bg-#e0e0e0':
                        selectKey == 'screen' && !projectIds.includes(val.id),
                    }"
                    >{{ val.name }}</view
                  >
                </view>
              </view>
            </view>
            <view class="around">
              <view
                class="w-40% text-26rpx h-60rpx center rounded-full bg-#239EA3 text-#fff"
                @click="remake()"
                >重制</view
              >
              <view
                class="w-40% text-26rpx h-60rpx center rounded-full bg-#239EA3 text-#fff"
                @click="selectDone()"
                >确定</view
              >
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-drawer>
  </view>
</template>
<style scoped>
.select_done_wrapper {
  color: #ffffff;
  background: #239ea3;
  width: calc(100% - 60rpx);
  margin: 50rpx auto 0;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border-radius: 6rpx;
}

.select_group_item_wrapper {
  padding: 10rpx 20rpx;
  border: 1rpx solid #239ea3;
  font-size: 22rpx;
  margin: 20rpx 20rpx 0 0;
  border-radius: 6rpx;
  color: #239ea3;
}

.select_group_item_wrapper.active {
  color: #ffffff;
  background: #239ea3;
}

.select_group_line_wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.select_group_wrapper {
  margin: 20rpx;
}

.list_wrapper {
  padding-top: 30rpx;
  height: calc(100vh - 100rpx - 10rpx - 70rpx - 80rpx - 30rpx - 30rpx);
  width: 750rpx;
  overflow-y: auto;
  padding-bottom: 30rpx;
  margin: 0 auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: -moz-scrollbars-none;
  overflow-y: scroll;
}

.list_wrapper::-webkit-scrollbar {
  display: none;
}

.combo_line_wrapper {
  width: 710rpx;
  height: 1rpx;
  background: #e1ecee;
  margin: 15rpx auto 0;
}

.combo_pick_button_wrapper {
  width: 160rpx;
  height: 60rpx;
  background: #e1ecee;
  border-radius: 30rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #239ea3;
  text-align: center;
  line-height: 60rpx;
}

.combo_buy_button_wrapper {
  width: 160rpx;
  height: 60rpx;
  background: #239ea3;
  border-radius: 30rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
  line-height: 60rpx;
  margin-left: 32rpx;
  margin-right: 20rpx;
}

.combo_button_wrapper {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 27rpx;
}

.combo_count_wrapper {
  font-weight: 500;
  font-size: 18rpx;
  color: #8b8b8b;
  line-height: 1;
}

.combo_original_price_wrapper {
  font-weight: 500;
  font-size: 18rpx;
  color: #8b8b8b;
  line-height: 1;
  text-decoration-line: line-through;
  margin-left: 10rpx;
}

.combo_true_price_wrapper {
  font-weight: 500;
  font-size: 18rpx;
  color: #ec3d15;
  line-height: 1;
}

.combo_true_price_number_wrapper {
  font-size: 38rpx;
}

.combo_price_wrapper {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 21rpx;
}

.combo_price_box_wrapper {
  display: flex;
  align-items: end;
}

.combo_wrapper {
  height: 307rpx;
  width: 750rpx;
  margin: 0 auto;
}

.combo_tags_wrapper {
  display: flex;
  align-items: center;
  margin-top: 13rpx;
}

.combo_desc_wrapper {
  font-weight: 500;
  font-size: 20rpx;
  color: #8b8b8b;
  line-height: 1;
  margin-top: 18rpx;
}

.combo_tag_wrapper {
  padding-left: 13rpx;
  padding-right: 13rpx;
  height: 30rpx;
  line-height: 30rpx;
  border-radius: 5rpx;
  font-weight: 400;
  font-size: 18rpx;
  color: #47abd8;
  margin-right: 8rpx;
}

.combo_name_wrapper {
  font-weight: 400;
  font-size: 32rpx;
  color: #0e0e0e;
  line-height: 1;
}

.combo_content_wrapper {
  margin-left: 30rpx;
  width: calc(750rpx - 190rpx - 30rpx - 20rpx - 55rpx);
}

.combo_info_wrapper {
  display: flex;
  align-items: center;
  width: 750rpx;
  margin: 0 auto;
}

.combo_cover_wrapper {
  width: 190rpx;
  height: 190rpx;
  margin-left: 20rpx;
}

.combo_cover_wrapper image {
  width: 190rpx;
  height: 190rpx;
  display: block;
  object-fit: contain;
}

.select_item_line_wrapper {
  position: absolute;
  width: 95rpx;
  height: 10rpx;
  background: linear-gradient(to bottom, #ffffff00, #1b9a9f);
  border-radius: 5rpx;
  bottom: 0;
  left: 50%;
  transform: translateX(calc(-50% - 8px));
  opacity: 0;
}

.select_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 750rpx;
  height: 80rpx;
  background: #f1f7f7;
  box-shadow: 0rpx -1rpx 1rpx 0rpx rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  position: relative;
  z-index: 999;
}

.select_item_icon_wrapper {
  width: 18rpx;
  height: 9rpx;
  margin-left: 9rpx;
  filter: grayscale(100%);
}

.select_item_icon_wrapper image {
  width: 18rpx;
  height: 9rpx;
  display: block;
  object-fit: contain;
}

.select_item_icon2_wrapper {
  width: 26rpx;
  height: 23rpx;
  margin-left: 7rpx;
}

.select_item_icon2_wrapper image {
  width: 26rpx;
  height: 23rpx;
  display: block;
  object-fit: contain;
}

.select_item_name_wrapper {
  font-weight: 400;
  font-size: 26rpx;
  color: #2f2f2f;
  line-height: 1;
}

.select_item_wrapper {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 80rpx;
}

.select_item_wrapper.active .select_item_name_wrapper {
  color: #239ea3;
  font-weight: bold;
}

.select_item_wrapper.active .select_item_icon_wrapper {
  filter: grayscale(0%);
}

.select_item_wrapper.active .select_item_line_wrapper {
  opacity: 1;
}

.doctor_name_wrapper {
  font-weight: 400;
  font-size: 24rpx;
  line-height: 1;
  color: #ffffff;
  border-bottom: 1rpx solid #ffffff;
}

.doctor_tip_wrapper {
  font-weight: 400;
  font-size: 22rpx;
  line-height: 1;
  color: #ffffff;
}

.doctor_wrapper {
  display: flex;
  align-items: center;
  width: 710rpx;
  height: 70rpx;
  background: #239ea3;
  border-radius: 15rpx 15rpx 0rpx 0rpx;
  padding-left: 24rpx;
}

.user_choose_wrapper {
  width: 50rpx;
  height: 50rpx;
  margin-left: 30rpx;
}

.user_choose_wrapper image {
  width: 50rpx;
  height: 50rpx;
  display: block;
  object-fit: contain;
}

.user_title_wrapper {
  font-weight: 400;
  font-size: 28rpx;
  color: #239ea3;
  line-height: 1;
}

.user_name_wrapper {
  font-weight: 400;
  font-size: 28rpx;
  color: #0d0d0d;
  line-height: 1;
}

.user_wrapper {
  height: 80rpx;
  padding-left: 40rpx;
  padding-right: 20rpx;
  background: #ffffff;
  border-radius: 40rpx 0 0 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 750rpx;
  height: 100rpx;
  background: #d8edf2;
  margin: 0 auto;
  position: relative;
  z-index: 999;
}

.hospital_wrapper {
  display: flex;
  align-items: center;
  width: 50%;
}

.hospital_icon_wrapper {
  width: 48rpx;
  height: 48rpx;
  margin-left: 20rpx;
}

.hospital_icon_wrapper image {
  width: 48rpx;
  height: 48rpx;
  display: block;
  object-fit: contain;
}

.hospital_name_wrapper {
  font-weight: 400;
  font-size: 28rpx;
  color: #484747;
  margin-left: 9rpx;
  line-height: 1;
}

.hospital_select_wrapper {
  width: 24rpx;
  height: 14rpx;
  margin-left: 19rpx;
}

.hospital_select_wrapper image {
  width: 24rpx;
  height: 14rpx;
  display: block;
  object-fit: contain;
}
</style>
