<template>
  <view class='content'>
    <view class='c-flex-row'>
      <text class='manage' @click.stop='isEditMode = !isEditMode' :style='isEditMode?"color:#F32B2B":"color:#333333"'>
        {{ isEditMode ? '退出管理' : '管理' }}
      </text>
    </view>

    <view class='card-view' v-if='shoppingCartList.length>0'>
      <scroll-view>
        <view class='c-flex-column' v-for='(item, index) in shoppingCartList' :key='index'>
          <view class='c-flex-row'>
            <image class='checkbox'
                   :src='assetsUrl(item.checked?"ic_checkbox_active_red.png":"ic_checkbox_normal.png")'
                   @click.stop='item.checked=!item.checked' />
            <image class='goods-image' :src='item.images' />
            <view class='c-flex-column'>
              <text>{{ item.name }}</text>
              <view class='c-flex-row'>
                <view class='sku-view' @click.stop='showSkuDialog(index)'>
                  <text>{{ item?.checkedStock?.colorName }}，{{ item?.checkedStock?.sizeName }}
                    x{{ item?.checkedStock?.count }}
                  </text>
                  <image :src='assetsUrl("ic_arrow_down_gray.png")' />
                </view>
              </view>
              <text style='margin-top: 50rpx'>￥{{ item.price }}</text>
              <view class='count-change-view c-flex-row'>
                <view class='count-image' @click.stop='countChange(index,false)'>
                  <image :src='assetsUrl("ic_reduce.png")' />
                </view>
                <text>{{ item?.checkedStock?.count || 0 }}</text>
                <view class='count-image' @click.stop='countChange(index,true)'>
                  <image :src='assetsUrl("ic_plus.png")' />
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class='bottom-view c-flex-row'>
      <view class='c-flex-row' @click.stop='checkedAll = !checkedAll'>
        <image :src='assetsUrl(checkedAll?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
        <text>全选</text>
      </view>
      <view style='flex: 1' />

      <text v-if='isEditMode' class='settlement' @click.stop='deleteShoppingCart'>删除</text>
      <view v-else class='c-flex-row'>
        <text>合计：
          <text>￥{{ totalPayPrice }}</text>
        </text>
        <text class='settlement' @click.stop='settlement'>结算</text>
      </view>
    </view>
  </view>
  <sku-dialog ref='skuDialogRef' :bean='temporaryGoodsBean' :exists='temporaryStockBean' />
</template>

<script lang='ts' setup>

import { assetsUrl } from '@/utils/assets';
import useShoppingCartStore from '@/store/modules/shoppingcart';
import { goPath, showToast } from '@/utils';
import { GoodsBean, StockBean } from '@/api/goods/types';
import SkuDialog from '@/components/sku-dialog.vue';
import { ref } from 'vue';

const isEditMode = ref(false);
const checkedAll = ref(false);

const shoppingCartStore = useShoppingCartStore();
const { shoppingCartList } = storeToRefs(shoppingCartStore);

const skuDialogRef = ref();
const temporaryGoodsBean = ref<GoodsBean>();
const temporaryStockBean = ref<StockBean>();

watch(checkedAll, (newValue) => {
  shoppingCartList.value.forEach(res => {
    res.checked = newValue;
  });
});

const totalPayPrice = computed(() => {
  return shoppingCartList.value.filter(res => res.checked).reduce((a, b) => a + b.price * b.checkedStock.count, 0);
});

const deleteShoppingCart = () => {
  shoppingCartStore.deleteIfChecked();
};

const showSkuDialog = (index: number) => {
  new Promise((resolve, _) => {
    temporaryGoodsBean.value = shoppingCartList.value[index];
    temporaryStockBean.value = shoppingCartList.value[index].checkedStock;
    resolve(temporaryGoodsBean.value);
  }).then((res: any) => {
    skuDialogRef.value.show(res.id, (e: GoodsBean) => {
      //重新选择sku后判断当前购物中是否存在相同sku的商品
      const existsIndex = shoppingCartStore.getSameGoodsIndex(res?.id || '', e.checkedStock.colorId, e.checkedStock.sizeId);
      //不存在则更新当前商品sku
      if(existsIndex < 0) {
        shoppingCartStore.updateStock(index, e.checkedStock);
      }
      //如果已存在，则更新已存在商品数量，并删除当前商品
      else {
        shoppingCartStore.updateCount(existsIndex, e.checkedStock.count - (temporaryGoodsBean?.value?.checkedStock?.count || 0));
        if(existsIndex != index) {
          shoppingCartStore.delete(index);
        }
      }
    });
  });
};

const countChange = (index: number, isPlus: Boolean) => {
  if(isPlus) {
    shoppingCartStore.updateCount(index, 1);
  } else {
    if(shoppingCartList.value[index].checkedStock.count > 1) {
      shoppingCartStore.updateCount(index, -1);
    }
  }
};

const settlement = () => {
  if(shoppingCartList.value.filter(res => res.checked).length == 0) {
    showToast('请选择商品');
    return;
  }
  goPath('/pages/mall/subs/order/order-confirm');
};
</script>

<style lang='scss' scoped>
.content {
  position: relative;

  .manage {
    width: 100%;
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
    background: #FFFFFF;
    align-self: flex-end;
    padding: 20rpx 30rpx;
    text-align: end;
  }

  .card-view {
    margin: 30rpx 30rpx 180rpx 30rpx;
    border-radius: 10rpx;
    background: #FFFFFF;
    padding: 10rpx 20rpx 10rpx 17rpx;

    .c-flex-column:nth-of-type(1) {
      margin: 20rpx 0;
    }

    view:nth-of-type(1) {
      .checkbox {
        width: 35rpx;
        height: 35rpx;
        margin-right: 20rpx;
      }

      .goods-image {
        width: 186rpx;
        height: 186rpx;
        border-radius: 10rpx;
      }

      .c-flex-column {
        flex: 1;
        height: 186rpx;
        margin-left: 20rpx;
        position: relative;

        text:nth-of-type(1) {
          font-weight: 400;
          font-size: 30rpx;
          color: #333333;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .sku-view {
          display: flex;
          flex-direction: row;
          position: relative;
          background: #F2F2F2;
          margin-top: 10rpx;
          align-items: center;
          border-radius: 22rpx;
          padding: 5rpx 20rpx;

          text {
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
          }

          image {
            width: 20rpx;
            height: 20rpx;
            margin-left: 13rpx;
          }
        }

        text:nth-of-type(2) {
          display: flex;
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
          margin-top: 20rpx;
        }

        .count-change-view {
          position: absolute;
          right: 0;
          bottom: 0;

          .count-image {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 54rpx;
            height: 54rpx;
            background: #FBFBFB;

            image {
              width: 15rpx;
              height: 2rpx;
            }
          }

          .count-image:nth-of-type(2) image {
            width: 17rpx;
            height: 17rpx;
          }

          text {
            display: flex;
            width: 54rpx;
            height: 54rpx;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-size: 30rpx;
            color: #333333;
            background: #F2F2F2;
          }
        }
      }
    }
  }

  .bottom-view {
    background: #FFFFFF;
    position: fixed;
    padding: 12rpx 30rpx 78rpx 30rpx;
    bottom: 0;
    left: 0;
    right: 0;

    image {
      width: 35rpx;
      height: 35rpx;
    }

    .c-flex-row:nth-of-type(1) {
      text {
        margin-left: 10rpx;
        font-size: 28rpx;
        color: #333333;
      }
    }

    text:nth-of-type(1) {
      font-size: 30rpx;

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

    .settlement {
      display: flex;
      background: #F32B2B;
      border-radius: 43rpx;
      padding: 17rpx 75rpx;
      font-weight: bold;
      font-size: 30rpx;
      color: #FFFFFF;
      margin-left: 37rpx;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
