<template>
  <view class="container safe-area-inset-bottom">
    <MessageNotification />
    <!-- 头部区域：显示数量和清空按钮 -->
    <view class="head">
      <view class="num">
        购物车（共{{ totalCount }}件商品）
      </view>
      <view class="clear" @click='clearCart'>
        <text class="iconfont icon-qingchu"></text>
        清空购物车
      </view>
    </view>

    <!-- 商品列表卡片 -->
    <view class="card">
      <!-- 门店名称 -->
      <view class="store">
        <text class="iconfont icon-mendian"></text>
        {{ cartLists.store_name }}
      </view>

      <!-- 购物车列表循环 -->
      <u-checkbox-group>
        <view class="list" v-for="item in cartLists.data" :key="item.id">

          <!-- 复选框 -->
          <u-checkbox shape="circle" @change="checkboxChange(item)" v-model="item.checked">
          </u-checkbox>

          <!-- 商品图片：点击跳转详情 (使用 .stop 阻止冒泡，避免触发选中) -->
          <view class="img" @click.stop="goProductDetail(item)">
            <image :src="item.drug.image" mode="aspectFill"></image>
          </view>

          <!-- 商品信息区域：点击空白处切换选中状态 -->
          <view class="it" @click="checkboxChange(item)">
            <!-- 商品名称：点击跳转详情 (使用 .stop 阻止冒泡) -->
            <view class="it_name" @click.stop="goProductDetail(item)">{{ item.drug.drug_name }}</view>

            <!-- 规格/用法信息 -->
            <view class="it_info">{{ item.drug.usage }}</view>

            <!-- 价格与数量控制器 -->
            <view class="it_price">
              <!-- 显示价格 -->
              <text>￥{{ item.drug.drugstore_drug ? item.drug.drugstore_drug.price : (item.drug.drug_store_relations ? item.drug.drug_store_relations.price : '0.00') }}</text>

              <!-- 步进器：点击阻止冒泡，防止触发选中 -->
              <view class="it_num" @click.stop>
                <uni-number-box :min="1" @change="changeNum($event,item)" :value="item.qty">
                </uni-number-box>
              </view>
            </view>
          </view>
        </view>
      </u-checkbox-group>
    </view>

    <!-- 底部结算栏 -->
    <view class="footer">
      <view class="allselect-left" @click="checkedAll">
        <u-checkbox-group>
          <u-checkbox v-model="checked" shape="circle">全选</u-checkbox>
        </u-checkbox-group>
      </view>

      <view class="total">
        合计：
        <text class="price">￥{{ totalPrice }}</text>
      </view>

      <view class="to_btn" @click="toPay">去结算</view>
    </view>
  </view>
</template>

<script>
// 引入API接口
import {
  CartList,
  addCart,
  clearAll
} from '../../request/api/api'
import {getCartListApi, saveCartApi} from "@/request/api/cart";
import {genOrderByCartApi} from "@/request/api/order";

export default {
  data() {
    return {
      checked: false,    // 全选状态
      allcheck: false,
      value: 1,
      numberValue: 0,
      vModelValue: 3,
      list: [{
        checked: false,
        disabled: false
      }],
      selectList: [],    // 选中的数据
      cartLists: {       // 购物车列表数据源
        data: []
      },
      drug_ids: [],      // 药品id集合
      cart_ids: [],      // 购物车id集合
      qty: '',
      change_qty: '',
      true_qty: ''
    }
  },
  onShow() {
    this.getCartList()
  },

  computed: {
    // 计算选中商品的总价格
    totalPrice: function() {
      // 空值检查，防止报错
      if (!this.cartLists || !this.cartLists.data || this.cartLists.data.length === 0) {
        return '0.00';
      }

      let totalPrice = 0;
      // 过滤出已选中的商品
      const checkedItems = this.cartLists.data.filter(item => item.checked);

      checkedItems.forEach(item => {
        // 兼容不同字段结构获取价格
        let price = 0;
        if(item.drug && item.drug.drugstore_drug && item.drug.drugstore_drug.price) {
          price = item.drug.drugstore_drug.price;
        } else if (item.drug && item.drug.drug_store_relations && item.drug.drug_store_relations.price) {
          price = item.drug.drug_store_relations.price;
        }

        const qty = item.qty || 0;
        totalPrice += price * qty;
      });

      return totalPrice.toFixed(2);
    },

    // 计算购物车总件数
    totalCount: function () {
      if (!this.cartLists || !this.cartLists.data) return 0;
      var totalCount = 0;
      for (var i = 0; i < this.cartLists.data.length; i++) {
        totalCount += this.cartLists.data[i].qty;
      }
      return totalCount;
    },
  },

  methods: {
    // 跳转商品详情页
    goProductDetail(item) {
      if (!item || !item.drug) return;

      // 获取显示价格，逻辑与模板保持一致
      let price = '0';
      if (item.drug.drugstore_drug && item.drug.drugstore_drug.price) {
        price = item.drug.drugstore_drug.price;
      } else if (item.drug.drug_store_relations && item.drug.drug_store_relations.price) {
        price = item.drug.drug_store_relations.price;
      }

      // 构建参数并跳转
      uni.navigateTo({
        url: `/subPackages/product/symptoms?id=${item.drug.id}&drug_name=${item.drug.drug_name}&is_otc=${item.drug.is_otc}&image=${item.drug.image}&price=${price}`
      });
    },

    // 清空购物车
    clearCart() {
      this.clearAll()
    },

    // 步进器数量变化
    changeNum(e, current) {
      console.log(e, current);
      this.cartLists.data.forEach(item => {
        if (item.id == current.id) {
          item.qty = e;
          this.true_qty = e
          this.drug_id = current.drug_id
          this.addToCart()
        }
      })
    },

    // 单个商品复选框状态改变
    checkboxChange(item) {
      console.log(item);
      item.checked = !item.checked
      // 如果存在未选中的项，则取消全选状态
      if (this.cartLists.data.filter(e => !e.checked).length) {
        this.checked = false
      } else {
        this.checked = true
      }
    },

    // 全选/反选
    checkedAll() {
      // 如果当前已经是全部选中状态，则全部取消
      if (this.cartLists.data.filter(item => item.checked).length === this.cartLists.data.length) {
        this.cartLists = {
          ...this.cartLists,
          data: this.cartLists.data.map(item => {
            return {
              ...item,
              checked: false
            }
          })
        }
      } else {
        // 否则全部选中
        this.cartLists = {
          ...this.cartLists,
          data: this.cartLists.data.map(item => {
            return {
              ...item,
              checked: true
            }
          })
        }
      }
    },

    // 去结算
    toPay() {
      const list = this.cartLists.data.filter(item => item.checked).map(item => {
        return {
          drug_id: item.drug_id,
          id: item.id,
          numbers: item.qty
        }
      })

      if(list.length === 0) {
        uni.showToast({
          title: '请先选择商品',
          icon: 'none'
        });
        return;
      }

      let cart_ids = list.map(item => item.id);
      genOrderByCartApi({
        store_id: uni.getStorageSync('store_id') || '11001',
        cart_ids: cart_ids
      }).then((resOrder) => {
        if (resOrder.data.code === 0) {
          uni.navigateTo({
            url: `/subPackages/my/my-drug/drug-info?id=${resOrder.data.result.id}&order_type=${resOrder.data.result.order_type}`
          })
        }
      })
    },

    // 调用API清空购物车
    clearAll() {
      clearAll({
        method: "post",
        data: {
          store_id: uni.getStorageSync('store_id') || '11001',
        }
      }).then((res) => {
        if (res.data.code == 0) {
          uni.showToast({
            title: '清空成功',
            icon: 'success',
          })
          this.getCartList()
        }
      })
    },

    // 更新购物车数量到服务器
    addToCart() {
      saveCartApi({
        store_id: uni.getStorageSync('store_id') || '11001',
        drug_id: this.drug_id,
        quantity: this.true_qty
      }).then((res) => {
        if (res.data.code == 0) {
          console.log('数量更新成功');
        }
      })
    },

    // 获取购物车列表数据
    getCartList() {
      getCartListApi({
        store_id: uni.getStorageSync('store_id') || '11001',
      }).then((res) => {
        console.log(res, 'list');
        if (res.data.code == 0) {
          this.cartLists = {
            ...res.data.result,
            data: res.data.result.data.map((item) => {
              return {
                ...item,
                checked: false // 默认不选中
              };
            })
          };
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  max-height: 100%;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  background: #F5F5F5;

  .head {
    width: 750rpx;
    height: 88rpx;
    margin: 0 auto;
    padding: 0rpx 40rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .num {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #232323;
    }

    .clear {
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #232323;

      .iconfont {
        font-size: 32rpx;
        margin-left: 6rpx;
      }
    }
  }

  .card {
    width: 750rpx;
    margin: 0 auto;
    padding: 20rpx 12rpx 200rpx 20rpx;
    background: #FFFFFF;

    .store {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 500;
      color: #232323;
      margin-left: 20rpx;

      .iconfont {
        font-size: 39rpx;
        color: #666666;
        vertical-align: middle;
        margin-right: 10rpx;
      }
    }

    .list {
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: 254rpx;
      display: flex;
      align-items: center;

      .checkbox {
        width: 44rpx;
        height: 44rpx;
        background: #1777FF;
        border-radius: 50%;
      }

      .img {
        width: 200rpx;
        height: 200rpx;
        margin-right: 10rpx;

        image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 8rpx;
        }
      }

      .it {
        flex: 1;
        padding: 16rpx 10rpx;
        font-family: PingFang SC-Bold, PingFang SC;

        .it_name {
          font-size: 28rpx;
          font-weight: bold;
          color: #232323;
        }

        .it_info {
          font-size: 24rpx;
          font-weight: 400;
          color: #666666;
          margin: 20rpx 0 48rpx 10rpx;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .it_price {
          display: flex;
          align-items: center;
          justify-content: space-between;

          text {
            font-size: 36rpx;
            font-weight: bold;
            color: #F93030;
          }
        }
      }
    }
  }

  .footer {
    width: 750rpx;
    height: 104rpx;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 44rpx;

    .total {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #232323;

      .price {
        font-size: 36rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #4175EE;
      }
    }

    .to_btn {
      width: 196rpx;
      height: 64rpx;
      border-radius: 64rpx;
      text-align: center;
      line-height: 62rpx;
      background: #4175EE;
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
}
</style>
