<route lang="json5">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%tabbar.cart%',
  },
}
</route>
<script setup lang="ts">
  import { useToast, useQueue, useMessage } from 'wot-design-uni'
  import { t } from '@/locale'
  import shopSkuPopup from '@/components/commonPopup/shop-sku-popup.vue'
  const { safeAreaInsets } = uni.getSystemInfoSync()
  const selectAll = ref(false) // 是否全选
  const isOperate = ref(false) // 是否操作
  const message = useMessage('cart-message-box') // 删除消息弹窗dom
  const showCommonPopup = ref(false) // 控制sku弹窗显示
  const skuList = ref([
    {
      id: 1,
      num: 1,
      skuName: '小米手机',
      sku: ' 玄武绿 512GB',
      price: 6999,
      isSelect: false,
      isShowNum: false,
    },
    {
      id: 2,
      num: 1,
      skuName: '红米手机 K70 Pro',
      price: 999.22,
      isSelect: false,
      isShowNum: false,
    },
    {
      id: 3,
      num: 1,
      skuName: 'Huawei手机',
      sku: ' 玄武绿 512GB',
      price: 7999,
      isSelect: false,
      isShowNum: false,
    },
    {
      id: 4,
      num: 1,
      skuName: '小米手机',
      sku: ' 玄武绿 512GB',
      price: 6999,
      isSelect: false,
      isShowNum: false,
    },
    {
      id: 5,
      num: 1,
      skuName: '红米手机 K70 Pro',
      price: 999.22,
      isSelect: false,
      isShowNum: false,
    },
    {
      id: 6,
      num: 1,
      skuName: 'Huawei手机',
      sku: ' 玄武绿 512GB',
      price: 7999,
      isSelect: false,
      isShowNum: false,
    },
  ])
  const skuData = ref({
    id: 1,
    num: 1,
    skuName: '小米手机',
    sku: ' 玄武绿 512GB',
    price: 6999,
    skuList: [
      {
        id: 1,
        skuName: 'Size',
        skuSelect: '',
        skuProps: ['8888888GB', '16GB', '32GB', '64GB', '10GB', '128GB', '256GB', '512GB'],
      },
      {
        id: 2,
        skuName: 'Color',
        skuSelect: '',
        skuProps: ['Black', 'White', 'Red', 'Blue', 'Green', 'Yellow', 'Orange'],
      },
    ],
  })
  const { closeOutside } = useQueue()
  const handleAction = (s: string) => {
    console.log(s)
  }
  const handleChange = () => {}

  const showSku = () => {
    showCommonPopup.value = true
  }
  // sku选中
  const handleSKuSelect = (id) => {
    const item = skuList.value.find((item) => item.id === id)
    if (item) {
      item.isSelect = !item.isSelect
    }
    selectAll.value = skuList.value.every((item) => item.isSelect)
  }
  // 全选
  const handleSelectAll = () => {
    selectAll.value = !selectAll.value
    skuList.value.forEach((item) => (item.isSelect = selectAll.value))
  }
  // 计算总价
  const total = computed(() => {
    return (
      skuList.value.reduce(
        (sum, item) => (item.isSelect ? sum + item.price * item.num * 100 : sum),
        0,
      ) / 100
    ).toFixed(2)
  })
  // 删除sku
  const handleDelete = (id) => {
    if (id !== 'batch') {
      skuList.value = skuList.value.filter((item) => item.id !== id)
      if (skuList.value.length === 0) {
        selectAll.value = false
        return
      }
      // 更新选中状态 如果全部删完了 更新选中状态
      selectAll.value = skuList.value.every((item) => item.isSelect)
    } else {
      // 批量删除弹窗确认
      const ids = skuList.value.filter((item) => item.isSelect).map((item) => item.id)
      if (ids.length === 0) return
      message
        .confirm({
          confirmButtonText: t('commonPopup.confirm'),
          cancelButtonText: t('commonPopup.cancel'),
          msg: 'The product cannot be restored after deletion. Are you sure you want to delete the selected product?',
          title: 'Confirm operation',
          cancelButtonProps: {
            type: 'error',
            customClass: 'custom-shadow',
          },
          confirmButtonProps: {
            type: 'success',
            customClass: 'custom-shadow custom-shadow-confirm',
          },
        })
        .then(() => {
          // 返回选中的sku的id
          skuList.value = skuList.value.filter((item) => !ids.includes(item.id))
          if (skuList.value.length === 0) {
            selectAll.value = false
            return
          }
          // 更新选中状态 如果全部删完了 更新选中状态
          selectAll.value = skuList.value.every((item) => item.isSelect)
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
  // 是否显示计数器
  const showNum = (id) => {
    const item = skuList.value.find((item) => item.id === id)
    if (item) {
      item.isShowNum = !item.isShowNum
    }
  }
  // 滚动关闭计数器显示以及展开
  onscroll = () => {
    closeOutside()
    skuList.value.forEach((item) => (item.isShowNum = false))
  }

  // 回到主页
  const goHome = () => {
    uni.switchTab({
      url: '/pages/index/index',
    })
  }
  // 处理选中的sku规格
  const handleSkuSpecSelect = (id, sku) => {
    const item = skuData.value.skuList.find((item) => item.id === id)
    if (!item) return
    if (item.skuSelect === sku) {
      item.skuSelect = ''
      return
    }
    item.skuSelect = sku
  }
  const addToCart = () => {
    console.log(skuData.value)
  }
</script>
<template>
  <view
    class="pb-tab bg-white overflow-hidden box-border"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
  >
    <wd-sticky>
      <view class="nav-bar bg-white w-100vw">
        <view class="cart-pos">
          <view class="text">{{ t('tabbar.cart') }}</view>
          <view class="pos">
            <image class="w-36rpx" src="@/static/images/cart/pos.svg" mode="widthFix"></image>
            <view class="address-name">{{ t('cart.homeName') }}</view>
            <image class="w-36rpx" src="@/static/images/cart/right.svg" mode="widthFix"></image>
          </view>
        </view>
        <view @click.stop="isOperate = !isOperate" v-if="!isOperate" class="manage-cart">
          {{ t('cart.manageCart') }}
        </view>
        <view @click.stop="isOperate = !isOperate" v-else class="manage-cart">
          {{ t('cart.done') }}
        </view>
      </view>
    </wd-sticky>

    <view class="cart-list" @click.stop="closeOutside">
      <view v-if="skuList && skuList.length > 0">
        <view class="cart-item" v-for="item in skuList" :key="item.id">
          <wd-swipe-action>
            <template #default>
              <view class="card-container">
                <view class="selection-img">
                  <wd-img
                    @click.stop="handleSKuSelect(item.id)"
                    v-if="item.isSelect"
                    width="42rpx"
                    height="42rpx"
                    :src="item.isSelect ? '/static/images/cart/select.svg' : ''"
                  />
                  <view @click.stop="handleSKuSelect(item.id)" v-else class="card-icon"></view>
                </view>
                <view class="card-img">
                  <wd-img width="160rpx" height="160rpx" src="/static/images/cart/sku-img.png" />
                </view>
                <view class="card-content">
                  <view class="sku-name">{{ item.skuName }}</view>
                  <view v-if="item.sku" class="sku-isSelect" @click.stop="showSku">
                    {{ item.sku }}
                    <wd-img
                      width="32rpx"
                      height="32rpx"
                      src="/static/images/cart/chevron-down.svg"
                    />
                  </view>
                  <view class="price-num-box">
                    <view class="sku-price">
                      UDP
                      <text v-format.price>{{ item.price }}</text>
                    </view>
                    <view class="num">
                      <view
                        v-show="!item.isShowNum"
                        @click.stop="showNum(item.id)"
                        class="show-num"
                      >
                        ×{{ item.num }}
                      </view>
                      <!-- <wd-input-number v-show="item.isShowNum" v-model="item.num" /> -->
                      <SkuInputNumber v-show="item.isShowNum" v-model:num="item.num" />
                    </view>
                  </view>
                </view>
              </view>
            </template>
            <template #right>
              <view class="action">
                <view class="item-button" @click="handleAction('操作1')">
                  {{ t('cart.collect') }}
                </view>
                <view class="item-button item-button-delete" @click="handleDelete(item.id)">
                  {{ t('cart.delete') }}
                </view>
              </view>
            </template>
          </wd-swipe-action>
        </view>
      </view>
      <view v-else class="cart-empty">
        <wd-img width="320rpx" height="320rpx" src="/static/images/cart/empty.svg" />
        <view class="empty-text">{{ t('cart.empty') }}</view>
        <view class="empty-button" @click="goHome">{{ t('cart.goHome') }}</view>
      </view>
    </view>
    <view class="cart-bottom-area pb-tab">
      <view class="cart-control">
        <view class="cart-select-all">
          <view class="icon" @click="handleSelectAll" :class="{ 'select-icon': selectAll }"></view>
          <view @click="handleSelectAll" class="text">{{ t('cart.selectAll') }}</view>
        </view>
        <view class="price" v-if="!isOperate">
          {{ t('cart.totalPrice') }}
          <view class="price-text flex">
            {{ t('cart.priceUint') }}
            <view class="price-num">{{ total }}</view>
          </view>
        </view>
        <view v-if="!isOperate" class="button">{{ t('cart.settlement') }}</view>
        <view @click.stop="handleDelete('batch')" v-else class="button">
          {{ t('cart.delete') }}
        </view>
      </view>
    </view>
    <CommonMsgBox selector="cart-message-box" />
    <shopSkuPopup
      v-if="showCommonPopup"
      @sku-spec-select="handleSkuSpecSelect"
      @to-add-cart="addToCart"
      v-model:skuData="skuData"
      title="specifications"
      v-model:show="showCommonPopup"
      @close="showCommonPopup = false"
    ></shopSkuPopup>
  </view>
</template>
<style lang="scss" scoped>
  :deep(.wd-sticky__container) {
    top: 0 !important;
  }
  :deep(.wd-swipe-action__right) {
    border-left: 1rpx solid #fff;
  }

  .cart-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    transform: translate(-50%, -50%);
    .empty-text {
      margin: 48rpx 0;
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      color: var(--999, $shop-text-9);
      text-align: center;
      text-transform: capitalize;
    }
    .empty-button {
      display: flex;
      gap: 20rpx;
      align-items: center;
      justify-content: center;
      padding: 22rpx 24rpx;
      font-family: 'PingFang SC';
      font-size: 32rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 48rpx; /* 150% */
      color: var(--fff, $shop-white);
      text-align: center;
      text-transform: capitalize;
      background: var(
        --ff-4-c-1-bfc-7-b-1-c,
        linear-gradient(270deg, $shop-primary 0%, $shop-help 100%)
      );
      border-radius: 200rpx;
    }
  }
  .cart-list {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    min-height: calc(100vh - 378rpx);
    padding-bottom: 30rpx;
    margin-bottom: 130rpx;
    .cart-item {
      display: flex;
      gap: 16rpx;
      align-items: center;
      width: 100%;
      min-height: 160rpx;
      margin-bottom: 32rpx;

      .card-container {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 160rpx;
        padding: 0 32rpx;
        .card-img {
          width: 160rpx;
          height: 160rpx;
          margin: 0 16rpx;
        }
        .card-icon {
          box-sizing: border-box;
          width: 42rpx;
          height: 42rpx;
          border: 4rpx solid $shop-bg-line;
          border-radius: 50%;
        }
        .card-content {
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          min-width: 452rpx;
          min-height: 160rpx;
          padding-bottom: 16rpx;
          border-bottom: 2rpx solid var(--f-2-f-2-f-2, $shop-bg-line);
          .sku-name {
            font-family: 'PingFang SC';
            font-size: 28rpx;
            font-style: normal;
            font-weight: 400;
            line-height: 40rpx; /* 142.857% */
            color: var(--333, #333);
            text-align: justify;
          }
          .sku-isSelect {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 200rpx;
            height: 48rpx;
            padding: 8rpx 16rpx;
            margin: 16rpx 0;
            /* Body/ExtraSmall */
            font-family: 'PingFang SC';
            font-size: 20rpx;
            font-style: normal;
            font-weight: 400;
            color: var(--666, $shop-text-6);
            background: var(--f-2-f-2-f-2, $shop-bg-line);
            border-radius: 4rpx;
          }
          .price-num-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .sku-price {
              font-family: 'PingFang SC';
              font-size: 28rpx;
              font-style: normal;
              font-weight: 600;
              line-height: 44rpx; /* 157.143% */
              color: var(--ff-4-c-1-b, $shop-primary);
            }
            .num {
              display: flex;
              align-items: center;
              .show-num {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                gap: 20rpx;
                align-items: center;
                justify-content: center;
                min-width: 64rpx;
                height: 64rpx;
                padding: 10rpx 20rpx;
                border: 2rpx solid var(--f-2-f-2-f-2, $shop-bg-line);
                border-radius: 12rpx;
              }
            }
          }
        }
      }
      .wd-swipe-action {
        box-sizing: border-box;
        width: 100%;
        min-height: 160rpx;
        // background-color: #333333;
      }

      .action {
        display: flex;
        height: 100%;
      }
      .item-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150rpx;
        min-height: 160rpx;
        font-family: 'PingFang SC';
        font-size: 28rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 44rpx; /* 157.143% */
        color: $shop-white;
        text-align: center;
        text-transform: capitalize;
        letter-spacing: 1rpx;
        background: var(--fc-7-b-1-c, $shop-help);
      }
      .item-button-delete {
        background: var(--ff-4-c-1-b, $shop-primary);
      }
    }
  }

  .cart-bottom-area {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    width: 750rpx;
    background: $shop-white;

    .cart-control {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 750rpx;
      height: 120rpx;
      padding: 16rpx 32rpx;
      border-bottom: 2rpx solid var(--f-2-f-2-f-2, $shop-bg-line);
      .cart-select-all {
        display: flex;
        align-items: center;
      }
      .icon {
        box-sizing: border-box;
        width: 42rpx;
        height: 42rpx;
        margin-right: 16rpx;
        border: 4rpx solid $shop-bg-line;
        border-radius: 50%;

        &.select-icon {
          background: url('@/static/images/cart/select.svg') no-repeat center;
          border-color: $shop-bg-line;
        }
      }

      .text {
        margin-right: 96rpx;
        font-family: 'PingFang SC';
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 40rpx;
        color: $shop-text-6;
      }

      .price {
        width: 142rpx;
        margin-right: 24rpx;
        font-family: 'PingFang SC';
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 44rpx;
        color: var(--666, $shop-text-6);
        text-align: center;

        .price-text {
          font-family: 'PingFang SC';
          font-size: 28rpx;
          font-style: normal;
          font-weight: 500;
          line-height: 44rpx; /* 157.143% */
          color: var(--ff-4-c-1-b, $shop-primary);
          text-align: center;
        }
      }

      .button {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 260rpx;
        height: 88rpx;
        font-family: 'PingFang SC';
        font-size: 32rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 48rpx; /* 150% */
        color: #fff;
        text-align: center;
        text-transform: capitalize;
        background: linear-gradient(270deg, $shop-primary 0%, $shop-help 100%);
        border-radius: 42rpx;
      }
    }
  }

  .nav-bar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 18rpx 32rpx;

    .manage-cart {
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 44rpx; /* 157.143% */
      color: var(--666, $shop-text-6);
      text-align: right;
      text-transform: capitalize;
    }

    .cart-pos {
      display: flex;
      align-items: center;

      .text {
        font-family: 'PingFang SC';
        font-size: 36rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 26rpx;
        color: var($shop-text-3, #333333);
      }

      .pos {
        box-sizing: border-box;
        display: flex;
        gap: 8rpx;
        align-items: center;
        align-self: stretch;
        height: 52rpx;
        padding: 10rpx 16rpx;
        margin-left: 32rpx;
        font-family: 'PingFang SC';
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 40rpx; /* 166.667% */
        color: var(--666, $shop-text-6);
        background: var(--f-2-f-2-f-2, $shop-bg-line);
        border-radius: 200rpx;
      }
    }
  }
</style>
