<template>
    <div  style=" background-image: url('./picture/hhr/01.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 150%; position:relative">
        <div style="display: flex; ">
            <img src="/picture/hhr/question.png"  style="width: 10%;margin-left: 70%;margin-top: 5%">
            <img src="/picture/hhr/kefu.png"  style="width: 10%;margin-left: 5%;margin-top: 5%" @click="showPopup">
        </div>
        <div style="display: flex; ">
            <p style="width: 20%;font-size: 13px;margin-left: 65%;">常见问题</p>
            <p style="width: 20%;font-size: 13px;">联系客服</p>
        </div>
        <div style="width: 100%;background-color: white;line-height: 13px;font-size: 13px;">
            <div style="padding-top: 5%;padding-left: 5%">
                <div style="width: 15%;height: 80px;float: left; margin-right: 10px">
                    <img src="/picture/hhr/sim-bg.png" style="width: 100%;">
                </div>
                <p style="font-weight: 900" >天翼学生证</p>
                <p style="font-weight: 900">10元/月</p>
                <p style="color: red">适用于中小学生,号码卡将统一配送至学生</p>
                <p style="color: red"> 所在学校,由学校发放给学生。</p>
            </div>

            <div style="border-top:1px solid #e2e2e2; margin-top: 35px">
                <h2 style ="font-weight:900;font-size: 20px;margin-top: -10px;margin-left:10% " >
                    请填写有效信息
                </h2>
            </div>
            <!--        领卡表单部分-->
            <div>
            <van-cell-group>
                <van-field left-icon="user-o" label="学生姓名" v-model="value" placeholder="请输入用户名" />
                <van-field left-icon="location-o" label="学校" v-model="value" placeholder="请输入9月开学时就读的院校名称" />
                <van-field
                        left-icon="location-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="contact" label="班级" v-model="value" placeholder="请输入学生所属班级" />
                <van-field left-icon="contact" label="学号" v-model="value" placeholder="请输入学生学号" />
                <van-field left-icon="friends-o" label="家长名称" v-model="value" placeholder="请输入家长名称" />
                <van-field left-icon="phone-o" label="家长联系号码" v-model="value" placeholder="请输入家长联系号码" />
                <van-field left-icon="other-pay" label="家长身份证" v-model="value" placeholder="请输入家长身份证" />
                <van-field left-icon="records" label="备注" v-model="value" placeholder="请输入备注" />
            </van-cell-group>
            </div>
            <div style="line-height: 20px;margin-left:10%;margin-top: 3%;width: 90%">
                <h2 style ="font-weight:900;font-size: 20px;">请家长持本人以下证件拍照上传，16岁以上学生可学生本人拍照上传</h2>
            </div>
            <p style="color: red;width: 95%;margin: auto;line-height: 18px">根据工信部令第25号规定，用户预受理电信业务需上传身份证国徽照、人像照、半身照三张照片。系统需对您上传的三张照片进行身份证资料核验，成功提交后系统会自动给您发送短信，您可通过短信中的链接查询审核状态，请您耐心等待系统核验结果，谢谢。</p>
            <van-grid :border="false" :column-num="3">
                <van-grid-item @click="tips(1)">
                    <div v-show="uploadFileshow.zmian">
                        <img id='img_imgfilezmian' style="width: 80%">
                    </div>
                    <div v-show="!uploadFileshow.zmian">
                        <van-image src="/picture/hhr/upload01.png" />
                    </div>
                </van-grid-item >
                <van-grid-item @click="tips(2)">
                    <div v-show="uploadFileshow.fmina">
                        <img id='img_imgfilefmina' style="width: 80%">
                    </div>
                    <div v-show="!uploadFileshow.fmina">
                        <van-image src="/picture/hhr/upload02.png" />
                    </div>
                </van-grid-item >
                <van-grid-item @click="tips(3)">
                    <div v-show="uploadFileshow.txiang">
                        <img id='img_imgfiletxiang' style="width: 80%">
                    </div>
                    <div v-show="!uploadFileshow.txiang">
                        <van-image src="/picture/hhr/upload03.png" />
                    </div>
                </van-grid-item>
            </van-grid>
            <div style="height: 130px" >
            </div>
        </div>
<!--        领卡确认部分-->
        <div style="background-color:white;position: fixed;bottom: 0%;width: 100%">
            <div style="margin-left: 8%;font-size: 16px;text-align:left">
               <span>
                   <div style="width: 100%;display: flex;padding-top: 2%">
                       <van-checkbox v-model="Agree" shape="square" style="width: 13%" checked-color="#07c160">
                       </van-checkbox>
                       <span >同意 <a>《中国电信股份有限公司广州分公司全业务服务协议》 </a>内容</span>
                   </div>
               </span>
            </div>
            <div style="width: 80%;margin-left: 10%;margin-top: 5%;margin-bottom: 2%">
                <van-button :round="true" size="large" type="info">马上领卡</van-button>
            </div>
        </div>
        <van-popup  v-model="kefushow" style="width: 90%;height: 45%; display: flex; align-items: center;justify-content: center;">
            <div style="border: 1px solid #e2e2e2;width: 92%;height: 90%;position: fixed;display: flex; align-items: center;justify-content: center;">
                <div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px">您的专属客服</div>
                <img src="/picture/hhr/service-qrcode.jpg" style="width:55%;" >
            </div>
        </van-popup>

        <div>
            <van-dialog v-model="sfzshow.zmian" :before-close="closeOnClickOverlay1" :closeOnClickOverlay="true" >
                <h2 style="font-weight: 900;text-align: center;margin-top: 5%">证件上传示例</h2>
                <img src="/picture/hhr/backidcard.jpg" style="width: 100%">
                <p style="text-align: center;">注意照片亮度均匀、图像清晰</p>
            </van-dialog>
        </div>
        <div>
            <van-dialog v-model="sfzshow.fmina"  :before-close="closeOnClickOverlay1" :closeOnClickOverlay="true">
                <h2 style="font-weight: 900;text-align: center;margin-top: 5%">证件上传示例</h2>
                <img src="/picture/hhr/backidcard.jpg" style="width: 100%">
                <p style="text-align: center;">注意照片亮度均匀、图像清晰</p>
            </van-dialog>
        </div>
        <div>
            <van-dialog v-model="sfzshow.txiang" :before-close="closeOnClickOverlay1" :closeOnClickOverlay="true">
                <h2 style="font-weight: 900;text-align: center;margin-top: 5%">拍摄正面自拍照</h2>
                <p style="color: red;width: 80%;text-align: center;margin-left: 10%">(请打开摄像头拍摄自拍照上传，不要上传证件照)</p>
                <img src="/picture/hhr/hand_idcard.png" style="width: 100%">
                <p style="text-align: center;">请在光线较好的环境下拍摄，并露出人像五官，面部无遮挡。</p>
            </van-dialog>
        </div>
        <div v-show="false"><van-uploader id="upload_file" :after-read="afterRead" />  </div>
    </div>
</template>

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

    export default {
        name: "orderNewCar",
        data(){
            return{
                Agree: false,
                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:{
                   zmian:false,
                   fmina:false,
                   txiang:false
                },
                uploadFileshow:{
                    zmian:false,
                    fmina:false,
                    txiang:false
                },
                uploadstatu:0
            }
        }
        ,
        methods:{
            // 选择文件
            afterRead(file) {
                let imgurl="img_imgfile"
                if (this.uploadstatu==1){
                    this.uploadFileshow.zmian = true
                    imgurl=imgurl+'zmian'
                }
                if (this.uploadstatu==2){
                    this.uploadFileshow.fmina= true
                    imgurl=imgurl+'fmina'
                }
                if (this.uploadstatu==3){
                    this.uploadFileshow.txiang = true
                    imgurl=imgurl+'txiang'
                }
                var img = document.getElementById(imgurl);
                var reader = new FileReader();
                reader.onload = function (evt) {
                    img.src = evt.target.result;
                }
                reader.readAsDataURL(file.file);
            },
            showPopup(){
                this.kefushow=true
            }
            ,onConfirm(values) {
                this.value = values.map(item => item.name).join('/');
                this.showArea = false;
            },
            tips(val){
                if (val==1){
                   this.sfzshow.zmian=true
                    this.uploadstatu=1
                }if (val==2){
                    this.sfzshow.fmina=true
                    this.uploadstatu=2
                }
                if (val==3){
                    this.sfzshow.txiang=true
                    this.uploadstatu=3
                }
            },
            closeOnClickOverlay1(val,done){
                for (let keyName in this.sfzshow) {
                    if (this.sfzshow[keyName] == true) {
                        this.sfzshow[keyName] = false
                        break
                    }
                }
                if (val=='confirm'){
                    done();
                    document.getElementById("upload_file").click();
                }
            }
        }
    }

</script>

<style scoped>

</style>
