<template>
  <!-- 浏览记录组件 -->
  <view class="browse">
    <u-card :head-border-bottom="false">
      <!-- 头部 -->
      <view slot="head">
        <view>
          <u-checkbox-group v-if="edit">
            <u-checkbox
              @change="checkboxChange"
              v-model="allchecked"
              name="全选"
              shape="circle"
            ></u-checkbox>
          </u-checkbox-group>
          <!-- 插槽 -->
          <slot name="title"></slot>
        </view>
      </view>
      <!-- 主体 -->
      <view slot="body">
        <u-swipe-action
          :show="item.show"
          :index="index"
          v-for="(item, index) in list"
          :key="item.id"
          @click="click"
          @open="open"
          :options="options"
        >
          <view class="item u-border-bottom">
            <!-- 多选框 -->
            <u-checkbox-group v-if="edit">
              <u-checkbox
                @change="checkboxChange"
                v-model="item.checked"
                name="item.name"
                shape="circle"
              ></u-checkbox>
            </u-checkbox-group>
            <!-- 照片 -->
            <image class="imges" :src="item.images" />
            <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
            <view class="title-wrap">
              <view class="title">{{ item.title }}</view>
              <!-- 款号 -->
              <view class="modelno">
                <text class="textStyle1">款号</text>
                <text class="textStyle2">AS23124</text>
                <!-- 是否需要爱心 -->
                <view v-if="isbrowse">
                  <image
                    @click="browerClick(index, $event)"
                    :src="item.browseImg"
                    v-if="islove"
                  ></image>
                  <image
                    @click="browerClick(index, $event)"
                    src="@/static/images/brank/lightxin.png"
                    v-else
                  ></image>
                </view>
              </view>
              <!-- 面料 -->
              <view class="fabric">
                <text class="textStyle1">面料</text>
                <text class="textStyle2">AS23124</text>
              </view>
            </view>
          </view>
        </u-swipe-action>
      </view>
    </u-card>

    <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>
export default {
  props: {
    isbrowse: {
      type: Boolean,
      default: false,
    },
    edit: {
      type: Boolean,
      default: false,
    },
    list: { type: Array },
    options: { type: Array },
  },
  data() {
    return {
      show: false,
      // 爱心的黑暗显影
      islove: false,
      //全选
      allchecked: false,
    };
  },
  methods: {
    // 选中某个复选框时，由checkbox时触发
    checkboxChange(e) {
      // 全选操作
      if (e.name == "全选") {
        if (!this.allchecked) {
          this.list.map((val) => {
            val.checked = true;
          });
        } else {
          this.list.map((val) => {
            val.checked = false;
          });
        }
      }
    },

    // 爱心点击
    browerClick(i, e) {
      console.log(i, e);
      // this.islove = !this.islove;
    },
    //滑动删除的东西
    click(index, index1) {
      if (index1 == 0) {
        this.list.splice(index, 1);
        this.$u.toast(`删除了第${index}个cell`);
      } else {
        this.list[index].show = false;
        this.$u.toast(`收藏成功`);
      }
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.browse {
  ::v-deep .u-card__body {
    padding-top: 29rpx !important;
  }
  ::v-deep .u-card__head {
    padding-bottom: 0rpx !important;
  }
}
.item {
  display: flex;
  padding: 20rpx;
}

.imges {
  width: 162rpx;
  height: 162rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.title {
  width: 440rpx;
  font-size: 28rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 700;
  text-align: left;
  color: #333333;

  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*禁止换行*/
  text-overflow: ellipsis;
}
//头部时间图标
.browseicon {
  width: 32rpx;
}
//头部时间
.browseTime {
  width: 252rpx;
  height: 32rpx;
  font-size: 32rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-left: 10rpx;
}

// 款号
.modelno {
  height: 40rpx;
  margin-top: 16rpx;
  display: flex;
  position: relative;
  image {
    height: 40rpx;
    width: 45rpx;
    position: absolute;
    right: 29rpx;
  }
}
//面料
.fabric {
  margin-top: 6rpx;
}
.textStyle1 {
  color: rgba(0, 0, 0, 0.4);
}
.textStyle2 {
  margin-left: 40rpx;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 500;
  color: #333333;
}

// 底部地位
.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%);
    }
  }
}
</style>
