<template>
  <view
    :class="Visible ? 'product-popup open' : 'product-popup close'"
    @touchmove.stop.prevent=""
    @click="closePopup"
  >
    <view class="popup-bg"></view>
    <view class="main" v-on:click.stop>
      <view class="header">
        <image
          :src="
            productModel && productModel.detail
              ? productModel.detail.cover1
              : ''
          "
          mode="aspectFit"
          class="avt"
        ></image>
        <view class="price-color f24">
          <view
            v-if="
              (cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
              userinfo.pkSettleCountry != pkCountry
            "
            >{{ borderunitss
            }}<text class="f36 fb">{{ formatNum(priceTotal2) }}</text
            >({{ currencyIcon()
            }}<text class="f36 fb">{{ formatNum(priceTotal) }}</text
            >)
          </view>
          <view v-else>
            {{ currencyIcon() }}
            <text class="f36 fb">{{ formatNum(priceTotal) }}</text>
          </view>
        </view>
        <view
          class="stock"
          v-if="
            productModel &&
            productModel.detail &&
            productModel.detail.specialArea != 13&&
            cid!=30
          "
        >
          {{ formatNum(achieveTotal) }}
        </view>
        <view
          class="stock"
          v-if="
            productModel &&
            productModel.detail &&
            productModel.detail.specialArea == 13
          "
        >
          BV:{{ formatNum(achieveTotal) }}</view
        >
        <view class="close-btn" @click="closePopup"
          ><text class="icon iconfont icon-guanbi"></text
        ></view>
      </view>
      <view class="body">
        <!--规格-->
        <view v-if="productModel">
          <scroll-view
            scroll-y="true"
            class="specs mt20"
            style="max-height: 600rpx"
          >
            <view class="f28">{{ $t("APP_ADD_6") }}</view>
            <view
              class="specs mt20"
              v-for="(item, index) in productModel.specData"
              :key="index"
            >
              <view class="specs-hd p-20-0">
                <text class="f28 gray3"
                  >{{ item.productName }} *{{ item.quantity }}</text
                >
              </view>
              <view class="specs-list">
                <view
                  class="table-item"
                  v-for="(pitem, pindex) in item.waresItemsParamsList"
                  :key="pindex"
                >
                  <view class="flex-1">
                    <view class="d-c-c ww100 mb10">
                      <image
                        class="table-item-img"
                        :src="pitem.specCover"
                        mode=""
                      ></image>
                      <view class="table-item-name flex-1 text-ellipsis"
                        >{{ pitem.specsName }}
                      </view>
                    </view>
                    <!-- <view class="gray9">{{$t('fn_105')}}:{{pitem.inventoryNum*1>999?'999+':pitem.inventoryNum*1}}</view> -->
                  </view>
                  <view class="table-num-box d-c-c">
                    <view @click.stop="Reducenumber(index, pindex)"
                      ><u-icon
                        name="minus-circle-fill"
                        color="#ff9999"
                        size="34rpx"
                      ></u-icon
                    ></view>
                    <view class="flex-1 tc">{{ pitem.number || 0 }}</view>
                    <view @click.stop="Addnumber(index, pindex)"
                      ><u-icon
                        name="plus-circle-fill"
                        color="#FF0000"
                        size="34rpx"
                      ></u-icon
                    ></view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <view class="btns"
        ><button class="confirm-btn" @click="confirmFunc(form)">
          {{ $t("N_I_192") }}
        </button></view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      /*是否可见*/
      Visible: false,
      /*表单对象*/
      form: {
        detail: {},
        show_sku: {
          sku_image: "",
        },
      },
      /*当前商品总库存*/
      stock: 0,
      /*选择提示*/
      selectSpec: "",
      /*是否打开过多规格选择框*/
      isOpenSpec: false,
      borderunitss: "",
      type: "",
      specAttr: "",
      userinfo: {},
    };
  },
  props: ["isPopup", "productModel", "pkCountry", "cid"],
  onLoad() {},
  mounted() {
    this.borderunitss = uni.getStorageSync("borderUnit");
    this.getInfo();
    console.log(this.borderunitss, "this.borderunitss");
  },
  computed: {
    achieveTotal: function () {
      let self = this;
      let price = 0;
      if (self.productModel && self.productModel.specData) {
        self.productModel.specData.forEach((item, index) => {
          item.waresItemsParamsList.forEach((pitem, pindex) => {
            if (self.productModel.detail.specialArea == 13) {
              price += pitem.number * pitem.assAchieve;
            } else {
              price += pitem.number * pitem.achieveTotal;
            }
          });
        });
      }
      return price;
    },
    priceTotal: function () {
      let self = this;
      let price = 0;
      if (self.productModel && self.productModel.specData) {
        self.productModel.specData.forEach((item, index) => {
          item.waresItemsParamsList.forEach((pitem, pindex) => {
            price += pitem.number * pitem.price;
          });
        });
      }
      return price;
    },
    priceTotal2: function () {
      let self = this;
      let price2 = 0;
      if (self.productModel && self.productModel.specData) {
        self.productModel.specData.forEach((item, index) => {
          item.waresItemsParamsList.forEach((pitem, pindex) => {
            price2 += pitem.number * pitem.borderPrice;
          });
        });
      }
      return price2;
    },
  },
  watch: {
    isPopup: function (n, o) {
      let self = this;
      if (n != o) {
        self.Visible = n;
        if (!this.isOpenSpec) {
          self.isOpenSpec = true;
          self.initShowSku();
        }
      }
    },
  },
  methods: {
    getInfo() {
      let self = this;
      self._get("member/api/member/get-info", {}, (res) => {
        self.userinfo = res.data;
      });
    },
    Addnumber(index, pindex) {
      console.log("Addnumber");
      let self = this;
      let item = self.productModel.specData[index];
      let num = 0;
      item.waresItemsParamsList.forEach((nitem) => {
        num += nitem.number;
      });
      console.log(item);
      let pitem = item.waresItemsParamsList[pindex];
      if (item.quantity <= num) {
        return;
      }
      pitem.number++;
      self.$set(self.productModel.specData, index, item);
    },
    Reducenumber(index, pindex) {
      console.log("Reducenumber");
      let self = this;
      let item = self.productModel.specData[index];
      console.log(item);
      let pitem = item.waresItemsParamsList[pindex];
      if (pitem.number <= 0) {
        return;
      }
      pitem.number--;
      self.$set(self.productModel.specData, index, item);
    },
    /*初始化*/
    initShowSku() {
      let self = this;
      self.isOpenSpec = true;
      // self.productModel.specData.forEach((item, index) => {
      // 	item.waresItemsParamsList.forEach((pitem, pindex) => {
      // 		if (pindex == 0) {
      // 			pitem.number = item.quantity;
      // 		} else {
      // 			pitem.number = 0;
      // 		}
      // 	});
      // });
    },

    /*关闭弹窗*/
    closePopup() {
      this.$emit("close", this.productModel.specData);
    },

    /*确认提交*/
    confirmFunc() {
      if (this.form.productAttributeList != null) {
        for (let i = 0; i < this.form.productSpecArr.length; i++) {
          if (this.form.productSpecArr[i] == null) {
            uni.showToast({
              title: this.$t("w_0126"),
              icon: "none",
              duration: 2000,
            });
            return;
          }
        }
      }
      let flag = true;
      this.productModel.specData.forEach((item, index) => {
        let num = 0;
        item.waresItemsParamsList.forEach((witem) => {
          num += witem.number;
        });
        if (num != item.quantity) {
          flag = false;
          return;
        }
      });
      if (!flag) {
        uni.showToast({
          title: this.$t("w_0126"),
          icon: "none",
        });
        return;
      }
      console.log(this.productModel.specData);
      this.$emit("addCart", this.productModel.specData);
    },

    /*加入购物车*/
    addCart() {
      let self = this;
      let total_num = self.form.show_sku.sum;
      let product_num = this.form.show_sku.sum;
      let productStockId = this.form.show_sku.productStockId;
      if (self.form.detail.spec_type == 20 && productStockId == 0) {
        uni.showToast({
          title: self.$t("w_0126"),
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      let params = Object.assign({}, self.form.detail, {
        shoppingid: "",
        sszq: "",
        num: self.form.show_sku.sum,
        productStockId: self.form.show_sku.productStockId,
        xh: 1,
      });
      self.h_post("api/addShopping", params, function (res) {
        uni.showToast({
          title: res.msg,
          duration: 2000,
        });
        self.$emit("close", null, res.data.cart_total_num);
      });
    },

    /*创建订单*/
    createdOrder() {
      let self = this;
      let product_num = this.form.show_sku.sum;
      let productStockId = this.form.show_sku.productStockId;
      this.form.show_sku.quantity = product_num;
      this.form.show_sku.product_attr = this.specAttr || "";
      this.form.show_sku.product_image = this.form.show_sku.sku_image || "";
      uni.setStorageSync("to_buy", [this.form.show_sku]);
      let jsonarray = [
        {
          productId: this.form.detail.pkid,
          productStockId: productStockId,
          quantity: product_num,
        },
      ];
      uni.setStorageSync("to_buy_confirm", jsonarray);
      this.gotoPage(
        "/pages/order/confirm-order?order_type=buy&specialAreaId=" +
          this.form.specialAreaId
      );
    },
  },
};
</script>

<style lang="scss">
.product-popup {
}

.product-popup .popup-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
}

.product-popup .main {
  position: fixed;
  width: 100%;
  bottom: 0;
  min-height: 200rpx;
  // max-height: 1050rpx;
  background-color: #fff;
  transform: translate3d(0, 980rpx, 0);
  transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
  // bottom: env(safe-area-inset-bottom);
  z-index: 99;
  border-radius: 12rpx;
}

.product-popup.open .main {
  transform: translate3d(0, 0, 0);
  z-index: 99;
}

.product-popup.close .popup-bg {
  display: none;
}

.product-popup.close .main {
  display: none;
  z-index: -1;
}

.product-popup .header {
  height: 200rpx;
  padding: 40rpx 0 10rpx 250rpx;
  position: relative;
  border-bottom: 1px solid #eeeeee;
}

.product-popup .header .avt {
  position: absolute;
  top: 40rpx;
  left: 30rpx;
  width: 180rpx;
  height: 180rpx;
  border: 2px solid #ffffff;
  background: #ffffff;
  border-radius: 12rpx;
}

.product-popup .header .stock {
  font-size: 26rpx;
  color: #999999;
}

.product-popup .close-btn {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  top: 40rpx;
  right: 30rpx;
}

.product-popup .price {
  color: #333333;
  font-weight: bold;
  font-size: 24rpx;
}

.product-popup .price .num {
  padding: 0 4rpx;
  font-size: 40rpx;
}

.product-popup .old-price {
  margin-left: 10rpx;
  font-size: 26rpx;
  color: #999999;
  text-decoration: line-through;
}

.product-popup .body {
  padding: 20rpx 30rpx 39rpx 30rpx;
  // max-height: 600rpx;
  overflow-y: auto;
}

.product-popup .level-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-popup .level-box .key {
  font-size: 24rpx;
  color: #999999;
}

.product-popup .level-box .icon-box {
  width: 48rpx;
  height: 40rpx;
  background: #eee;
}

.product-popup .num-wrap .iconfont {
  color: #666;
}

.product-popup .num-wrap.no-stock .iconfont {
  color: #cccccc;
}

.product-popup .level-box .text-wrap {
  margin: 0 4rpx;
  height: 60rpx;
  border: none;
  background: #ffffff;
}

.product-popup .level-box .text-wrap input {
  padding: 0 10rpx;
  height: 60rpx;
  line-height: 60rpx;
  width: 80rpx;
  font-size: 32rpx;
  text-align: center;
}

.specs .specs-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.specs .specs-list button {
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  font-size: 24rpx;
}

.specs .specs-list button:after,
.product-popup .btns button,
.product-popup .btns button:after {
  height: 72rpx;
  line-height: 72rpx;
  border: 0;
  border-radius: 0;
  margin-bottom: 55rpx;
}

.product-popup .btns .confirm-btn {
  width: 710rpx;
  height: 80rpx;
  background-color: #fb3024;
  border-radius: 40rpx;
  margin: 0 auto;
  margin-bottom: 55rpx;
  color: #ffffff;
  line-height: 80rpx;
  font-size: 32rpx;
}

.btn-checked {
  border: 1rpx solid;
  color: #fff;
  border-color: #fb3024;
  border-radius: 6rpx;
  font-size: 28rpx;
  background-color: #fb3024;
}

.btn-checke {
  border: 1rpx solid #f6f6f6;
  border-radius: 6rpx;
  font-size: 28rpx;
  color: #333333;
  background-color: #f6f6f6;
}

.table-item {
  width: 704rpx;
  min-height: 68rpx;
  background: #f6f6f6;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9rpx 23rpx 9rpx 17rpx;
  box-sizing: border;
  margin-bottom: 15rpx;
}

.table-item-img {
  display: block;
  flex-shrink: 0;
  width: 50rpx;
  height: 50rpx;
  margin-right: 17rpx;
}

.table-item-name {
  font-size: 28rpx;
  color: #333;
}

.table-num-box {
  width: 168rpx;
  height: 50rpx;
  background: #ffffff;
  margin-left: 20rpx;
  border-radius: 50rpx;
  padding: 0 9rpx;
  box-sizing: border-box;
}

.icon.icon-guanbi {
  color: #424242;
  font-size: 26rpx;
}
</style>
