<template>
  <view class="cart">
    <view class="manage">
      <view @click="handlerManage">管理</view>
      <!-- <view>退出管理</view> -->
    </view>
    <!-- 列表1 -->
    <!-- <CartList :init_list.sync='init_list' :isAllSecect.sync='isAllSecect' @handlerIsSelectAll='handlerIsSelectAll'></CartList> -->
    <view>
      <u-checkbox-group shape="circle" placement="column" v-model="goodsCheckbox">
        <view class="item-box" v-for="(item, index) of init_list" :key="index">
          <view class="item-top" @click="handlerSkipShopDetail(item)">
            <view class="top-title"> {{ item.name }} </view>
            <u-icon name="arrow-right"></u-icon>
          </view>
          <view
            class="item"
            v-for="(itm, idx) of item.cartItems"
            :key="idx"
            @click="handlerSkipGoodsDetail(item, idx)"
          >
            <view class="item-l">
              <view class="l-l">
                <u-checkbox :name="itm.id"></u-checkbox>
              </view>
              <view class="l-r">
                <image class="r-img" :src="itm.goodsPic" mode="aspectFill"></image>
                <view class="r-box">
                  <view class="r-name">{{ itm.goodsName }}</view>
                  <view class="r-discript">{{ itm.goodsName }}</view>
                  <view class="r-price">￥{{ (itm.price * itm.quantity).toFixed(2) }}</view>
                </view>
              </view>
            </view>
            <view class="item-r">
              <u-number-box v-model="itm.quantity" @change="valChange(itm, $event)"></u-number-box>
            </view>
          </view>
        </view>
      </u-checkbox-group>
    </view>

    <!-- 底部1 -->
    <view class="bottom fl-flex-item">
      <!-- <u-checkbox-group shape="circle" v-model="isAllSecect" @change="isAllChange">
        <u-checkbox label="全部" name="0"> </u-checkbox>
      </u-checkbox-group> -->
	  <view class=""> </view>
      <view class="bottom-price" v-show="!manageShow">
        <view>
          <text style="font-size: 22rpx; color: #333">合计：</text>
          <text style="font-size: 22rpx">￥</text>
          <text style="font-size: 34rpx; font-weight: 800">{{ allPrice.sum }}</text>
        </view>
        <view class="favorable fl-flex">
          <text style="margin-right: 10rpx">
            已优惠
            <text style="font-weight: 800">￥255</text>
          </text>
          <!-- <view class="fl-flex" @click="instructionShow = true"> -->
          <view class="fl-flex">
            <text style="margin-right: 5rpx">优惠明细</text>
            <u-icon name="arrow-up" color="#fe7b21" size="12" />
          </view>
        </view>
      </view>
      <view class="settleAccount" @click="handlerSettleBill">
        {{ !manageShow ? `结算( ${allPrice.goodsNumber} )` : `删除( ${allPrice.goodsNumber} ) ` }}
      </view>
    </view>

    <!-- <u-popup :show="instructionShow" mode="bottom" @close="instructionShow = false" round="20">
      <view class="pop-box">
        <text>出淤泥而不染，濯清涟而不妖</text>
      </view>
    </u-popup> -->
  </view>
</template>

<script>
import {
  getShoppingCart,
  deleteCartItem,
  editGoodsNumb,
  generateConfirmOrder,
} from '@/api/client/business.js';
export default {
  data() {
    return {
      init_list: [],
      isAllSecect: [], //checkbox是否全选
      goodsCheckbox: [], //checkbox选择商品
      sumPrice: 0,
      instructionShow: false, // 底部优惠明细

      manageShow: false,
      queryParams: {
        paging: '1,10',
      },
      AllGoods: [],
    };
  },
  onShow() {
    this.handlerInitList();
  },
  watch: {
    goodsCheckbox(newValue) {
      if (
        newValue.length == this.AllGoods.length &&
        (newValue.length != 0 || this.AllGoods.length != 0)
      ) {
        this.isAllSecect.push('0');
      } else {
        this.isAllSecect = [];
      }
    },
  },
  computed: {
    allPrice() {
      let sum = 0;
      let goodsNumber = 0;
      this.goodsCheckbox.map(rs => {
        this.AllGoods.map(rc => {
          if (rs == rc.id) {
            rc.allPrice = Number((rc.price * rc.quantity).toFixed(2));
            sum += rc.allPrice;
            goodsNumber += rc.quantity;
          }
        });
      });
      return {
        sum,
        goodsNumber,
      };
    },
  },
  methods: {
    // 初始化购物车列表
    handlerInitList() {
      getShoppingCart(this.queryParams).then(res => {
        this.init_list = res.data.records;
        this.init_list.map(rs => {
          rs.cartItems.map(rc => {
            this.AllGoods.push(rc);
          });
        });
      });
    },
    // 结算按钮
    handlerSettleBill() {
      if (this.manageShow) {
        deleteCartItem(this.goodsCheckbox.join(',')).then(res => {
          if (res.code === 'OK') {
            uni.showToast({
              title: '删除成功',
              icon: 'none',
            });
            this.handlerInitList();
            this.AllGoods = [];
            this.isAllSecect = [];
            this.goodsCheckbox = [];
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            });
            return;
          }
        });
      } else {
        let sumbutArray = [];
        this.init_list.map(rs => {
          rs.cartItems.map(rc => {
            this.goodsCheckbox.map(rd => {
              if (rc.id == rd) {
                sumbutArray.push(rs.id);
              }
            });
          });
        });
        let a = Array.from(new Set(sumbutArray));
        if (a.length > 1) {
          uni.showToast({
            title: '不能同时下单多个商家',
            icon: 'none',
          });
          return;
        } else {
          generateConfirmOrder({
            cartIds: this.goodsCheckbox,
            payType: 2,
          }).then(res => {
            if (res.code === 'OK') {
              uni.navigateTo({
                url: `/pagesHome/marketer/settleOrder?ids=${a[0]}`,
              });
            }
          });
        }
      }
    },
    // 修改商品数量
    valChange(item, e) {
      editGoodsNumb(item.id, {
        quantity: e.value,
      }).then(res => {
        console.log('@@@2res', res);
      });
    },

    // 是否多选
    isAllChange(e) {
      if (e.length) {
        this.goodsCheckbox = [];
        this.AllGoods.map(rs => {
          this.goodsCheckbox.push(rs.id);
        });
      } else {
        this.goodsCheckbox = [];
      }
    },
    // 管理按钮
    handlerManage() {
      this.manageShow = !this.manageShow;
      this.goodsCheckbox = [];
    },
    // 跳转到商家详情
    handlerSkipShopDetail(item) {
      uni.navigateTo({
        url: `/pages/client/clientPackage/storeDetail?id=${item.id}`,
      });
    },
    // 跳转到商品详情
    handlerSkipGoodsDetail(item, idx) {
      uni.navigateTo({
        url: `/pages/client/clientPackage/serviceDetail/index?id=${item.cartItems[idx].goodsId}&shopId=${item.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cart {
  min-height: 100vh;
  padding: 0 20rpx;
  box-sizing: border-box;
  background-color: $uni-bg-color-page;

  .manage {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx 0;
    color: #333;
    padding-right: 20rpx;
  }

  .bottom {
    height: 100rpx;
    padding: 10rpx 20rpx 40rpx 20rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    text-align: end;
    border-top: 2rpx solid #eee;

    .bottom-price {
      margin-right: 20rpx;
      font-size: 24rpx;
      color: #fe621a;
    }

    .settleAccount {
      width: 160rpx;
      height: 60rpx;
      color: #fff;
      display: flex;
      background-color: #fe641c;
      justify-content: center;
      align-items: center;
      font-size: 26rpx;
      border-radius: 30rpx;
    }
  }
}

.item-box {
  background-color: #ffffff;
  padding: 4rpx 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;

  .item-top {
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .top-title {
      font-weight: bold;
      font-size: 32rpx;
    }
  }
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;

  .item-l {
    width: 70%;
    display: flex;
    align-items: center;

    .l-r {
      display: flex;

      .r-img {
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
        margin-right: 10rpx;
      }

      .r-box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 50%;

        .r-name {
          font-size: 34rpx;
          font-weight: bold;
        }

        .r-discript {
          max-width: 200rpx;
          background-color: #f7f8fa;
          padding: 5rpx 10rpx;
          border-radius: 10rpx;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .r-price {
          color: #ff4d60;
          font-weight: bold;
          font-size: 28rpx;
        }
      }
    }
  }

  .item-r {
    width: 30%;
  }
}

.pop-box {
  min-height: 400rpx;
  padding: 20rpx;
}
</style>
