<template>
  <div v-if="show">
    <el-image style="width: 100%; border-radius: 5px" :src="row.carImg" :preview-src-list="[row.carImg]" v-if="row.name == '车牌图片'"></el-image>
    <div v-else>
      <el-image style="width: 100%; border-radius: 5px" :src="list[current].url" :preview-src-list="list"></el-image>
      <div class="pimg" v-for="(item, index) in list" :key="index">
        <img class="imgs" :src="item.url" @click="current = index" />
        <div class="nas" :class="{ active: current == index }">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      row: {},
      current: 0,
      list: []
    };
  },
  methods: {
    init(row) {
      this.list = [];
      this.row = row;
      this.show = true;
      this.current = 0;
      if (this.row.boxFImg) {
        this.row.boxFImg.split(',').forEach((item) => {
          this.list.push({ name: '前箱号', url: item });
        });
      }
      if (this.row.boxBImg) {
        this.row.boxBImg.split(',').forEach((item) => {
          this.list.push({ name: '后箱号', url: item });
        });
      }
      this.$forceUpdate();
    }
  }
};
</script>
<style lang="scss" scoped>
.pimg {
  width: 70px;
  height: 70px;
  float: left;
  margin-right: 5px;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  .imgs {
    width: 70px;
    height: 70px;
    object-fit: cover;
  }
  .nas {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #000000b0;
    color: white;
    font-size: 13px;
    padding: 3px;
    text-align: center;
    &.active {
      color: #03a9f4;
    }
  }
}
</style>
