<template>
  <view class="bg">
    <view class="header-box" v-if="list && list.length > 0">
      <view class="all-select-box" @click="changeAllSelect">
        <view class="selectBox flex-around" v-if="allSelect">
          <img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png" />
        </view>
        <view class="noSelect" v-else></view>
        <text class="all-select-text">全选</text>
      </view>
      <view class="guanli" @click="guanli">{{ operate }}</view>
    </view>
    <view>
      <!-- 按供应商分组显示商品 -->
      <view
        class="goodBox"
        v-for="(supplierGroup, supplierIndex) in list"
        :key="supplierIndex"
        v-if="supplierGroup.goods && supplierGroup.goods.length > 0"
      >
        <view class="supplier-header">
          <view class="supplier-title-box">
            <view class="supplier-select-box" @click="changeSupplierSelect(supplierGroup)">
              <view class="selectBox flex-around" v-if="isSupplierAllSelected(supplierGroup)">
                <img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png" />
              </view>
              <view class="noSelect" v-else></view>
            </view>
            <view class="title">{{ supplierGroup.supplierName }}</view>
          </view>
        </view>
        <view
          class="goodItem"
          v-for="(goodItem, goodIndex) in supplierGroup.goods"
          :key="goodIndex"
          v-if="goodItem.flag != 0"
        >
          <view
            class="noSelect"
            v-if="!goodItem.is_select"
            @click="changeSelect(goodItem)"
          ></view>
          <view
            class="selectBox flex-around"
            v-else
            @click="changeSelect(goodItem)"
          >
            <img
              src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png"
            />
          </view>
          <image
            :src="showImg(goodItem.specUrl)"
            mode="aspectFill"
            @click="goDetails(goodItem.goodsId)"
          >
          </image>
          <view class="contentBox">
            <view class="title text-overflow">{{ goodItem.goodsName }}</view>
            <view class="subTitle text-overflow"
              >{{ goodItem.specValueOne }}-{{ goodItem.specValueTwo }}</view
            >
            <view class="priceBox flex-between">
              <view class="price">{{ goodItem.salePrice }}</view>
              <view class="quantity-control">
                <view
                  :class="[
                    'quantity-btn',
                    'minus-btn',
                    goodItem.quantity == 1 ? 'disabled' : '',
                  ]"
                  @click="delNum(goodItem)"
                >
                  -
                </view>
                <view class="quantity-input">{{ goodItem.quantity }}</view>
                <view class="quantity-btn plus-btn" @click="addNum(goodItem)">
                  +
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="loseGood" v-if="loseList && loseList.length > 0">
      <view class="title flex-between"
        >失效商品<span @click="delLoseGood('', 1)">清空失效商品</span></view
      >
      <view
        class="goodItem"
        v-for="(goodItem, goodIndex) in loseList"
        :key="goodIndex"
      >
        <view class="noSelect"></view>
        <image :src="showImg(goodItem.specUrl)" mode="aspectFill"></image>
        <view class="contentBox">
          <view class="title text-overflow">{{ goodItem.goodsName }}</view>
          <view class="subTitle text-overflow"
            >{{ goodItem.specValueOne }}-{{ goodItem.specValueTwo }}</view
          >
          <view class="priceBox flex-between">
            <view class="price">{{ goodItem.salePrice }}</view>
            <view class="btn" @click="delLoseGood(goodItem.id, 0)">删除</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 预定按钮 -->
    <view class="orderBox flex-between">
      <view class="priceBox">
        <!-- <view class="selectBox flex-around" v-if="allSelect" @click="changeAllSelect">
					<img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png" alt="">
				</view>
				<view class="noSelect" v-else @click="changeAllSelect"></view>全选 -->
        <span v-if="operate == '管理'">在线付:</span>
        <p v-if="operate == '管理'">￥{{ getAllPrice() }}</p>
      </view>
      <view class="btn" @click="order" v-if="operate == '管理'">提交订单</view>
      <view class="btn" @click="delGood" v-else>删除</view>
    </view>

    <!-- 空状态 -->
    <view
      class="empty-state"
      v-if="getTotalGoodsCount() == 0 && loseList.length == 0"
    >
      <image
        class="empty-icon"
        :src="showImg('/uploads/20250826/empty-cart.png')"
        mode="aspectFit"
      ></image>
      <text class="empty-title">购物车空空如也</text>
      <text class="empty-desc">快去挑选心仪的商品吧</text>
      <view class="empty-btn" @click="goShopping">去逛逛</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      operate: "管理",
      list: [], // 改为按供应商分组的数组
      loseList: [],
      allSelect: false,
    };
  },
  onShow() {
    this.getShoppingList();
    this.allSelect = false;
  },
  methods: {
    getShoppingList() {
      this.Post({}, "/framework/cart/list", "DES")
        .then((res) => {
          const list = res.data || [];
          this.loseList = [];

          // 按供应商分组有效商品
          const supplierGroups = {};
          list.forEach((item) => {
            if (item.effectStatus == 1) {
              this.loseList.push(item);
            } else {
              const supplierId = item.supplierId || "default";
              if (!supplierGroups[supplierId]) {
                supplierGroups[supplierId] = {
                  supplierId: supplierId,
                  supplierName: item.supplierName || "默认供应商",
                  goods: [],
                };
              }
              supplierGroups[supplierId].goods.push(item);
            }
          });

          // 转换为数组格式
          this.list = Object.values(supplierGroups);

          console.log("购物车数据更新:", this.list);
          console.log("失效商品:", this.loseList);
        })
        .catch((err) => {
          console.error("获取购物车数据失败:", err);
          this.list = [];
          this.loseList = [];
        });
    },
    // 管理
    guanli() {
      if (this.operate == "管理") {
        this.operate = "退出管理";
      } else {
        this.operate = "管理";
      }
      console.log(this.operate);
    },
    delNum(item) {
      if (item.quantity <= 1) {
        item.quantity = 1;
        uni.showToast({
          title: "已经最少了，不能再减了",
          icon: "none",
        });
      } else {
        item.quantity -= 1;
        this.updateCart(item);
      }
    },
    addNum(item) {
      item.quantity += 1;
      this.updateCart(item);
    },
    updateCart(item) {
      let that = this;
      that
        .Post(
          {
            cartId: item.id,
            quantity: item.quantity,
          },
          "/framework/cart/updateQuantity",
          "DES"
        )
        .then(function (res) {
          if (res) {
            // that.$toast.clear()
          }
        });
    },
    // 更改选中状态
    changeSelect(item) {
      item.is_select = !item.is_select;
      this.updateAllSelectStatus();
      this.$forceUpdate();
    },
    // 去商品详情
    goDetails(id) {
      uni.navigateTo({
        url: "/subPackages/techan/detail?id=" + id,
      });
    },

    // 去购物
    goShopping() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    // 改变所有选中
    changeAllSelect() {
      this.allSelect = !this.allSelect;
      this.list.forEach((supplierGroup) => {
        supplierGroup.goods.forEach((item) => {
          if (this.allSelect) item.is_select = true;
          else item.is_select = false;
        });
      });
      this.$forceUpdate();
    },
    // 改变供应商全选
    changeSupplierSelect(supplierGroup) {
      const isAllSelected = this.isSupplierAllSelected(supplierGroup);
      supplierGroup.goods.forEach((item) => {
        item.is_select = !isAllSelected;
      });
      this.updateAllSelectStatus();
      this.$forceUpdate();
    },
    // 检查供应商是否全选
    isSupplierAllSelected(supplierGroup) {
      if (!supplierGroup.goods || supplierGroup.goods.length === 0) {
        return false;
      }
      return supplierGroup.goods.every(item => item.is_select);
    },
    // 更新全选状态
    updateAllSelectStatus() {
      let allSelected = true;
      for (let supplierGroup of this.list) {
        for (let goods of supplierGroup.goods) {
          if (!goods.is_select) {
            allSelected = false;
            break;
          }
        }
        if (!allSelected) break;
      }
      this.allSelect = allSelected;
    },
    // 删除失效商品
    delLoseGood(id, index) {
      if (index == 0) {
        // 删除单个失效商品
        uni.showModal({
          title: "确认删除",
          content: "确定要删除这个失效商品吗？",
          success: (res) => {
            if (res.confirm) {
              this.Post(
                {
                  s_id: id,
                  method: "delete",
                },
                `/framework/cart/remove/${id}`,
                "DES"
              )
                .then((res) => {
                  uni.showToast({
                    title: "删除成功",
                    icon: "success",
                  });
                  // 强制刷新数据
                  setTimeout(() => {
                    this.getShoppingList();
                  }, 100);
                })
                .catch((err) => {
                  console.error("删除失效商品失败:", err);
                  uni.showToast({
                    title: "删除失败",
                    icon: "none",
                  });
                });
            }
          },
        });
      } else {
        // 清空所有失效商品
        uni.showModal({
          title: "确认清空",
          content: `确定要清空所有失效商品吗？`,
          success: (res) => {
            if (res.confirm) {
              let ids = [];
              this.loseList.forEach((item) => {
                ids.push(item.id);
              });
              this.Post(
                {
                  s_id: ids.toString(),
                  method: "delete",
                },
                `/framework/cart/remove/${ids.toString()}`,
                "DES"
              )
                .then((res) => {
                  uni.showToast({
                    title: "清空成功",
                    icon: "success",
                  });
                  // 强制刷新数据
                  setTimeout(() => {
                    this.getShoppingList();
                  }, 100);
                })
                .catch((err) => {
                  console.error("清空失效商品失败:", err);
                  uni.showToast({
                    title: "清空失败",
                    icon: "none",
                  });
                });
            }
          },
        });
      }
    },
    // 删除商品
    delGood() {
      let ids = [];
      this.list.forEach((supplierGroup) => {
        supplierGroup.goods.forEach((item) => {
          if (item.is_select == true) {
            ids.push(item.id);
          }
        });
      });

      if (ids.length === 0) {
        uni.showToast({
          title: "请选择要删除的商品",
          icon: "none",
        });
        return;
      }

      uni.showModal({
        title: "确认删除",
        content: `确定要删除选中的${ids.length}件商品吗？`,
        success: (res) => {
          if (res.confirm) {
            this.Post(
              {
                s_id: ids.toString(),
                method: "delete",
              },
              `/framework/cart/remove/${ids.toString()}`,
              "DES"
            )
              .then((res) => {
                uni.showToast({
                  title: "删除成功",
                  icon: "success",
                });
                // 强制刷新数据
                setTimeout(() => {
                  this.getShoppingList();
                }, 100);
                this.operate = "管理"; // 删除后退出管理模式
              })
              .catch((err) => {
                console.error("删除失败:", err);
                uni.showToast({
                  title: "删除失败",
                  icon: "none",
                });
              });
          }
        },
      });
    },
    // 获取总价
    getAllPrice() {
      let allPrice = 0;
      this.list.forEach((supplierGroup) => {
        supplierGroup.goods.forEach((item) => {
          if (item.is_select == true) {
            allPrice += item.salePrice * item.quantity;
          }
        });
      });
      return allPrice.toFixed(2);
    },
    // 结算
    order() {
      let list = [];
      let ids = [];
      this.list.forEach((supplierGroup) => {
        supplierGroup.goods.forEach((item) => {
          if (item.is_select == true) {
            ids.push(item.merchant_id);
            list.push(item);
          }
        });
      });
      // if (Array.from(new Set(ids)).length > 1) {
      // 	uni.showToast({
      // 		title: '请选择同一商户下的商品',
      // 		icon: 'none'
      // 	})
      // 	return;
      // }
      if (list.length == 0) {
        uni.showToast({
          title: "请选择商品",
          icon: "none",
        });
        return;
      }
      this.Post(
        {
          bos: list,
          method: "post",
        },
        `/framework/cart/check-cart-items`,
        "DES"
      )
        .then((res) => {
          if (res.data.canOrder) {
            this.$store.commit("changeOrderSCart", list);
            this.gotoPath("/subPackages/techan/order");
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
            this.getShoppingList();
          }
        })
        .catch((res) => {
          uni.showToast({
            title: "部分商品无法下单，请重新加载购物车",
            icon: "none",
          });
          setTimeout(() => {
            this.getShoppingList();
          }, 800);
        });

      // this.gotoPath('/subPackages/goods/goodsOrder')
    },
    // 获取商品总数量
    getTotalGoodsCount() {
      let count = 0;
      this.list.forEach((supplierGroup) => {
        count += supplierGroup.goods.length;
      });
      return count;
    },
  },
};
</script>

<style scoped lang="scss">
.bg {
  width: 100%;
  min-height: 100vh;
  padding: 0 27rpx 200rpx;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 76rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}

.all-select-box {
  display: flex;
  align-items: center;

  .noSelect {
    width: 37rpx;
    height: 37rpx;
    border-radius: 50%;
    border: 2rpx solid #666666;
    box-sizing: border-box;
    margin-right: 15rpx;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.9);
    }
  }

  .selectBox {
    width: 37rpx;
    height: 37rpx;
    margin-right: 15rpx;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.9);
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .all-select-text {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #6ca5aa;
  }
}

.guanli {
  height: 76rpx;
  text-align: right;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #6ca5aa;
  line-height: 76rpx;
  padding: 0 20rpx;
  border-radius: 20rpx;
  transition: all 0.3s ease;

  &:active {
    background: rgba(108, 165, 170, 0.1);
    transform: scale(0.95);
  }
}

.goodBox {
  width: 697rpx;
  height: auto;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0 auto 27rpx;
  padding: 25rpx 20rpx;
  box-sizing: border-box;

  .supplier-header {
    margin-bottom: 20rpx;

    .supplier-title-box {
      display: flex;
      align-items: center;

      .supplier-select-box {
        margin-right: 15rpx;

        .noSelect {
          width: 37rpx;
          height: 37rpx;
          border-radius: 50%;
          border: 2rpx solid #666666;
          box-sizing: border-box;
          transition: all 0.3s ease;

          &:active {
            transform: scale(0.9);
          }
        }

        .selectBox {
          width: 37rpx;
          height: 37rpx;
          transition: all 0.3s ease;

          &:active {
            transform: scale(0.9);
          }

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
      }
    }
  }

  .goodItem {
    width: 100%;
    height: 173rpx;
    margin-top: 46rpx;
    display: flex;

    .noSelect {
      width: 37rpx;
      height: 37rpx;
      border-radius: 50%;
      border: 2rpx solid #666666;
      box-sizing: border-box;
      margin-right: 25rpx;
      margin-top: 68rpx;
    }

    .selectBox {
      width: 37rpx;
      height: 37rpx;
      // background: linear-gradient(90deg, #FA2B66, #FF9834);
      // border-radius: 50%;
      margin-right: 25rpx;
      margin-top: 68rpx;

      img {
        width: 100%;
        height: 100%;
      }
    }

    image {
      width: 173rpx;
      height: 173rpx;
      border-radius: 13rpx;
    }

    .contentBox {
      width: 400rpx;
      height: 173rpx;
      margin-left: 23rpx;

      .title {
        font-size: 31rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
      }

      .subTitle {
        font-size: 27rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #7c7c7c;
        margin-top: 13rpx;
      }

      .priceBox {
        margin-top: 35rpx;

        .price {
          font-size: 40rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ff2d3b;
        }

        .price:before {
          content: "￥";
          font-size: 27rpx;
        }

        .quantity-control {
          display: flex;
          align-items: center;
          border: 2rpx solid #e5e5e5;
          border-radius: 25rpx;
          overflow: hidden;

          .quantity-btn {
            width: 60rpx;
            height: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            transition: all 0.3s ease;

            &.minus-btn {
              border-right: 1rpx solid #e5e5e5;
            }

            &.plus-btn {
              border-left: 1rpx solid #e5e5e5;
            }

            &.disabled {
              background: #f1f1f1;
              color: #ccc;
            }

            &:not(.disabled):active {
              background: #e9ecef;
            }

            font-size: 50rpx;
            font-weight: 500;
            color: #333;

            .btn-text {
            }
          }

          .quantity-input {
            width: 80rpx;
            height: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
          }
        }
      }
    }
  }
}

.loseGood {
  width: 697rpx;
  height: auto;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0 auto 27rpx;
  padding: 25rpx 20rpx;
  box-sizing: border-box;

  .title {
    font-size: 35rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;

    span {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #2791f7;
    }
  }

  .goodItem {
    width: 100%;
    height: 173rpx;
    margin-top: 46rpx;
    display: flex;
    color: #999999;

    .noSelect {
      width: 37rpx;
      height: 37rpx;
      border-radius: 50%;
      border: 2rpx solid #cccccc;
      background: #f1f1f1;
      box-sizing: border-box;
      margin-right: 25rpx;
      margin-top: 68rpx;
    }

    image {
      width: 173rpx;
      height: 173rpx;
      border-radius: 13rpx;
      margin-right: 23rpx;
    }

    .contentBox {
      width: 421rpx;
      height: 173rpx;

      .title {
        font-size: 31rpx;
        font-family: PingFang SC;
        font-weight: 500;
      }

      .subTitle {
        font-size: 27rpx;
        font-family: PingFang SC;
        font-weight: 400;
      }

      .priceBox {
        margin-top: 35rpx;

        .price {
          font-size: 40rpx;
          font-family: PingFang SC;
          font-weight: 500;
        }

        .price:before {
          content: "￥";
          font-size: 27rpx;
        }

        .btn {
          width: 125rpx;
          height: 53rpx;
          background: #999999;
          border-radius: 13rpx;
          text-align: center;
          line-height: 53rpx;
          font-size: 29rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }
    }
  }
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;

  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 40rpx;
    opacity: 0.6;
  }

  .empty-title {
    font-size: 36rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 20rpx;
  }

  .empty-desc {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 60rpx;
  }

  .empty-btn {
    width: 240rpx;
    height: 80rpx;
    background: #6ca5aa;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30rpx;
    font-weight: 500;
    box-shadow: 0 8rpx 20rpx rgba(108, 165, 170, 0.3);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.95);
      box-shadow: 0 4rpx 10rpx rgba(108, 165, 170, 0.2);
    }
  }
}

.orderBox {
  width: 750rpx;
  height: 151rpx;
  background: #ffffff;
  box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
  padding: 0 27rpx;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;

  .priceBox {
    display: flex;
    font-size: 27rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;

    span {
      font-size: 27rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-left: 20rpx;
    }

    p {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ff2d3b;
      margin-top: -5rpx;
    }

    .noSelect {
      width: 41rpx;
      height: 41rpx;
      border-radius: 50%;
      border: 2rpx solid #666666;
      box-sizing: border-box;
      margin-right: 10rpx;
    }

    .selectBox {
      width: 41rpx;
      height: 41rpx;
      // background: linear-gradient(90deg, #FA2B66, #FF9834);
      border-radius: 50%;
      margin-right: 10rpx;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .btn {
    width: 219rpx;
    height: 77rpx;
    background: #6ca5aa;
    border-radius: 39rpx;
    text-align: center;
    line-height: 77rpx;
    font-size: 33rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}

/* 移除旧的样式 */
.zhihui {
  background: #e8e8e8 !important;
  color: #999999 !important;
}

/* 优化商品卡片样式 */
.goodBox {
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
  }
}

/* 优化选择框样式 */
.noSelect {
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.9);
  }
}

.selectBox {
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.9);
  }
}
</style>
