<template>
  <div>
    <van-sticky offset-top="0">
      <LHeader :text="text"></LHeader>
    </van-sticky>
    <van-form
      :scroll-to-error="true"
      :show-error="false"
      validate-trigger="onSubmit"
    >
      <div
        style="height: 1rem;font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: 700;line-height: 1rem;"
      >
        <img
          src="@/assets/accidentIcon/bookmark.svg"
          alt=""
          style="position: relative;top: 32%;transform: translateY(-50%);"
        />
        风险信息
      </div>
      <van-field readonly required label="评估人" placeholder="请输入" />
      <van-field readonly required label="所属项目" placeholder="请输入" />
      <van-field readonly required label="所属建筑物" placeholder="请输入" />

      <van-field
        required
        clickable
        name="floorName"
        label="所属楼层"
        placeholder="请选择"
        :rules="[{ required: true, message: '所属楼层不能为空' }]"
      />
      <div style="display: flex;">
        <van-field
          readonly
          required
          name="roomName"
          label="所属房间"
          placeholder="请输入"
          :rules="[{ required: true, message: '所属房间不能为空' }]"
        />
        <!-- <van-button style="color: #cccc;background-color: #f0f1f5;" icon="plus" type="info" /> -->
      </div>
      <van-field
        required
        clickable
        name="name"
        label="风险源名称"
        placeholder="请输入"
        :rules="[{ required: true, message: '风险源名称不能为空' }]"
      />
      <van-field
        required
        name="factor"
        label="风险因素"
        placeholder="请选择"
        :rules="[{ required: true, message: '风险因素不能为空' }]"
      />
      <van-field
        required
        name="type"
        label="准事故类型"
        placeholder="请选择"
        :rules="[{ required: true, message: '准事故类型不能为空' }]"
      />

      <van-field
        required
        name="presenceLocation"
        label="存在部位"
        placeholder="请输入"
        :rules="[{ required: true, message: '存在部位不能为空' }]"
      />
      <van-field
        readonly
        required
        name="level"
        label="风险管控措施评价"
        placeholder="请选择"
        :rules="[{ required: true, message: '风险等级不能为空' }]"
      />

      <div
        style="height: 1rem;font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: 700;line-height: 1rem;"
      >
        <img
          src="@/assets/accidentIcon/bookmark.svg"
          alt=""
          style="position: relative;top: 32%;transform: translateY(-50%);"
        />
        风险源图片
      </div>
      <van-field name="hdPicture1" label="风险源图片">
        <template #input>
          <van-uploader
            multiple
            :max-count="5"
            disabled
            upload-text="最多上传五个"
            v-model="uploaderImg"
          >
            <template slot="default">
              <div
                style="
                                    width: 2.13333rem;
                                    height: 2.13333rem;
                                    background: #f7f8fa;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    flex-direction: column;
                                "
              >
                <img
                  src="@/assets/upload/pic.png"
                  alt=""
                  style="width: 0.64rem; height: 0.64rem"
                />
                <span class="van-uploader__upload-text">最多上传五个</span>
              </div>
            </template>
          </van-uploader>
        </template>
      </van-field>
      <div
        style="height: 1rem;font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: 700;line-height: 1rem;"
      >
        <img
          src="@/assets/accidentIcon/bookmark.svg"
          alt=""
          style="position: relative;top: 32%;transform: translateY(-50%);"
        />
        现有技术措施
      </div>
      <van-field
        disabled
        name="measuresProject"
        label="技术措施"
        type="textarea"
        rows="1"
        autosize
        placeholder="请输入"
      />
      <van-field name="measuresProjectFile[]" label=" ">
        <template #input>
          <van-uploader
            disabled
            multiple
            :max-count="5"
            upload-text="最多上传五个"
            v-model="measuresProjectFile"
            accept="file"
            result-type="file"
            @delete="deleteFile(...arguments, 'measuresProjectFile')"
          >
            <template slot="default">
              <div
                style="
                                    width: 2.13333rem;
                                    height: 2.13333rem;
                                    background: #f7f8fa;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    flex-direction: column;
                                "
              >
                <img
                  src="@/assets/upload/file.png"
                  alt=""
                  style="width: 0.64rem; height: 0.64rem"
                />
                <span class="van-uploader__upload-text">最多上传五个</span>
              </div>
            </template>
          </van-uploader>
        </template>
      </van-field>
      <div
        style="height: 1rem;font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: 700;line-height: 1rem;"
      >
        <img
          src="@/assets/accidentIcon/bookmark.svg"
          alt=""
          style="position: relative;top: 32%;transform: translateY(-50%);"
        />
        现有管理措施
      </div>
      <van-field
        disabled
        name="measuresAdministration"
        label="管理措施"
        type="textarea"
        rows="1"
        autosize
        placeholder="请输入"
      />
      <van-field name="measuresAdministrationFile[]" label=" ">
        <template #input>
          <van-uploader
            disabled
            multiple
            :max-count="5"
            upload-text="最多上传五个"
            v-model="measuresAdministrationFile"
            accept="file"
            result-type="file"
            @delete="deleteFile(...arguments, 'measuresAdministrationFile')"
          >
            <template slot="default">
              <div
                style="
                                    width: 2.13333rem;
                                    height: 2.13333rem;
                                    background: #f7f8fa;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    flex-direction: column;
                                "
              >
                <img
                  src="@/assets/upload/file.png"
                  alt=""
                  style="width: 0.64rem; height: 0.64rem"
                />
                <span class="van-uploader__upload-text">最多上传五个</span>
              </div>
            </template>
          </van-uploader>
        </template>
      </van-field>
      <div
        style="height: 1rem;font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: 700;line-height: 1rem;"
      >
        <img
          src="@/assets/accidentIcon/bookmark.svg"
          alt=""
          style="position: relative;top: 32%;transform: translateY(-50%);"
        />
        现有应急措施
      </div>
      <van-field
        disabled
        name="measuresEmergency"
        label="应急措施"
        type="textarea"
        rows="1"
        autosize
        placeholder="请输入"
      />
      <van-field name="measuresEmergencyFile[]" label=" ">
        <template #input>
          <van-uploader
            disabled
            multiple
            :max-count="5"
            upload-text="最多上传五个"
            v-model="measuresEmergencyFile"
            accept="file"
            result-type="file"
            @delete="deleteFile(...arguments, 'measuresEmergencyFile')"
          >
            <template slot="default">
              <div
                style="
                                    width: 2.13333rem;
                                    height: 2.13333rem;
                                    background: #f7f8fa;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    flex-direction: column;
                                "
              >
                <img
                  src="@/assets/upload/file.png"
                  alt=""
                  style="width: 0.64rem; height: 0.64rem"
                />
                <span class="van-uploader__upload-text">最多上传五个</span>
              </div>
            </template>
          </van-uploader>
        </template>
      </van-field>
      <div
        style="height: 1rem;font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: 700;line-height: 1rem;"
      >
        <img
          src="@/assets/accidentIcon/bookmark.svg"
          alt=""
          style="position: relative;top: 32%;transform: translateY(-50%);"
        />
        参考依据
      </div>
    </van-form>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
export default {
  // props: ["presentList"],
  components: {
    LHeader
  },
  data() {
    return {
      showPopoveSetRank: false,
      activeNames: ["1"],
      showPopover: false,
      showGradeDialog: false,
      taskId: "",
      text: "现状风险详情",
      id: "",
      isTimely: 1,
      active: 0,
      form: {},
      projectId: "", // 所属工程
      projectName: "", // 所属工程
      projectDirectorName: "", // 所属工程
      projectDirector: "", // 所属工程
      showProjectName: false,
      show: false,
      columnsProjectName: [],
      factor: "", //风险因素
      showFactor: false,
      columnsFactor: [],
      messageList: [
        {
          title: "回显风险源名称",
          time: "2022-12-12",
          name: "Mr.周",
          state: 1
        }
      ],
      source: "", //风险源
      userPrefix: "", //风险源
      showSource: false,
      columnsSource: [],
      trouble: "", //事故类型
      showTrouble: false,
      columnsTrouble: [],
      setRank: "", //风险定级
      showSetRank: false,
      columnsSetRank: ["矩阵式定级", "其他定级方式"], //严重程度
      riskRank: "", // 风险等级
      showRiskRank: false,
      columnsRiskRank: [], //发生可能性
      showSetRankMode: false, // 是否显示定级方式
      setRankMode: "", // 定级方式文字
      setRankModeImg: [], // 定级方式图片
      uploaderImg: [], // 定级方式图片
      location: "", //风险部位
      control: "", //管控层级
      riskName: "", //管控层级
      showControl: false,
      columnsControl: ["项目级", "企业级"],
      mainDutyDept: "", // 主责部门
      mainDutyDeptId: "",
      showMainDutyDept: false,
      columnsMainDutyDept: [],
      mainDutyPeopLe: "", // 主责人员
      mainDutyPeopLeId: "",
      showMainDutyPeopLe: false,
      columnsMainDutyPeopLe: [],
      technology: "", //技术措施文字
      technologyImg: [], //技术措施图片
      administration: "", //管理措施文字
      measuresAdministrationFile: [], //管理措施图片
      measuresProjectFile: [], //管理措施图片
      measuresEmergencyFile: [], //管理措施图片
      urgent: "", //应急措施文字
      urgentImg: [], //应急措施图片
      returnCause: "", // 退回原因
      isShowreturnCause: false,
      possibleValue: "",
      possibleScore: 0,
      severityValue: "",
      severityScore: 0
    };
  },
  created() {
    // this.form.buildingIds = this.$route.params.buildingId ||sessionStorage.getItem("buildingId")
    // this.form.planId = this.$route.params.planId||sessionStorage.getItem("planId")
    // this.form.buildingName = this.$route.params.buildingName||sessionStorage.getItem("buildingName")
    // this.form.userId = userInfo.userId
    // this.form.userName = userInfo.userName
    // this.form.deptName = userInfo.dept.deptName
    // this.form.projectId = '测试项目',
    // this.form.level = this.$route.params.level ? this.$route.params.level :''
  },
  methods: {},
  watch: {}
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.con-list {
  padding: 0;
  background-color: #f0f1f5;

  .van-cell-group--inset {
    margin: 0;
    margin-bottom: 0.26667rem;
    padding: 0.25rem;
    font-size: 0.4rem;
    position: relative;
    border-radius: 4%;
    box-shadow: 0px 0px 10px 2px #f3f3f3;
    width: 90%;
    margin: 0.4rem auto;

    .van-row {
      font-size: 0.4rem;
      line-height: 0.8rem;
      margin-bottom: 0;
    }

    .van-overlay {
      position: absolute;

      .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 100%;
      }
    }
  }
}

.dialogContain {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>
