<template>
  <view>
    <div class="header">
      <div
        class="searchBox"
        :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
      >
        <div class="searchBox_left" @click="back">
          <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
        </div>
        <div class="searchBox_mid">购物车({{ shopCarTotal }})</div>
        <div class="searchBox_right">
          <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="deleteIcon" @click="deleteItem">
        <u-icon name="trash" size="50rpx"></u-icon>
      </div>

      <div class="goodsList">
        <div
          class="goodsItem"
          v-for="(item, index) in shopCarList"
          :key="item.id"
        >
          <div class="goodsItem_left" @click="changeChecked(item, index)">
            <image
              v-if="!item.checked"
              src="http://192.168.0.172:5500/7.15/shop_checked1.png"
            ></image>
            <image
              v-if="item.checked"
              src="http://192.168.0.172:5500/7.15/shop_checked2.png"
            ></image>
          </div>
          <div class="goodsItem_right">
            <div class="goodsItem_msg">
              <div class="goodsItem_msg_img">
                <image :src="picUrl + item.commodity_goods_info.commodity_pic">
                </image>
              </div>
              <div class="goodsItem_msg_right">
                <div class="goodsItem_msg_right_tit">
                  {{ item.commodity_goods_info.goods_name }}
                </div>
                <div class="goodsItem_msg_right_subTit">
                  {{ item.commodity_goods_info.goods_intro }}
                </div>
                <div class="goodsItem_msg_right_msg">
                  <div class="goodsItem_msg_right_msg_left">
                    <span>￥</span>{{ item.commodity_goods_info.sales_price }}
                    <span>/{{ item.commodity_goods_info.goods_unit }}</span>
                  </div>
                  <div class="goodsItem_msg_right_msg_right">
                    <u-number-box
                      v-model="item.count"
                      :asyncChange="true"
                      min="0"
                    >
                      <view
                        slot="minus"
                        class="minus"
                        @click="minus(item, index)"
                      >
                        <u-icon name="minus" size="32" bold></u-icon>
                      </view>
                      <text
                        slot="input"
                        style="width: 80rpx; text-align: center"
                        class="input"
                        >{{ item.count }}</text
                      >
                      <view slot="plus" class="plus" @click="add(item, index)">
                        <u-icon
                          name="plus"
                          color="#FFFFFF"
                          size="32"
                          bold
                        ></u-icon>
                      </view>
                    </u-number-box>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="footer">
        <div class="footer_left">
          <div class="footer_all" @click="allChecked">
            <image
              v-if="!isAllchecked"
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
            >
            </image>
            <image
              v-if="isAllchecked"
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
            >
            </image>
            全选
          </div>
          <div class="footer_total">
            <span>合计</span>
            ￥{{ shopMoney }}
          </div>
        </div>
        <div class="footer_right" @click="submitOrder">结算</div>
      </div>
    </div>

    <div class="empty" v-if="false">
      <image src="http://192.168.0.172:5500/7.15/shop_empty.png"></image>
      <div>
        啥也没有 <br />
        赶紧去shopping吧~
      </div>
    </div>
  </view>
</template>

<script>
import { apiArr } from "../../../api/shop";
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
export default {
  data() {
    return {
      picUrl,
      top: "",
      localHeight: "",
      value: 3,
      type: "error",
      shopCarList: [],
      shopCarTotal: 0,
      shopMoney: 0,
      isAllchecked: false,
    };
  },
  methods: {
    back() {
      NavgateTo("1");
    },
    submitOrder() {
      let arr = [];
      this.shopCarList.forEach((item) => {
        if (item.checked) {
          arr.push(item);
        }
      });

      NavgateTo(`../submitOrder/index?shopCarList=${JSON.stringify(arr)}`);
    },

    getShopCar() {
      request(apiArr.getCar, "POST", {}).then((res) => {
        res.commodity_cart_list.forEach((item) => {
          item.checked = false;
        });
        this.shopCarTotal = res.total;
        this.shopCarList = res.commodity_cart_list;
      });
    },

    // 单个修改
    changeChecked(item, index) {
      this.shopCarList[index].checked = !this.shopCarList[index].checked;
      this.calcTotal();
      // 计算是否全选
      this.isAllchecked = this.shopCarList.every((item) => item.checked);
    },
    // 全选
    allChecked() {
      this.isAllchecked = !this.isAllchecked;
      // Bug 修复：将 !this.allChecked 改为 !this.isAllchecked
      if (this.isAllchecked) {
        this.shopCarList.forEach((item) => {
          item.checked = true;
        });
      } else {
        this.shopCarList.forEach((item) => {
          item.checked = false;
        });
      }
      this.calcTotal();
    },
    // 计算金额
    calcTotal() {
      let total = 0;
      this.shopCarList.forEach((item) => {
        console.log(item);

        if (item.checked) {
          total += item.commodity_goods_info.sales_price * item.count;
        }
      });
      this.shopMoney = total;
    },

    minus(item, index) {
      let that = this;
      if (item.count === 1) {
        request(apiArr.deleteCar, "POST", {
          ids: [item.id],
        }).then((res) => {
          that.shopCarList.splice(index, 1);
          that.calcTotal();
        });
      }
      this.shopCarList[index].count = this.shopCarList[index].count - 1;
      this.handleQuantityChange(this.shopCarList[index].count , this.shopCarList[index])
      this.calcTotal();
    },
    add(item, index) {
      this.shopCarList[index].count = this.shopCarList[index].count + 1;
      this.handleQuantityChange(this.shopCarList[index].count , this.shopCarList[index])
      this.calcTotal();
    },

    deleteItem() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定删除所选商品吗",
        success: function (res) {
          if (res.confirm) {
            let ids = [];
            that.shopCarList.forEach((item) => {
              if (item.checked) {
                ids.push(item.id);
                item.checked = false;
              }
            });
            request(apiArr.deleteCar, "POST", {
              ids,
            })
              .then((res) => {
                uni.showToast({
                  title: "删除成功",
                  duration: 2000,
                });
                that.getShopCar();
                that.calcTotal();
              })
              .catch((err) => {
                console.log(err);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    //商品数量变化
    handleQuantityChange(val, item) {
      const params = {
        user_id: uni.getStorageSync("userId"),
        goods_id_and_count: [
          {
            goods_id: item.goods_id,
            count: val,
          },
        ],
      };
      request(apiArr.updateCar, "POST", params).then((res) => {
        console.log(res);
        uni.showToast({
          title: "操作成功！",
          success() {},
        });
      });
    },
  },
  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    this.localHeight = meun.height;
    this.getShopCar();
  },
  onReachBottom() {},
};
</script>

<style>
@import url("./index.css");
</style>