<template>
  <div>
    <el-dialog
      title="查看病害图片"
      :visible.sync="dialogVisible"
      width="1000px"
      :before-close="handleClose"
      appendToBody
      destroy-on-close
      :open="open"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      top="8vh"
    >
      <div class="block" v-if="dialogVisible">
        <el-carousel
          v-if="imgArr.length != 0"
          trigger="click"
          height="500px"
          :autoplay="false"
        >
          <el-carousel-item v-for="(item, index) in imgArr" :key="index">
            <img :src="item.url" alt="" style="width:100%;height:100%" />
          </el-carousel-item>
        </el-carousel>
        <div class="noData" v-else style="height:500px">
          <span>暂无病害图片...</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import basicData from '@/api/basicData.js'
export default {
  data() {
    return {
      dialogVisible: false,
      imgArr: []
    }
  },
  methods: {
    handleClose(done) {
      done()
    },
    open(row) {
      console.log(row)
      this.dialogVisible = true
      this.getImage(row.id)
    },
    getImage(id) {
      const params = {
        pageBean: {
          page: 1,
          pageSize: 20,
          showTotal: true
        },
        params: {},
        querys: [
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'sourceId',
            relation: 'AND',
            value: id
          }
        ],
        sorter: []
      }
      basicData.getEnclosurevirus(params).then(res => {
        console.log(res)
        if (res.rows.length != 0) {
          this.imgArr = res.rows
        } else {
          this.imgArr = []
          // console.log('进来了')
          // this.$message({
          //   message: '请添加病害图片',
          //   type: 'warning'
          // })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }
::v-deep .el-carousel__button {
  background-color: #99a9bf !important;
}

::v-deep .el-carousel__item.is-animating {
  display: flex;
  justify-content: center;
  align-items: center;
}
.noData {
  width: 100%;
  height: 100%;
  span {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 16px;
    font-family: monospace;
    font-weight: bold;
    color: #aabbc1;
    transform: translate(-50%, -50%);
  }
}
</style>
