<template>
  <div class="pic-list-container">
    <div class="pic" v-for="(item, index) in showPicList" :key="index" @click.stop="onClickPic(index)">
      <template v-if="item.type === 'IMG'" >
        <WlPic :src="item.url" :alt="item.url"/>
      </template>
    </div>
    <span v-if="data.length > 3" class="toAll">共{{ data.length }}张图片</span>
  </div>
</template>

<script>
import { turnThumbnial } from "@RecordCard/utils/utils";
import WlPic from "weiling-mobile-ui/lib/WlPic";
export default {
  name: "PicList",
  components: { WlPic },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    number: {
      type: Number,
      default: 3,
    },
  },
  computed: {
    showPicList() {
      return this.data.slice(0, this.number).map((res) => {
        return {
          url: turnThumbnial(res.url),
          type: res.type,
        };
      });
    },
  },
  methods: {
    onClickPic(position) {
      const picList = this.data.slice(0, this.number);
      this.$emit("onClickPic", {
        images: picList.map((res) => res.url),
        position,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pic-list-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;

  .toAll {
    font-size: j(12px);
    line-height: j(16px);
    color: var(--wl-primary-color-dark, #556b94);
    margin-left: j(8.5);
  }

  .pic {
    width: j(40);
    height: j(40);
    border-radius: j(4px);
    margin-right: j(8);
    overflow: hidden;
    object-fit: cover;
  }
}
</style>
