<style>
    .page_VisaPersonalFormT{margin: 0 auto; max-width: 793px;min-width: 793px;background-color: white;padding:50px 0px;height: auto !important;margin-bottom: 20px}
    p{margin: 5px 0 }
    .page_VisaPersonalFormT ._tit{text-align: center;font-size: 22px;letter-spacing:20px;}
    .page_VisaPersonalFormT ._head{text-align:center;display: flex;align-items: center;justify-content: space-between;}
    .page_VisaPersonalFormT ._head>div{display: inline-block}
    .page_VisaPersonalFormT ._head ._left{border: 1px solid #000;margin-top: 45px;margin-left: 280px;width: 190px;height: 72px;line-height: 72px;font-size: 12px;visibility:hidden}
    .page_VisaPersonalFormT ._head ._right{height: 170px;width: 170px;border: 1px solid #333;margin-right: 50px;font-size: 12px;line-height: 40px;position: relative;top: 120px;}
    .page_VisaPersonalFormT ._form{margin-top: 20px;font-size: 14px;}
    .page_VisaPersonalFormT ._form input{border: none;border-bottom: 1px solid #000;padding: 0 20px;margin-left: 10px;outline: none}
    .page_VisaPersonalFormT ._f_name{margin: 10px 0}
    .page_VisaPersonalFormT ._f_name ._fn_left{width: 69%;display: inline-block}
    .page_VisaPersonalFormT ._f_name ._fn_left input{width: 58.2%;}
    .page_VisaPersonalFormT ._f_name ._fn_right{width: 30%;display: inline-block}
    .page_VisaPersonalFormT ._tips{margin: 0}
    .page_VisaPersonalFormT ._tips ._left{display: inline-block;font-size: 10px;padding-left: 140px;}
    .page_VisaPersonalFormT ._tips ._right{display: inline-block;font-size: 10px;padding-left: 240px;}
    .page_VisaPersonalFormT ._fx_left{display: inline-block;margin-right: 133px;margin-left: 0!important}
    .page_VisaPersonalFormT ._mr10{margin-right: 10px}
    .page_VisaPersonalFormT ._vp_box{margin:0 20px;overflow: hidden;}
    .page_VisaPersonalFormT ._vp_box p{white-space: nowrap;}
    .page_VisaPersonalFormT ._date{font-size: 10px;text-align: right;padding-right: 78px}
    .page_VisaPersonalFormT ._mb0{margin-bottom: 0}
    .page_VisaPersonalFormT ._sex,._fx_left,._MarriageType{display: inline-block;margin-left: 180px}
    .page_VisaPersonalFormT ._sex i,._fx_left i,._MarriageType i{display: inline-block;width: 12px;height: 12px;border: 1px solid #000;margin: 0 5px;font-size: 10px;}
    .page_VisaPersonalFormT ._MarriageType{margin-left: 0!important}
    .page_VisaPersonalFormT ._sex._yes{float: right}
    .page_vpf .normalBtnVpf {color: #fff;width: 90px;height: 30px;background: #E95252;border: 1px solid #E95252;cursor: pointer;border-radius: 15px;}
    .page_vpf .hollowFixedBtn {background: #fff;color: #E95252;width: 90px;height: 30px;border: 1px solid #E95252;cursor: pointer;border-radius: 15px;}
    .page_vpf .vpf_btn{text-align: center;margin: 10px 0 40px 0;}
    .page_vpf .dialog-footer .normalBtn{width: 90px}
    .page_vpf .dialog-footer{text-align: center}
    ._qr{max-width: 793px;min-width: 793px;position: absolute;top: 88px;    padding-left: 17px;}
    #canvas{position: absolute;top: 100px;}
    [v-cloak] {display: none;} 
    .page_VisaPersonalFormT input:disabled{border: none;background-color: transparent;}
    input{outline: none;}
    .radio_span input{vertical-align: sub; cursor: pointer;}
</style>
<template>
    <div class="page_vpf" style="width:100%;background-color: white;height:auto;" v-cloak v-loading="loading2" element-loading-text="下载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.1)">
        <div class="page_VisaPersonalFormT">
            <canvas v-show="dialogVisible" id="canvas"></canvas>
            <!-- <div class="_qr">
                <label>开启二维码</label>
                <el-switch
                @change="creatQRCode(1)"
                v-model="infoData.PeopleModel.OpenQRCode"
                active-color="#13ce66"
                inactive-color="#E95252"
                active-value="1"
                inactive-value="2">
                </el-switch>
            </div> -->
            <div class="_vp_box" style="">
                <p class="_tit">日本国入境签证申请书</p>
                <div class="_head clearfix">
                    <div class="_left">此处空白处仅供官方使用</div>
                    <div class="_right"><p style="margin-top:25px">（照片）</p><p>二寸</p></div>
                </div>
                <div class="_form">
                    <p class="_f_name">
                    	<span class="_fn_left">申请人姓（汉字）<input  type="text" style="width: 24%;" v-model="infoData.PeopleModel.SurName">名<input style="width: 24.7%;"  type="text" v-model="infoData.PeopleModel.Name"></span>
                    </p>
                    <p class="_f_name">
                        <span class="_fn_left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓（英文）<input  type="text" style="width: 24%;"  v-model="infoData.PeopleModel.ESurName">名<input style="width: 24.7%;"  type="text" v-model="infoData.PeopleModel.EName"></span>
                    </p>
                    <p style="">
                        <span>出生日期<input style="width:15%;" type="text" v-model="infoData.PeopleModel.Birthday"></span>
                        <span>出生地点<input style="width:15%;" type="text" v-model="infoData.PeopleModel.BirthdayAddress">省/市</span>
                    </p>
                    <p><span>居民身份证号码：<input  style="width: 42%;" type="text" v-model="infoData.PeopleModel.IdCard"></span></p>
                    <p class="_f_sex">
                        <span class="_fx_left">性别 <span> 男<i v-if="infoData.PeopleModel.Sex!='1'"></i><i v-else>√</i></span><span>女<i v-if="infoData.PeopleModel.Sex!='2'"></i><i v-else>√</i></span> 
                        </span>
                    </p>
                    <p><span>现住所：中华人民共和国<input  style="width: 7%;" type="text" v-model="infoData.PeopleModel.Address">省/市</span><input  style="width: 100%;" type="text" v-model="infoData.PeopleModel.AddressDetail"></p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>住宅电话号码：<input  style="width: 35%;" type="text" v-model="infoData.PeopleModel.Tel"></span>移动电话：<input  style="width: 100%;" type="text" v-model="infoData.PeopleModel.MobilePhone"></p>
                    <!-- <p><span>护照类别</span>
                        <span v-for="Pass in PassportTypeList" class="_mr10 _MarriageType"><span>{{Pass.Name}} <i v-if="Pass.Id==infoData.PeopleModel.PassportType">√</i><i v-else></i></span></span>
                    </p> -->
                    <p><span>工作单位（学校）<input  style="width:41%;" type="text" v-model="infoData.PeopleModel.UnitName"></span>电话号码：<input  style="width:100%;" type="text" v-model="infoData.PeopleModel.UnitPhone"></p>
                    <p><span>职位：<input  style="width:50%;" type="text" v-model="infoData.PeopleModel.UnitPost"></span></p>
                    <p>紧急联络人（中国国内亲属等）</p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>姓名：<input  style="width:40%;" type="text" v-model="infoData.PeopleModel.EmergencyContact"></span><span>与申请人的关系：<input  style="width:100%;" type="text" v-model="infoData.PeopleModel.EmergencyRelation"></span></p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>地址：<input  style="width:40%;" type="text" v-model="infoData.PeopleModel.EmergencyAddress"></span><span>电话号码：<input  style="width:100%;" type="text" v-model="infoData.PeopleModel.EmergencyTel"></span></p>
                    <p class="">
                        <span>护照签发地点：<input  style="width: 40.3%;" type="text" v-model="infoData.PeopleModel.PassportAddress"></span>
                        <span>护照号码：<input  style="width: 100%;" type="text" v-model="infoData.PeopleModel.PassportNo"></span>
                    </p>
                    <p class="">
                        <span>护照签发日期：<input   style="width: 40.3%;" type="text" v-model="infoData.PeopleModel.PassportIssued"></span>
                        <span>有效期至：<input   style="width: 100%;" type="text" v-model="infoData.PeopleModel.PassportExpiry"></span>
                    </p>
                    <p>
                        <span class="_fx_left">犯罪记录：
                        	<span class="radio_span">
                        	<label><input type="radio" value="2" v-model="infoData.PeopleModel.IsCriminalRecord">无</label>	
                        	<label><input type="radio" value="1" v-model="infoData.PeopleModel.IsCriminalRecord">有</label>
                        	</span>
                        	 <!--<span>
                        	<i v-if="infoData.PeopleModel.IsCriminalRecord!='2'"></i><i v-else>√</i>无</span>
                        	<span><i v-if="infoData.PeopleModel.IsCriminalRecord!='1'"></i><i v-else>√</i>有</span>-->
                        </span>
                    </p>
                    <p class="">
                        <span>报名旅行社：<input  style="width: 40.3%;" type="text" v-model="infoData.PeopleModel.TravelName"></span>
                        <span>报名日期：<input  style="width: 100%;" type="text" v-model="infoData.PeopleModel.Date"></span>
                    </p>
                    <p class="">
                        <span>参团费用：<input  style="width: 40.3%;" type="text" v-model="infoData.PeopleModel.TravelCost"></span>人民币
                    </p>
                    <p class="">
                        <span>预定出发日<input   style="width: 40.3%;" type="text" v-model="infoData.PlanModel.EnterCountryTime"></span>
                        <span>预定归国日：<input   style="width: 100%;" type="text" v-model="infoData.PlanModel.LeaveCountryTime"></span>
                    </p>
                    <p class="">
                        <span>访问地点：<input disabled  style="width: 100%;" type="text" value="日本"></span>
                    </p>
                    <p class="">
                        <span>一同报名参团者（亲属、朋友、同事等）：<input   style="width: 100%;" type="text" v-model="infoData.PeopleModel.MutualFriends"></span>
                    </p>
                    <p class="">
                        <span>所持外币：<i style="display: inline-block;width: 12px;height: 12px;border: 1px solid #000;margin: 0 5px;font-size: 10px;">√</i>日元<input   style="width: 25%;" type="text" value="50万">日元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span><i style="display: inline-block;width: 12px;height: 12px;border: 1px solid #000;margin: 0 5px;font-size: 10px;"></i>美元<input disabled  style="width: 27%;" type="text"></span>美元
                    </p>
                    <p>
                        <span class="_fx_left">出境记录：
                        	<span class="radio_span">
                        	<label><input type="radio" value="2" v-model="infoData.PeopleModel.IsDepartureRecord">无</label>		
                        	<label><input type="radio" value="1" v-model="infoData.PeopleModel.IsDepartureRecord">有</label>
                        	</span>
                            <!--<span> 
                            	<i v-if="infoData.PeopleModel.IsDepartureRecord!='2'"></i>
                            	<i v-else>√</i>无
                            </span>
                            	<span>
                            	<i v-if="infoData.PeopleModel.IsDepartureRecord!='1'"></i>
                            	<i v-else>√</i>有</span>-->
                            <input   style="width: 27%;" type="text" v-model="infoData.PeopleModel.LastTime">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            停留<input   style="width: 10%;" type="text" v-model="infoData.PeopleModel.StayDay">日&nbsp;&nbsp;&nbsp;
                            国名<input   style="width: 100%;" type="text" v-model="infoData.PeopleModel.NCNationality">
                            </span>
                    </p>
                    <p>
                        <span class="_fx_left">在日亲属： 
                            <span><i>√</i>无<i></i>有</span>
                            在日亲属姓名：<input disabled   style="width: 10%;" type="text" >&nbsp;&nbsp;&nbsp;
                            关系：<input  disabled  style="width: 100%;" type="text" >
                            </span>
                    </p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>职业：<input disabled  style="width:15%;" type="text" ></span><span>住宅电话号码：<input  disabled style="width:100%;" type="text"></span></p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>工作单位（学校）：<input disabled  style="width:100%;" type="text" ></span></p>
                    <span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本人声明以上内容均为事实，并清楚地认识到本人的入境资格、居留期限将在本人到达日本时均由日本移民官员决定。本人清楚地认识到持有签证者在到达日本港口请求入境时，如被发现是属于禁止入境者时，则无权进入日本。
                    </span>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>申请年月日<input  style="width:15%;" type="text" v-model="infoData.PeopleModel.Date"></span><span>申请人签名<input  style="width:100%;" type="text"></span></p>
                </div>
            </div>
        </div>
        <div class="vpf_btn" >
        	
            <!-- <button class="normalBtn" type="button" @click="downLoad()"> 下载</button> -->
            <button class="hollowFixedBtn" @click="goUrl(url)">返回</button>
            <input type="button" class="normalBtnVpf" value="保存" @click="saveFrom" />
            <!-- <button class="normalBtn" @click="creatQRCode()">生成电子签名</button> -->
        </div>
    </div>

</template>
<script>
import QRCode from 'qrcode'
import Vue from "vue"
Vue.use(QRCode)
export default {
    data(){
        return{
            ID:0,
            infoData:{
                "PeopleModel":{
                    "Address":"gsda",
                    "AddressDetail":"gsdafsa",
                    "Birthday":"2018/08/10",
                    "Duty":"员工",
                    "EName":"GSAF",
                    "ESurName":"GSDSF",
                    "HistoryRecord":"良好",
                    "Id":119,
                    "IdentityType":"身份证",
                    "IsHightSchool":1,
                    "IsRecommend":2,
                    "Marriage":3,
                    "Name":"二狗",
                    "NationalityName":"中国",
                    "Nationality":2,
                    "PassportAddress":"北京",
                    "PassportExpiry":"2019/08/31",
                    "PassportNo":"P324234",
                    "Remarks":"gsa ",
                    "Sex":"1",
                    "SurName":"王",
                    "VisaPlanId":44,
                    "PassportType":2,
                    "Signature":null,
                    "OpenQRCode":"1",
                    "PassportIssued":"2018/08/17",
                    "IdCard":"123213213",
                    "Tel":"32423423",
                    "MobilePhone":"213123123",
                    "UnitName":"哥斯达",
                    "UnitPhone":"12312314",
                    "UnitPost":"公司",
                    "EmergencyAddress":"干撒发生的v",
                    "EmergencyContact":"vcxba",
                    "EmergencyRelation":"戈萨德",
                    "EmergencyTel":"234234",
                    "TravelCost":233333,
                    "TravelName":"搞的撒",
                    "MutualFriends":"公司打法倒萨个",
                    "IsDepartureRecord":1,
                    "LastTime":"2018/08",
                    "NCNationality":"公司",
                    "Date":"2018/08/17"
                    },
                    "PlanModel":{
                    "ArriveAirName":"东京机场",
                    "DepartAlCode":"IAC",
                    "DepartAlName":"测试航空公司",
                    "DepartFlight":"DDDDD123",
                    "EnterCountryTime":"2018/02/19",
                    "LeaveCountryTime":"2018/02/24",
                    "TotalDay":6
                    }
            },
            MarriageType:[],
            PassportTypeList:[],
            QRCode:false,
            dialogVisible:false,
            isOpen:false,
            QRpath:'',
            ok:false,
            loading2:false,
            url:'',
        }
    },mounted(){
        this.ID =  this.$route.query.data
        this.ok =  this.$route.query.ok
        this.url = this.$route.query.url
        this.getInfo()
        this.getMarriageType()
        this.getPassportTypeList()
        this.getQR()
    },methods:{
        goUrl(path){
            this.$router.push({ name: path }) 
        },
        handleClose(done){
            done();
        },
        creatQRCode(type){
            if(type==1){
                this.apipost('dmc_post_SetOpenQRCode',{VisaPeopleId:this.ID},res=>{
                    if(res.data.resultCode==1){
                        this.$message.success(res.data.message)
                    }else{
                        this.$message.error(res.data.message)
                    }
                },err=>{})
            }
            if(this.infoData.PeopleModel.OpenQRCode=="1"){
                this.dialogVisible=true
                setTimeout(() => {
                    let path = this.QRpath
                    var canvas = document.getElementById('canvas')
                    QRCode.toCanvas(canvas, path, function (error) {
                    if (error) console.error(error)
                        console.log('success!');
                    })
                },1000); 
            }else{
                this.dialogVisible=false
            }
        },
        saveFrom(){
        	let msg=this.infoData.PeopleModel
        	this.apipost('dmc_post_visa_SetGroupVisaApplyForInfo',msg,res=>{
    		 if(res.data.resultCode==1){
                    this.$message.success(res.data.message)
                }else{
                    this.$message.error(res.data.message)
                }
        	},err=>{})
        },
        // addForm(){
        //     let msg = {
        //         Address:this.infoData.PeopleModel.Address==null?'':this.infoData.PeopleModel.Address,
        //         City:this.infoData.PeopleModel.Address==null?'':this.infoData.PeopleModel.Address,
        //         Date:this.infoData.PeopleModel.Date==null?'':this.infoData.PeopleModel.Date,
        //         Email:'',
        //         HotelAddress:this.infoData.PeopleModel.HotelAddress==null?'':this.infoData.PeopleModel.HotelAddress,
        //         HotelName:this.infoData.PeopleModel.HotelName==null?'':this.infoData.PeopleModel.HotelName,
        //         HotelTel:this.infoData.PeopleModel.HotelTel==null?'':this.infoData.PeopleModel.HotelTel,
        //         Id:this.infoData.PeopleModel.Id,
        //         IdCard:this.infoData.PeopleModel.IdCard==null?'':this.infoData.PeopleModel.IdCard,
        //         IssuingAuthority:this.infoData.PeopleModel.IssuingAuthority==null?'':this.infoData.PeopleModel.IssuingAuthority,
        //         LastTime:this.infoData.PeopleModel.LastTime==null?'':this.infoData.PeopleModel.LastTime,
        //         MobilePhone:this.infoData.PeopleModel.MobilePhone==null?'':this.infoData.PeopleModel.MobilePhone,
        //         Name:this.infoData.PeopleModel.SurName==null?'':this.infoData.PeopleModel.SurName,
        //         Nationality:this.infoData.PeopleModel.Nationality==null?'':this.infoData.PeopleModel.Nationality,
        //         PassportIssued:this.infoData.PeopleModel.PassportIssued==null?'':this.infoData.PeopleModel.PassportIssued,
        //         Province:this.infoData.PeopleModel.Address==null?'':this.infoData.PeopleModel.Address,
        //         Purpose:this.infoData.PeopleModel.Purpose==null?'':this.infoData.PeopleModel.Purpose,
        //         EName:this.infoData.PeopleModel.EName==null?'':this.infoData.PeopleModel.EName,
        //         ESurName:this.infoData.PeopleModel.ESurName==null?'':this.infoData.PeopleModel.ESurName,
        //         SurName:this.infoData.PeopleModel.SurName==null?'':this.infoData.PeopleModel.SurName,
        //         Tel:this.infoData.PeopleModel.Tel==null?'':this.infoData.PeopleModel.Tel,
        //         UnitAddress:this.infoData.PeopleModel.UnitAddress==null?'':this.infoData.PeopleModel.UnitAddress,
        //         UnitName:this.infoData.PeopleModel.UnitName==null?'':this.infoData.PeopleModel.UnitName,
        //         UnitPhone:this.infoData.PeopleModel.UnitPhone==null?'':this.infoData.PeopleModel.UnitPhone,
        //         UnitPost:this.infoData.PeopleModel.UnitPost==null?'':this.infoData.PeopleModel.UnitPost,
        //         VisaPeopleId:this.ID,               
        //     }
        //     this.apipost('dmc_post_visa_SetVisaApplyForInfo',msg,res=>{
        //         if(res.data.resultCode==1){
        //             this.downLoad()
        //         }else{
        //             this.$message.error(res.data.message)
        //         }
        //     },err=>{})
        // },
        downLoad(){ // 下载申请材料
            this.loading2= true
            this.apipost('dmc_get_DownLoadGuestApplicationForm',{VisaPlanId:this.ID},res=>{
                if(res.data.resultCode==1){
                    const link = document.createElement('a');
                    let _loadUrl=this.domainManager().DomainUrl
                    let str = window.location.href
                    link.href = _loadUrl+res.data.data
                    document.body.appendChild(link);
                    link.click();
                    this.$message.success('导出成功！')
                this.loading2 = false
                }else{
                    this.loading2 = false
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
         getQR(){ // 获取二维码
            this.apipost('dmc_get_GetPeopleForeignInfo',{VisaPeopleId:this.ID},res=>{
                if(res.data.resultCode==1){
                    this.QRpath = res.data.data
                    console.log(this.QRpath)
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        getInfo(){ // 获取信息
            this.apipost('dmc_get_GetVisaApplyForGrouSignInfo',{VisaPeopleId:this.ID},res=>{
                if(res.data.resultCode==1){
                    this.infoData = res.data.data
//                  this.infoData.PeopleModel.Birthday = this.infoData.PeopleModel.Birthday.replace('/','年').replace('/','月')
//                  this.infoData.PeopleModel.Birthday = this.infoData.PeopleModel.Birthday+'日'
                    this.infoData.PeopleModel.OpenQRCode = this.infoData.PeopleModel.OpenQRCode.toString()
                    if(this.infoData.PeopleModel.OpenQRCode=='1'){
                        this.dialogVisible=true
                        // this.creatQRCode()
                    }
                    this.infoData.PeopleModel.Sex = this.infoData.PeopleModel.Sex.toString()
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        getPassportTypeList(){ // 获取护照类别
            this.apipost('dmc_get_visa_GetPassportTypeList',{VisaPeopleId:this.ID},res=>{
                if(res.data.resultCode==1){
                    this.PassportTypeList = res.data.data
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        getMarriageType(){//获取婚姻
            let msg = {};
            this.apipost("dmc_get_visa_GetVisaMarriageTypeEnum",msg,res => {
                if(res.data.resultCode==1){
                    this.MarriageType = res.data.data;
                    this.MarriageType.forEach(x=>{
                        x.Id = parseInt(x.Id)
                    })
                }else{
                    this.$message.error(res.data.message)
                }
            },err => {});
        },
    }
}
</script>
