<template>
  <my-model ref="model" borderRadius="12" :title="title">
    <template #desc>
      <scroll-view
        scroll-y="true"
        style="height: 50vh"
        class="u-p-30 guigeModel"
      >
        <view class="u-m-b-40" v-for="(item, index) in skus" :key="index">
          <view class="u-text-left">
            <view class="color-333 up-line-1">{{ item.name }}</view>
          </view>
          <view class="u-flex u-m-t-20 u-flex-wrap">
            <view
              class="item"
              @tap="chooseSkd(index, skd)"
              :class="{ active: item.sel === skd.name, disabled: skd.disabled }"
              v-for="(skd, skdIndex) in item.values"
              :key="skdIndex"
            >
              {{ skd.name }}
            </view>
          </view>
        </view>
      </scroll-view>
    </template>
    <template #btn>
      <view class="u-p-30 border-top">
        <view class="u-flex u-p-b-30 u-row-between">
          <view class="price">
            <template v-if="goods && goods.isGrounding">
              <text v-if="is_time_discount"
                >￥{{ returnLimitPrice() }}</text
              >
              <text :class="{ oldPrice: is_time_discount }"
                >￥{{ goods.salePrice }}</text
              >
            </template>
          </view>
          <view class="u-flex">
            <view class="u-flex" @tap="reduce">
              <image
                src="/pagesCreateOrder/static/images/icon-reduce-black.svg"
                class="icon"
                mode=""
              >
              </image>
            </view>
            <view class="u-m-l-30 u-m-r-30 color-333">
              {{ number }}
            </view>
            <view class="u-flex" @tap="add">
              <image
                src="/pagesCreateOrder/static/images/icon-add-black.svg"
                class="icon"
                mode=""
              >
              </image>
            </view>
          </view>
        </view>
        <view class="u-m-t-10">
          <my-button @tap="close" type="cancel" v-if="isDisabled">
            <view class="color-999">已下架/售罄</view>
          </my-button>
          <my-button @tap="confirm" v-else>添加</my-button>
        </view>
      </view>
    </template>
  </my-model>
</template>

<script setup>
import { computed, reactive, ref, watch,inject } from "vue";
import util from "../util.js";
import infobox from "@/commons/utils/infoBox.js";
import myModel from "@/components/my-components/my-model.vue";
import myButton from "@/components/my-components/my-button.vue";
import BigNumber from "bignumber.js";
const yskUtils = inject("yskUtils");
const shopInfo = uni.getStorageSync("shopInfo");
const shopUserInfo = uni.getStorageSync("shopUserInfo");

const props = defineProps({
  goodsData: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: "",
  },
  skuMap: {
    type: Object,
    default: () => {
      return {};
    },
  },
  skus: {
    type: Array,
    default: () => {
      return [];
    },
  },
  limitTimeDiscount: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const emits = defineEmits(["confirm", "updateSku"]);
const model = ref(null);
let number = ref(1);
function to2(number) {
  return Number(number).toFixed(2);
}

const selSku = computed(() => {
  return props.skus
    .reduce((prve, cur) => {
      prve.push(cur.sel);
      return prve;
    }, [])
    .join();
});

const goods = computed(() => {
  return props.skuMap[selSku.value];
});
watch(
  () => goods.value,
  (newval) => {
    number.value = newval.suitNum || 1;
  }
);

const isCanBuy = computed(() => {
  if (!goods.value) {
    return false;
  }
  return util.isCanBuy(goods.value, props.goodsData);
});

/**
 * 全部规格是否都无法使用
 */
const isAllDisabled = computed(() => {
  return props.skus.reduce((prve, cur) => {
    return (
      prve && cur.values.filter((v) => v.disabled).length === cur.values.length
    );
  }, true);
});

/**
 * 规格选择
 * @param {Object} skusIndex
 * @param {Object} skd
 */
function chooseSkd(skusIndex, skd) {
  const { name, disabled } = skd;
  if (disabled) {
    return;
  }
  if (props.skus[skusIndex].sel != name) {
    emits("updateSku", skusIndex, name);
  }
}

/**
 * 禁止操作
 */
const isDisabled = computed(() => {
  return isAllDisabled.value || !isCanBuy.value;
});

/**
 * 数量减少
 */
function reduce() {
  if (isDisabled.value) {
    return;
  }
  const suitNum = goods.value.suitNum || 1;
  const newval = number.value - 1;
  if (newval < suitNum) {
    return infobox.showToast(suitNum + "个起售");
  }
  number.value = newval <= 1 ? 1 : newval;
}

/**
 * 数量增加
 */
function add() {
  if (isDisabled.value) {
    return;
  }
  number.value = number.value + 1;
}

/**
 * 都规格选择确认
 */
function confirm() {
  close();
  if (isDisabled.value) {
    return;
  }
  emits("confirm", goods.value, number.value,is_time_discount.value?1:0);
}

function open() {
  model.value.open();
}

function close() {
  model.value.close();
}


const is_time_discount = computed(() => {
  if (!props.limitTimeDiscount || !props.limitTimeDiscount.id) {
    return false;
  }
  const isCanuse = yskUtils.limitUtils.canUseLimitTimeDiscount(
    goods.value,
    props.limitTimeDiscount,
    shopInfo,
    shopUserInfo,
    "productId"
  );
  console.log('isCanuse');
  console.log( goods.value);
  return isCanuse;

});
function returnLimitPrice() {
  const price = yskUtils.limitUtils.returnPrice({
    goods: goods.value,
    shopInfo: shopInfo,
    limitTimeDiscountRes: props.limitTimeDiscount,
    shopUserInfo: shopUserInfo,
    idKey: "productId",
  });

  return BigNumber(price).times(number.value).toNumber();
}

defineExpose({
  open,
  close,
});
</script>

<style lang="scss">
.border-top {
}

.icon {
  width: 40rpx;
  height: 40rpx;
}

.guigeModel {
  .item {
    color: #666;
    font-size: 24rpx;
    padding: 4rpx 28rpx;
    border: 1px solid #e5e5e5;
    border-radius: 8rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    transition: all 0.2s ease-in-out;

    &.active {
      border-color: $my-main-color;
      color: $my-main-color;
    }

    &.disabled {
      color: #ccc;
      border-color: #eee;
    }
  }
}

.price {
  color: #eb4f4f;
}
.oldPrice {
  color: #999;
  text-decoration: line-through;
}
.border-top {
  border-top: 1px solid #e5e5e5;
}
</style>