<template>
  <up-popup :show="visible" :round="20" mode="bottom" @close="close">
    <view class="shop_sku">
      <scroll-view scroll-y style="max-height: 60vh; width: 100%">
        <view class="positionabsolute">
          <up-icon
            name="close-circle"
            @click="close"
            color="#000"
            size="25"
          ></up-icon>
        </view>
        <up-swiper :list="specifications.item.images" height="250"></up-swiper>
        <view class="shop_sku_name">{{ specifications.item.name }}</view>
        <view class="shop_sku_description">
          {{
            specifications.item.shortTitle ? specifications.item.shortTitle : ""
          }}
        </view>
        <view v-if="specifications.item.type != 'package'">
          <view
            class="shop_sku_box"
            v-for="(specOptions, specType) in specifications.item
              .selectSpecInfo"
            :key="specType"
          >
            <view class="shop_sku_box_name">
              {{ specType }}
            </view>
            <view class="flex-start">
              <view
                class="shop_sku_box_item"
                v-for="option in specOptions"
                :key="option"
                @click="selectSpec(specType, option)"
                :class="{
                  shop_sku_box_item_selected: isSelected(option),
                }"
              >
                {{ option }}
                <view
                  class="shop_sku_box_item_tip"
                  v-if="
                    specifications.item.result &&
                    specifications.item.result.isSoldStock == 1 &&
                    selectedSpecs[specType] === option
                  "
                >
                  <view>售罄</view>
                </view>
                <view
                  class="shop_sku_box_item_tip"
                  v-if="
                    specifications.item.result == 'kong' &&
                    canSubmit == false &&
                    selectedSpecs[specType] === option
                  "
                >
                  <view>已下架</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 套餐 -->
        <view v-else>
          <view class="shop_sku_box">
            <view
              v-for="(setmenu, setmenuindex) in specifications.item.groupSnap"
              :key="setmenuindex"
            >
              <view class="shop_sku_box_name"
                >{{ setmenu.title }} {{ setmenu.count }} 选{{
                  setmenu.number
                }}</view
              >
              <view class="flex-start">
                <view
                  class="shop_sku_box_item"
                  v-for="(option, goodsid) in setmenu.goods"
                  :key="goodsid"
                  @click="goodsidClick(setmenuindex, option, goodsid)"
                  :class="{
                    shop_sku_box_item_selected: isOptionSelected(
                      setmenuindex,
                      option
                    ),
                  }"
                  :disabled="
                    isMaxSelected(setmenuindex) &&
                    !isOptionSelected(setmenuindex, option)
                  "
                >
                  {{ option.proName }}
                  <text v-if="option.unitName">/{{ option.unitName }}</text>
                  <view
                    class="shop_sku_box_item_tip"
                    v-if="specifications.item.isSoldStock == 1"
                  >
                    <view>售罄</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="shop_bottom">
        <view class="flex-between">
          <view
            class="price"
            v-if="
              specifications.item.type != 'package' &&
              specifications.item.result
            "
          >
            <text class="i">￥</text>
            <view class="num">
              <GoodsPrice
                :limitDiscount="limitTimeDiscountRes"
                :cart="specifications.item.result"
                :shopUserInfo="shopUserInfo"
                :shopInfo="shopInfo"
              ></GoodsPrice>
            </view>

            <text class="num" v-if="false">
              {{
                shopInfo.isVip == 1 && shopInfo.isMemberPrice == 1
                  ? specifications.item.result.memberPrice ||
                    specifications.item.result.salePrice
                  : specifications.item.result.salePrice
              }}
            </text>
            <text class="i" v-if="specifications.item.unitName"
              >/{{ specifications.item.unitName }}</text
            >
            <text v-if="specifications.item.result.suitNum > 1"
              >「{{ specifications.item.result.suitNum
              }}{{ specifications.item.result.unitName }}起点」</text
            >
          </view>
          <view class="price" v-else>
            <text class="i">￥</text>
            <view class="num">
              <GoodsPrice
                :limitDiscount="limitTimeDiscountRes"
                :cart="specifications.item"
                :shopUserInfo="shopUserInfo"
                :shopInfo="shopInfo"
              ></GoodsPrice>
            </view>
            <text class="num" v-if="false">
              {{
                shopInfo.isVip == 1 && shopInfo.isMemberPrice == 1
                  ? specifications.item.memberPrice ||
                    specifications.item.salePrice
                  : specifications.item.salePrice
              }}
            </text>
            <text class="i" v-if="specifications.item.unitName"
              >/{{ specifications.item.unitName }}</text
            >
            <text v-if="specifications.item.suitNum > 1"
              >「{{ specifications.item.suitNum
              }}{{ specifications.item.unitName }}起点」</text
            >
          </view>

          <view
            class="operation-wrap"
            v-if="specifications.item.type != 'package'"
          >
            <view class="btn">
              <up-icon
                name="minus-circle-fill"
                color="#E9AB7A"
                size="25"
                v-if="shopCartNumber > 0"
              ></up-icon>
              <view class="btnClick" @click="shopCart('-')"></view>
            </view>
            <text class="num">{{ shopCartNumber }}</text>
            <view class="btn">
              <up-icon
                name="plus-circle-fill"
                color="#E9AB7A"
                size="25"
              ></up-icon>
              <view class="btnClick" @click="shopCart('+')"></view>
            </view>
          </view>
        </view>
        <view class="shop_skuselect flex-start" v-if="selectedSpecsStr">
          <view class="shop_skuselectname">{{ selectedSpecsStr }}</view>
        </view>
        <view
          v-if="specifications.item.type == 'package'"
          class="addShopping"
          :class="shopCartNumber > 0 && allConditionsSatisfied ? 'active' : ''"
          @click="submitSelection()"
        >
          {{ skuBtnText }}
        </view>
        <view
          v-else
          class="addShopping"
          :class="shopCartNumber > 0 && canSubmit ? 'active' : ''"
          @click="submitSelection()"
        >
          {{ skuBtnText }}
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  specifications: {
    type: Object,
    default: () => {
        return {
            item: {},
        }
    },
  },
});
const visible = defineModel({
  default: false,
});
function close() {
  visible.value = false;
}
const selectedSpecs = ref({});
function isSelected(option) {
  return selectedSpecs.value[specType] === option;
}
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  height: 200px;
  background-color: #f5f5f5;
}
</style>