<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>

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

    <!-- 弹出框 -->
    <!-- <u-popup
      class="posi"
      v-model="edit"
      mode="bottom"
      :mask="false"
      length="100rpx"
    >
      <view class="pop-up">
        <u-checkbox-group class="checkStyle">
          <u-checkbox
            @change="checkboxChange"
            v-model="allchecked"
            name="全选"
            shape="circle"
            >全选</u-checkbox
          >
        </u-checkbox-group>
        <u-button size="mini" class="bttn">取消收藏</u-button>
      </view>
    </u-popup> -->
  </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,
      // 全选
      // allchecked: false,
    };
  },
  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>
.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;
  }
  // // 底部地位
  // .posi {
  //   position: absolute;
  //   bottom: 0;
  //   .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%);
  //     }
  //   }
  // }
}
//头部旗帜店名
.flagname {
  width: 144px;
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 700;
}
</style>
