<template>
  <view class='content'>
    <view class='c-flex-row'>
      <text class='manage' @click.stop='isEditMode = !isEditMode'>管理</text>
    </view>

    <view class='card-view'>
      <scroll-view>
        <view class='c-flex-column' v-for='(item, index) in [1,2,3,5]' :key='index'>
          <view class='c-flex-row'>
            <image v-show='isEditMode' class='checkbox' :src='assetsUrl("ic_checkbox_active_red.png")' />
            <image class='goods-image' :src='assetsUrl("test_bg.png")' />
            <view class='c-flex-column'>
              <text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装
              </text>
              <view class='sku-view'>
                <text>紫色，120cm x1</text>
                <image :src='assetsUrl("ic_arrow_down_gray.png")' />
              </view>
              <text>￥29.90</text>
              <view class='count-change-view c-flex-row'>
                <view class='count-image' @click.stop='countChange(false)'>
                  <image :src='assetsUrl("ic_reduce.png")' />
                </view>
                <text>{{ goodsCount }}</text>
                <view class='count-image' @click.stop='countChange(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>合计：
        <text>￥29.90</text>
      </text>
      <text class='settlement' @click.stop='settlement'>结算</text>
    </view>
  </view>
</template>

<script lang='ts' setup>

import { assetsUrl } from '@/utils/assets';

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

const countChange = (isPlus: Boolean) => {

};

const settlement = () => {

};
</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;
    border-radius: 10rpx;
    background: #FFFFFF;
    padding: 10rpx 20rpx 20rpx 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: 28rpx;
          color: #333333;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
        }

        .sku-view {
          display: flex;
          flex-direction: row;
          width: 210rpx;
          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;
      color: #333333;

      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>
