<template>
  <!-- 我的收藏 
  isbrowse传给子组件判断是否需要爱心  默认false 
  editor 出现checkout的bool  默认false
  list传过去的数据  Array
  options 右边滑动出现删除的东西  Array
  -->
  <view class="collect">
    <view class="head">
      <text class="text1">我的收藏</text>
      <text class="text2">My collection</text>
      <text class="btn" @click="editorClick" v-show="!edit">编辑</text>
      <text class="btn" @click="completeClick" v-show="edit">完成</text>
    </view>

    <view class="collect-body">
      <browse-item
        :isbrowse="false"
        :edit="edit"
        :list="list"
        :options="options"
      >
        <!-- 头部插槽 -->
        <template #title>
          <!-- 头部title -->
          <text class="flagname">加厚荷兰绒绒布布料</text>
        </template>
      </browse-item>

      <!-- 弹出框 -->
      <view class="posi" v-show="edit">
        <view class="pop-up">
          <u-checkbox-group class="checkStyle">
            <u-checkbox v-model="playCheckout" name="全选" shape="circle"
              >全选</u-checkbox
            >
          </u-checkbox-group>
          <u-button size="mini" class="bttn">取消收藏</u-button>
        </view>
      </view>
    </view>
    <!-- 底部占位符 -->
    <view :class="{ 'mask-template1': !edit, 'mask-template2': edit }"></view>
  </view>
</template>

<script>
import browseItem from "./components/browseItem.vue";
export default {
  components: { browseItem },
  data() {
    return {
      list: [
        {
          id: 1,
          title:
            "wos长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来",
          images: require("@/static/images/brank/thumb.png"),
          show: false, //这个传过去判断滑出删除其他的要不要关闭的
          browseImg: require("@/static/images/brank/blackxin.png"),
          name: "apple",
          checked: false,
        },
        {
          id: 2,
          title:
            "新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来",
          images: require("@/static/images/brank/thumb.png"),
          show: false,
          browseImg: require("@/static/images/brank/blackxin.png"),
          name: "banner",
          checked: false,
        },
        {
          id: 3,
          title: "登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇",
          images: require("@/static/images/brank/thumb.png"),
          show: false,
          browseImg: require("@/static/images/brank/blackxin.png"),
          name: "orange",
          checked: false,
        },
      ],
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      // 编辑点击
      edit: false,
      // 弹出全选
      playCheckout: false,
    };
  },
  computed: {},
  methods: {
    // 编辑
    editorClick() {
      this.edit = true;
    },
    // 完成
    completeClick() {
      this.edit = false;
    },
    // 弹出垮选中某个复选框时，由checkbox时触发
    // checkboxChange(e) {
    //   // 全选操作
    //   if (e.name == "全选") {
    //     if (!this.allchecked) {
    //       this.list.map((val) => {
    //         val.checked = true;
    //       });
    //     } else {
    //       this.list.map((val) => {
    //         val.checked = false;
    //       });
    //     }
    //   }
    // },
  },
};
</script>

<style lang="scss" scoped>
// 底部占位符
.mask-template1 {
  width: 100%;
  height: 100rpx;
}
.mask-template2 {
  width: 100%;
  height: 200rpx;
}
.collect {
  height: 100%;
  position: relative;
  .head {
    width: 100%;
    margin-top: 16rpx;
    position: relative;
    margin-bottom: 36rpx;
    .text1 {
      width: 160rpx;
      height: 56rpx;
      font-size: 40rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.8);
      line-height: 56rpx;
      margin-left: 38rpx;
    }
    .text2 {
      width: 194rpx;
      height: 40-rpx;
      font-size: 28rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #dda973;
      line-height: 40rpx;
      margin-left: 10rpx;
    }
    .btn {
      width: 56rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 700;
      text-align: right;
      color: rgba(0, 0, 0, 0.6);
      line-height: 40rpx;
      position: absolute;
      right: 30rpx;
      bottom: 0;
    }
  }

  //头部旗帜店名
  .flagname {
    width: 144px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 700;
  }
  // 底部弹出的位置
  .posi {
    position: fixed;
    bottom: 100rpx;
    height: 100rpx;
    width: 100%;
    background-color: white;
    .pop-up {
      position: relative;
      height: 100%;
      .checkStyle {
        position: absolute;
        left: 59rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      .bttn {
        width: 160rpx;
        height: 64rpx;
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
