<template>
  <div>
    <el-dialog title="详情" :visible.sync="open" width="600px" append-to-body destroy-on-close :close-on-click-modal="false">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="事件">
              <span class="plan" @click="eventInfo(detailInfo.eventId)">{{ detailInfo.eventTitle }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="组号">
              <span>{{ $parent.groupFormat(detailInfo) }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="联系人">
              <span>{{ detailInfo.disposer }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="应急预案">
              <span
                v-for="(item,index) in detailInfo.planTitle.split(',')"
                @click="planDetail(item)"
                class="plan"
              >
                {{ item + (index == detailInfo.planTitle.split(",").length - 1 ? "" : ",")}}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 事件详情 -->
    <eventDetail ref="event"/>

    <!-- 预案详情 -->
    <DetailInfo ref="detail"/>
  </div>
</template>

<script>
  import { getInfo } from "@/api/emergency/alarm";
  import DetailInfo from "../../urgent/plan/components/DetailInfo";
  import eventDetail from "../../emergency/components/DetailInfo";
  export default {
    name: "detail-info",
    components:{
      DetailInfo,
      eventDetail
    },
    data(){
        return{
          open: false,
          detailInfo: {
            eventTitle: "",
            planTitle: "",
            planDetail: ""
          },
          planTypes: [],
          planLevels: [],
          planList: []
        }
    },
    created(){
      this.getPlanType();
      this.getPlanLevel();
    },
    methods:{
      getAlarmInfo(id){
        getInfo(id).then(res =>{
          if(res.code == 200){
              this.detailInfo = res.data;
              this.detailInfo.planDetail.split(",").forEach(item =>{
                let planInfo = item.split("|");
                this.planList.push({title:planInfo[0],id:planInfo[1]});
              })
              this.open = true;
          }
        });

      },
      planTypeFormatter(row){
        return this.selectDictLabel(this.planTypes,row.type);
      },
      planLevelFormatter(row){
        return this.selectDictLabel(this.planLevels,row.level);
      },
      //类型
      getPlanType(){
        this.getDicts("urgent_plan_type").then(res =>{
            this.planTypes = res.data;
        })
      },
      //等级
      getPlanLevel(){
        this.getDicts("urgent_plan_level").then(res =>{
            this.planLevels = res.data;
        })
      },
      planDetail(planTitle){
        let plan = this.planList.find(item => item.title == planTitle);
        if(plan){
          this.$refs.detail.openDetail(plan.id);
        }
      },
      eventInfo(id){
        this.$refs.event.getDetailInfo(id);
      }
    }
  }
</script>

<style scoped lang="scss">
  .plan{
    color: blue;
    cursor: pointer;
  }

</style>
