<template>
  <div class="wrapper">
    <el-descriptions
      :title="InfoList.detailsDto.name"
      class="margin-top"
      :column="3"
      :size="size"
      border
    >
      <el-descriptions-item label="所属项目">{{
        InfoList.detailsDto.projectName
      }}</el-descriptions-item>
      <el-descriptions-item label="所属楼栋">
        <!-- {{InfoList.detailsDto.buildingNames}} -->
        <template>
          <div
            v-for="(
              buildingName, index
            ) in InfoList.detailsDto.buildingNames.split(',')"
            :key="index"
          >
            {{ buildingName }}
          </div>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="所属单位">{{
        InfoList.detailsDto.deptName
      }}</el-descriptions-item>
      <el-descriptions-item label="所属省市">{{
        InfoList.detailsDto.city
      }}</el-descriptions-item>
      <el-descriptions-item label="项目负责人">{{
        InfoList.detailsDto.leaderUserName
      }}</el-descriptions-item>
      <el-descriptions-item label="评估组成员">{{
        InfoList.detailsDto.workUserNames
      }}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{
        InfoList.startTime
      }}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{
        InfoList.endTime
      }}</el-descriptions-item>
      <el-descriptions-item label="项目状态">{{
        InfoList.status
      }}</el-descriptions-item>
      <el-descriptions-item label="创建人">{{
        InfoList.createUserName
      }}</el-descriptions-item>
      <el-descriptions-item label="创建单位">{{
        InfoList.detailsDto.createDeptName
      }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        InfoList.detailsDto.createTime
      }}</el-descriptions-item>
    </el-descriptions>
    <el-tabs v-model="activeName" type="border-card" style="margin-top: 10px">
      <el-tab-pane label="风险评估清单" name="first">
        <div class="approveResult">
          <div class="approveL">
            <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                    label-width="82px">
                    <el-form-item label="风险源名称" prop="name">
                        <el-input v-model="queryParams.name" placeholder="请输入风险源名称" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="风险等级" prop="level">
                        <el-input v-model="queryParams.level" placeholder="请输入风险等级" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="风险类型" prop="factor">
                        <el-input v-model="queryParams.factor" placeholder="请输入风险因素" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="存在部位" prop="referenceBasis">
                        <el-input v-model="queryParams.referenceBasis" placeholder="请输入参考依据" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form> -->
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="downList(InfoList.detailsDto.id)"
              style="float: right; margin-bottom: 8px"
              >导出风险清单</el-button
            >
            <el-table v-loading="loading" :data="listList">
              <el-table-column label="序号" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="风险名称" align="center" prop="name" />
              <el-table-column
                label="所属建筑"
                align="center"
                prop="buildingName"
              />
              <el-table-column
                label="所属楼层"
                align="center"
                prop="floorName"
              />
              <el-table-column
                label="所属房间"
                align="center"
                prop="roomName"
              />
              <el-table-column
                label="风险等级（系数）"
                align="center"
                prop="level"
              />
              <el-table-column label="风险因素" align="center" prop="factor" >
                <template slot-scope="scope">
                  <el-popover
                    placement="top-start"
                    title="风险因素"
                    width="200"
                    trigger="hover"
                    :content="scope.row.factor"
                  >
                    <span slot="reference">{{
                      scope.row.factor.length > 10
                        ? scope.row.factor.substring(0, 10) + "..."
                        : scope.row.factor
                    }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="准事故类型" align="center" prop="type">
                <template slot-scope="scope">
                  <el-popover
                    placement="top-start"
                    title="准事故类型"
                    width="200"
                    trigger="hover"
                    :content="scope.row.type"
                  >
                    <span slot="reference">{{
                      scope.row.type.length > 10
                        ? scope.row.type.substring(0, 10) + "..."
                        : scope.row.type
                    }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                label="存在部位"
                align="center"
                prop="presenceLocation"
              > <template slot-scope="scope">
                  <el-popover
                    placement="top-start"
                    title="存在部位"
                    width="200"
                    trigger="hover"
                    :content="scope.row.presenceLocation"
                  >
                    <span slot="reference">{{
                      scope.row.presenceLocation.length > 10
                        ? scope.row.presenceLocation.substring(0, 10) + "..."
                        : scope.row.presenceLocation
                    }}</span>
                  </el-popover>
                </template>
              </el-table-column></el-table-column>
              <el-table-column label="操作" align="center" prop="describe">
                <template slot-scope="scope">
                  <div>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-download"
                      @click="exportList(scope.row.id)"
                      >下载风险告知卡</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-view"
                      @click="showDrawCanvas(scope.row.floorId)"
                      >查看四色图</el-button
                    >
                    <router-link
                      :to="'/risk/plan/inherentdata/index/' + scope.row.id"
                      class="link-type"
                    >
                      <el-button size="mini" type="text" icon="el-icon-view"
                        >详情</el-button
                      >
                    </router-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getRiskList"
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="评估结果审核" name="second">
        <div class="approveResult">
          <div class="approveL">
            <div class="titles">审批流程</div>
            <el-steps direction="vertical" :active="999">
              <el-step
                v-for="approveDto in InfoList.approveListDtos"
                :title="approveDto.taskName"
                :key="approveDto.taskId"
                icon="el-icon-success"
              >
                <template slot="description">
                  <el-card
                    class="box-card"
                    style="line-height: 25px; font-size: 14px; margin: 15px"
                  >
                    <span style="display: block"
                      ><b>操作时间: </b>{{ approveDto.startTime }}</span
                    >
                    <span style="display: block"
                      ><b> 操作人:</b>{{ approveDto.approvalUserName }}</span
                    >
                    <span style="display: block"
                      ><b>任务节点: </b>{{ approveDto.taskName }}</span
                    >
                    <span
                      style="display: block"
                      v-if="approveDto.taskOpinion != null"
                      ><b>审批意见: </b>{{ "" + approveDto.taskOpinion }}</span
                    >
                  </el-card>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="风险评估报告" name="third">
        <div class="titles">评估报告生成</div>
        <el-table :data="reportList">
          <el-table-column label="编号" align="center" prop="id" />
          <el-table-column label="生成时间" align="center" prop="inherentId" />
          <el-table-column label="生成人员" align="center" prop="code" />
          <el-table-column label="所属建筑" align="center" prop="name" />
          <el-table-column label="所属承租户" align="center" prop="type" />
          <el-table-column label="操作" align="center" prop="describe">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" type="text" icon="el-icon-download"
                  >下载</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getPlan,
  riskListInfo,
  riskList,
  exportRiskList,
} from "@/api/risk/plan";
export default {
  data() {
    return {
      activeName: "first",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 现有风险清单库表格数据
      listList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        inherentId: null,
        code: null,
        name: null,
        type: null,
        describe: null,
        evaluationModel: null,
        evaluationRange: null,
        level: null,
        factor: null,
        measuresProject: null,
        measuresProjectFileIds: null,
        measuresAdministration: null,
        measuresAdministrationFileIds: null,
        measuresEmergency: null,
        measuresEmergencyFileIds: null,
        referenceBasis: null,
        planId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      reportList: [],
      InfoList: {},
    };
  },
  created() {
    if (this.$route.params.id) {
      this.queryParams.planId = this.$route.params.id;
      this.getRiskList(this.queryParams);
    }
  },
  mounted() {
    // console.log(this.$route.params, 'lll')
    this.getInfo(this.$route.params.id);
  },
  methods: {
    downList(planId) {
      this.download("/system/risk/plan/exportExcel/InherentList/" + planId, {});
    },
    showDrawCanvas(floorId) {
      this.$router.push({
        name: "drawCanvas",
        params: {
          floorId: floorId,
        },
      });
    },
    getInfo(id) {
      riskListInfo(id).then((res) => {
        this.InfoList = res.data;
      });
    },
    getRiskList(id) {
      this.loading = true;
      riskList(this.queryParams).then((res) => {
        this.listList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    exportList(id) {
      console.log(id, "kkkk");
      this.download("system/risk/plan/exportWord/riskNotification/" + id, {});
    },
  },

  // 表单重置
  reset() {
    this.form = {
      id: null,
      inherentId: null,
      code: null,
      name: null,
      type: null,
      describe: null,
      evaluationModel: null,
      evaluationRange: null,
      level: null,
      factor: null,
      measuresProject: null,
      measuresProjectFileIds: null,
      measuresAdministration: null,
      measuresAdministrationFileIds: null,
      measuresEmergency: null,
      measuresEmergencyFileIds: null,
      referenceBasis: null,
      delFlag: null,
      createBy: null,
      createTime: null,
      updateBy: null,
      updateTime: null,
    };
    this.resetForm("form");
  },
  /** 搜索按钮操作 */
  handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
  },
  /** 重置按钮操作 */
  resetQuery() {
    this.resetForm("queryForm");
    this.handleQuery();
  },
  handleSelectionChange() {},
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100%;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

::v-deep .el-tabs__content {
  height: calc(100vh - 334px) !important;
}

.titles {
  position: relative;
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 10px 20px;
  color: #666666;
}

.titles::before {
  content: "";
  width: 8px;
  height: 20px;
  background: #3f9eff;
  position: absolute;
  left: -14px;
  top: 0;
}

.approveResult {
  flex: 1;
  width: 100%;
  height: calc(100vh - 360px) !important;
  overflow-y: auto;
  display: flex;
  justify-content: space-between;

  .approveL {
    flex: 3;
    width: 100%;
  }

  .approveR {
    flex: 7;
    width: 100%;
    padding: 0 0 0 30px;
    border-left: 1px solid #d7d7d7d7;
  }
}
</style>
