<template>
  <el-drawer
    :title="title"
    :before-close="cancelForm"
    :visible.sync="dialog"
    direction="rtl"
    ref="drawer"
  >
    <div class="demo-drawer__content" style="padding: 0 20px">
      <el-form :model="form" label-position="left">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="作业内容">
              {{ form.opContent }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24" v-if="type == 1">
            <el-form-item label="取消原因">
              {{ form.cancelReason }}
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="type == 2">
            <el-form-item label="临时计划原因">
              {{ form.planReason }}
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="type == 3">
            <el-form-item label="风险类型">
              <div v-for="(ite, i) in riskTypeList" :key="i">
                <span v-if="ite.roleCode == form.riskType">
                  <el-tag type="danger" effect="dark">{{
                    ite.roleName
                  }}</el-tag></span
                >
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="type == 4">
            <el-form-item label="异常类型">
              <div v-for="(ite, i) in exceptionTypeList" :key="i">
                <span v-if="ite.dictValue == form.exceptionType">
                  <el-tag type="danger" effect="dark">{{
                    ite.dictLabel
                  }}</el-tag></span
                >
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="作业地址">
              {{ form.opAddr }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="线路/变电站">
              {{ form.subsOrLineNm }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电压等级">
              {{ form.voltLvlCd }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="作业类型">
              {{ form.opTypDsc }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理单位">
              {{ form.mgmtOrgNm }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="作业单位">
              {{ form.submitOrgNm }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作负责人">
              {{ form.workPrincipNm }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="作业班组">
              {{ form.workTeamNm }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业风险">
              {{ form.opRiskLvlDsc }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="作业人数">
              {{ form.mainBusiOrgOpNum }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业开始时间">
              {{ form.planStartWkTm }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="作业结束时间">
              {{ form.planEndTm }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业类型">
              {{ form.majorTypDsc }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="demo-drawer__footer" style="text-align: center">
        <el-button @click="cancelForm">关 闭 </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { getRiskRoleList } from "@/api/secure/pdm-risk-role";
export default {
  data() {
    return {
      title: "",
      form: {
        opContent: "",
        opAddr: "",
        subsOrLineId: "",
        voltLvlCd: "",
        opTypDsc: "",
        mgmtOrgNm: "",
        submitOrgNm: "",
        workPrincipNm: "",
        workTeamNm: "",
        opRiskLvlDsc: "",
        mainBusiOrgOpNum: "",
        planStartWkTm: "",
        planEndTm: "",
        majorTypDsc: "",
        cancelReason: "",
        planReason: "",
        exceptionType: "",
      },
      loading: false,
      dialog: false,
      type: null, //1作业取消计划  2临时计划
      riskTypeList: [],
      exceptionTypeList: [],
    };
  },
  methods: {
    async openModel(data, title, type) {
      this.form = { ...data };
      this.title = title;
      this.dialog = true;
      this.type = type;
      if (type == 3) {
        const { rows } = await getRiskRoleList();
        this.riskTypeList = rows;
      }
      if (type == 3 || type == 4) {
        const { data } = await this.getDicts("power_exception_type");
        this.exceptionTypeList = data;
      }
    },

    cancelForm() {
      this.loading = false;
      this.dialog = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-drawer.ttb,
  .el-drawer.btt {
    height: 90% !important;
  }
}
</style>
