<template>
  <div class="wrapper">
    <el-descriptions
      :title="InfoList.name"
      class="margin-top"
      :column="3"
      :size="size"
      border
    >
      <el-descriptions-item label="所属项目">{{
        InfoList.projectName
      }}</el-descriptions-item>
      <el-descriptions-item label="所属楼栋">{{
        InfoList.buildingName
      }}</el-descriptions-item>
      <el-descriptions-item label="所属楼层">{{
        InfoList.floorName
      }}</el-descriptions-item>
      <el-descriptions-item label="所属房间">{{
        InfoList.roomName
      }}</el-descriptions-item>
      <el-descriptions-item label="风险点类型">{{
        InfoList.pointType
      }}</el-descriptions-item>
      <el-descriptions-item label="是否特种设备">{{
        InfoList.specialEquipment ? "是" : "否"
      }}</el-descriptions-item>

      <el-descriptions-item label="安全警示标志">{{
        InfoList.safetyWarningSigns
      }}</el-descriptions-item>
      <el-descriptions-item label="风险因素">{{
        InfoList.factor
      }}</el-descriptions-item>
      <el-descriptions-item label="风险类型">{{
        InfoList.type
      }}</el-descriptions-item>
      <el-descriptions-item label="存在部位">{{
        InfoList.presenceLocation
      }}</el-descriptions-item>
      <el-descriptions-item label="评估人">{{
        InfoList.userName
      }}</el-descriptions-item>
      <el-descriptions-item label="评估时间">{{
        InfoList.createTime
      }}</el-descriptions-item>
    </el-descriptions>
    <el-tabs v-model="activeName" type="border-card" style="margin-top: 10px">
      <el-tab-pane label="风险管控信息" name="first">
        <el-tabs tab-position="left">
          <el-tab-pane label="风险图片">
            <template>
              <div v-if="InfoList.pictureFile != null">
                <el-carousel
                  style="
                    height: 500px;
                    width: 500px;
                    position: relative;
                    left: 34%;
                  "
                >
                  <el-carousel-item
                    v-for="item in InfoList.pictureFile"
                    :key="item"
                  >
                    <img :src="item.filePath" style="height: 400px" />
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div v-else>
                <el-empty description="暂无图片"></el-empty>
              </div>
            </template>
          </el-tab-pane>
          <el-tab-pane label="应采取的管控措施">
            <div class="approveResult">
              <div class="approveL">
                <span style="font-weight: bold">技术措施</span>
                <p>
                  {{
                    InfoList.measuresProject == null
                      ? "暂无"
                      : InfoList.measuresProject
                  }}
                </p>
                <el-divider></el-divider>
                <span style="font-weight: bold">技术措施附件</span>
                <p>
                  <template>
                    <div v-if="InfoList.measuresProjectFile != null">
                      <div
                        v-for="item in InfoList.measuresProjectFile"
                        :key="item"
                      >
                        <span>
                          <el-link
                            type="primary"
                            icon="el-icon-document"
                            :href="item.filePath"
                            >{{ item.fileName }}</el-link
                          ></span
                        >
                      </div>
                    </div>
                    <div v-else>
                      <el-empty description="暂无附件"></el-empty>
                    </div>
                  </template>
                </p>
                <el-divider></el-divider>
                <span style="font-weight: bold">管理措施</span>
                <p>
                  {{
                    InfoList.measuresAdministration == null
                      ? "暂无"
                      : InfoList.measuresAdministration
                  }}
                </p>
                <el-divider></el-divider>
                <span style="font-weight: bold">管理措施附件</span>
                <p>
                  <template>
                    <div v-if="InfoList.measuresAdministrationFile != null">
                      <div
                        v-for="item in InfoList.measuresAdministrationFile"
                        :key="item"
                      >
                        <span>
                          <el-link
                            type="primary"
                            icon="el-icon-document"
                            :href="item.filePath"
                            >{{ item.fileName }}</el-link
                          ></span
                        >
                      </div>
                    </div>
                    <div v-else>
                      <el-empty description="暂无附件"></el-empty>
                    </div>
                  </template>
                </p>
                <el-divider></el-divider>
                <span style="font-weight: bold">应急措施</span>
                <p>
                  {{
                    InfoList.measuresEmergency == null
                      ? "暂无"
                      : InfoList.measuresEmergency
                  }}
                </p>
                <el-divider></el-divider>
                <span style="font-weight: bold">应急措施附件</span>
                <p>
                  <template>
                    <div v-if="InfoList.measuresEmergencyFile != null">
                      <div
                        v-for="item in InfoList.measuresEmergencyFile"
                        :key="item"
                      >
                        <span>
                          <el-link
                            type="primary"
                            icon="el-icon-document"
                            :href="item.filePath"
                            >{{ item.fileName }}</el-link
                          ></span
                        >
                      </div>
                    </div>
                    <div v-else>
                      <el-empty description="暂无附件"></el-empty>
                    </div>
                  </template>
                </p>
                <el-divider></el-divider>
                <span style="font-weight: bold">管控责任单位:</span
                ><span>{{
                  InfoList.measuresDeptName == null
                    ? "暂无"
                    : InfoList.measuresDeptName
                }}</span>
                <el-divider></el-divider>
                <span style="font-weight: bold">管控责任人:</span
                ><span>{{
                  InfoList.measuresUserName == null
                    ? "暂无"
                    : InfoList.measuresUserName
                }}</span>
                <el-divider></el-divider>
                <span style="font-weight: bold">管控责任人联系方式:</span
                ><span>{{
                  InfoList.measuresUserPhone == null
                    ? "暂无"
                    : InfoList.measuresUserPhone
                }}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="重大危险源管理">
            <div>
              <span style="font-weight: bold">是否为重大危险源:</span
              ><span style="padding-left: 30px">{{
                InfoList.majorHazardSource ? "是" : "否"
              }}</span>
              <el-divider></el-divider>
              <span style="font-weight: bold">危险源名称:</span
              ><span style="padding-left: 30px">{{
                InfoList.hazardSourceName == null
                  ? "无"
                  : InfoList.hazardSourceName
              }}</span>
              <el-divider></el-divider>
              <span style="font-weight: bold">重大危险源描述:</span
              ><span style="padding-left: 30px">{{
                InfoList.majorHazardSourceDescription == null
                  ? "无"
                  : InfoList.majorHazardSourceDescription
              }}</span>
              <el-divider></el-divider>
              <span style="font-weight: bold">判断依据:</span
              ><span style="padding-left: 30px">{{
                InfoList.referenceBasis == null ? "无" : InfoList.referenceBasis
              }}</span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="现状风险清单" name="second">
        <div class="approveResult">
          <div class="approveL">
            <!-- <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" />
              <el-table-column label="准事故类型" align="center" prop="type" />
              <el-table-column
                label="存在部位"
                align="center"
                prop="presenceLocation"
              />
              <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/existingdata/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="getExsitingList"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getPlan,
  riskListInfo,
  riskList,
  exportRiskList,
  getInherentById,
  getExsitingList,
} from "@/api/risk/plan";
export default {
  data() {
    return {
      activeNames: ["1"],
      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.inherentId = this.$route.params.id;
      this.getExsitingList(this.queryParams);
    }
  },
  mounted() {
    // console.log(this.$route.params, 'lll')
    this.getInfo(this.$route.params.id);
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    downList(planId) {
      this.download("/system/risk/plan/exportExcel/InherentList/" + planId, {});
    },
    showDrawCanvas(floorId) {
      this.$router.push({
        name: "drawCanvas",
        params: {
          floorId: floorId,
        },
      });
    },
    getInfo(id) {
      getInherentById(id).then((res) => {
        this.InfoList = res.data;
        console.log(this.InfoList);
      });
    },
    getExsitingList(id) {
      this.loading = true;
      getExsitingList(this.queryParams).then((res) => {
        console.log("res.rows:" + res.rows);
        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>
