<template>
  <!-- 我的收藏 
  isbrowse传给子组件判断是否需要爱心  默认false 
  editor 出现checkout的bool  默认false
  list传过去的数据  Array
  options 右边滑动出现删除的东西  Array
  -->
  <view class="collect" :style="`margin-top: ${safeDiced}px`">
    <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="collectionList"
        :options="options"
        @update="update"
      >
        <!-- 头部插槽 -->
        <template v-slot:default="slots">
          <!-- 头部title -->
          <text class="flagname">{{ slots.title.supplierName }}</text>
        </template>
      </browse-item>
    </view>
    <!-- 导航条 -->
    <hs-tab-bar></hs-tab-bar>
    <!-- 底部占位符 -->
    <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: [],
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      // 编辑点击
      edit: false,
      //顶部安全距离
      safeDiced: "",
    };
  },
  computed: {
    //计算
    collectionList() {
      let dataInfo = {};
      this.list.forEach((item, index) => {
        let { supplierName } = item;
        if (!dataInfo[supplierName]) {
          dataInfo[supplierName] = {
            supplierName,
            browseChild: [],
          };
        }
        dataInfo[supplierName].browseChild.push(item);
      });
      return Object.values(dataInfo);
    },
  },

  methods: {
    //更新
    update() {
      this.collectionFn();
    },
    // 编辑
    editorClick() {
      this.edit = true;
    },
    // 完成
    completeClick() {
      this.edit = false;
    },

    // 我的收藏接口
    collectionFn() {
      this.$http("mobileBrand.myCollect").then((res) => {
        let { code, data } = res;
        if (code === 200) {
          this.list = data;
          this.list = this.list.map((el) => {
            return {
              ...el,
              show: false,
              checked: false,
            };
          });
        }
      });
    },
  },
  mounted() {
    this.collectionFn();
    uni.getSystemInfo({
      success: (res) => {
        this.safeDiced = res.safeArea.top;
      },
    });
  },
};
</script>

<style lang="scss" scoped>
// 底部占位符
.mask-template1 {
  width: 100%;
  height: 150rpx;
}
.mask-template2 {
  width: 100%;
  height: 250rpx;
}
.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;
  }
}
</style>
