<!--医生上传认证信息-->
<template>
    <main>
        <div>
            <div class="avatar">
                <label>头像</label>
                <div style="width: .8rem;height: .8rem;">
                    <van-uploader
                        :after-read="afterRead"
                        v-model="UpLoadData.Avatar"
                        :max-count="1"
                        preview-size=".8rem"
                    />
                </div>

                <p>上传正式的医生照片</p>
            </div>
        </div>

        <div>
            <div>
                <label>姓名</label>
                <input type="text" v-model="UpLoadData.Name" placeholder="医生姓名" />
            </div>

            <div>
                <label>性别</label>
                <van-dropdown-menu class="selectTitles" :overlay="false" direction="down">
                    <van-dropdown-item v-model="UpLoadData.Sex" :options="Sex" />
                </van-dropdown-menu>
            </div>
        </div>

        <div>
            <div>
                <label>职称</label>
                <van-dropdown-menu class="selectTitles" :overlay="false" direction="down">
                    <van-dropdown-item v-model="UpLoadData.Title" :options="options" />
                </van-dropdown-menu>
            </div>
            <div>
                <label>科室</label>
                <input type="text" placeholder="请选择科室" readonly @click="departmentShow = true" />
            </div>
            <div>
                <label>医院</label>
                <input type="text" placeholder="请选择医院" readonly @click="HospitalShow = true" />
            </div>
        </div>

        <div>
            <p style="margin: 0 0 .2rem 0;">附件（执业证书，工牌等）</p>
            <div>
                <van-uploader
                    v-model="UpLoadData.Certificate"
                    multiple
                    :max-count="3"
                    preview-size=".8rem"
                />
            </div>
        </div>

        <!-- 选择科室 -->
        <van-popup v-model="departmentShow" get-container="body" position="bottom">
            <ChooseDepartment @cancel="departmentShow=false" @confirm="confirmDepartment"></ChooseDepartment>
        </van-popup>

        <!-- 选择医院 -->
        <van-popup
            v-model="HospitalShow"
            get-container="body"
            position="bottom"
            style="height:7.5rem;"
        >
            <ChooseHospital @cancel="HospitalShow=false" @confirm="confirmHospital"></ChooseHospital>
        </van-popup>
    </main>
</template>

<script>
    import ChooseDepartment from "@/components/ChooseDepartment.vue"; //选择科室
    import ChooseHospital from "@/components/ChooseHospital.vue"; //选择医院
    export default {
        components: { ChooseDepartment, ChooseHospital },
        name: "UpLoadInfo",
        data() {
            return {
                UpLoadData: {
                    Avatar: [], // 保存上传头像的地址
                    Name: "", // 医生名字
                    Sex: 0, // 性别
                    Title: 0, // 职称
                    Department: "", //科室
                    Hospital: "", // 医院
                    Certificate: [] // 附件 （工牌，执业证书等）
                },
                Sex: [
                    { text: "请选择性别", value: 0 },
                    { text: "男", value: 1 },
                    { text: "女", value: 2 }
                ],
                options: [
                    { text: "选择职称", value: 0 },
                    { text: "主任医师", value: 1 },
                    { text: "副主任医师", value: 2 },
                    { text: "主治医师", value: 3 },
                    { text: "医师", value: 4 }
                ],
                departmentShow: false, // 选择科室
                HospitalShow: false // 选择医院
            };
        },
        methods: {
            afterRead(file) {
                // 此时可以自行将文件上传至服务器
                console.log(file);
            },
            // 确认科室
            confirmDepartment(value) {
                console.log(value);
                this.UpLoadData.Department = value;
                this.departmentShow = false;
            },
            // 确认医院
            confirmHospital(value) {
                console.log(value);
                this.UpLoadData.Hospital = value;
                this.HospitalShow = false;
            }
        }
    };
</script>

<style scoped lang="less">
    main {
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        padding: 0.25rem;
        background-color: #f0f0f0;
        > div {
            width: 100%;
            box-shadow: 0 0 10px 4px #e4e4e4;
            border-radius: 5px;
            text-align: left;
            background-color: #fff;
            box-sizing: border-box;
            padding: 0.2rem;
            margin-top: 0.2rem;
            > div {
                display: flex;
                align-items: center;
                height: 1rem;
                line-height: 1rem;
            }
            label {
                display: inline-block;
                min-width: 1.4rem;
                font-size: 0.3rem;
                color: #333333;
            }
            input {
                font-size: 0.3rem;
                color: #000000;
            }
            p {
                margin-left: 0.2rem;
            }
        }
    }

    // 选择医生职称
    /deep/ .selectTitles {
        width: 100%;
        height: 100%;
        .van-dropdown-menu__title {
            width: 100%;
            padding: 0;
            font-size: 0.3rem;
            &::after {
                right: 0.1rem;
            }
        }
        .van-dropdown-item {
            width: 5.8rem;
            left: auto;
            right: 0.2rem;
        }
    }
</style>
