<template>
  <!-- 浏览记录组件和收藏 -->
  <view class="browse">
    <u-card :head-border-bottom="false">
      <!-- 头部 -->
      <view slot="head">
        <view>
          <!-- 全选框 -->
          <u-checkbox-group v-if="edit">
            <u-checkbox
              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
                v-model="item.checked"
                name="item.name"
                shape="circle"
              ></u-checkbox>
            </u-checkbox-group>
            <!-- 照片 -->
            <!-- <image class="imges" :src="item.images" /> -->
            <image
              class="imges"
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F09%2F3a%2Fbc%2F093abce7b31f4c8ffdbf345375ff4abb.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644931622&t=9c5aebc238749b4bc123b4663bc89cb1"
            />
            <!-- 此层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)"
                    :src="item.browseImg"
                    v-if="islove"
                  ></image>
                  <image
                    @click="browerClick(index)"
                    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>
  </view>
</template>

<script>
export default {
  props: {
    //是否显示爱心
    isbrowse: {
      type: Boolean,
      default: false,
    },
    // 点击编辑的时候的显隐
    edit: {
      type: Boolean,
      default: false,
    },
    // 数据
    list: { type: Array },
    options: { type: Array },
  },
  data() {
    return {
      // 爱心的黑暗显影
      islove: false,
      //全选
      allchecked: false,
    };
  },
  methods: {
    // 爱心点击
    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;
}
::v-deep .u-border-bottom {
  padding-left: 0rpx;
}
</style>
