<template>
  <div class="FlowImagesDiv">
    <div v-for="item in imgArr" class="FlowImagesBox box">
      <div @click="imgclick(src)" v-for="(src, index) in item" class="FlowImg box_f1" :style="`height: ${imgH}px; background-image: url('${src}')`">
        <div v-if="flowimgname && flowimgname[index]" class="FlowImagesTitle slh">{{flowimgname[index]}}</div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "d-flowImages",
        mounted() {
          this.clientWidth = document.documentElement.clientWidth;
          this.imgH = parseInt(this.clientWidth/3/1.5)
          //
          if(this.min && Array.isArray(this.min)) {
            this._min = this.min
            if(!this.max || this.min.length!=this.max.length) {
              this._max = this.min
            }else {
              this._max = this.max
            }
          }else {
            return;
          }
          if(this.imgname && Array.isArray(this.imgname))this.flowimgname = this.imgname
          //
          let _imgArr = [];
          let c = parseInt(this._min.length%3)==0?0:3-parseInt(this._min.length%3)
          this._min.forEach((item, index)=>{
            let n = parseInt(index/3);
            if(!_imgArr[n])_imgArr[n] = [];
            _imgArr[n].push(item)
          })
          _imgArr[_imgArr.length-1] = [..._imgArr[_imgArr.length-1], ...new Array(c)];
          this.imgArr = _imgArr;

        },
        data() {
            return {
              _min: [],
              _max: [],
              flowimgname: [],
              imgH: 0,
              imgArr: []
            }
        },
        props: {
          min: Array,
          max: Array,
          imgname: Array
        },
        components: {},
        methods: {
          imgclick(url) {
            if(url) {
              let n = this._min.indexOf(url)
              if(n!=-1)url = this._max[n];
              this.$emit('imgclick',this._max, n)
            }
          }
        }
    }
</script>

<style scoped>
  .FlowImagesDiv{
    height: auto;
    overflow: hidden;
  }
  .FlowImagesBox {
    width: 100%;
    margin-bottom: 1px;
  }
  .FlowImg {
    margin-right: 1px;
    background-size: cover;
    position: relative;
  }
  .FlowImg:last-child {
    margin-right: 0;
  }
  .FlowImagesTitle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background-color: rgba(0,0,0,.5);
    text-align: left;
    line-height: 25px;
    color: #fff;
    box-sizing: border-box;
    padding: 0 5px;
    font-size: 14px;
  }
</style>
