<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.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 style="padding-left:30px;">{{InfoList.measuresDeptName==null?"暂无":InfoList.measuresDeptName}}</span>
                <el-divider></el-divider>
                <span style="font-weight: bold;">管控责任人:</span><span style="padding-left:30px;">{{InfoList.measuresUserName==null?"暂无":InfoList.measuresUserName}}</span>
                <el-divider></el-divider>
                <span style="font-weight: bold;">管控责任人联系方式:</span><span style="padding-left:30px;">{{InfoList.measuresUserPhone==null?"暂无":InfoList.measuresUserPhone}}</span>
                <el-divider></el-divider>
                <span style="font-weight: bold;">判断依据:</span><span style="padding-left:30px;">{{InfoList.referenceBasis==null?"暂无":InfoList.referenceBasis}}</span>
                <el-divider></el-divider>
                <span style="font-weight: bold;">风险等级:</span><span style="padding-left:30px;">{{InfoList.level==null?"暂无":InfoList.level}}</span>

              </div>
            </div>
          </el-tab-pane>

        </el-tabs>

      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
  import {
    getExistingById
  } 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() {

    },
    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) {
        getExistingById(id).then((res) => {
          this.InfoList = res.data;
          console.log(this.InfoList);
        });
      },

      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>
