<template>
    <div class="appint">
        <div class="secendPage">
            <ul>
                <li class="titleLi">
                    <span class="required">*</span>
                    姓名：
                    <input
                        type="text"
                        placeholder="请填写"
                        readonly
                        v-model="worker.xm"
                    />
                </li>
                <!-- <li class="titleLi">
                    <span class="required">*</span>
                    身份证号码：
                    <input
                        type="text"
                        placeholder="请填写"
                        readonly
                        v-model="worker.sfzmhm"
                    />
                </li> -->
                <li class="titleLi">
                    <span class="required">*</span>
                    手机号码：
                    <input
                        type="text"
                        placeholder="请填写"
                        v-model="worker.sjhm"
                        readonly
                    />
                </li>
                <li class="titleLi">
                    <span class="required">*</span>
                    拜访对象：
                    <input
                        type="text"
                        placeholder="请选择企业名称"
                        readonly
                        v-model="worker.qymc"
                    />
                </li>
                <li class="titleLi">
                    <span class="required">*</span>
                    来访事由：
                    <input
                        type="text"
                        placeholder="请选择"
                        readonly
                        v-model="worker.lfsy"
                    />
                </li>
                <li class="titleLi">
                    <span class="required">*</span>
                    拜访时间：
                    <input
                        type="text"
                        placeholder="请选择"
                        readonly
                        v-model="worker.bfsj"
                    />
                </li>
                <li class="titleLi">
                    <span class="required">*</span>
                    有效时限：
                    <input
                        type="text"
                        placeholder="请选择"
                        readonly
                        v-model="worker.yxsx"
                    />
                </li>
                <!-- <li class="titleLi titleLiLast">
                    <span class="required">*</span>
                    行程码截图（限1张）：
                </li>
                <li class="titleLi titleLiUploader">
                    <van-uploader
                        v-model="fileList"
                        multiple
                        max-count="1"
                        :deletable="false"
                        disabled
                    />
                </li> -->
                <li class="titleLi titleLiLast">
                    人脸图片（限1张）：
                </li>
                <li class="titleLi titleLiUploader">
                    <van-uploader
                        v-model="fileList2"
                        multiple
                        max-count="1"
                        :deletable="false"
                        disabled
                    />
                </li>
            </ul>
            <div class="buttonBox">
                <button class="turnOff" @click="failed" v-show="worker.zt == 0">
                    退回
                </button>
                <button
                    class="preservation btn2"
                    @click="agree"
                    v-show="worker.zt == 0"
                >
                    通过
                </button>
                <button
                    class="preservation btn2"
                    @click="turnOff"
                    v-show="worker.zt != 0"
                >
                    关闭
                </button>
            </div>
        </div>
        <van-dialog
            v-model="showReason"
            title="退回原因"
            show-cancel-button
            @confirm="failedSubmit"
            @cancel="showReason = false"
            :beforeClose="onBeforeClose"
        >
            <div>
                <textarea
                    name=""
                    id=""
                    cols="30"
                    rows="10"
                    class="reason"
                    v-model="commit.thyy"
                ></textarea>
            </div>
        </van-dialog>
    </div>
</template>
<script>
import constant from "@/common/js/constant";
import { agreeOrNoForApplyVisit } from "@/service/api_vistior.js";
import auth from "@/service/auth";
import { Toast } from "vant";
import { Dialog } from "vant";
export default {
    data() {
        return {
            showReason: false,
            show: false,
            fileList: [],
            fileList2: [],
            minDate: new Date(2000, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            intTime: "",
            value1: 0,
            option1: [
                { text: "6小时", value: 0 },
                { text: "12小时", value: 1 },
                { text: "24小时", value: 2 },
                { text: "48小时", value: 3 },
                { text: "72小时", value: 4 }
            ],
            worker: {},
            commit: {
                qyid: "",
                id: "",
                zt: "",
                gxrid: auth.currUser().id,
                thyy: ""
            }
        };
    },
    mounted() {
        console.log("auth", auth.currUser());
        // console.log(JSON.parse(this.$route.query.item));
        this.worker = JSON.parse(this.$route.query.item);
        this.getMsg();
        if (this.worker.xcmzp) {
            this.fileList.push(
                JSON.parse(
                    '{"url":"' +
                        constant.BASE_URI +
                        "/wx/fileController/download/" +
                        this.worker.xcmzp +
                        '","isImage": true}'
                )
            );
        }
        if (this.worker.rlzp) {
            this.fileList2.push(
                JSON.parse(
                    '{"url":"' +
                        constant.BASE_URI +
                        "/wx/fileController/download/" +
                        this.worker.rlzp +
                        '","isImage": true}'
                )
            );
        }
    },

    methods: {
        getMsg() {
            this.commit.qyid = this.worker.qyid;
            this.commit.id = this.worker.id;
        },
        chooseTime() {
            this.show = true;
        },
        selectTime(e) {
            let dayjs = require("dayjs");
            this.intTime = dayjs(e).format("YYYY-MM-DD");
            this.show = false;
        },
        // 退回按钮
        failed() {
            this.showReason = true;
        },
        // 确认退回
        failedSubmit() {
            this.commit.zt = 2;
            if (this.commit.thyy) {
                agreeOrNoForApplyVisit(this.commit).then(res => {
                    if (res.errmsg == "成功") {
                        this.$router.push("/visitorExamine");
                    }
                    Toast(res.errmsg);
                    this.showReason = false;
                });
            } else {
                Toast("请输入退回原因");
            }
        },
        // 通过按钮
        agree() {
            console.log(111);
            Dialog.confirm({
                title: "请确认",
                message: "确认后访客即可拜访"
            })
                .then(() => {
                    this.commit.zt = 1;
                    agreeOrNoForApplyVisit(this.commit).then(res => {
                        if (res.errmsg == "成功") {
                            this.$router.push("/visitorExamine");
                        }
                        Toast(res.errmsg);
                        this.showReason = false;
                    });
                })
                .catch(() => {
                    // on cancel
                });
        },
        turnOff() {
            this.$router.push("/visitorExamine");
        },
        // 取消点击dialog确认会默认关掉窗口的功能
        onBeforeClose(action, done) {
            return done(false);
        }
    }
};
</script>
<style lang="scss">
.appint {
    .secendPage {
        background: white;
        padding: 3vw 3vw 3vw 3vw;
        margin: 5vw 3vw;
        border-radius: 15px;
        li {
            display: flex;
            align-items: center;
            height: 10vw;
            padding: 3vw 0;
            border-bottom: 1px solid rgb(243, 236, 236);
        }

        .titleLi {
            font-size: 3.5vw;
            font-weight: 700;
            white-space: nowrap;
        }

        input {
            padding: 15px 0 15px 20px;
        }
        textarea {
            padding: 15px 0 15px 20px;
        }
        .titleLiLast {
            border-bottom: none;
            padding-bottom: 0;
        }
        .titleLiUploader {
            padding: 8vw 0;
        }
    }
    .buttonBox {
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-top: 5vw;
        margin-bottom: 0;
        padding: 5vw 0;
        button {
            padding: 2vw 10vw;
            border-radius: 15px;
        }
        .turnOff {
            background: white;
            border: 1px solid orangered;
            color: orangered;
        }
        .btn2 {
            background-color: rgb(0, 47, 167);
            color: white;
            border: white solid 1px;
        }
    }
    .van-dropdown-menu__bar {
        box-shadow: none !important;
    }

    .reason {
        width: 90%;
        position: relative;
        left: 50%;
        margin-left: -45%;
        box-sizing: border-box;
        padding: 2vw;
        font-size: 3.5vw;
        border: 1px solid black;
    }
    .required {
        color: red;
    }
}
</style>
