<template>
  <div>
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="isShow"
      title="选择封面图"
      :fullscreen="false"
      width="730px"
      custom-class="xl-dialog"
      center
    >
     <div class="scoped-img">
       <div :class="curIndex === index ? 'op cur' : 'op'" @click="curIndex = index" v-for="(imgSrc,index) in imgTempArr" :key="index">
         <img :src="imgSrc" class="img" />
       </div>
     </div>
     <div class="xl-form" style="padding: 20px 0;">
      <el-button class="xl-form-btn t2" @click="dealImgPopup">关 闭</el-button>
      <el-button class="xl-form-btn t1" @click="dealImgPopup('confirm')">去裁剪</el-button>
    </div>
    </el-dialog>
    <cropper-img
      :isShow="isCIShow"
      :curObj="uploadObj"
      @close="cuImgClose"
    />
  </div>
</template>
<script>
import CropperImg from '@/components/Common/CropperImg'
export default {
  components: { CropperImg },
  mixins,
  props: {
    isShow: Boolean,
    imgTempArr: Array
  },
  data() {
    return {
      uploadObj: {},
      curIndex: 0,
      isCIShow: false,
    }
  },
  watch: {
    isShow: function() {},
  },
  methods: {
    cuImgOpen(url) {
      this.uploadObj = {
        url,
        options: {
          w: 375,
          h: 262,
        },
      }
      this.isCIShow = true
    },
    cuImgClose (url) {
      this.isCIShow = false
      if (url) {
        this.$emit('close', url)
      }
    },
    dealImgPopup(str) {
      if (str === 'confirm') {
        // console.log(this.imgTempArr[this.curIndex])
        this.cuImgOpen(this.imgTempArr[this.curIndex])
        // return
        // this.$emit('close', this.imgTempArr[this.curIndex])
      } else {
        this.$emit('close')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.scoped-img {
  max-height: 500px;
  overflow-y: auto;
  .op {
    display: inline-block;
    vertical-align: middle;
    border: 5px solid #dcdcdc;
    border-radius: 10px;
    width: 200px;
    height: 160px;
    box-sizing: border-box;
    margin-right: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    cursor: pointer;
    &.cur {
      border-color: #2d8cf0;
    }
    .img {
      width: 200px;
      height: auto;
      min-height: 160px;
    }
  }
}
</style>
