<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>
