<template>
  <div class="yh_info">
    <div class="headBox" style="justify-content: space-between">
      <div class="title">隐患查看</div>
      <div class="btnBox">
        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>返回</span>
        </el-button>
      </div>
    </div>
    <div class="main_box">
      <div class="left_main">
        <div class="demo-collapse">
          <el-form :model="formData" ref="form" label-position="top" :rules="rules" label-width="100px">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="隐患信息" name="1">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="检查部门:">
                      <el-input v-model="formData.jcbm" disabled style="width: 250px" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="检查人员:">
                      <el-input v-model="formData.jcry" disabled style="width: 250px" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="被检查单位:">
                      <el-input v-model="formData.jcry" disabled style="width: 250px" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="被检查对象:">
                      <el-input v-model="formData.jcry" disabled style="width: 250px" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="所属部位:">
                      <el-input v-model="formData.jcry" disabled style="width: 250px" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="所属场所:">
                      <el-input v-model="formData.jcry" disabled style="width: 250px" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="检查类型:">
                      <el-input v-model="formData.jcry" disabled style="width: 250px" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="隐患级别:">
                      <el-input v-model="formData.jcry" disabled style="width: 250px" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="隐患描述:">
                  <el-input v-model="formData.jcry" disabled />
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="整改措施(方案)信息" name="2">
                <div>
                  <div class="title">隐患分析：</div>
                  <el-form-item label="原因分析:">
                    <el-input v-model="formData.jcry" disabled />
                  </el-form-item>
                  <div class="title">制定方案:</div>
                  <el-row>
                    <el-col :span="12"><el-form-item label="整改负责人:">
                        <el-input v-model="formData.jcry" disabled style="width: 250px" /> </el-form-item></el-col>
                    <el-col :span="12"><el-form-item label=" 整改期限:">
                        <el-input v-model="formData.jcry" disabled style="width: 250px" /> </el-form-item></el-col>
                  </el-row>

                  <el-form-item label="整改措施:">
                    <el-input v-model="formData.jcry" disabled style="width: 250px" />
                  </el-form-item>
                  <el-form-item label="临时控制措施:">
                    <el-input v-model="formData.jcry" disabled style="width: 250px" />
                  </el-form-item>
                  <el-form-item label="投入预算:">
                    <el-input v-model="formData.jcry" disabled style="width: 250px" />
                  </el-form-item>
                </div>
              </el-collapse-item>
              <!-- <el-collapse-item title="整改措施(方案)审查" name="3">
                <div>
                  <div class="title">整改方案审核：</div>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="审核结果:">
                        <el-input v-model="formData.jcry" disabled style="width: 250px" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="审核人:">
                        <el-input v-model="formData.jcry" disabled style="width: 250px" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="审核部门:">
                        <el-input v-model="formData.jcry" disabled style="width: 250px" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="审核意见:">
                    <el-input v-model="formData.jcry" disabled style="width: 250px" />
                  </el-form-item>
                </div>
              </el-collapse-item> -->
              <el-collapse-item title="整改落实信息" name="4">
                <el-form-item label="整改说明:">
                  <el-input v-model="formData.jcry" disabled style="width: 250px" />
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="整改落实验证" name="5">
                <el-form-item label="验证人:">
                  <el-input v-model="formData.jcry" disabled style="width: 250px" />
                </el-form-item>
                <el-form-item label="是否通过:">
                  <el-input v-model="formData.jcry" disabled style="width: 250px" />
                </el-form-item>
                <el-form-item label="整改说明:">
                  <el-input v-model="formData.jcry" disabled style="width: 250px" />
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </div>
      </div>
      <div class="right_main">
        <div class="box_right">
          <div class="line"></div>
          <ul>
            <li class="timeimg">
              <div class="boc_tim">
                <img :src="getImgUrl('indexImages/icon06.gif')" />
              </div>
            </li>
            <li v-for="item in timelist" :key="item">
              <div class="time_le">
                <span>{{ item.time }}</span>
              </div>
              <img class="iconre" :src="getImgUrl('indexImages/icon07.gif')" />
              <div v-if="item.show">
                <span class="typ" v-if="item.state == 'N'">(待办)</span>
                <span class="typ" v-if="item.stop">({{ item.stop }})</span>
                <span :class="item.state == 'N' ? 'colorcc' : ''">{{
                  item.into ? item.into : item.info
                }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref, defineEmits } from "vue";
const activeNames = ref(["1"]);
const formData = ref({});
const timelist = ref([]);
const emits = defineEmits(["close"]);
const CloseEvent = () => {
  emits("close");
};
</script>
<style lang="scss" scoped>
.yh_info {
  overflow: auto;
  height: 90vh;

  .headBox {
    display: flex;
    align-items: center;

    .title {
      font-size: 24px;
      color: #000;
    }
  }

  .btnBox {
    justify-content: flex-end;
    margin: 20px;

    .el-select {
      width: 150px;
    }

    .header-right {
      display: flex;
      align-items: center;
    }

    .btnBox {
      display: flex;
      width: 500px;
      justify-content: space-between;
      align-items: center;
    }
  }

  .main_box {
    display: flex;
    overflow: auto;

    .left_main {
      width: 70%;
    }
  }
}

.box_right {
  width: 37%;
  position: relative;
  border-left: 1px dashed #5ecb4c;

  .line {
    position: absolute;
    top: 0;
    left: 201px;
    width: 1px;
    background-color: #5ecb4c;
    height: 90%;
    z-index: 10;
  }

  .timeimg {
    width: 100%;
    text-align: center;
  }

  .boc_tim {
    width: 60px;
    margin-left: 90px !important;
    height: 60px;
    background-color: #fff;
    z-index: 999;
  }

  .time_le {
    span {
      display: block;
      text-align: right;
      width: 73px;
    }
  }

  .iconre {
    width: 20px;
    height: 20px;
    z-index: 99;
    margin-right: 5px;
  }

  .typ {
    color: #b60413;
    margin-right: 10px;
  }

  .colorcc {
    color: #979191 !important;
  }
}

::v-deep .el-collapse-item__content {
  display: flex;
  flex-wrap: wrap;

  .title {
    border-bottom: 1px dashed #0b4b00;
    margin-bottom: 16px;
  }
}

::v-deep .el-collapse-item__header {
  color: #5ecb4c !important;
}

::v-deep .el-form-item--default {
  margin-right: 10px;
}

::v-deep .el-collapse {
  width: 100%;
}
</style>
