<template>
  <div class="height_100">
    <el-container>
        <el-aside width="350px">
            <el-form ref="form" :model="form" label-width="140px" size="mini" style="margin-top:20px">
                <el-form-item label="事件名称：">
                    <myTooltip :content="form.name">
                        <div v-html="$commonJS.getColumnData(form, {type:'String',value:'name'})" class="noWrap"></div>
                    </myTooltip>
                </el-form-item>
                <el-form-item label="报告数量："> 
                  <el-link type="primary" @click="checkList('2')">
                    <span v-html="$commonJS.getColumnData(form, {type:'String',value:'reportProjectNum'})"></span>
                  </el-link>
                </el-form-item>
                <el-form-item label="专利数据库数量：">
                  <el-link type="primary" @click="checkList('1')">
                    <span v-html="$commonJS.getColumnData(form, {type:'String',value:'patentProjectNum'})" ></span>
                  </el-link>
                </el-form-item>
                <el-form-item label="应用场景：">
                  <myTooltip :content="$commonJS.getColumnData(form, {type:'Array',value:'scenarioNames'})">
                    <div class="noWrap" v-html="$commonJS.getColumnData(form, {type:'Array',value:'scenarioNames'})"></div>
                  </myTooltip>
                </el-form-item>
                <el-form-item label="发生时间：">
                  <myTooltip :content="form.eventDate" >
                    <div v-html="$commonJS.getColumnData(form, {type:'String',value:'eventDate'})" class="noWrap"></div>
                  </myTooltip>
                </el-form-item>
                <el-form-item label="描述：">
                  <myTooltip :content="form.description" >
                    <div v-html="$commonJS.getColumnData(form, {type:'String',value:'description'})" class="noWrap"></div>
                  </myTooltip>
                </el-form-item>
                <el-form-item label="创建人：">
                  <myTooltip :content="form.createName" >
                    <div v-html="$commonJS.getColumnData(form, {type:'String',value:'createName'})" class="noWrap"></div>
                  </myTooltip>
                </el-form-item>
                <el-form-item label="创建时间：">
                  <myTooltip :content="form.createTime" >
                    <div v-html="$commonJS.getColumnData(form, {type:'String',value:'createTime'})" class="noWrap"></div>
                  </myTooltip>
                </el-form-item>
            </el-form>
        </el-aside>
        <el-main >
            <visual :visuals="visuals" v-if="show"></visual>
        </el-main>
    </el-container>
    <project-Drawer ref="projectDrawer" @isEdit="isEdit"></project-Drawer>
  </div>
</template>

<script>
import visual from './visual.vue'
import projectDrawer from './drawer/index.vue'
export default {
  components: {
    visual,
    projectDrawer
  },
  props: {},
  data() {
    return {
        form:{},
        show:true
    };
  },
  watch: {},
  computed: {
    visuals(){
        return JSON.parse(this.$route.query.visuals)
    },
  },
  created() {},
  mounted() {
    this.getQuestionDetails()
  },
  methods: {
    checkList(type){
      var data = {
        type:type,
        eventName:this.form.name,
        eventId:this.eventId
      }
      this.$refs.projectDrawer.open(data)
    },
    isEdit(val){
      if(val){
        this.getQuestionDetails()
      }
    },
    getQuestionDetails(){
        let params = {
            current:1,
            size:10,//分页信息
            searchQuery:`id=${this.visuals.eventId}`,//检索条件
            orderDTOList: [
                {
                    "orderBy": "createTime",
                    "orderType": 1
                }
            ],//排序
        }
        this.$api.queryEvent(params).then(res => {
            if (res.code == 200) {
                this.form = res.data.data[0]
                this.show = false
                this.$nextTick(()=>{
                    this.show = true
                })
            }
        }).catch(err => {
            this.form = {}
            this.show = false
            this.$nextTick(()=>{
                this.show = true
            })
        })
    }
  },
};
</script>
<style lang="scss" scoped>
</style>
