<template>
  <div>
    <LHeader :text="text"></LHeader>
    <van-tabs v-model="active" @change="tabList" color="#2980f7" animated>
      <van-tab title="固有风险信息">
        <van-form
          @submit="onSubmit"
          :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
            name="userName"
            :value="form.userName"
            label="评估人"
            placeholder="请输入"
          />
          <van-field
            readonly
            required
            name="projectId"
            :value="form.projectName"
            label="所属项目"
            placeholder="请输入"
          />
          <van-field
            readonly
            required
            name="buildingName"
            :value="form.buildingName"
            label="所属建筑物"
            placeholder="请输入"
          />

          <van-field
            required
            clickable
            name="floorName"
            :value="form.floorName"
            label="所属楼层"
            placeholder="请选择"
            @click="seletFloor('floor')"
            :rules="[{ required: true, message: '所属楼层不能为空' }]"
          />

          <van-field
            readonly
            required
            name="roomName"
            :value="form.roomName"
            label="所属房间"
            placeholder="请输入"
            @click="seletRoom('room')"
            :rules="[{ required: true, message: '所属房间不能为空' }]"
          />

          <van-field
            readonly
            required
            name="name"
            v-model="form.name"
            label="风险源名称"
            placeholder="请输入"
            :rules="[{ required: true, message: '风险源名称不能为空' }]"
            @click="seletSource()"
          />

          <van-field
            v-model="form.factor"
            required
            name="factor"
            label="风险因素"
            placeholder="请选择"
            @click="seletFactor('factor')"
            :rules="[{ required: true, message: '风险因素不能为空' }]"
          />

          <van-field
            v-model="form.type"
            required
            name="type"
            label="准事故类型"
            placeholder="请选择"
            @click="seletType('type')"
            :rules="[{ required: true, message: '准事故类型不能为空' }]"
          />

          <van-field
            readonly
            v-model="form.level"
            required
            name="level"
            label="风险等级"
            placeholder="请选择"
            @click="seletGrade('level')"
            :rules="[{ required: true, message: '风险等级不能为空' }]"
          />

          <van-field
            required
            name="presenceLocation"
            v-model="form.presenceLocation"
            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
                @delete="deleteFile(...arguments, 'uploaderImg')"
                multiple
                :max-count="5"
                upload-text="最多上传五个"
                v-model="uploaderImg"
              >
                <template slot="default">
                  <!-- 11111111111 -->
                  <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
            v-model="form.measuresProject"
            name="measuresProject"
            label="技术措施"
            type="textarea"
            rows="1"
            autosize
            placeholder="请输入"
          />
          <van-field name="measuresProjectFile[]" label=" ">
            <template #input>
              <van-uploader
                multiple
                :max-count="5"
                upload-text="最多上传五个"
                v-model="measuresProjectFile"
                accept="file"
                result-type="file"
                @delete="deleteFile(...arguments, 'measuresProjectFile')"
              >
                <template slot="default">
                  <!-- 11111111111 -->
                  <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
            v-model="form.measuresAdministration"
            name="measuresAdministration"
            label="管理措施"
            type="textarea"
            rows="1"
            autosize
            placeholder="请输入"
          />
          <van-field name="measuresAdministrationFile[]" label=" ">
            <template #input>
              <van-uploader
                multiple
                :max-count="5"
                upload-text="最多上传五个"
                v-model="measuresAdministrationFile"
                accept="file"
                result-type="file"
                @delete="deleteFile(...arguments, 'measuresAdministrationFile')"
              >
                <template slot="default">
                  <!-- 11111111111 -->
                  <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
            v-model="form.measuresEmergency"
            name="measuresEmergency"
            label="应急措施"
            type="textarea"
            rows="1"
            autosize
            placeholder="请输入"
          />
          <van-field name="measuresEmergencyFile[]" label=" ">
            <template #input>
              <van-uploader
                multiple
                :max-count="5"
                upload-text="最多上传五个"
                v-model="measuresEmergencyFile"
                accept="file"
                result-type="file"
                @delete="deleteFile(...arguments, 'measuresEmergencyFile')"
              >
                <template slot="default">
                  <!-- 11111111111 -->
                  <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
                readonly
                required
                clickable
                name="trouble"
                :value="form.trouble"
                label="参考依据"
                placeholder="请选择"
                @click="showTrouble = true"
                :rules="[{ required: true, message: '事故类型不能为空' }]"
            /> -->

          <div style="margin: 16px 16px 0">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
        <div style="margin: 10px 16px 0px; padding-bottom: 16px">
          <van-button round block type="warning" @click.native="cancel"
            >取消</van-button
          >
        </div>
      </van-tab>
      <van-tab title="现状风险">
        <div class="con-list" @touchmove="showIndex = null">
          <van-cell-group
            inset
            v-for="(item, index) in messageList"
            :key="index"
          >
            <div style="font-size: 0.45rem;padding: 5px 0;">
              {{ item.title }}
            </div>

            <van-row gutter="">
              <van-col span="17">
                <van-row gutter="">
                  <van-col span="9">风险系数：</van-col>
                  <van-col span="15">{{ item.time }}</van-col>
                </van-row>
                <van-row gutter="">
                  <van-col span="9">创建时间：</van-col>
                  <van-col span="15">{{ item.name }}</van-col>
                </van-row>
                <van-row gutter="">
                  <van-col span="9">风险描述：</van-col>
                  <van-col span="15">{{ item.name }}</van-col>
                </van-row>
              </van-col>
              <van-col
                span="7"
                :style="{ color: item.state == 1 ? '#0069e5' : '#03b615' }"
              >
                {{ "●待审批" }}
              </van-col>
            </van-row>
          </van-cell-group>
          <div
            style="
              width: 100%;
              text-align: center;
              font-size: 0.48rem;
              position: fixed;
              top: 30%;
            "
            v-if="messageList['length'] == 0"
          >
            暂无数据
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-popup v-model="showTrouble" position="bottom">
      <van-picker
        show-toolbar
        value-key="name"
        :columns="columnsTrouble"
        @confirm="onConTrouble"
        @cancel="showTrouble = false"
      />
    </van-popup>

    <van-popup v-model="showSource" position="bottom">
      <van-picker
        show-toolbar
        value-key="name"
        :columns="columnsSource"
        @confirm="onConSource"
        @cancel="showSource = false"
      />
    </van-popup>
    <div
      v-if="active != 0"
      style="display: flex;
            justify-content: space-around;
            background-color: #fff;
            border-top: 1px solid #e3e3e3;
            height: 1.5rem;
            width: 100%;
            text-align: center;
            position: fixed;
            bottom: 0;"
    >
      <div
        @click="performTasks"
        style="color: #4bced0;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;"><van-icon name="plus" /></div>
        <div>新增现状风险</div>
      </div>
    </div>
    <!-- 风险源 -->
    <van-popup
      v-model="visiableSource"
      round
      position="bottom"
      :style="{ height: '30%', display: 'flex', flexDirection: 'column' }"
    >
      <van-button class="btns" @click="nameByselfInput"
        >输入风险源名称</van-button
      >
      <van-button class="btns" @click="importFromList"
        >从风险清单导入</van-button
      >
      <van-button class="btns" @click="cancleSource">取消</van-button>
    </van-popup>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
// import selectPeople from "@/views/riskTask/selectPeople/index.vue";
import { getFun, postFun } from "@/service/table.js";
// import {
//     getFormList,
//     postHdSource,
//     postHdType,
//     postHdPeople,
//     postReAdd,
//     postriskConiCause,
//     postRiskShowMeasures,
// } from "@/service/risk";
export default {
  name: "addCurrent",
  components: {
    LHeader
  },
  beforeRouteLeave(to, from, next) {
    if (to.name != "matrix-grad") {
    }
    next();
  },
  data() {
    return {
      inherentId: "",
      text: "编辑固有风险",
      id: "",
      isTimely: 1,
      active: 0,
      form: {},
      projectId: "", // 所属工程
      projectName: "", // 所属工程
      projectDirectorName: "", // 所属工程
      projectDirector: "", // 所属工程
      showProjectName: false,
      show: false,
      columnsProjectName: [],
      factor: "", //风险因素
      showFactor: false,
      columnsFactor: [],
      messageList: [],
      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: [], //应急措施图片
      buildingIds: "", // 退回原因
      isShowreturnCause: false,
      visiableSource: false
    };
  },
  created() {
    if (this.$route.params.inherentId || sessionStorage.getItem("inherentId")) {
      this.inherentId =
        this.$route.params.inherentId || sessionStorage.getItem("inherentId");
      this.buildingIds =
        this.$route.params.buildingId || sessionStorage.getItem("buildingId");
      this.postReturnEcho();
    }
    // this.getList();
  },
  methods: {
    tabList(value) {
      console.log(
        "%c [ value ]-527",
        "font-size:13px; background:pink; color:#bf2c9f;",
        value
      );
      if (value == 1) {
        this.getList();
      }
    },
    seletFloor(name) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      this.userPrefix = name;
      getFun(`/risk/plan/floor/list/${this.buildingIds}`)
        .then(res => {
          this.$toast.clear();
          this.showSource = true;
          this.columnsSource = res.data;
        })
        .catch(() => {
          this.$toast.fail("加载失败,请稍后再试");
        });
    },
    seletRoom(name) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      this.userPrefix = name;
      getFun(`/risk/plan/room/list/${this.form.floorId}`)
        .then(res => {
          this.$toast.clear();
          this.showSource = true;
          this.columnsSource = res.data;
        })
        .catch(() => {
          this.$toast.fail("加载失败,请稍后再试");
        });
    },
    seletFactor(name) {
      this.showTrouble = true;
      this.riskName = name;
      this.columnsTrouble = [
        {
          name: "人的因素"
        },
        {
          name: "物的因素"
        },
        {
          name: "环境因素"
        },
        {
          name: "管理因素"
        }
      ];
    },
    seletType(name) {
      this.showTrouble = true;
      this.riskName = name;
      this.columnsTrouble = [
        {
          name: "物体打击"
        },
        {
          name: "车辆伤害"
        },
        {
          name: "起重伤害"
        },
        {
          name: "机械伤害"
        }
      ];
    },
    seletGrade(name) {
      this.showTrouble = true;
      this.riskName = name;
      this.columnsTrouble = [
        {
          name: "重大风险"
        },
        {
          name: "较大风险"
        },
        {
          name: "一般风险"
        },
        {
          name: "较小风险"
        }
      ];
    },
    performTasks() {
      this.$router.push({
        name: "addPresent",
        params: {
          id: this.inherentId,
          // planId:this.planId
          buildingId: this.buildingId,
          planId: this.inherentId,
          floorId: this.form.floorId,
          roomName: this.form.roomName,
          roomId: this.form.roomId
        }
      });
    },
    // 点击预览图
    clickPre(e) {
      console.log(e);
      if (e.filePath) {
        this.videoUrl = e.filePath;
      } else {
        this.videoUrl = e.content;
      }
    },
    async deleteFile(val, detail, key) {
      // console.log(val,detail)
      if (val.fileId) {
        let formdata = new FormData();
        formdata.append("key", val["fileId"]);
        let res = await postFun("/mobile/remove", formdata);
        if (res) {
          console.log(res);
          this.$toast({
            title: "提示",
            message: "删除成功!"
          });
        } else {
          console.log("删除失败");
          this[key].splice(detail.index, 0, val);
        }
      }
    },
    onSubmit(values) {
      let url = "/riskMain/add";
      postReAdd(url, formdata)
        .then(res => {
          this.$toast.clear();
          this.$toast.success({
            message: "提交成功",
            duration: 2000
          });
          history.go(-1);
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("提交失败,请稍后再试");
        });
      this.$toast.clear();
    },

    // 请求表单数据
    getList() {
      getFun(`/risk/plan/existing/list/${this.inherentId}`)
        .then(res => {
          console.log(
            "%c [ res ]-670",
            "font-size:13px; background:pink; color:#bf2c9f;",
            res
          );
          this.messageList = res.data;
        })
        .catch(() => {
          this.$toast.fail("加载失败,请稍后再试");
        });
    },

    // 请求已退回详情数据
    postReturnEcho() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      getFun(`/risk/plan/inherent/details/${this.inherentId}`)
        .then(res => {
          this.form = res.data;
          this.uploaderImg = (res.data.pictureFile || []).map(item => {
            return {
              ...item,
              url: item.filePath
            };
          });
          this.measuresProjectFile = (res.data.measuresProjectFile || []).map(
            item => {
              return {
                ...item,
                url: item.filePath
              };
            }
          );
          this.measuresAdministrationFile = (
            res.data.measuresAdministrationFile || []
          ).map(item => {
            return {
              ...item,
              url: item.filePath
            };
          });
          this.measuresEmergencyFile = (
            res.data.measuresEmergencyFile || []
          ).map(item => {
            return {
              ...item,
              url: item.filePath
            };
          });
        })
        .catch(() => {
          this.$toast.clear();
        });
    },

    // 所属项目
    onConProjectName(value) {
      if (!value) {
        this.showProjectName = false;
        return;
      }
      this.projectId = value.id;
      this.projectName = value.projectName;
      this.showProjectName = false;
    },
    // 风险因素
    onConFactor(value) {
      if (!value) {
        this.showFactor = false;
        return;
      }
      this.factor = value.factorType;
      this.showFactor = false;
      this.source = "";
      this.trouble = "";
      // 请求风险源
      postHdSource(`/riskMain/showSourceName?factorType=${this.factor}`).then(
        res => {
          this.columnsSource = res.data;
        }
      );
    },
    // 风险源
    onConSource(value) {
      if (!value) {
        this.showSource = false;
        return;
      }
      this.form[this.userPrefix + "Id"] = value.id;
      this.form[this.userPrefix + "Name"] = value.name;
      this.showSource = false;
    },
    seletSource() {
      this.visiableSource = true;
    },
    //从风险清单列表导入
    importFromList() {},
    //输入风险源名称
    nameByselfInput() {},
    //取消风险弹窗
    cancleSource() {
      this.visiableSource = false;
    },

    // 事故类型
    onConTrouble(value) {
      if (!value) {
        this.showTrouble = false;
        return;
      }
      this.form[this.riskName] = value.name;
      this.showTrouble = false;
    },
    // 风险定级
    onConSetRank(value) {
      this.showSetRank = false;
      this.setRank = value;
      this.riskRank = "";
      if (this.setRank == "矩阵式定级") {
        this.showSetRank = false;
        this.$router.push({
          name: "matrix-grad"
        });
      }
    },
    // 自己定义风险等级点击方法
    myRiskRank() {
      if (this.setRank == "") {
        this.$toast("请先选择风险定级");
      } else if (this.setRank == "其他定级方式") {
        this.showRiskRank = true;
      }
    },
    // 风险等级
    onConRiskRank(value) {
      this.riskRank = value;
      this.showRiskRank = false;
    },

    // 管控层级
    onConControl(value) {
      this.control = value;
      this.showControl = false;
    },
    // 主责部门
    onConMainDutyDept(value) {
      this.mainDutyDeptId = value.deptId;
      this.mainDutyDept = value.deptName;
      this.showMainDutyDept = false;
      this.mainDutyPeopLe = "";
      // 请求主责人员
      let formdata = new FormData();
      formdata.append("organizationId", this.mainDutyDeptId);
      postHdPeople(`/riskMain/getUserList`, formdata).then(res => {
        this.columnsMainDutyPeopLe = res.data;
      });
    },
    // 主责人员
    onConMainDutyPeopLe(value) {
      this.mainDutyPeopLeId = value.userId;
      this.mainDutyPeopLe = value.userName;
      this.showMainDutyPeopLe = false;
    },

    cancel() {
      this.$router.go(-1);
    },

    // 选择作业人
    goSelPeoTwo(val) {
      this.peopleName = val;
      this.show = true;
    },
    onClose() {
      this.show = false;
    },
    onSave(e) {
      this.projectDirector = e[0].loginName;
      this.projectDirectorName = e[0].userName;
      this.show = false;
    }
  },
  watch: {
    // setRank(newVal, oldVal) {
    //     if (newVal == "其他定级方式") {
    //         this.showSetRankMode = true;
    //     } else {
    //         this.showSetRankMode = false;
    //     }
    // },
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.con-list {
  margin-bottom: 1.5rem;
  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%;
      }
    }
  }
}
.btns {
  margin: 10px 10px 0 10px;
  border: none;
  border-bottom: 1px solid #efefef;
  color: #2980f7;
}
</style>
