<template>
    <div class="appint">
        <div class="secendPage">
            <ul>
                <li class="titleLi">
                    <span class="required">*</span>
                    您的姓名：
                    <input
                        type="text"
                        placeholder="请填写"
                        v-model="vistiorMsg.xm"
                    />
                </li>
                <!-- <li class="titleLi">
                    <span class="required">*</span>
                    身份证号码：
                    <input
                        type="text"
                        placeholder="请填写"
                        v-model="vistiorMsg.sfzmhm"
                    />
                </li> -->
                <li class="titleLi">
                    <span class="required">*</span>
                    手机号码：
                    <input
                        type="text"
                        placeholder="请填写"
                        v-model="vistiorMsg.sjhm"
                    />
                </li>
                <li class="titleLi">
                    <span class="required">*</span>
                    拜访对象：
                    <input
                        type="text"
                        placeholder="请输入企业名称，点搜索"
                        v-model="vistiorMsg.qymc"
                    />
                    <button @click="search" class="btn">搜索</button>
                    <van-popup
                        v-model="showCom"
                        position="bottom"
                        :style="{ height: '45%' }"
                    >
                        <van-picker
                            title="请选择"
                            show-toolbar
                            :columns="columns"
                            @confirm="onConfirm"
                            @cancel="showCom = false"
                            @change="onChange"
                        />
                    </van-popup>
                    <!-- <van-dropdown-menu>
                        <van-dropdown-item
                            v-model="mysearch"
                            :options="option2"
                            @change="selectObj"
                            @open="search"
                        />
                    </van-dropdown-menu> -->
                </li>
                <li class="titleLi">
                    <span class="required">*</span>
                    来访事由：
                    <van-dropdown-menu>
                        <van-dropdown-item
                            v-model="vistiorMsg.lfsy"
                            :options="option3"
                        />
                    </van-dropdown-menu>
                </li>
                <li class="titleLi">
                    <span class="required">*</span>
                    拜访时间：
                    <input
                        type="text"
                        placeholder="请选择"
                        readonly
                        @click="chooseTime"
                        v-model="vistiorMsg.bfsj"
                    />
                </li>
                <li class="titleLi">
                    <span class="required">*</span>
                    有效时限：
                    <van-dropdown-menu>
                        <van-dropdown-item
                            v-model="vistiorMsg.yxsx"
                            :options="option1"
                        />
                    </van-dropdown-menu>
                </li>
                <!-- <li class="titleLi titleLiLast">
                    <span class="required">*</span>
                    行程码截图（限1张）：
                </li>
                <li class="titleLi titleLiUploader">
                    <van-uploader
                        v-model="fileList"
                        multiple
                        max-count="1"
                        :after-read="afterRead"
                        :before-delete="beforeDelete"
                        @oversize="onOversize"
                    />
                </li> -->
                <li class="titleLi titleLiLast">
                    人脸图片（限1张）：<span class="tips"
                        >（如不方便提供，请刷二维码通行）</span
                    >
                </li>
                <li class="titleLi titleLiUploader">
                    <van-uploader
                        v-model="fileList2"
                        multiple
                        max-count="1"
                        :after-read="afterRead2"
                        :before-delete="beforeDelete2"
                    />
                </li>
            </ul>
            <div class="buttonBox">
                <button class="turnOff">关闭</button>
                <button class="preservation btn2" @click="submit">
                    提交
                </button>
            </div>
        </div>
        <!-- 拜访时间弹出层 -->
        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
            <van-datetime-picker
                v-model="currentDate"
                type="datetime"
                title="请选择时间"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="show = false"
                @confirm="selectTime"
        /></van-popup>
    </div>
</template>
<script>
import { applyVisit, reasonForApplyVisit } from "@/service/api_vistior";
import { findAllSimpleCompanies } from "@/service/api_company.js";
import { upload } from "@/service/api_upload";
import { Toast } from "vant";
export default {
    data() {
        return {
            showCom: false,
            mysearch: "搜索",
            vistiorMsg: {
                xm: "",
                bfsj: "",
                lfsy: "参观",
                qymc: "",
                sjhm: "",
                sfzmhm: "",
                yxsx: "6小时",
                qyid: "",
                travelcode: "",
                xcmzp: "",
                rlzp: ""
            },
            show: false,
            fileList: [],
            fileList2: [],
            minDate: new Date(2000, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            option1: [
                { text: "6小时", value: "6小时" },
                { text: "12小时", value: "12小时" },
                { text: "24小时", value: "24小时" },
                { text: "48小时", value: "48小时" },
                { text: "72小时", value: "72小时" }
            ],
            option2: [{ text: "搜索", value: "搜索" }],
            option3: [{ text: "参观", value: "参观" }],
            columns: []
        };
    },
    mounted() {
        reasonForApplyVisit().then(res => {
            this.option3 = res.data;
        });
    },
    methods: {
        // 拜访对象搜索公司
        search() {
            this.showCom = true;
            findAllSimpleCompanies({
                pageNum: 1,
                pageSize: 10,
                searchInfo: this.vistiorMsg.qymc
            }).then(res => {
                console.log(
                    res.data.rows.map(e => {
                        return e;
                    })
                );
                this.columns = res.data.rows.map(e => {
                    return e;
                });
            });
        },

        selectObj(e) {
            // this.vistiorMsg.qymc = e;
            console.log(e);
        },
        chooseTime() {
            this.show = true;
        },
        selectTime(e) {
            let dayjs = require("dayjs");
            this.vistiorMsg.bfsj = dayjs(e).format("YYYY-MM-DD HH:mm:ss");
            this.show = false;
        },
        onConfirm(e) {
            console.log(e);
            this.vistiorMsg.qymc = e.text;
            this.vistiorMsg.qyid = e.id;
            this.showCom = false;
        },
        // 提交
        submit() {
            if (!this.vistiorMsg.xm) {
                Toast("请输入姓名");
            } else if (!this.vistiorMsg.sjhm) {
                Toast("请输入手机号");
            } else if (!this.vistiorMsg.qymc) {
                Toast("请输入拜访对象");
            }
            // else if (this.fileList.length == 0) {
            //    Toast("请上传行程码截图");
            // }
            else if (!this.vistiorMsg.bfsj) {
                Toast("请选择拜访时间");
            } else {
                applyVisit(this.vistiorMsg).then(res => {
                    if (res.errmsg == "成功") {
                        this.fileList = [];
                        this.fileList2 = [];
                        this.vistiorMsg = {
                            xm: "",
                            bfsj: "",
                            lfsy: "参观",
                            qymc: "",
                            sjhm: "",
                            sfzmhm: "",
                            yxsx: "6小时",
                            qyid: "",
                            travelcode: "",
                            xcmzp: "",
                            rlzp: ""
                        };
                    }
                    Toast(res.errmsg);
                });
            }
        },
        afterRead(file) {
            Toast.loading({
                message: "上传中...",
                forbidClick: true,
                duration: 0
            });
            if (file instanceof Array) {
                file.map(v => {
                    this.uploadImg(v);
                });
            } else {
                this.uploadImg(file);
            }
        },
        afterRead2(file) {
            Toast.loading({
                message: "上传中...",
                forbidClick: true,
                duration: 0
            });
            if (file instanceof Array) {
                file.map(v => {
                    this.uploadImg2(v);
                });
            } else {
                this.uploadImg2(file);
            }
        },
        beforeDelete(file, detail) {
            const vm = this;
            // name.index代表图片的索引
            vm.vistiorMsg.xcmzp = "";
            console.log(file);
            this.fileList = [];
        },
        beforeDelete2(file, detail) {
            const vm = this;
            // name.index代表图片的索引
            vm.vistiorMsg.rlzp = "";
            this.fileList2 = [];
        },
        uploadImg(file) {
            const _this = this;
            const formParam = new FormData(); // 创建form对象
            formParam.append("file", file.file); // 通过append向form对象添加数据
            const config = {
                headers: {
                    "Content-Type": "multipart/form-data",
                    "MVVM-Key": String(new Date().getTime()),
                    xx: "anything"
                } // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
            }; // 添加请求头
            return new Promise((resolve, reject) => {
                // axios.post('http://121.228.7.226:9001/wx/fileController/upload', formParam, config)
                upload(formParam, config)
                    .then(response => {
                        if (response.data.length) {
                            _this.vistiorMsg.xcmzp = response.data[0];
                        }
                        Toast.clear();
                    })
                    .catch((err, x) => {
                        reject(err, x);
                    });
            });
        },
        uploadImg2(file) {
            const _this = this;
            const formParam = new FormData(); // 创建form对象
            formParam.append("file", file.file); // 通过append向form对象添加数据
            const config = {
                headers: {
                    "Content-Type": "multipart/form-data",
                    "MVVM-Key": String(new Date().getTime()),
                    xx: "anything"
                } // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
            }; // 添加请求头
            return new Promise((resolve, reject) => {
                // axios.post('http://121.228.7.226:9001/wx/fileController/upload', formParam, config)
                upload(formParam, config)
                    .then(response => {
                        if (response.data.length) {
                            _this.vistiorMsg.rlzp = response.data[0];
                        }
                        Toast.clear();
                    })
                    .catch((err, x) => {
                        reject(err, x);
                    });
            });
        }
    }
};
</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);
        }
        .required {
            color: orangered;
        }
        .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;
        }
        .van-picker-column {
            li {
                padding: 0 !important;
                border: none !important;
            }
        }
        .btn {
            padding: 1vw 2vw;
            background: rgba(207, 235, 245, 0.7);
            border-radius: 0.2vw;
            color: rgb(3, 17, 52);
            font-weight: 500;
            font-size: 3.5vw;
        }
    }
    .tips {
        color: rgb(166, 165, 165);
        font-weight: 500;
    }
    .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 rgb(0, 47, 167);
            color: rgb(0, 47, 167);
        }
        .btn2 {
            background-color: rgb(0, 47, 167);
            color: white;
            border: white solid 1px;
        }
    }
    .van-dropdown-menu__bar {
        box-shadow: none !important;
    }
}
</style>
