<template>
  <!-- 详情预览 -->
  <div class="view_picture">
    <el-dialog
      :visible="previewVisible"
      @update:visible="$emit('update:previewVisible',false)"
      width="70%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      title="详情预览"
      append-to-body
      center
    >
      <div class="demo_image_lazy">
        <div v-if="firstImg<1">暂无数据...</div>
        <el-image  v-for="url in urls" :key="url" :src="url" v-else lazy></el-image>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  props: ["previewVisible","reportId","type"],
  data() {
    return {
      // 院校
      urls: [],
      id:"",
      // 学习资源
      source:[],
      // 首张图片长度
      firstImg:""
    };
  },
  methods: {
    handleClose: function() {
      this.$emit("update:previewVisible", false);
    },
    // 大学院校详情
    getSchoolDetail() {
      let url = "/api/school/getSchoolDetail/";
      let params = {
        school_id: this.id
      };
      post(url, params).then(res => {
        this.urls = res.report_img;
        this.firstImg = this.urls[0].length
      });
    },
    // 学习资源详情
    getBooksDetail() {
      let url = "/api/resource/getBooksDetail/";
      let params = {
        id: this.id
      };
      post(url, params).then(res => {
        this.urls = res.file_images;
        this.firstImg = this.urls[0].length
      });
    },
  },
  mounted() {
    this.id = this.reportId;
    if(this.type == 1){
      // 院校
      this.getSchoolDetail();
    }else if(this.type == 2){
      // 学习资源
      this.getBooksDetail();
    }
    
  }
};
</script>
<style scoped>
.demo_image_lazy{
  overflow-y: scroll;
  height: 600px;
}
.el-image{
  display:block!important;
  width: 400px;
  margin:0 auto;
  margin-top:20px;
}
.el-image img{
  height:100%;
}
</style>