<template>
  <view v-if="isInit" class="pb200">
    <view class="top-type f30" v-if="typeList.length > 0">
      <view class="d-s-c">
        <view
          class="radio-check d-c-c"
          :class="{ checked: checkedAll }"
          @click="checkedAllFunc()"
          ><u-icon name="checkbox-mark" color="#fff" size="26rpx"></u-icon
        ></view>
        <view class="gray3">{{ $t("MY_ORD_2") }}</view>
      </view>

      <picker :range="typeList" range-key="specialAreaVal" @change="changeType">
        <view class="gray9" v-if="typeList[typeIndex]">
          {{ typeList[typeIndex].specialAreaVal }}
          <text class="icon iconfont icon-jiantou"></text>
        </view>
      </picker>
    </view>
    <view class="cart-list" v-if="listData && listData.length > 0">
      <view class="cart-item" v-for="(item, index) in listData" :key="index">
        <view
          class="radio-check d-c-c"
          :class="{ checked: item.checked }"
          @click="checkedFunc(index)"
        >
          <u-icon name="checkbox-mark" color="#fff" size="26rpx"></u-icon>
        </view>
        <view class="order-product">
          <view class="product-item">
            <view class="d-b-s mb20">
              <image class="product-img" :src="item.cover1" mode=""></image>
              <view class="product-info d-c d-b-s flex-1">
                <view class="text-ellipsis-2 f28 gray3">{{
                  item.waresName
                }}</view>
                <view class="price-color f24">
                  {{ currencyIcon() }}
                  <text class="f32 fb">{{ formatNum(item.waresPrice) }}</text>
                </view>
              </view>
              <!-- <view class="f24 gray9 ml20">X{{ item.number }}</view> -->
            </view>
            <view class="gray9 mb10 f24" v-if="specialAreas != 30"
              >{{ $t("ENU_TOTAL_V_1") }}:{{ formatNum(item.achieve) }}</view
            >
            <view class="secend-product">
              <view
                :class="{ mb20: pindex != item.productParams.length - 1 }"
                class="d-b-s"
                v-for="(pitem, pindex) in item.productParams"
                :key="pindex"
              >
                <view class="d-s-c">
                  <image
                    :src="pitem.cover"
                    mode=""
                    class="s-product-img f-s-0"
                  ></image>
                  <view class="f28">
                    {{ pitem.productName }}
                    <text class="ml20">{{
                      pitem.waresItemsParamsList[0].specsName
                    }}</text>
                  </view>
                </view>
                <view class="f24 gray9 ml20"
                  >X{{ pitem.waresItemsParamsList[0].quantity }}</view
                >
              </view>
              <view
                :class="{ mb20: windex != item.waresSkuList.length - 1 }"
                class="d-b-s"
                v-for="(witem, windex) in item.waresSkuList"
                :key="windex"
              >
                <view class="d-s-c">
                  <image
                    :src="witem.image"
                    mode=""
                    class="s-product-img f-s-0"
                  ></image>
                  <view class="f28">
                    {{ witem.productName }}
                    <text class="ml20">{{ witem.specValueNames }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="d-b-c mt20">
              <view class="counter-box">
                <view
                  class="d-c-c counter-add"
                  @click="plusReduceShopping(item, 'reduce', index)"
                  ><u-icon name="minus" size="26rpx" color="#666"></u-icon
                ></view>
                <view class="counter-num">{{ item.number }}</view>
                <view
                  class="d-c-c counter-add"
                  @click="plusReduceShopping(item, 'add', index)"
                  ><u-icon name="plus" size="26rpx" color="#666"></u-icon
                ></view>
              </view>
              <u-icon
                @click="deleteCart(item, index)"
                width="34rpx"
                height="36rpx"
                name="/static/icon/product/cart-delete.png"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="cart-null-box" v-else
      ><image class="cart-null" src="/static/bg/cart-null.png" mode=""></image
    ></view>
    <!--底部按钮-->
    <view class="bottom-btns d-e-c f28" v-if="listData.length > 0">
      <view class="total d-s-c flex-1 mr20">
        <view class="cart-img">
          <image src="/static/icon/cart-cart.png" mode=""></image>
          <!-- <view class="cart-num">10</view> -->
        </view>
        <view>
          <view class="price f32">
            {{ currencyIcon() }}
            <text class="num f38 fb">{{ formatNum(cartMoney) }}</text>
          </view>
          <view class="f24 gray3" v-if="specialAreas != 30"
            >{{ $t("ENU_TOTAL_V_1") }}:{{ formatNum(cartAchieve) }}</view
          >
        </view>
      </view>
      <button
        :disabled="payClock()"
        type="primary"
        class="buy-btn theme-btn"
        @click="toPay()"
      >
        {{ $t("w_0312") }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isInit: false,
      typeList: [],
      typeIndex: 0,
      listData: [],
      addLock: false,
      specialAreas: "",
    };
  },
  onShow() {
    this.typeIndex = 0;
    this.getType();
    this.getCartNum();
  },
  computed: {
    cartMoney: function () {
      let self = this;
      let price = 0;
      self.listData.forEach((item) => {
        if (item.checked) {
          price += item.waresPrice * 1 * item.number;
        }
      });
      return price.toFixed(2);
    },
    cartAchieve: function () {
      let self = this;
      let achieve = 0;
      self.listData.forEach((item) => {
        if (item.checked) {
          achieve += item.achieve * 1 * item.number;
        }
      });
      return achieve.toFixed(2);
    },
    checkedAll: function () {
      let self = this;
      let flag = true;
      if (self.listData) {
        self.listData.forEach((item, index) => {
          if (!item.checked) {
            flag = false;
            return;
          }
        });
      } else {
        flag = false;
      }
      return flag;
    },
  },
  methods: {
    checkedAllFunc() {
      let self = this;
      self.listData.forEach((item, index) => {
        self.checkedFunc(index);
      });
    },
    payClock() {
      let self = this;
      let n = true;
      if (self.listData && self.listData.length > 0) {
        self.listData.forEach((item) => {
          if (item.checked) {
            n = false;
            return;
          }
        });
      }
      console.log(n);
      return n;
    },
    getCartNum() {
      let self = this;
      self._get(
        "sale/api/shopping/getShoppingCount",
        {
          specialArea: "",
          pkCountry: "",
        },
        (res) => {
          uni.setTabBarBadge({
            index: 2,
            text: res.data.cont + "",
          });
        }
      );
    },
    checkresorder(deleteList, callback) {
      let self = this;
      let params = {
        specialArea: self.typeList[self.typeIndex].specialArea,
        deleteList: deleteList,
      };
      callback();
      // self._post('/sale/api/order/valid-enough-shop', params, res => {
      // 	if (res.code != 500) {
      // 		callback();
      // 	}
      // });
    },
    toPay() {
      let self = this;
      let arr = [];
      self.listData.forEach((item) => {
        if (item.checked) {
          arr.push(item.shoppingId);
        }
      });
      let callback = function () {
        uni.setStorageSync("cartinfo", arr);
        self.gotoPage(
          "/pages/prefecture/confirm-order?specialArea=" +
            self.typeList[self.typeIndex].specialArea
        );
      };
      if (
        self.typeList[self.typeIndex].specialArea == 1 ||
        self.typeList[self.typeIndex].specialArea == 2
      ) {
        let deleteList = [];
        self.listData.forEach((item) => {
          if (item.checked) {
            deleteList.push({
              shoppingId: item.shoppingId,
            });
          }
        });
        self.checkresorder(deleteList, callback);
        return;
      }
      if (self.typeList[self.typeIndex].specialArea == 21) {
        arr = [];
        self.listData.forEach((item) => {
          if (item.checked) {
            arr.push({
              pkTWares: item.waresSkuList[0].pkTWares,
              pkTWaresSku: item.waresSkuList[0].pkThWaresSku,
              quantity: item.number,
              shoppingId: item.shoppingId,
              source: 2,
            });
          }
        });
        // self.listData.forEach(item => {

        // })
      }
      callback();
    },
    checkedFunc(n) {
      let item = this.listData[n];
      if (item.checked) {
        this.$set(this.listData[n], "checked", false);
      } else {
        this.$set(this.listData[n], "checked", true);
      }
      console.log(item.checked);
    },
    changeType(e) {
      this.typeIndex = e.detail.value;
      this.getData();
    },
    getData() {
      let self = this;
      // self.isInit = false;
      console.log(self.typeList);
      console.log(self.typeIndex);
      let specialArea = self.typeList[self.typeIndex].specialArea;
      self._get(
        "sale/api/shopping/getShopping",
        {
          specialArea: specialArea,
        },
        (res) => {
          if (self.typeList && self.typeList.length > 0) {
            res.data[0].shoppingCartList.forEach((item) => {
              if (!item.checked) {
                item.checked = false;
              }
            });
            self.listData = res.data[0].shoppingCartList;
          }
          self.specialAreas = res.data[0].specialArea;
          // self.isInit = true;
        }
      );
    },
    getType() {
      let self = this;
      self.isInit = false;
      self._get("sale/api/shopping/getShopping", {}, (res) => {
        self.typeList = res.data;
        if (self.typeList && self.typeList.length > 0) {
          self.listData = self.typeList[0].shoppingCartList;
        }
        self.specialAreas = res.data[0].specialArea;
        self.isInit = true;
      });
    },
    deleteCart(e, n) {
      let self = this;
      if (self.addLock) {
        return;
      }
      self.addLock = true;
      self._post(
        "sale/api/shopping/batchDelShopping",
        {
          deleteList: [
            {
              shoppingId: e.shoppingId,
            },
          ],
        },
        (res) => {
          uni.showToast({
            title: self.$t("fn_056"),
            icon: "none",
            success() {
              self.listData.splice(n, 1);
            },
          });
        },
        false,
        () => {
          self.addLock = false;
        }
      );
    },
    plusReduceShopping(e, type, n) {
      let self = this;
      if (self.addLock) {
        return;
      }
      self.addLock = true;
      let num = e.number;
      if (type == "add") {
        num++;
      }
      if (type == "reduce") {
        num--;
        if (num <= 0) {
          num = 1;
        }
      }
      let specialArea = self.typeList[self.typeIndex].specialArea;
      self._post(
        "sale/api/shopping/plusReduceShopping",
        {
          number: num,
          shoppingId: e.shoppingId,
          specialArea: specialArea,
        },
        (res) => {
          self.getCartNum();
          uni.showToast({
            title: self.$t("fn_056"),
            icon: "none",
            success() {
              self.$set(self.listData[n], "number", num);
              // self.getData();
            },
          });
        },
        false,
        () => {
          self.addLock = false;
        }
      );
    },
  },
};
</script>

<style lang="scss">
.f-s-0 {
  flex-shrink: 0;
}

.top-type {
  margin-top: 20rpx;
  width: 750rpx;
  height: 112rpx;
  background: #ffffff;
  box-sizing: border-box;
  padding: 0 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #eeeeee;
}

.radio-check {
  width: 34rpx;
  height: 34rpx;
  background: #ffffff;
  border: 1rpx solid #dddddd;
  border-radius: 50%;
  box-sizing: border;
  position: relative;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.radio-check.checked {
  border: 1rpx solid #fb3024;
  background: #fb3024;
}

.cart-null {
  width: 348rpx;
  height: 218rpx;
  margin: 0 auto;
  margin-top: 180rpx;
}

.icon-jiantou.icon {
  font-size: 32rpx;
  color: #999;
  margin-left: 16rpx;
}

.cart-list {
  background: #ffffff;
}

.cart-item {
  background: #ffffff;
  padding: 30rpx 20rpx 30rpx 24rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-item:last-child {
  border: none;
}

.order-product {
  .product-item {
    .secend-product {
      width: 648rpx;
    }
  }
}

.counter-box {
  width: 168rpx;
  height: 50rpx;
  border-radius: 30rpx;
  border: 1rpx solid #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  color: #333;
}

.counter-num {
  height: 50rpx;
  min-width: 56rpx;
  padding: 0 10rpx;
  box-sizing: border-box;
  border-left: 1rpx solid #eeeeee;
  border-right: 1rpx solid #eeeeee;
  line-height: 50rpx;
  text-align: center;
}

.counter-add {
  height: 50rpx;
  width: 56rpx;
  flex-shrink: 0;
  font-size: 26rpx;
  color: #666;
  font-weight: bold;
}

.bottom-btns {
  position: fixed;
  width: 100%;
  padding: 0 24rpx 0 27rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 96rpx;
  // /* bottom: calc(var(--window-bottom); */
  bottom: var(--window-bottom, 0);
  left: 0;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
  background: #ffffff;
  z-index: 80;
}

.bottom-btns .buy-btn {
  margin: 0;
  padding: 0 24rpx;
  height: 67rpx;
  line-height: 67rpx;
  border-radius: 38rpx;
  // background: linear-gradient(90deg, #FF6B6B 4%, #F6220C 100%);
  font-size: 28rpx;
  flex-shrink: 0;
}
.bottom-btns .buy-btn[disabled][type="primary"] {
  background-color: rgba(#fb3024, 0.6);
}
.bottom-btns .price {
  color: $dominant-color;
}

.cart-img {
  width: 50rpx;
  height: 50rpx;
  position: relative;
  margin-right: 18rpx;

  image {
    width: 50rpx;
    height: 50rpx;
  }
}

.cart-num {
  width: 28rpx;
  height: 28rpx;
  background: #fb3024;
  box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  font-size: 22rpx;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -10rpx;
  right: -14rpx;
}
.radio-check {
  border: 4rpx solid #000;
}
</style>
