<template>
    <div>
        <LHeader :text="text"></LHeader>
        <!-- 视屏 -->
        <div v-if="videoUrl">
            <custom-player
                :videoUrl="videoUrl"
                :videoImg="videoImg"
                @close="videoUrl = ''"
            />
        </div>
        <van-form
            @submit="onSubmit"
            :scroll-to-error="true"
            :show-error="false"
            validate-trigger="onSubmit"
        >
            <van-field
                v-if="isShowreturnCause"
                v-model.lazy="returnCause"
                readonly
                rows="1"
                autosize
                label="退回原因"
                type="textarea"
                class="gray"
            />

            <van-field
                required
                readonly
                clickable
                name="proId"
                :value="projectName"
                label="所属项目"
                placeholder="请选择"
                @click="showProjectName = true"
                :rules="[{ required: true, message: '所属项目不能为空' }]"
                :class="{ gray: isShowreturnCause }"
            />
            <van-popup
                v-model="showProjectName"
                position="bottom"
                v-if="!isShowreturnCause"
            >
                <van-picker
                    show-toolbar
                    value-key="projectName"
                    :columns="columnsProjectName"
                    @confirm="onConProjectName"
                    @cancel="showProjectName = false"
                />
            </van-popup>

            <van-field
                required
                readonly
                clickable
                name="hdRange"
                :value="range"
                label="适用范围"
                placeholder="请选择"
                @click="showRange = true"
                :rules="[{ required: true, message: '适用范围不能为空' }]"
                :class="{ gray: isShowreturnCause }"
            />
            <van-popup
                v-model="showRange"
                position="bottom"
                v-if="!isShowreturnCause"
            >
                <van-picker
                    show-toolbar
                    value-key="hdRange"
                    :columns="columnsRange"
                    @confirm="onConRange"
                    @cancel="showRange = false"
                />
            </van-popup>

            <van-field
                required
                readonly
                clickable
                name="hdType"
                :value="type"
                label="隐患类型"
                placeholder="请选择"
                @click="showType = true"
                :rules="[{ required: true, message: '隐患类型不能为空' }]"
                :class="{ gray: isShowreturnCause }"
            />
            <van-popup
                v-model="showType"
                position="bottom"
                v-if="!isShowreturnCause"
            >
                <van-picker
                    show-toolbar
                    value-key="hdType"
                    :columns="columnsType"
                    @confirm="onConType"
                    @cancel="showType = false"
                />
            </van-popup>

            <van-field
                required
                readonly
                clickable
                name="hdProjectName"
                :value="dangerName"
                label="隐患项目名称"
                placeholder="请选择"
                @click="showDangerName = true"
                :rules="[{ required: true, message: '隐患项目名称不能为空' }]"
                :class="{ gray: isShowreturnCause }"
            />
            <van-popup
                v-model="showDangerName"
                position="bottom"
                v-if="!isShowreturnCause"
            >
                <van-picker
                    show-toolbar
                    value-key="hdName"
                    :columns="columnsDangerName"
                    @confirm="onConDangerName"
                    @cancel="showDangerName = false"
                />
            </van-popup>

            <van-field
                required
                class="gray"
                v-model="dangerNum"
                readonly
                name="hdProjectId"
                label="隐患清单编号"
                placeholder="请选择"
                :rules="[{ required: true, message: '隐患清单编号不能为空' }]"
            />
            <van-field
                required
                class="gray"
                v-model="dangerLevel"
                readonly
                name="hdLev"
                label="隐患级别"
                placeholder="请选择"
                :rules="[{ required: true, message: '隐患级别不能为空' }]"
            />

            <van-field
                required
                readonly
                clickable
                name="hdDiscoveryTime"
                :value="findTime"
                label="隐患发现时间"
                placeholder="点击选择日期"
                @click="
                    showFindTime = true;
                    currentDate = new Date();
                "
                :rules="[{ required: true, message: '隐患发现时间不能为空' }]"
            />
            <van-popup v-model="showFindTime" position="bottom">
                <van-datetime-picker
                    type="datetime"
                    @confirm="onConFindTime"
                    @cancel="showFindTime = false"
                    v-model="currentDate"
                />
            </van-popup>

            <van-field
                required
                readonly
                clickable
                name="dangerId"
                :value="source"
                label="风险源"
                placeholder="请选择"
                @click="showSource = true"
                :rules="[{ required: true, message: '风险源不能为空' }]"
            />

            <van-popup v-model="showSource" position="bottom">
                <van-picker
                    show-toolbar
                    value-key="factor"
                    :columns="columnsSource"
                    @confirm="onConSource"
                    @cancel="showSource = false"
                />
            </van-popup>
            <van-field
                v-model="source1"
                readonly
                rows="3"
                autosize
                label=" "
                name="dangerSource"
                type="textarea"
                @click="goSelectTwo"
                placeholder="请选择"
                :rules="[{ required: true, message: '隐患描述不能为空' }]"
            />

            <van-field
                v-model="location"
                name="hdPosition"
                label="检查部位"
                placeholder="请输入"
                :rules="[{ required: true, message: '检查部位不能为空' }]"
            />

            <van-field
                required
                v-model="describe"
                rows="3"
                label="隐患描述"
                name="hdDescribe"
                type="textarea"
                placeholder="请输入"
                :rules="[{ required: true, message: '隐患描述不能为空' }]"
            />

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

            <van-field name="hdVideo1" label="隐患视频">
                <template #input>
                    <van-uploader
                        multiple
                        @delete="deleteFile(...arguments, 'uploaderVideo')"
                        :max-count="5"
                        upload-text="最多上传五个"
                        v-model="uploaderVideo"
                        accept="video/*"
                        @click-preview="clickPre"
                    >
                        <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/video.png"
                                    alt=""
                                    style="width: 0.64rem; height: 0.64rem"
                                />
                                <span class="van-uploader__upload-text"
                                    >最多上传五个</span
                                >
                            </div>
                        </template>
                    </van-uploader>
                </template>
            </van-field>
            <van-field
                readonly
                clickable
                name="hdExpirationTime"
                :value="expireTime"
                label="隐患到期时间"
                placeholder="点击选择日期"
                @click="
                    showExpireTime = true;
                    currentDate = new Date();
                "
            />
            <van-popup v-model="showExpireTime" position="bottom">
                <van-datetime-picker
                    type="datetime"
                    v-model="currentDate"
                    @confirm="onConExpireTime"
                    @cancel="showExpireTime = false"
                />
            </van-popup>

            <van-field
                readonly
                clickable
                name="rectificationUser"
                :value="recPeople"
                label="隐患整改人"
                placeholder="请选择"
                @click="showRecPeople = true"
            />
            <van-popup v-model="showRecPeople" position="bottom">
                <van-picker
                    show-toolbar
                    value-key="userName"
                    :columns="columnsRecPeople"
                    @confirm="onConRecPeople"
                    @cancel="showRecPeople = false"
                />
            </van-popup>
            <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>
    </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";
import { timestampToTime } from "@/utils/format";
import customPlayer from "@/components/video";
import {
    getFormList,
    postHdTyp,
    postHdName,
    postHdInventories,
    postHdRiskSource,
    postHdShowPeople,
    postHdReportAdd,
    dangerReturnEcho,
} from "@/service/danger";
export default {
    name: "add-danger",
    components: {
        LHeader,
        customPlayer,
    },
    activated() {
        this.taskId =
            this.$route.params.taskId ||
            localStorage.getItem("dangerAddTaskId");
        console.log(this.taskId);
        if (this.taskId) {
            this.isShowreturnCause = true;
            this.text = "隐患上报退回";
            this.postReturnEcho();
        }
        this.getList();
    },

    mounted() {
        this.$bus.$on("sourceAyy", (res) => {
            setTimeout(() => {
                this.source1 = res.join(",");
                // 销毁一下监听事件 不然会越加越多
                this.$bus.$off("riskLevelBus");
            });
        });
    },
    beforeRouteLeave(to, from, next) {
        if (to.name != "choose-people") {
            (this.text = "新增隐患"), (this.projectId = ""); // 所属工程
            this.taskId = "";
            this.projectName = "";
            this.showProjectName = false;
            this.columnsProjectName = [];
            this.range = ""; //适用范围
            this.showRange = false;
            this.columnsRange = [];
            this.type = ""; //隐患类型
            this.showType = false;
            this.columnsType = [];
            this.dangerName = ""; //隐患项目名称
            this.showDangerName = false;
            this.columnsDangerName = [];
            this.dangerNum = ""; //隐患单编号
            this.dangerLevel = ""; //隐患项目级别
            this.findTime = ""; //隐患发现时间
            this.showFindTime = false;
            this.source = ""; // 风险源
            this.showSource = false;
            this.columnsSource = [];
            this.source1 = ""; // 风险源第二个字段
            this.showSource1 = false;
            this.columnsSource1 = [];
            this.location = ""; // 检查部位
            this.describe = ""; // 隐患描述
            this.uploaderImg = []; //图像上传
            this.uploaderVideo = []; //视频上传
            this.expireTime = ""; // 隐患到期时间
            this.showExpireTime = false;
            this.recPeople = "";
            this.showRecPeople = false;
            this.columnsRecPeople = [];
            this.isShowreturnCause = false;
            this.returnCause = ""; // 退回原因
            this.currentDate = new Date();
            // 清空 localStorage
            localStorage.removeItem("dangerAddTaskId");
        }
        next();
    },

    data() {
        return {
            // 视频预览地址
            videoUrl: "",

            id: 0,
            text: "新增隐患",
            taskId: "",
            projectId: "", // 所属工程
            projectName: "",
            showProjectName: false,
            columnsProjectName: [],
            range: "", //适用范围
            showRange: false,
            columnsRange: [],
            type: "", //隐患类型
            showType: false,
            columnsType: [],
            dangerName: "", //隐患项目名称
            showDangerName: false,
            columnsDangerName: [],
            dangerNum: "", //隐患单编号
            dangerLevel: "", //隐患项目级别
            findTime: "", //隐患发现时间
            showFindTime: false,
            source: "", // 风险源
            showSource: false,
            columnsSource: [],
            source1: "", // 风险源第二个字段
            showSource1: false,
            columnsSource1: [],
            location: "", // 检查部位
            describe: "", // 隐患描述
            uploaderImg: [], //图像上传
            uploaderVideo: [], //视频上传
            expireTime: "", // 隐患到期时间
            showExpireTime: false,
            recPeople: "",
            showRecPeople: false,
            columnsRecPeople: [],
            isShowreturnCause: false,
            returnCause: "", // 退回原因
            currentDate: new Date(),
        };
    },

    methods: {
        // 点击预览图
        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);
                }
            }
        },
        dangerType(danger) {
            // 严重隐患 = A

            // 较大隐患 = B

            // 危险隐患 = C

            // 重大隐患 = S
            switch (danger) {
                case "A":
                    return "严重隐患";
                case "B":
                    return "较大隐患";
                case "C":
                    return "危险隐患";
                case "S":
                    return "重大隐患";
                case "严重隐患":
                    return "A";
                case "较大隐患":
                    return "B";
                case "危险隐患":
                    return "C";
                case "重大隐患":
                    return "S";
                default:
                    return danger;
            }
        },

        onSubmit(values) {
            let formdata = new FormData();
            formdata.append("id", this.id);
            formdata.append("proId", this.projectId);
            // formdata.append("projectName", this.projectName);
            formdata.append("hdRange", values.hdRange);
            formdata.append("hdType", values.hdType);
            formdata.append("hdProjectName", values.hdProjectName);
            formdata.append("hdProjectId", values.hdProjectId);
            formdata.append("hdLev", this.dangerType(values.hdLev));
            formdata.append("hdDiscoveryTime", values.hdDiscoveryTime);
            formdata.append("dangerId", values.dangerId);
            formdata.append("dangerSource", values.dangerSource);
            formdata.append("hdPosition", values.hdPosition);
            formdata.append("hdDescribe", values.hdDescribe);
            formdata.append("hdExpirationTime", values.hdExpirationTime || "");
            formdata.append(
                "rectificationUser",
                values.rectificationUser || ""
            );
            console.log(values.hdPicture1, "这是要上传的文件");
            // 放图片路径 因为formdat存数组会自动变成字符串所以次用这种追加字段的方式
            values.hdPicture1.forEach((item) => {
                if (item.file) {
                    formdata.append("hdPicture1[]", item.file);
                }
            });
            values.hdVideo1.forEach((item) => {
                if (item.file) {
                    formdata.append("hdVideo1[]", item.file);
                }
            });
            this.$toast.loading({
                message: "提交中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 0,
            });
            let url = "/hdreport/add";
            if (this.taskId) {
                url = `/hdreport/editSave/${this.taskId}`;
            }
            console.log(url);

            postHdReportAdd(url, formdata)
                .then((res) => {
                    this.$toast.clear();
                    this.$toast.success({
                        message: "提交成功",
                        duration: 2000,
                    });
                    history.go(-1);
                })
                .catch(() => {
                    this.$toast.clear();
                    this.$toast.fail("提交失败,请稍后再试");
                });
        },
        // 请求表单数据
        getList() {
            this.$toast.loading({
                message: "加载中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 0,
            });
            getFormList("/hdreport/add")
                .then((res) => {
                    this.$toast.clear();
                    this.columnsProjectName = res.data.projectInformations;
                    this.columnsRange = res.data.hdInventories;
                    this.columnsSource = res.data.factors;
                })
                .catch(() => {
                    this.$toast.clear();
                    this.$toast.fail("加载失败,请稍后再试");
                });
        },

        // 请求已退回详情数据
        postReturnEcho() {
            this.$toast.loading({
                message: "加载中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 0,
            });
            dangerReturnEcho(`/hdreport/edit/${this.taskId}`)
                .then((res) => {
                    this.$toast.clear();
                    // 对数据进行赋值
                    this.returnCause = res.data.reason;
                    let msg = res.data.hdReport;
                    // msg.hdPictureList=msg.hdPictureList||[];
                    // msg.hdVideoList=msg.hdVideoList||[];
                    this.id = msg.id;
                    this.projectId = msg.proId;
                    this.projectName = res.data.projectInformations.filter(
                        (item) => item.id == msg.proId
                    )[0]["projectName"];
                    this.range = msg.hdRange;
                    this.type = msg.hdType;
                    this.dangerName = msg.hdProjectName;
                    this.dangerNum = msg.hdProjectId;
                    this.dangerLevel = this.dangerType(msg.hdLev);
                    this.source1 = this.source1
                        ? this.source1
                        : msg.dangerSource;
                    this.findTime = msg.hdDiscoveryTime;
                    this.source = msg.dangerId;
                    this.location = msg.hdPosition;
                    this.describe = msg.hdDescribe;
                    this.expireTime = msg.hdExpirationTime;
                    this.recPeople = msg.rectificationUser;
                    this.uploaderImg = (res.data.imgsysFiles || []).map(
                        (item) => {
                            return {
                                ...item,
                                url: item.filePath,
                            };
                        }
                    );
                    console.log(this.uploaderImg);
                    this.uploaderVideo = (res.data.videosysFiles || []).map(
                        (item) => {
                            return {
                                ...item,
                                url: item.filePath,
                                file:new File([],item['fileName'],{})
                            };
                        }
                    );

                    postHdShowPeople(`/hdreport/showPeople/${msg.proId}`).then(
                        (res) => {
                            this.columnsRecPeople = res.data;
                        }
                    );
                })
                .catch((err) => {
                    console.log(err);
                    this.$toast.clear();
                    this.$toast.fail("加载失败,请稍后再试");
                });
        },

        // 所属项目
        onConProjectName(value) {
            if (!value) {
                this.showProjectName = false;
                return;
            }
            this.projectId = value.id;
            this.projectName = value.projectName;
            this.showProjectName = false;
            // 这里请求隐患整改人接口
            postHdShowPeople(`/hdreport/showPeople/${this.projectId}`).then(
                (res) => {
                    this.columnsRecPeople = res.data;
                }
            );
        },
        // 适用范围
        onConRange(value) {
            if (!value) {
                this.showRange = false;
                return;
            }
            this.range = value.hdRange;
            this.showRange = false;
            this.type = "";
            this.dangerName = "";
            this.dangerNum = "";
            this.dangerLevel = "";
            // 去请求隐患类型的数据
            postHdTyp(`/hdreport/showHdType/${this.range}`).then((res) => {
                this.columnsType = res.data;
            });
        },
        // 隐患类型
        onConType(value) {
            if (!value) {
                this.showType = false;
                return;
            }
            this.type = value.hdType;
            this.showType = false;
            this.dangerName = "";
            this.dangerNum = "";
            this.dangerLevel = "";
            // 请求隐患项目名称的数据
            postHdName(`/hdreport/showHdName/${this.range}/${this.type}`).then(
                (res) => {
                    this.columnsDangerName = res.data;
                }
            );
        },
        // 隐患项目名称
        onConDangerName(value) {
            if (!value) {
                this.showDangerName = false;
                return;
            }
            this.dangerName = value.hdName;
            this.showDangerName = false;
            // 请求隐患单编号和隐患级别
            postHdInventories(
                `/hdreport/showHdInventories/${this.range}/${this.type}/${this.dangerName}`
            ).then((res) => {
                this.dangerNum = res.data[0].hdId;
                this.dangerLevel = this.dangerType(res.data[0].hdLev);
            });
        },
        // 隐患发现时间
        onConFindTime(date) {
            this.findTime = timestampToTime(date, "DT1", true);
            this.showFindTime = false;
            // this.currentDate = new Date()
        },
        // 风险源
        onConSource(value) {
            if (!value) {
                this.showSource = false;
                return;
            }
            this.source = value.factor;
            this.showSource = false;
            // 请求风险源第二个字段
            let formdata = new FormData();
            formdata.append("factor", this.source);
            postHdRiskSource("/riskSource/list", formdata).then((res) => {
                this.columnsSource1 = res.data;
            });
        },
        goSelectTwo() {
            if (this.source) {
                // 跳转到多选页面
                this.$router.push({
                    name: "choose-people",
                    params: {
                        source: this.source,
                    },
                });
            } else {
                this.$toast("请先选择风险源");
            }
        },
        // 隐患到期时间
        onConExpireTime(date) {
            this.expireTime = timestampToTime(date, "DT1", true);
            this.showExpireTime = false;
            // this.currentDate = new Date()
        },
        // 隐患整改人
        onConRecPeople(value) {
            if (!value) {
                this.showRecPeople = false;
                return;
            }
            this.recPeople = value.userName;
            this.showRecPeople = false;
        },

        cancel() {
            this.$router.go(-1);
        },
    },
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.gray {
    /deep/.van-field__control {
        color: gray !important;
    }
}
</style>
