<template>
  <view>
    <view v-if="list.length > 0">
      <nut-cell-group v-for="(itm, idx) in list" :key="idx">
        <nut-cell>
          <nut-checkbox
            v-model="itm.state.checkbox"
            :indeterminate="itm.state.indeterminate"
            @change="(val: boolean) => changeBoxAll(val,idx)"
            >{{ itm.StoreName }}
          </nut-checkbox>
        </nut-cell>
        <nut-checkbox-group
          v-model="itm.state.checkboxgroup"
          :ref="(el) => getGroup(el, idx)"
          @change="(label) => changeBox(label, itm)"
        >
          <nut-cell v-for="(item, idx1) in itm.Goods" :key="idx1">
            <nut-checkbox :label="item.gid" style="width: 10%"></nut-checkbox>
            <view class="box">
              <view class="box-left">
                <img class="cover" :src="item.cover" alt="" />
                <view class="center">
                  <view>{{ item.name }}</view>
                  <view class="price">
                    <view>{{ item.price }} 元</view>
                    <view>{{ item.exchange }} 积分</view>
                  </view>
                </view>
              </view>
              <nut-input-number
                v-model="item.number"
                readonly
                :min="-1"
                @add.stop="() => onAdd(item)"
                @reduce.stop="() => onReduce(item)"
              />
            </view>
          </nut-cell>
        </nut-checkbox-group>
      </nut-cell-group>
    </view>
    <nut-empty v-else description="购物车暂无数据"></nut-empty>
    <view>
      <view style="height: 100rpx"></view>
    </view>
    <view class="bottom-box">
      <view class="left">
        <!-- <nut-checkbox v-model="selectAllVal" @change="selectAll"
          >全选
        </nut-checkbox> -->
        <view>
          <view class="text-box">
            总金额：
            <nut-price
              v-model:price="localCount.price"
              size="normal"
              :need-symbol="false"
            />
          </view>
          <view class="text-box">
            总积分：
            <nut-price
              v-model:price="localCount.exchange"
              size="normal"
              :need-symbol="false"
            />
          </view>
        </view>
      </view>
      <nut-button type="primary" @click="sub">去结算</nut-button>
    </view>
    <!-- 支付 -->
    <Pay
      :is-show-pay="isShowPay"
      :interval="true"
      v-model:jfInfo="orderData"
      @closePay="closePay"
    />
  </view>
</template>

<script lang="ts" setup>
import { nextTick, ref } from "vue";
import Taro from "@tarojs/taro";
import { addCart, getAllCart } from "@/api/cart";
import { createActiveOrder } from "@/api/goods";
import Pay from "@/components/Pay.vue";

interface CardList {
  name: string;
  cover: string;
  bid: string;
  gid: string;
  number: string;
  price: number;
  exchange: number;
}

// const selectAllVal = ref(false);

interface List {
  StoreName: string;
  Goods: CardList[];
  state: {
    checkbox: boolean;
    indeterminate: boolean;
    checkboxgroup: string[];
  };
}

const list = ref<List[]>([]);

const groupList = ref(new Map());

const localCount = ref({
  price: 0,
  exchange: 0,
});

const getGroup = (el: any, idx: number) => {
  return groupList.value.set(idx, el);
};

const changeBoxAll = async (value: boolean, idx: number) => {
  await nextTick(() => {
    groupList.value.get(idx).toggleAll(value);
  });
};

const changeBox = (label: string[], item: any) => {
  localCount.value = {
    price: 0,
    exchange: 0,
  };

  item["Count"] = {
    priceCount: 0,
    exchangeCount: 0,
  };

  if (label.length > 0) {
    label.forEach((id: string) => {
      item.Goods.forEach((itm: any) => {
        if (itm.gid === id) {
          item["Count"].priceCount += itm.price * itm.number;
          item["Count"].exchangeCount += itm.exchange * itm.number;
        }
      });
    });
  }

  list.value.forEach((item: any) => {
    localCount.value.price += item.Count.priceCount;
    localCount.value.exchange += item.Count.exchangeCount;
  });

  if (label.length === item.Goods.length) {
    item.state.checkbox = true;
    item.state.indeterminate = false;
  } else if (label.length && label.length < item.Goods.length) {
    item.state.indeterminate = true;
  } else {
    item.state.indeterminate = false;
    item.state.checkbox = false;
  }
};

Taro.useDidShow(() => {
  getList();
});

// const selectAll = () => {
//   localCount.value = {
//     price: 0,
//     exchange: 0,
//   };
//   groupList.value.forEach((item: any) => {
//     item.toggleAll(selectAllVal.value);
//   });
//   list.value.forEach((item: any) => {
//     if (item.state.checkboxgroup.length > 0) {
//       item.Goods.forEach((itm: any) => {
//         localCount.value.price += itm.price;
//         localCount.value.exchange += itm.exchange;
//       });
//     }
//   });
// };

const isShowPay = ref(false);
const orderData = ref<any>([]);

const sub = async () => {
  const arr: any = list.value.filter(
    (item: any) => item.state.checkboxgroup.length > 0
  );
  if (arr.length === 0) {
    Taro.showToast({
      title: "请选择商品",
      icon: "none",
    });
    return;
  }

  try {
    const { data: res } = await createActiveOrder({
      Bid: arr.map((item: any) => item.StoreBid),
    });
    if (res.oid) {
      orderData.value = res?.oid;
      isShowPay.value = true;
    }
  } catch (e) {
    Taro.showToast({
      title: e.msg,
      icon: "none",
    });
  }
};

const closePay = async (val: boolean) => {
  isShowPay.value = val;
  orderData.value = [];
  await getList();
  Taro.navigateTo({
    url: "/pages/users/order_list/index?type=0",
  });
};

const getList = async () => {
  localCount.value = {
    price: 0,
    exchange: 0,
  };
  const res = await getAllCart();
  list.value = res.data.data || [];
  if (list.value.length > 0) {
    list.value = list.value.map((item: any) => ({
      ...item,
      Goods: item.Goods.sort(
        (a: CardList, b: CardList) => Number(a.gid) - Number(b.gid)
      ),
      state: {
        indeterminate: false,
        checkbox: false,
        checkboxgroup: [],
      },
      Count: {
        priceCount: 0,
        exchangeCount: 0,
      },
    }));
  }
};

// const toPage = () => {
//   Taro.switchTab({
//     url: "/pages/index/index",
//   });
// };

const onAdd = async (item: CardList) => {
  await add_cart(item, Number(item.number) + 1);
};

const onReduce = async (item: CardList) => {
  await add_cart(item, Number(item.number) - 1);
};

const add_cart = async (item: CardList, num: number = 1) => {
  try {
    const res = await addCart({
      Bid: item.bid,
      Gid: item.gid,
      Number: Number(num),
    });
    Taro.showToast({
      title: res.msg,
      icon: "none",
    });
    await getList();
  } catch (e) {
    Taro.showToast({
      title: e.msg,
      icon: "none",
    });
  }
};
</script>

<style lang="scss">
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

.box {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  .box-left {
    display: flex;
    align-items: center;

    .cover {
      width: 130rpx;
      height: 130rpx;
      margin-right: 15rpx;
      border-radius: 20rpx;
    }

    .center {
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .price {
        display: flex;
        flex-direction: column;
        color: red;
      }
    }
  }
}

.bottom-box {
  box-sizing: border-box;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  box-shadow: 100rpx 104rpx 288rpx rgba(0, 0, 0, 0.01);
  border-top: 1rpx solid #f5f5f5;

  .left {
    display: flex;
    align-items: center;

    .text-box {
      margin-left: 10rpx;
    }
  }
}
</style>
