<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.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 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>
