<template>
    <div>
        <LHeader :text="text"></LHeader>
        <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.projectId"
                label="所属项目"
                placeholder="请输入"
            />
            <van-field
                readonly
                required
                name="buildingName"
                :value="form.buildingName"
                label="所属建筑物"
                placeholder="请输入"
            />

            <van-field
                required
                clickable
                name="floorId"
                :value="form.floorId"
                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
                required
                name="name"
                v-model="form.name"
                label="风险源名称"
                placeholder="请输入"
                :rules="[{ required: true, message: '风险源名称不能为空' }]"
            />
            <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 readonly v-model="form.level" required name="level" label="风险等级" placeholder="请选择"
                @click="seletGrade" :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>
            <!-- v-if="this.$route.params.isView" -->
            <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: '事故类型不能为空' }]"
            /> -->
            <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>
            <!-- v-if="this.$route.params.isView" -->
            <div style="margin: 16px 16px 0"  >
                <van-button round block type="info" native-type="submit"
                    >上报</van-button
                >
            </div>
        </van-form>
        <van-dialog v-model="showGradeDialog" title="风险评测配置" :show-cancel-button="false" :show-confirm-button="false"	>
                <div class="dialogContain">
                    <van-collapse v-model="activeNames">
                        <van-collapse-item title="风险模型" name="1">
                            <van-field readonly required name="level" label="当前风险模型" placeholder="LS风险矩阵评估模型" />
                        </van-collapse-item>
                        <van-collapse-item title="风险模型配置" name="2">
                            <van-popover v-model="showPopover" trigger="click" :actions="columnsRiskRank"
                                @select="onSelect">
                                <template #reference>
                                    <van-field v-model="possibleValue" readonly required name="level" label="发生的可能性"
                                        placeholder="请选择" />
                                </template>
                            </van-popover>
                            <van-popover v-model="showPopoveSetRank" trigger="click" :actions="columnsSetRank"
                                @select="onSelectSetRank">
                                <template #reference>
                                    <van-field v-model="severityValue" readonly required name="level" label="后果严重程度"
                                        placeholder="请选择" />
                                </template>
                            </van-popover>
                        </van-collapse-item>
                    </van-collapse>
                    <van-row type="flex" justify="center" style="margin-top:10px">
                        <van-col span="6"><van-button size="small" plain type="info" @click="showGradeDialog = false">取消</van-button></van-col>
                        <van-col span="6"><van-button size="small" type="info" @click="goResultPage">开始测评</van-button></van-col>
                    </van-row>
                </div>
            </van-dialog>
            <!-- v-if="this.$route.params.isView"  -->
            <div  style="margin: 10px 16px 0px; padding-bottom: 16px">
            <van-button round block type="warning" @click.native="cancel"
                >取消</van-button
            >
        </div>
    </div>
</template>

<script>
import LHeader from "@/components/header.vue";
// import selectPeople from "@/views/riskTask/selectPeople/index.vue";
import { getUserInfo, getLocalUserInfo} from '@/utils/userInfo'
import { getFun, postFun } from "@/service/table.js";
// import {
//     getFormList,
//     postHdSource,
//     postHdType,
//     postHdPeople,
//     postReAdd,
//     postriskConiCause,
//     postRiskShowMeasures,
// } from "@/service/risk";
export default {
    name: "addPresent",
    components: {
        LHeader,
    },
    activated() {
      
    },
    beforeRouteEnter(to, from, next){
    if(from.name=='addCurrent'){
        sessionStorage.setItem('presentForm','')
        sessionStorage.setItem('level','')
    }
    next()
    },
    beforeRouteLeave(to, from, next) {
        if (to.name != "riskInherent") {
            sessionStorage.setItem('presentForm',JSON.stringify(this.form))
        }
        next();
    },
    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,
            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() {
        var userInfo=getUserInfo()
        this.form.buildingIds=this.$route.params.id
        this.form.planId=this.$route.params.planId
        this.form.floorId = this.$route.params.floorId
        this.form.roomId = this.$route.params.roomId
        this.form.inherentId = this.$route.params.id
        this.form.roomName = this.$route.params.roomName
        this.form.buildingName = '1号楼'
        this.form.userId=userInfo.userId
        this.form.userName=userInfo.userName
        this.form.deptName=userInfo.dept.deptName
        this.form.projectId='测试项目'
        
    },
    mounted(){
    if(sessionStorage.getItem('presentForm')!=''){
            this.form=JSON.parse(sessionStorage.getItem('presentForm')) 
            this.form.level = sessionStorage.getItem('level')
        }
    },
    methods: {
        seletFloor(name){
            this.$toast.loading({
                message: "加载中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 0,
            });
            this.userPrefix=name
            getFun(`/risk/plan/floor/list/${this.form.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.getGradeList('possibility')
            this.getGradeList('severity')
            this.showGradeDialog = true
        },
         //风险模型配置
         getGradeList(type) {
            // possibility 可能性 severity 严重性
            getFun(`/risk/plan/matrix/${type}/list`).then(res => {
                let arr = []
                res.data.forEach(item => {
                    arr.push({ text: item.title, type: item.type, sort: item.sort, score: item.score })
                })
                if (type === 'possibility') {
                    this.columnsRiskRank = arr
                } else {
                    this.columnsSetRank = arr
                }

            })
        },
        onSelect(data) {
            this.possibleValue = data.text
            this.possibleScore = data.score
        },
        onSelectSetRank(data) {
            this.severityValue = data.text
            this.severityScore = data.score
        },
         //开始测评
         goResultPage(){
            this.$router.push({
                name:'resultPage',
                params:{
                    score:this.severityScore * this.possibleScore
                }
            })
        },
        performTasks(){
          
        },
        // 点击预览图
        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);
                }
            }
        },
        jsonToFormData(config) { 
            const formData = new FormData();
            //循环传入的值转换formData
            Object.keys(config).forEach((key) => {
                formData.append(key, config[key]);
            })
            return formData;
        },
        onSubmit(values) {
            // console.log('%c [ values ]-592', 'font-size:13px; background:pink; color:#bf2c9f;', values)
            var formDataJson=this.jsonToFormData(this.form)
            // let url = "/risk/plan/inherent";
            let url = "/risk/plan/existing";
            values.hdPicture1.forEach((item) => {
                if (item.file) {
                    formDataJson.append("pictureFile[]", item.file);
                }else{
                    formDataJson.append("pictureFile[]", item.fileId);
                }
            });
            values['measuresProjectFile[]'].forEach((item) => {
                if (item.file) {
                    formDataJson.append("measuresProjectFile[]", item.file);
                }else{
                    formDataJson.append("measuresProjectFile[]", item.fileId);
                }
            });
            values['measuresEmergencyFile[]'].forEach((item) => {
                if (item.file) {
                    formDataJson.append("measuresEmergencyFile[]", item.file);
                }else{
                    formDataJson.append("measuresEmergencyFile[]", item.fileId);
                }
            });
            values['measuresAdministrationFile[]'].forEach((item) => {
                if (item.file) {
                    formDataJson.append("measuresAdministrationFile[]", item.file);
                }else{
                    formDataJson.append("measuresAdministrationFile[]", item.fileId);
                }
            });
            postFun(url, formDataJson)
                .then((res) => {
                    this.$toast.clear();
                    this.$toast.success({
                        message: "提交成功",
                        duration: 2000,
                    });
                    history.go(-1);
                })
                .catch(() => {
                    this.$toast.clear();
                    this.$toast.fail("提交失败,请稍后再试");
                });
            this.$toast.clear();
        },

        // 请求已退回详情数据
        postReturnEcho() {
            this.$toast.loading({
                message: "加载中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 0,
            });
            postriskConiCause(`/riskMain/edit/${this.taskId}`)
                .then((res) => {
                    console.log('%c [ res ]-332', 'font-size:13px; background:pink; color:#bf2c9f;', res)
                })
                .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;
        },
        // 事故类型
        onConTrouble(value) {
            console.log('%c [ value ]-653', 'font-size:13px; background:pink; color:#bf2c9f;', 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 {
    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%;
        }
      }
    }
  }
</style>
