<template>
  <div class="baseInfo">
    <div class="wrap" v-for="(info, index) in infos" :key="info.title">
      <div class="remake">
        <div class="remakeColor"></div>
        <div class="remakeTitle titleValue">{{ info.title }}</div>
      </div>
      <div class="item" v-for="item in info.data" :key="item.title">
        <span class="title" :title="item.title">{{ item.title }}:</span>
        <el-input class="value" :value="item.value" size="small"></el-input>
      </div>
      <div class="line" v-if="index < infos.length - 1"></div>
    </div>
  </div>
</template>
<script>
import { setNullAndUndefined } from '@/views/groupPage/util'
/**
 * 部件查看---安全
 */
export default {
  name: 'UnitDesignInfo',
  data() {
    return {
      infos: [] //安全信息
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.infos = [
        {
          title: '施工任务',
          data: [
            { title: '作业时间', value: '2022/12/14 19:45:35' },
            { title: '作业部位', value: '白羊冲片区' },
            { title: '作业内容', value: '下雨暂未施工' },
            { title: '作业地点', value: '湖北省宜昌市伍家岗区' },
            { title: '施工单位名称', value: '中国铁建大桥工程局集团有限公司' },
            { title: '作业人员数量', value: '2' },
            { title: '现场安全员', value: '王武(大桥局)' },
            { title: '监理工程师', value: '陆亮(二标段)' },
            { title: '是否高风险', value: '否' },
            { title: '高风险类型', value: '无' }
          ]
        },
        {
          title: '危险源',
          data: [
            { title: '危险源等级', value: '四级' },
            { title: '危险源类型', value: '淹溺' },
            { title: '导致事故类型', value: '淹溺' },
            { title: '管控措施', value: '增加安全巡查' },
            { title: '管控人', value: '王武(大桥局)' },
            { title: '验收人', value: '陆亮(二标段)' }
          ]
        },
        {
          title: '安全隐患',
          data: [
            { title: '隐患时间', value: '2022/12/14 19:45:35' },
            { title: '上报人', value: '李亮' },
            { title: '隐患等级', value: '轻微隐患' },
            { title: '隐患状态', value: '已闭合' },
            { title: '隐患部位', value: '/' },
            { title: '隐患描述', value: '未佩戴安全帽' },
            { title: '整改要求', value: '在现场做好安全防护措施' },
            { title: '整改期限', value: '2022/12/15 00:00:00' },
            { title: '整改责任人', value: '廖雄庆' },
            { title: '整改责任单位', value: '中国铁建大桥工程局集团有限公司' }
          ]
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.baseInfo {
  width: 100%;
  height: 430px;
  overflow: auto;
  position: relative;
  float: left;
  .wrap {
    width: 100%;
  }
  .remake {
    position: relative;
    float: left;
    width: 100%;
    .remakeColor {
      position: relative;
      float: left;
      width: 5px;
      height: 0.083333rem /* 16/192 */;
      background: #0ea7ff;
    }
    .remakeTitle {
      color: #0ea7ff;
      position: relative;
      float: left;
      font-size: 0.083333rem /* 16/192 */;
      left: 10px;
    }
  }
  .item {
    position: relative;
    float: left;
    width: 48%;
    display: flex;
    align-items: center;
    padding: 5px;
  }
  .line {
    width: 100%;
    height: 2px;
    background: rgba(14, 167, 255, 0.2);
    position: relative;
    float: left;
    margin: 20px 0px 6px 0px;
  }
}
</style>