<template>
  <div class="photoWork">
    <div class="photoWorkDiv" v-for="(list, listIndex) in resultData" :key="listIndex">
      <div class="year" v-if="listIndex!=0">{{list.year}}年</div>
      <div class="workDiv" v-for="(item, index) in list.children" :key="index">
        <div class="date">
          <span class="day">{{item.day}}</span>
          <span class="month">{{item.month}}月</span>
        </div>
        <div class="imgDiv">
          <img class="pointer" v-for="(value, i) in item.srcList" :key="i" @click="lookViewer(item.srcList, i)" :src="value" alt="">
        </div>
        <div class="describe">{{item.umz_name}}</div>
        <div class="operate">
          <el-icon class="pointer" @click.stop="handleEdit(item.umz_id)">
            <EditPen />
          </el-icon>
          <el-icon class="pointer" @click.stop="handleDelete(item.umz_id)" style="margin-left: 20px;">
            <Delete />
          </el-icon>
        </div>
      </div>
    </div>

    <el-image-viewer v-if="showViewer" @close="closeViewer" :url-list="imageData" :initial-index="imageIndex" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showViewer: false,
      imageData: [],
      imageIndex: "",
    }
  },
  props: ["resultData"],
  methods: {
    handleEdit(umz_id) {
      this.$emit("edit", umz_id);
    },
    handleDelete(umz_id) {
      this.$emit("delete", umz_id);
    },
    lookViewer(imageData, index) {
      this.imageData = imageData;
      this.imageIndex = index;
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.photoWork {
  padding: 40px 30px;
  .pointer {
    cursor: pointer;
  }
  .photoWorkDiv {
    .year {
      font-size: 24px;
      margin-bottom: 10px;
    }
    .workDiv {
      display: flex;
      margin-bottom: 50px;
      padding-left: 45px;
      position: relative;
      .date {
        position: absolute;
        left: 0;
        top: -12px;
        .day {
          font-size: 20px;
        }
        .month {
          font-size: 12px;
        }
      }
      .imgDiv {
        display: flex;
        flex-wrap: wrap;
        // width: 516px;
        img {
          width: 162px;
          height: 162px;
          margin: 5px;
        }
      }
      .describe {
        margin: 0 20px;
        flex: 1;
        font-size: 16px;
        min-width: 280px;
      }
      .operate {
        white-space: nowrap;
      }
    }
  }
}
</style>