<template>
  <div class="image-list">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item><a @click="mainClick" href="javascript:void(0);">目录</a></el-breadcrumb-item>
      <el-breadcrumb-item><a @click="mainClick" href="javascript:void(0);">{{imageDetail.driverName}}</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="imageDetail.formatExecutionStartTime"><a @click="mainClick" href="javascript:void(0);">{{imageDetail.formatExecutionStartTime}}</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="selectType.key">{{selectType.value}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div :style="{height:boxHeight+'px'}" class="image-box">
      <div v-if="!selectType.key" class="catalog">
        <div @click="documentClick(key,value)" v-for="(value,key,index) in documentList">
          <img src="@/assets/img/dir.png">
          <div>{{value}}<span v-if="imageDetail.imgList">({{imageDetail.imgList.filter(item=>item.file_document==key).length}})</span></div>
        </div>
      </div>
      <viewer v-if="selectType.key&&type=='show'" class="img-list">
        <div v-if="item.thumb_img" :key="index" v-for="(item,index) in imageDetail.imgList.filter(child=>child.file_document==selectType.key)" class="item-child">
          <img :data-source="item.original_img" v-lazy="item.thumb_img">
          <div :title="item.original_img">{{item.original_img.split('/')[item.original_img.split('/').length-1]}}
          </div>
        </div>
      </viewer>
      <div v-if="selectType.key&&type=='sign'" class="img-list">
        <div @click="sign(item)" v-if="item.thumb_img"  :key="index" v-for="(item,index) in imageDetail.imgList.filter(child=>child.file_document==selectType.key)" class="item-child">
          <img v-lazy="item.thumb_img">
          <div :title="item.original_img">{{item.original_img.split('/')[item.original_img.split('/').length-1]}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "imageList",
    data() {
      return {
        boxHeight: ''
      }
    },
    props: {
      selectType: {
        type: Object,
        default() {
          return {};
        }
      },
      documentList: {
        type: Object,
        default() {
          return {};
        }
      },
      type:{
        type: String,
        default() {
          return 'show';
        }
      },
      imageDetail: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    created() {
      this.boxHeight = document.body.clientHeight - 240
    },
    mounted() {
    },
    methods: {
      mainClick() {
        this.selectType = {}
      },
      documentClick(key, value) {
        let selectType = {
          key: key,
          value: value
        }
        this.selectType=Object.assign({},selectType)
      },
      sign(data){
        let imageDetail = JSON.parse(JSON.stringify(this.imageDetail))
        imageDetail.imgList = imageDetail.imgList.filter(item=>item.file_document==this.selectType.key)
        imageDetail.selectTypeName = this.selectType.value
        imageDetail.selectType = this.selectType.key
        imageDetail.id=data.id
        this.$emit('sign',imageDetail)
      }
    }
  }
</script>

<style lang="less">
  .image-list {
    .image-box {
      overflow-x: hidden;
      overflow-y: auto;
      margin-top: 20px;
      width: 100%;
      background-color: #fff;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);

      .catalog {
        display: flex;

        > div {
          cursor: pointer;
          margin-left: 50px;
          margin-top: 10px;
          text-align: center;

          > img {
            height: 50px;
            width: 50px;
          }
        }
      }

      .img-list {
        display: flex;
        flex-wrap: wrap;

        .item-child {
          width: 120px;
          text-align: center;
          margin-left: 20px;
          margin-top: 15px;

          img {
            cursor: pointer;
            height: 50px;
          }

          > div {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
      }
    }
  }
</style>
