<template>
  <el-dialog title="应急预案详情" :visible.sync="detailOpen" @closed="dialogClose" @open="dialogOpen" width="1200px" append-to-body>
      <el-form label-width="100px">
        <div class="division">

          <div style="width: 40%;"> 

            <el-form-item label="预案标题">
                <span v-if="detailInfo.planTitle">{{ detailInfo.planTitle }}</span>
                <span v-else>-</span>
            </el-form-item> 

            <el-form-item label="预案类型">
                <span v-if="detailInfo.planType">{{ $parent.planTypeFormat(detailInfo) }}</span>
                <span v-else>-</span>
            </el-form-item>  
            
            <el-form-item label="预案等级">
                <span v-if="detailInfo.planLevel">{{ $parent.planLevelFormat(detailInfo) }}</span>
                <span v-else>-</span>
            </el-form-item>   
            <el-form-item label="所属企业">
                <span v-if="detailInfo.beyondEnterpriseName">{{ detailInfo.beyondEnterpriseName }}</span>
                <span v-else>-</span>
            </el-form-item>    
            
            <el-form-item label="应急设备车辆">
                <span v-if="detailInfo.planEquipment">{{ detailInfo.planEquipment }}</span>
                <span v-else>-</span>
            </el-form-item>    
            
            <el-form-item label="备注">
                <span v-if="detailInfo.remarks">{{ detailInfo.remarks }}</span>
                <span v-else>-</span>
            </el-form-item>       

            <el-form-item label="预案附件" prop="iconUrl" >
              <span
                class="dbtn"
                @click="checkFile(detailInfo.iconUrl)"
                v-if="detailInfo.iconUrl!=null && detailInfo.iconUrl != ''"
              >
                <i class="el-icon el-icon-view"></i>查看/下载
              </span>
              <span v-else>-</span>
            </el-form-item>

          </div>

          <div style="width: 58%;margin-left: 2%">
            <div class="titletitle">方案内容</div>
             <editor id="editor"  v-model="detailInfo.planContents" :min-height="300" :readOnly="true"/>
          </div>

        </div> 
      </el-form> 
    </el-dialog>
</template>

<script>
 import Editor from '@/components/Editor';
 import { getPlanInfo } from "@/api/system/planInfo";
 let uploadfile = require("@/assets/uploadfile.png");

  export default {
    name: "detail-info",
    components: {
        Editor
    },
    data(){
        return{
          detailInfo: {},
          detailOpen: false, 
          isOpen:false,
          fileList:[],
          fileurl:'',
        }
    },
    methods:{ 
    dialogClose(){
      this.detailOpen=false;
    },
    dialogOpen(){
      this.detailOpen=true;
    },
    checkFile(url) {
      window.open(url,'_blank');
    },
      getDetailInfo(id){
        getPlanInfo(id).then(res =>{
          if(res.code == 200 && res.data){
            this.detailInfo = res.data; 
            this.fileList = [{name: '附件', url:uploadfile}];
            this.fileurl = this.detailInfo.iconUrl;
            this.detailOpen = true;
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">

.division{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
  }
</style>
