<template>
    <div style="position:fixed">
        <img src="/picture/hhr/01.jpg" style="width: 100%;   float: right">
        <img src="/picture/hhr/kefu.png"  style="width: 10%;position:fixed ;right: 5%;top: 3%" @click="showPopup">
        <span style="width: 20%;position:fixed ;right: -2%;top: 8%;font-size: 13px">联系客服</span>
        <img src="/picture/hhr/question.png"  style="width: 10%;position:fixed ;right:  22%;top: 3%">
        <span style="width: 20%;position:fixed ;right: 15%;top: 8%;font-size: 13px">常见问题</span>
        <div style="position:fixed;top: 11%;width: 100%;background-color: white;">
            <div style="padding-left: 12px;padding-top: 20px ;color: black;text-align: left;width: 100%;height: 20%;line-height: 10px">
                <div style="width: 15%;height: 80px;float: left; margin-right: 10px">
                    <img src="/picture/hhr/sim-bg.png" style="width: 100%;">
                </div>
                <p >天翼学生证</p>
                <p >10元/月</p>
                <p style="color: red">适用于中小学生,号码卡将统一配送至学生</p>
                <p style="color: red"> 所在学校,由学校发放给学生。</p>
            </div>
            <h2 style ="font-weight:900" >
                请填写有效信息
            </h2>
            <van-cell-group>
                <van-field left-icon="user-o" label="学生姓名" v-model="value" placeholder="请输入用户名" />
                <van-field left-icon="user-o" label="学校" v-model="value" placeholder="请输入9月开学时就读的院校名称" />
                <van-field
                        left-icon="user-o"
                        readonly
                        clickable
                        name="area"
                        :value="value"
                        label="学校所在地区"
                        placeholder="点击选择省市区"
                        @click="showArea = true"
                />
                <van-popup v-model="showArea" position="bottom">
                    <van-area
                            :area-list="areaList"
                            @confirm="onConfirm"
                            @cancel="showArea = false"
                    />
                </van-popup>
                <van-field left-icon="user-o" label="班级" v-model="value" placeholder="请输入学生所属班级" />
                <van-field left-icon="user-o" label="学号" v-model="value" placeholder="请输入学生学号" />
                <van-field left-icon="user-o" label="家长名称" v-model="value" placeholder="请输入家长名称" />
                <van-field left-icon="user-o" label="家长身份证" v-model="value" placeholder="请输入家长身份证" />
                <van-field left-icon="user-o" label="备注" v-model="value" placeholder="请输入备注" />
            </van-cell-group>
            <h2 style="margin-top: 20px">请家长持本人以下证件拍照上传，16岁以上学生可学生本人拍照上传</h2>
            <van-grid :border="false" :column-num="3">
                <van-grid-item @click="tips">
                    <van-image src="/picture/hhr/upload01.png" />
                </van-grid-item >
                <van-grid-item @click="tips">
                    <van-image src="/picture/hhr/upload02.png" />
                </van-grid-item >
                <van-grid-item @click="tips">
                    <van-image src="/picture/hhr/upload03.png" />
                </van-grid-item>
            </van-grid>
        </div>

        <van-popup v-model="kefushow">
            <img src="/picture/hhr/service-qrcode.jpg" style="width:100%;height: 100%" >
        </van-popup>




    </div>
</template>

<script>
    import area from "../../../utils/area";
    import { Dialog } from 'vant';

    export default {
        name: "orderNewCar",
        data(){
            return{
                kefushow:false,
                list:[1,2],
                value: '',
                showArea: false,
                areaList: area, // 数据格式见 Area 组件文档
                fileList: [
                    { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
                    // Uploader 根据文件后缀来判断是否为图片文件
                    // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                    { url: 'https://cloud-image', isImage: true }
                ],
                sfzshow:false
            }
        }
        ,
        methods:{
            fileChange(el){
                if (!el.target.files[0].size) return;//判断是否有文件数量
                this.fileListg(el.target.files);//获取files文件组传入处理
                el.target.value = ''//清空val值，以便可以重复添加一张图片
            },
            fileListg(files){
                for (let i = 0; i < files.length; i++) {
                    this.fileAdd(files[i]);
                }
            },
            fileAdd(file){
                this.size = this.size + file.size;//总大小
                let reader = new FileReader();
                reader.vue = this;
                reader.readAsDataURL(file);
                reader.onload = function () {
                    file.src = this.result;
                    this.vue.imgList.push({
                        file
                    });
                }
            },
            bytesToSize(bytes){
                if (bytes === 0) return '0 B';
                let k = 1000, // or 1024
                    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                    i = Math.floor(Math.log(bytes) / Math.log(k));
                return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
            },
            handelup(e) {
                document.getElementById('upload_file').click()
            },
            // 选择文件
            afterRead(e) {
                console.log("this.$refs.uploader.onChange")
            },
            showPopup(){
                this.kefushow=true
            }
            ,onConfirm(values) {
                this.value = values.map(item => item.name).join('/');
                this.showArea = false;
            },
            tips(){
                Dialog.setDefaultOptions({
                })
                Dialog.alert({
                    // title: '证件上传示例',
                    message: `<div style="font-weight:1000;font-size:12px">
            <img src="/picture/hhr/idcard.jpg" style="width:100%;height: 100%" >
             <p >注意照片亮度均匀、图像清晰</p>
           </div>`
                }).then(() => {
                    // on close
                });
            }
        }
    }

</script>

<style scoped>

</style>
