<template>
  <div class="OrderCon commonF" style="padding-bottom:20px">
      <div v-loading="Orderloading" class="w1200">
        
          <div class="Content basefix" style="margin-top:20px">
              <div class="left" style="width:795px;margin-right:17px">
                
                    <div class="ListDiv">
                        
                    <el-form class="OrderConForm" ref="freeMsg" :model="freeMsg" label-width="100px">   
                        <div class="commomStyle">
                            <div class="titleDiv">
                                <span class="redSpan"></span>
                                <span class="f18 pfR">预订人资料</span>
                            </div>
                            <div style="padding:20px">
                                <el-row>
                                    <el-col style="padding-top:8px" :span="2">
                                        <span class="f12 c88">预定人</span>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-form-item label="姓名">
                                            <el-input placeholder="姓" size="mini" style="width:100px" v-model="freeMsg.buyer_last_name"></el-input>
                                            <el-input placeholder="名" size="mini" style="width:100px;margin-left:10px" v-model="freeMsg.buyer_first_name"></el-input>
                                        </el-form-item>
                                        <el-form-item label="手机号" prop="buyer_tel_number" :rules="[{required: true, message: '电话号码不能为空', trigger: 'blur'},{ required: true, trigger: 'blur', pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/ ,message: '请填写正确的手机号'}]">
                                            <el-select @change="GenderSelect" v-show="tel_country_code.length>0" size="mini" style="margin-right:8px" v-model="freeMsg.buyer_tel_country_code" filterable placeholder="请选择">
                                                <el-option
                                                v-for="(item,index) in tel_country_code"
                                                :key="index"
                                                :label="item.Country_Name"
                                                :value="item.Tel_Area">
                                                </el-option>
                                            </el-select>
                                            <el-input size="mini" style="width:300px" v-model="freeMsg.buyer_tel_number"></el-input>
                                        </el-form-item>
                                        <el-form-item label="Email" prop="buyer_email" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]"> 
                                            <el-input placeholder="接收确认邮件，获得出行资讯" size="mini" style="width:300px" v-model="freeMsg.buyer_email"></el-input>
                                        </el-form-item>
                                        <el-form-item v-show="tel_country_code.length>0" label="国籍" prop="buyer_country" :rules="[{required: true, message: '国籍不能为空', trigger: 'blur'}]">
                                            <el-select @change="GenderSelect"  v-model="freeMsg.buyer_country" size="mini" style="margin-right:8px"  filterable placeholder="请选择">
                                                <el-option
                                                v-for="(item,index) in tel_country_code"
                                                :key="index"
                                                :label="item.Country_Name"
                                                :value="item.Country_Code">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item v-if="guide_langList.length>0" label="导览语系">
                                            <el-select @change="GenderSelect" size="mini" style="margin-right:8px" v-model="freeMsg.guide_lang" filterable placeholder="请选择">
                                                <el-option
                                                v-for="item in guide_langList"
                                                :key="item.code"
                                                :label="item.name"
                                                :value="item.code">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="身高" v-show="concatObj.height_s">
                                            <el-input placeholder="身高" size="mini" style="width:100px" v-model="freeMsg.height"></el-input>
                                        </el-form-item>
                                         <el-form-item label="身高单位" v-show="concatObj.height_unit_s">
                                            <el-select @change="GenderSelect" size="mini" style="margin-right:8px" v-model="freeMsg.height_unit" filterable placeholder="请选择">
                                                <el-option
                                                v-for="item in concatObj.height_unitList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                                </el-option>
                                            </el-select>

                                        </el-form-item>
                                        <el-form-item label="体重" v-show="concatObj.weight_s">
                                            <el-input placeholder="体重" size="mini" style="width:100px" v-model="freeMsg.weight"></el-input>
                                        </el-form-item>
                                         <el-form-item label="体重单位" v-show="concatObj.weight_unit_s">
                                            <el-select @change="GenderSelect" size="mini" style="margin-right:8px" v-model="freeMsg.weight_unit" filterable placeholder="请选择">
                                                <el-option
                                                v-for="item in concatObj.weight_unitList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                                </el-option>
                                            </el-select>

                                        </el-form-item>
                                        <el-form-item label="鞋子尺寸" v-show="concatObj.shoe_s">
                                            <el-input placeholder="鞋子尺寸" size="mini" style="width:100px" v-model="freeMsg.shoe"></el-input>
                                        </el-form-item>
                                         <el-form-item label="鞋子单位" v-show="concatObj.shoe_unit_s">
                                            <el-select @change="GenderSelect" size="mini" style="margin-right:8px" v-model="freeMsg.shoe_unit" filterable placeholder="请选择">
                                                <el-option
                                                v-for="item in concatObj.shoe_unitList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                                </el-option>
                                            </el-select>

                                        </el-form-item>
                                        <el-form-item label="鞋子类型" v-show="concatObj.shoe_type_s">
                                            <el-select @change="GenderSelect" size="mini" style="margin-right:8px" v-model="freeMsg.shoe_type" filterable placeholder="请选择">
                                                <el-option
                                                v-for="item in concatObj.shoe_typeList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                                </el-option>
                                            </el-select>

                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                
                                
                            </div>
                            
                        </div>
                    </el-form>
                     <el-form v-show="listform.customNew.length>0" class="OrderConForm" ref="listform" :model="listform" label-width="100px"> 
                        <!-- 必填多个客户freeMsg -->
                        <div class="commomStyle">
                            <div v-show="item.cus_type!='contact' && item.cus_type!='send'" v-for="(item,index) in listform.customNew" :key="index">
                                <div class="titleDiv">
                                    <span class="redSpan"></span>
                                    <span class="f18 pfR">客户资料</span>
                                </div>
                                <div style="padding:20px">
                                    <el-row>
                                        <el-col style="padding-top:8px" :span="2">
                                            <span class="f12 c88">客户</span>
                                        </el-col>
                                        <el-col :span="20">
                                            <el-form-item label="本国姓名" :prop="'customNew.'+index+'.native_last_name'" :rules="[{ required: true, message: '请输入本国姓名', trigger: 'blur' }]">
                                                <el-input v-model="item.native_last_name" v-on:input="setEngName(1,index,item.native_last_name)" placeholder="姓" size="mini" style="width:100px"></el-input>
                                                <el-input v-model="item.native_first_name" v-on:input="setEngName(2,index,item.native_first_name)" placeholder="名" size="mini" style="width:100px;margin-left:10px"></el-input>
                                            </el-form-item>
                                            <el-form-item label="英文姓名" :prop="'customNew.'+index+'.english_last_name'" :rules="[{ required: true, message: '请输入英文姓名', trigger: 'blur' }]">
                                                <el-input v-model="item.english_last_name" placeholder="姓" size="mini" style="width:100px"></el-input>
                                                <el-input v-model="item.english_first_name" placeholder="名" size="mini" style="width:100px;margin-left:10px"></el-input>
                                            </el-form-item>
                                            <el-form-item label="性别">
                                                <el-select @change="GenderSelect" size="mini" style="margin-right:8px" v-model="item.gender" filterable placeholder="请选择">
                                                    <el-option label="男" value="F"></el-option>
                                                    <el-option label="女" value="M"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="手机号" :prop="'customNew.'+index+'.tel_number'" :rules="[{required: true, message: '电话号码不能为空', trigger: 'blur'},{ required: true, trigger: 'blur', pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/ ,message: '请填写正确的手机号'}]">
                                                <el-select v-show="tel_country_code.length>0" v-model="item.tel_country_code" size="mini" style="margin-right:8px"  filterable placeholder="请选择">
                                                    <el-option
                                                    v-for="(item,index) in tel_country_code"
                                                    :key="index"
                                                    :label="item.Country_Name"
                                                    :value="item.Tel_Area">
                                                    </el-option>
                                                </el-select>
                                            <el-input size="mini" style="width:300px" v-model="item.tel_number"></el-input>
                                        </el-form-item>
                                        <el-form-item label="国籍" :prop="'customNew.'+index+'.nationality'" :rules="[{required: true, message: '国籍不能为空', trigger: 'blur'}]">
                                            <el-select v-show="tel_country_code.length>0" v-model="item.nationality" size="mini" style="margin-right:8px"  filterable placeholder="请选择">
                                                <el-option
                                                v-for="(item,index) in tel_country_code"
                                                :key="index"
                                                :label="item.Country_Name"
                                                :value="item.Country_Code">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                            <el-form-item label="出生日期" :prop="'customNew.'+index+'.birth'" :rules="[{ type: 'string', required: true, message: '请选择日期', trigger: 'change' }]">
                                                <el-date-picker size="small" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="item.birth"></el-date-picker>
                                            </el-form-item>
                                           <el-form-item label="护照号" :prop="'customNew.'+index+'.passport_no'" :rules="[{ required: true, message: '请输入护照信息', trigger: 'blur' }]">
                                                <el-input v-model="item.passport_no" placeholder="请输入护照号" size="mini" style="width:220px"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    
                                    
                                </div>
                            </div>
                            
                            
                        </div>
                    </el-form>
                      <!--车  -->
                    <el-form class="OrderConForm" :model="traffic" ref="traffic" label-width="100px">   
                        <div v-show="traffic.car.length>0" class="commomStyle">
                            <div class="titleDiv">
                                <span class="redSpan"></span>
                                <span class="f18 pfR">交通列表</span>
                            </div>
                            <el-row class="trafficList" v-for="(item,index) in traffic.car" :key="index+100">
                                <el-col :span="2" class="c88" style="text-align:center;padding-top:27px">第{{index+1}}天</el-col>
                                <el-col :span="20">
                                    <div  class="f12" style="padding:20px;padding-left:80px">
                                        <el-form-item label="出发地" :prop="'car.'+index+'.s_location'" :rules="[{ required: true, message: '请填写出发地', trigger: 'blur' }]">
                                            <el-input placeholder="请填写出发地" size="mini" style="width:220px" v-model="item.s_location"></el-input>
                                        </el-form-item>
                                        <el-form-item label="目的地" :prop="'car.'+index+'.e_location'" :rules="[{ required: true, message: '请填写目的地', trigger: 'blur' }]">
                                            <el-input placeholder="请填写目的地" size="mini" style="width:220px" v-model="item.e_location"></el-input>
                                        </el-form-item>
                                        <el-form-item label="出发地址" :prop="'car.'+index+'.s_address'" :rules="[{ required: true, message: '请填写出发地址', trigger: 'blur' }]">
                                            <el-input placeholder="请填写出发地址" size="mini" style="width:220px" v-model="item.s_address"></el-input>
                                        </el-form-item>
                                        <el-form-item label="目的地址" :prop="'car.'+index+'.e_address'" :rules="[{ required: true, message: '请填写目的地址', trigger: 'blur' }]">
                                            <el-input placeholder="请填写目的地址" size="mini" style="width:220px" v-model="item.e_address"></el-input>
                                        </el-form-item>
                                        <el-form-item label="出发日" :prop="'car.'+index+'.s_date'" :rules="[{ type: 'string', required: true, message: '请选择日期', trigger: 'change' }]">
                                            <el-date-picker
                                            size="small" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" 
                                            v-model="item.s_date"></el-date-picker>

                                        </el-form-item>
                                        <el-form-item label="抵达日" :prop="'car.'+index+'.e_date'" :rules="[{ type: 'string', required: true, message: '请选择日期', trigger: 'change' }]">
                                            <el-date-picker
                                            size="small" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" 
                                            v-model="item.e_date"></el-date-picker>

                                        </el-form-item>
                                        <el-form-item label="出发时间">
                                            <el-time-picker
                                                v-model="item.s_time"
                                                value-format="HH:mm:ss"
                                                placeholder="请选择">
                                            </el-time-picker>
                                        </el-form-item>
                                        <el-form-item label="到达时间">
                                            <el-time-picker
                                                v-model="item.e_time"
                                                value-format="HH:mm:ss"
                                                placeholder="请选择">
                                            </el-time-picker>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            
                        </div>
                     </el-form> 
                    <!-- 行动装置 -->
                    <el-form class="OrderConForm" :model="mobile_device" label-width="100px">   
                        <div v-show="mobile_deviceStatus" class="commomStyle">
                            <div class="titleDiv">
                                <span class="redSpan"></span>
                                <span class="f18 pfR">行动装置</span>
                            </div>
                            <div class="f12" style="padding:20px;padding-left:80px">
                                <el-form-item label="手机型号">
                                    <el-input placeholder="请输入手机型号" size="mini" style="width:220px" v-model="mobile_device.mobile_model_no"></el-input>
                                </el-form-item>
                                <el-form-item label="手机IMEI">
                                    <el-input placeholder="手机IMEI" size="mini" style="width:220px" v-model="mobile_device.IMEI"></el-input>
                                </el-form-item>
                                <el-form-item label="启用日">
                                    <el-date-picker
                                    size="small" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" 
                                    v-model="mobile_device.active_date"></el-date-picker>
                                </el-form-item>
                            </div>
                        </div>
                     </el-form> 
                    <el-form class="OrderConForm" :model="freeMsg" label-width="100px">   
                        <div v-show="payObj.type=='01'" class="commomStyle">
                            <div class="titleDiv">
                                <span class="redSpan"></span>
                                <span class="f18 pfR">支付方式</span>
                            </div>
                            <div class="f12" style="padding:20px;padding-left:80px">
                                <el-form-item label="信用卡号">
                                    <el-input placeholder="信用卡号" size="mini" style="width:220px" v-model="payObj.credit_card.number"></el-input>
                                </el-form-item>
                                <el-form-item label="信用卡cvv">
                                    <el-input placeholder="信用卡cvv" size="mini" style="width:220px" v-model="payObj.credit_card.cvv"></el-input>
                                </el-form-item>
                                <el-form-item label="信用卡到期日">
                                    <el-date-picker
                                    size="small" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" 
                                    v-model="payObj.credit_card.expiry"></el-date-picker>

                                </el-form-item>
                                <el-form-item label="信用卡持有人">
                                    <el-input placeholder="信用卡cvv" size="mini" style="width:220px" v-model="payObj.credit_card.type"></el-input>
                                </el-form-item>
                                <el-form-item label="信用卡类型">
                                    <el-input placeholder="信用卡类型" size="mini" style="width:220px" v-model="payObj.credit_card.holder"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                     </el-form> 
                      <div class="commomStyle" v-if="isShowTime">
                            <div class="titleDiv">
                                <span class="redSpan"></span>
                                <span class="f18 pfR">优惠</span>
                            </div>
                            <div style="padding:20px">
                               <p style="margin:10px 0;">兑换码</p>
                                <div>
                                    <el-input size="small" v-model="ActivateCode" placeholder="请输入兑换码" style="width:200px"></el-input>
                                    <el-button @click="GetCode" size="small" style="margin-left:10px">兑换</el-button>
                                </div>
                                <el-row class="_trip_xiangqing _coupon_box">
                                    <p style="width:100%;margin:10px 0;">优惠券</p>
                                    <p v-if="!Verification.length || Verification[0].ApplyState !== 1" class="_trip_xiangqing_tips">您还未进行 <span @click="goShenqing">实名认证</span>，认证后可使用优惠券哦~如果已提认证申请，申请审核通过后即可使用优惠券！</p>
                                    <div v-if="UserCanUseCouponList.length>0" class="_coupon_box">
                                        <div class="_coupon_item" v-for="(item, index) in UserCanUseCouponList" :class="{'blue':item.couponsType===1,'_active':item.active,'disab':!Platfrom(item.fromPlatform) || !Verification.length || Verification[0].ApplyState !== 1}" @click="!Platfrom(item.fromPlatform) || !Verification.length || Verification[0].ApplyState !== 1 ? '' : clickCoupon(item)">
                                        <div class="_left_raduis">
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                        </div>
                                        <div class="_coupon_info">
                                            <p class="_coupon_name" :title="item.couponName">{{item.couponName}}</p>
                                            <p v-if="item.couponsType===1">￥ <span class="_sale">{{item.denomination}}</span></p>
                                            <p v-else><span class="_sale">{{item.denomination}}</span> 折</p>
                                            <p class="_info_full">满{{item.useCondition}}可用</p>
                                            <p class="_info_time _time">有效时间：{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}</p>
                                            <p class="_repeat" v-if="item.overlapUse === 1">可叠加</p>
                                            <div v-if="Platfrom(item.fromPlatform)" class="_choice_box">
                                                <span v-if="!item.active"></span>
                                                <span v-else class="iconfont icon-xuanzhong2"></span>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div v-else class="_no_coupon">
                                        <p>暂无可用优惠券</p>
                                    </div>
                                </el-row>
                            </div>
                            
                        </div>
                        <el-button :loading="BtnLoading" @click="PayBtn" class="OrderConBtn">

                            下一步，支付
                        </el-button>
                    </div>
              </div>
              <div class="right" style="width:388px;box-sizing:border-box">
                <div style="border:1px solid rgba(224, 224, 224, 1);box-sizing:border-box">
                    <div style="width:388px;height:194px;border-radius:3px;">
                    <img style="width:100%;height:100%" :src="picUrl" :onerror="defaultImg" alt="">
                    </div>
                    <div style="padding:15px">
                        <el-row class="cee f22">
                            <span v-if="freeMsg.prod_name">{{rePlace(freeMsg.prod_name)}}</span>
                        </el-row>
                        <div style="margin-top:10px" class="cee f22 pfR" v-if="dataDetail.prod">
                            <span v-if="dataDetail.prod.policy_no=='1'">不扣手续费，退全额</span>
                            <span v-if="dataDetail.prod.policy_no=='2'">无法退费</span>
                            <span v-if="dataDetail.prod.policy_no=='3'">指定手续费</span>
                        </div>
                        
                        <p style="margin:15px 0" class="f14"><span class="c99" style="margin-right:20px">日期</span><span class="c66">{{freeMsg.dateStr}}</span></p>
                        <!-- <p class="f14"><span class="c99" style="margin-right:20px">人数</span>
                            <span v-if="freeMsg.price1_qty>0" class="c66">({{freeMsg.price1_age_range}}) x {{freeMsg.price1_qty}}</span>&nbsp;&nbsp;&nbsp;
                            <span v-if="freeMsg.price2_qty>0" class="c66">({{freeMsg.price2_age_range}}) x {{freeMsg.price2_qty}}</span>&nbsp;&nbsp;&nbsp;
                            <span v-if="freeMsg.price3_qty>0" class="c66">({{freeMsg.price3_age_range}}) x {{freeMsg.price3_qty}}</span>&nbsp;&nbsp;&nbsp;
                            <span v-if="freeMsg.price4_qty>0" class="c66">({{freeMsg.price4_age_range}}) x {{freeMsg.price4_qty}}</span>
                        </p> -->
                    </div>  
                </div>
                <div style="margin-top:20px;border:1px solid rgba(224, 224, 224, 1);box-sizing:border-box">
                    <div style="width:100%;height:72px;line-height:72px;background:rgba(237,244,255,1);padding:0 20px;box-sizing:border-box">
                        <span class="f20 pfR">订单总额</span>
                        <span style="float:right" class="cee f26 pfR">¥ {{freeMsg.MySelfTotalPrice}}</span>
                    
                    </div>
                    <div class="f14" style="padding:20px">
                        <el-row style="margin-bottom:7px" v-if="freeMsg.price1_qty>0">
                            <el-col :span="6">({{freeMsg.price1_age_range}}) x {{freeMsg.price1_qty}}</el-col>
                            <el-col :span="12"><div class="dashDiv"></div></el-col>
                            <el-col style="text-align:center" :span="6">￥{{freeMsg.price1_b2c}}</el-col>
                        </el-row>
                        <el-row style="margin-bottom:7px" v-if="freeMsg.price2_qty>0">
                            <el-col :span="6">({{freeMsg.price2_age_range}}) x {{freeMsg.price2_qty}}</el-col>
                            <el-col :span="12"><div class="dashDiv"></div></el-col>
                            <el-col style="text-align:center" :span="6">￥{{freeMsg.price2_b2c}}</el-col>
                        </el-row>
                        <el-row style="margin-bottom:7px" v-if="freeMsg.price3_qty>0">
                            <el-col :span="6">({{freeMsg.price3_age_range}}) x {{freeMsg.price3_qty}}</el-col>
                            <el-col :span="12"><div class="dashDiv"></div></el-col>
                            <el-col style="text-align:center" :span="6">￥{{freeMsg.price3_b2c}}</el-col>
                        </el-row>
                        <el-row style="margin-bottom:7px" v-if="freeMsg.price4_qty>0">
                            <el-col :span="6">({{freeMsg.price4_age_range}}) x {{freeMsg.price4_qty}}</el-col>
                            <el-col :span="12"><div class="dashDiv"></div></el-col>
                            <el-col style="text-align:center" :span="6">￥{{freeMsg.price4_b2c}}</el-col>
                        </el-row>
                    </div>
                    <div class="f14" style="padding:20px">
                        <el-row style="margin-bottom:7px" >
                            <el-col :span="6">优惠金额</el-col>
                            <el-col :span="12"><div class="dashDiv"></div></el-col>
                            <el-col style="text-align:center" :span="6">￥{{SettlementPrice == 0 ? 0 : freeMsg.MySelfTotalPrice - SettlementPrice}}</el-col>
                        </el-row>
                    </div>
                    
                </div>
                
                
              </div>
          </div>
      </div>
      <a :href='blankUrl' id='blankLink' target="_blank" style="display:none">1</a>
  </div>
</template>
<script>
import moment from 'moment'
export default {
    data () {
        return {
            Orderloading:false,
            defaultImg: 'this.src="' + require('assets/img/juan/error.png') + '"',
            BtnLoading:false,
           dataDetail:{},
           form:{},
           freeMsg:{
            custom:[],
            
              
           },
           UserCanUseCouponList: [],
            CouponList: [],
            CouponIds: '',
            Verification: '',
            blankUrl: '',
            ActivateCode: '',
            SettlementPrice: 0,
           booking_field:{},
           markMsg:{
            contact:false,
            peopleType:1,
            birth:false,
            english_first_name:false,//英文名
            english_last_name:false,//英文姓
            gender:false,//性别
            guide_lang:false,//导游语言
            native_first_name:false,//本国名
            native_last_name:false,//本国姓
            tel_country_code:false,//电话国号
            tel_number:false,//电话号码
           },
           tel_country_code:[],
           guide_langList:[],
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7
                }
            },
            concat:false,
            send:false,
            payObj:{
                type:'02',
                credit_card:{},
            },
            listform:{
                customNew:[],
            },
            picUrl:"",
            trafficState:false,
            traffic:{
                car:[],
            },
            mobile_device:{},
            mobile_deviceStatus:false,
            concatObj:{
                height_s:false,
                height_unit_s:false,
                weight_unitList:[],
                shoe_s:false,
                shoe_type_s:false,
                shoe_typeList:[],
                shoe_unit_s:false,
                shoe_unitList:[],
                weight_s:false,
                weight_unit_s:false,
                weight_unitList:[],
            },
            isShowTime: true,
        }
    },
    created(){
        
        this.freeMsg = JSON.parse(sessionStorage.getItem("freeMsg"));
        if (sessionStorage.getItem("OpenB2BCode")) {
            this.isShowTime = false;
            this.freeMsg.EmployeeIdStr = sessionStorage.getItem('OpenB2BCode');
        }   
        let id = this.$route.query.id;
        this.freeMsg.buyer_country="CN";
        this.freeMsg.guide_lang="";
        this.freeMsg.custom=[];
        this.freeMsg.pay={};
        this.freeMsg.buyer_tel_country_code="86";
        this.freeMsg.OrderSource=2;
        this.freeMsg.OrderForm=1;


        // this.freeMsg.buyer_tel_number="13183813102";
        // this.freeMsg.buyer_email="13183813102@qq.com";
        this.freeMsg.buyer_tel_number="";
        this.freeMsg.buyer_email="";

        this.freeMsg.pay={
            type: "02",
            //     credit_card: {
            //     number: "",
            //     cvv: "",
            //     expiry: "",
            //     holder: "",
            //     type: ""
            // }
        };
        this.getDetails(id)
        this.GetInfo();
        if (this.isShowTime) {
            let userInfo = this.getLocalStorage();
            this.apipost("app_customer_GetCertificationModel", { CustomerID: userInfo.customerId }, res => {
                if (res.data.resultCode == 1) {
                    this.Verification = res.data.data
                } else {
                    this.$message.error(res.data.message);
                }
            },err => {});
            this.getUserCanUseCouponList()
        }
        
    },
    mounted() {
        
    },
    methods: {
        Platfrom(str){
          if(str){
              if(str.indexOf('0')!=-1 || str.indexOf('3')!=-1){
                  return true;
              }
              else{
                  return false;
              }
          }
      },
        goShenqing: function () {
            let dom = document.querySelector("#blankLink")
            dom.href=`http://${window.location.host}/#/PsSystem/${1}`
            dom.click()
        },
        clickCoupon: function (item) {
            let list = [];
            if (!item.active) { // 是否选中
            if (item.overlapUse === 1) {  // 1允许叠加使用
                this.CouponList.forEach(x=>{
                if (x.overlapUse === 1 && x.couponsType === item.couponsType) { // 优惠券列表筛选出允许叠加并且type相同的
                    list.push(x)
                }
                })
                item.active = !item.active
                this.UserCanUseCouponList = list
            } else {  // 不允许叠加使用
                this.CouponList.forEach(x=>{  // 筛选掉其他
                if (x.id === item.id) {
                    list.push(x)
                }
                })
                item.active = !item.active
                this.UserCanUseCouponList = list
            }
            } else {
            item.active = !item.active
            if (this.UserCanUseCouponList.length===1) {  // 取消优惠券选中状态 之前直选择了一个优惠券
                this.UserCanUseCouponList = this.CouponList
            } else {  //... 之前选择了多个优惠券 循环判断是否已全部取消
                let num = 0
                this.UserCanUseCouponList.forEach(x=>{
                if (x.active)
                    num +=1
                })
                if (num===0) {
                this.CouponList.forEach(x=>{
                    x.active = false 
                })
                this.UserCanUseCouponList = this.CouponList
                }
            }
            }
            if (this.UserCanUseCouponList.length>0) {
                let CouponIds = ''
                let CouponMoney = 0
                let CouponSale = 1
                let type = 0
                this.UserCanUseCouponList.forEach((x, index)=>{
                    if (x.active) {
                        type = x.couponsType
                        CouponIds = CouponIds + x.id + (index!==this.UserCanUseCouponList.length-1 ? ',' : '')
                        if (x.couponsType === 1) {
                            CouponMoney =  CouponMoney + x.denomination 
                        } else {
                            CouponSale = CouponSale * (x.denomination/10)
                        }
                    }
                })
                this.CouponIds = CouponIds
                if (type === 1) {
                    this.SettlementPrice = this.freeMsg.MySelfTotalPrice - CouponMoney
                } else if (type === 2) {
                    this.SettlementPrice = this.freeMsg.MySelfTotalPrice * CouponSale
                } else if (type === 0) {
                    this.SettlementPrice = this.freeMsg.MySelfTotalPrice
                }
            } else {
                this.SettlementPrice = this.freeMsg.MySelfTotalPrice
            }
            // 计算幸福存折
            // this.SettlementPrice = this.SettlementPrice - this.RedEnvelopeMoney
        },
        getUserCanUseCouponList: function () {
            let msg = {
                lineId: 0,
                lineteamId: 0,
                CouponsUseScope: 7,
            }
            this.apiJavaPost('/api/b2b/user/getUserCanUseCouponList',msg,res=>{
                if(res.data.resultCode==1){
                    let data = res.data.data;
                    data.forEach(x=>{
                    x.active = false
                    })
                    this.CouponList = data
                    this.filterCoupon()
                }else{
                    this.Error(res.data.message);
                }
                this.dataLoading = false;
            },null)
        },
        filterCoupon: function () {
            let list = []
            this.CouponList.forEach(x=>{
            if (this.freeMsg.MySelfTotalPrice>x.useCondition) {
                x.active = false
                list.push(x)
            }
            })
            this.UserCanUseCouponList = list
        },
        GetCode(){
            this.apiJavaPost('/api/b2b/user/updateUseCouponBycode',{ActivateCode:this.ActivateCode},res=>{
                if(res.data.resultCode==1){
                    this.Success("兑换码激活成功！");
                    this.getUserCanUseCouponList();
                    
                }else{
                    this.Error("该兑换码无效！");
                }
            },null)
        },
       rePlace(str){
            if(str.indexOf('KKday')!=-1){
                return str.replace(/KKday/g, '印象之旅');
            }else{
                return str;
            }
        },
        GenderSelect(){
            this.$forceUpdate()
        },
        PayBtn(){
           let freeformval=false;
           let listformval=false; 
           let trafficval=false; 
           this.$refs.freeMsg.validate((valid) => {
                if (valid) {
                    freeformval=true;
                } 
            });
             this.$refs.listform.validate((valid) => {
                if (valid) {
                    listformval=true;
                } 
            });
            this.$refs.traffic.validate((valid) => {
                if (valid) {
                    trafficval=true;
                } 
                
            });
            if(!freeformval || !listformval || !trafficval){
                return;
            }
            
            if(this.freeMsg.buyer_last_name==""||!this.freeMsg.buyer_last_name){
                this.Error("请输入预订人的名");
                return;
            }
            if(this.freeMsg.buyer_first_name==""||!this.freeMsg.buyer_first_name){
                this.Error("请输入预订人的姓");
                return;
            }
            if(this.freeMsg.buyer_tel_number==""||!this.freeMsg.buyer_tel_number){
                this.Error("请输入预订人的电话号码");
                return;
            }
            if(this.freeMsg.buyer_email==""||!this.freeMsg.buyer_email){
                this.Error("请输入预订人的电子邮件");
                return;
            }
            // concatObj:{
                        //     height_s:false,
                        //     height_unit_s:false,
                        //     shoe_s:false,
                        //     shoe_type_s:false,
                        //     shoe_unit_s:false,
                        //     weight_s:false,
                        //     weight_unit_s:false,
                        // },
            if(this.concatObj.height_s){
                if(this.freeMsg.height=="" || !this.freeMsg.height){
                    this.Error("请输入身高！");
                    return;
                }
            }
            if(this.concatObj.height_unit_s){
                if(this.freeMsg.height_unit=="" || !this.freeMsg.height_unit){
                    this.Error("请输入身高单位！");
                    return;
                }
            }
            if(this.concatObj.shoe_s){
                if(this.freeMsg.shoe=="" || !this.freeMsg.shoe){
                    this.Error("请输入鞋子尺寸！");
                    return;
                }
            }
            if(this.concatObj.shoe_type_s){
                if(this.freeMsg.shoe_type=="" || !this.freeMsg.shoe_type){
                    this.Error("请输入鞋子类型！");
                    return;
                }
            }
            if(this.concatObj.shoe_unit_s){
                if(this.freeMsg.shoe_unit=="" || !this.freeMsg.shoe_unit){
                    this.Error("请输入鞋子单位！");
                    return;
                }
            }
            if(this.concatObj.weight_s){
                if(this.freeMsg.weight=="" || !this.freeMsg.weight){
                    this.Error("请输入体重！");
                    return;
                }
            }
            if(this.concatObj.weight_unit_s){
                if(this.freeMsg.weight_unit=="" || !this.freeMsg.weight_unit){
                    this.Error("请输入体重单位！");
                    return;
                }
            }
            if(this.concat){
                
                if(this.listform.customNew.length>0){
                    let msg=Object.assign({},this.listform.customNew[0]);
                    msg.cus_type="contact";
                    this.listform.customNew.push(msg);
                }
            }
            if(this.send){
                
                if(this.listform.customNew.length>0){
                    let msg=Object.assign({},this.listform.customNew[0]);
                    msg.cus_type="send";
                    this.listform.customNew.push(msg);
                }
            }
            if(this.trafficState){
                this.freeMsg.traffic=this.traffic;
            }
            if(this.guide_langList.length==0){
                this.freeMsg.guide_lang="zh-cn";
            }
            //    行动装置
            if(this.mobile_deviceStatus){
               if(this.mobile_device.mobile_model_no=="" || !this.mobile_device.mobile_model_no){
                    this.Error("请输入手机型号！");
                    return;
               } 
               if(this.mobile_device.IMEI=="" || !this.mobile_device.IMEI){
                    this.Error("请输入IMEI！");
                    return;
               } 
               if(this.mobile_device.active_date=="" || !this.mobile_device.active_date){
                    this.Error("请选择启用日！");
                    return;
               } 
            this.freeMsg.mobile_device=this.mobile_device;

            }
            this.freeMsg.custom=this.listform.customNew;
            if(this.payObj.type=='01'){
                let credit_card=this.payObj.credit_card;
                if(credit_card.number=="" || !credit_card.number){
                    this.Error("请填写信用卡号！");
                    return;
                }
                if(credit_card.cvv=="" || !credit_card.cvv){
                    this.Error("请填写信用卡cvv！");
                    return;
                }
                if(credit_card.expiry=="" || !credit_card.expiry){
                    this.Error("请填写信用卡到期时间！");
                    return;
                }
                if(credit_card.holder=="" || !credit_card.holder){
                    this.Error("请填写信用卡持有者！");
                    return;
                }
                if(credit_card.type=="" || !credit_card.type){
                    this.Error("请选择信用卡类型！");
                    return;
                }
                this.freeMsg.pay=this.payObj;

            }
        
            // return;
            this.BtnLoading=true;
            this.freeMsg.DiscountMoney = this.SettlementPrice == 0 ? 0 : this.freeMsg.MySelfTotalPrice - this.SettlementPrice;
            this.freeMsg.CouponAllotIds = this.CouponIds;
            this.freeMsg.CustomerPayMoney = this.SettlementPrice < 0 ? 0 : this.SettlementPrice;
            this.apipost('dmc_post_Get_KKDayOrderBooking', this.freeMsg,res=>{
                this.BtnLoading=false;

                if(res.data.data&&res.data.data.orderId) {
                    this.Success("下单成功！")
                    let msg={};
                    if(sessionStorage.getItem("OpenB2BCode")){
                        this.$confirm('下单成功，请返回系统进行支付。', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            window.open("http://yx.oytour.com/#/freeTravelOrder");
                            // window.open("http://www.test.com:8080/#/freeTravelOrder");
                            this.$router.push({ 
                                name: "FreeHome",
                            });
                        }).catch(() => {
                            this.$router.push({ 
                                name: "FreeHome",
                            });
                        });
                    }
                    let userInfo = this.getLocalStorage();
                    let user = userInfo.customerId;
                    let data=res.data.data;
                    msg.CancelTime=data.CancelTime;
                    msg.OrderSource=15;
                    msg.total_fee=data.TotalPrice;
                    msg.body=data.Describe;
                    msg.orderId=data.orderId;
                    msg.costType=data.costType;
                    msg.attach=`${data.costType}|${userInfo.name}|${data.orderId}|${userInfo.customerId}|${data.RB_Branch_id}`;
                    sessionStorage.setItem("FreePay",JSON.stringify(msg));
                    this.$router.push({name:'FreePayBefore'})
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})

        },
        setEngName(type,index, name) {
            
          if (type == 1 && name != "") {
            this.listform.customNew[index].english_last_name = this.$languageUtils.ConvertChineseToPinYin(name);
          } else {
            this.listform.customNew[index].english_first_name = this.$languageUtils.ConvertChineseToPinYin(name);
          }
          this.$forceUpdate()
        },
        getDetails(id){
            this.Orderloading=true;
            // http://efficient.oytour.com/api/kkday/QueryProduct
            this.apiJavaPost(
                "/api/kkday/QueryProduct",
                {
                "prod_no": id ? id : "28474",
                "locale":"zh-cn" 
                },
                res => {
                this.Orderloading=false;

                if (res.data.data.result === "00") {
                    this.DomainUrl=res.data.data.KkdayDomain;
                    let data = res.data.data;
                    this.dataDetail = data;
                    this.booking_field=data.booking_field;
                    this.picUrl=this.dataDetail.prod.prod_img_url;
                    if(this.booking_field.custom&&this.booking_field.custom.cus_type&&this.booking_field.custom.cus_type.list_option.length>0){
                        let customObj=this.booking_field.custom;
                        let list_option=this.booking_field.custom.cus_type.list_option;
                        if(list_option.length==0){
                            this.markMsg.peopleType=1;  
                        }
                        this.listform.customNew=[];
                        
                        let peoplenum=this.freeMsg.price1_qty+this.freeMsg.price2_qty+this.freeMsg.price3_qty+this.freeMsg.price4_qty;
                        if(list_option.length==0){
                            this.markMsg.peopleType=1;
                                let msg={
                                    cus_type:"cus_01",
                                    english_last_name:"",
                                    english_first_name:'',
                                    native_last_name:'',
                                    native_first_name:'',
                                    gender:'F',
                                    birth:'',
                                    nationality:'CN',
                                    passport_no:'',
                                    tel_country_code:'86',
                                    tel_number:"",
                                };
                                this.listform.customNew.push(msg);
                        }
                        list_option.forEach(item => {
                            if(item=="cus_01"){
                                this.markMsg.peopleType=1;
                                let msg={
                                    cus_type:"cus_01",
                                    english_last_name:"",
                                    english_first_name:'',
                                    native_last_name:'',
                                    native_first_name:'',
                                    gender:'F',
                                    birth:'',
                                    nationality:'CN',
                                    passport_no:'',
                                    tel_country_code:'86',
                                    tel_number:"",
                                };
                                this.listform.customNew.push(msg);
                            } 
                            if(item=="contact"){
                                this.concat=true;
                            }
                            if(item=="send"){
                                this.send=true;
                            }
                            if(item=="cus_02"){
                                this.markMsg.peopleType=2;
                                    for(let i=0;i<peoplenum;i++){
                                        let msg={
                                        cus_type:"cus_02",
                                        english_last_name:"",
                                        english_first_name:'',
                                        native_last_name:'',
                                        native_first_name:'',
                                        gender:'F',
                                        birth:'',
                                        nationality:'CN',
                                        passport_no:'',
                                        tel_country_code:'86',
                                        tel_number:"",
                                    };
                                    this.listform.customNew.push(msg);
                                }
                            } 
                            
                            
                        });
                    
                        // 导游语言
                        if(customObj.guide_lang){
                            this.markMsg.guide_lang=true;
                            this.guide_langList=customObj.guide_lang.list_option;
                        }
                        // 车
                        if(this.booking_field.traffic){
                            if(this.booking_field.traffic.car){
                                this.trafficState=true;
                                if(this.booking_field.traffic.car.traffic_type.list_option){
                                    let list=this.booking_field.traffic.car.traffic_type.list_option;
                                    list.forEach(item=>{
                                        let obj={
                                            traffic_type:item,
                                            s_location:"",
                                            e_location:'',
                                            s_address:'',
                                            e_address:'',
                                            s_date:'',
                                            e_date:'',
                                            s_time:'',
                                            e_time:'',

                                        }
                                        this.traffic.car.push(obj)
                                    })

                                }
                            }
                            
                        }
                        // 行动装置
                        if(this.booking_field.mobile_device){
                            this.mobile_device={
                                mobile_model_no:'',
                                IMEI:'',
                                active_date:'',
                            };
                            this.mobile_deviceStatus=true;
                        }
                        // 身高等
                        
                        if(customObj.height){
                            this.concatObj.height_s=true;
                        }
                        if(customObj.height_unit){
                            this.concatObj.height_unit_s=true;
                            this.concatObj.height_unitList=customObj.height_unit.list_option;
                        }
                        if(customObj.shoe){
                            this.concatObj.shoe_s=true;
                        }
                        if(customObj.shoe_type){
                            this.concatObj.shoe_type_s=true;
                            this.concatObj.shoe_typeList=customObj.shoe_type.list_option;
                        }
                        if(customObj.shoe_unit){
                            this.concatObj.shoe_unit_s=true;
                            this.concatObj.shoe_unitList=customObj.shoe_unit.list_option;

                        }
                        if(customObj.weight){
                            this.concatObj.weight_s=true;
                        }
                        if(customObj.weight_unit){
                            this.concatObj.weight_unit_s=true;
                            this.concatObj.weight_unitList=customObj.weight_unit.list_option;

                        }


                    }
                    
                   
                    
                    
                    
                } else {
                    this.Error(res.data.message);
                }
                },
                null
            );
        },
        GetInfo(){
            this.apipost('dmc_post_GetTelephoneCountryCode',{},res=>{
                if(res.data.resultCode == 1) {
                    this.tel_country_code=res.data.data.jo.CountryAreas;
                    this.payObj.type=res.data.data.paytype;
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
    }
}
</script>

<style>
@import '../../assets/css/common.css';
.OrderCon .trafficList{
    border-bottom:1px solid rgba(224, 224, 224, 1)
}
.OrderCon .trafficList:last-child{
    border: none;
}
.OrderCon  .OrderConBtn{
    width:100%;
    height:66px;
    background:rgba(238,68,84,1);
    border-radius:4px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    margin-bottom:60px;
    cursor: pointer;
}
.OrderCon .OrderConForm .yhqform .el-form-item__label{
    width:200px!important;
}
.OrderCon .OrderConForm .el-form-item__label{
    color:#111111;
}
.OrderCon .OrderConForm .el-input__inner{
    border: none;
    outline: none;
    border-bottom: 1px solid #DDDDDD;
    border-radius: 0;
}
.OrderCon .right .dashDiv{
    border-bottom: 1px dashed #999999;
    margin-top:10px;
}
.OrderCon .Content .ListDiv .commomStyle .fysm li img{
    margin-right:6px;
}
.OrderCon .Content .ListDiv .commomStyle .fysm li{
    display: inline-block;
    margin:0 35px 15px 0;
}
.OrderCon .Content .ListDiv .commomStyle .typeList span{
    padding:0 24px;
    background:rgba(255,186,193,1);
    border:1px solid rgba(238, 68, 84, 1);
    border-radius:2px;
    margin-right: 10px;
    font-size:14px;
    height:32px;
    line-height:32px;
    display: inline-block;

}
.OrderCon .Content .ListDiv .commomStyle .choosedate{
    width:166px;
    height:40px;
    line-height:40px;
    background:rgba(238,68,84,1);
    border-radius:2px;
    text-align: center;
    color:#fff;
    font-size: 14px;
    margin:20px 0;
}
.calendarPopover{
    padding:0;
}
.calendarDiv{
    width:406px;
    background:rgba(255,255,255,1);
    z-index: 100;
    border: 1px solid #E1E1E1;
}
.calendarDiv .month_circle{
    display: inline-block;
    width:28px;
    height:28px;
    background:rgba(227,227,227,1);
    color: #fff;
    text-align: center;
    line-height: 28px;
    border-radius: 2px;
    cursor: pointer;
}
.OrderCon .Content .ListDiv .commomStyle .titleDiv .redSpan{
    width:4px;
    height:20px;
    background:rgba(238,68,84,1);
    display: inline-block;
    position: absolute;
    left: 0;
    top: 15px;
}
.OrderCon .Content .ListDiv .commomStyle .titleDiv{
    width:100%;
    height:50px;
    line-height:50px;
    border-bottom:1px solid rgba(224, 224, 224, 1);
    background: #EDF4FF;
    position: relative;
    padding-left: 20px;
    box-sizing: border-box;
}
.OrderCon .Content .ListDiv .commomStyle div{
    box-sizing: border-box;
}
.OrderCon .Content .ListDiv .commomStyle{
    border:1px solid rgba(224, 224, 224, 1);
    width:792px;
    box-sizing: border-box;
    margin-bottom: 30px;
}
.OrderCon .Content .titleEl .el-col{
    display: inline-flex;
    align-items: center;
}
.OrderCon .Content .titleEl .el-col img{
    margin-right: 6px;
}
.OrderCon .Content .right .Btn{
    width:320px;
    height:50px;
    line-height:50px;
    background:rgba(238,68,84,1);
    border-radius:4px;
    color:#fff;
    text-align: center;
    margin: 10px 0 15px 20px;
    box-sizing: border-box;
}
.OrderCon .Content>div{
    float: left;
}


._coupon_box{
      display: flex;
      flex-wrap: wrap;
    }
    .OrderCon ._coupon_box ._coupon_item{
      width: 224px;
      padding: 12px 20px 12px 25px;
      margin:0 26px 20px 0;
      position: relative;
      background-color: #F1BC69;
      cursor: pointer;
    }
    ._coupon_box ._coupon_item ._coupon_info p{
      color: #FFFFFF;
    }
    ._coupon_box ._coupon_item:hover{
      background-color: #D9A24D;
    }
    ._coupon_box ._coupon_item.blue{
      background-color: #8794E2;
    }
    ._coupon_box ._coupon_item.blue:hover{
      background-color: #6776D2;
    }
    ._coupon_box ._coupon_item.blue ._time{
      color: #4C58A4 !important;
    }
    ._coupon_box ._coupon_item._active{
      background-color: #D9A24D;
    }
    ._coupon_box ._coupon_item.blue._active{
      background-color: #6776D2;
    }
    ._coupon_box ._coupon_item.disab,._coupon_box ._coupon_item.blue.disab ._repeat,._coupon_box ._coupon_item.blue.disab ._info_time{
      background-color: #7d7d7d !important;
      color: #ababab !important
    }
    ._coupon_box ._coupon_item ._time{
      color: #A7711C !important;
    }
    ._coupon_box ._coupon_item ._left_raduis span{
      display: inline-block;
      width: 8px;
      height: 8px;
      margin: 2px 3px;
      border-radius: 50%;
      background-color: white;
    }
    ._left_raduis{
      width: 15px;
      position: absolute;
      left: -7px;
      top: 0;
    }
    ._coupon_box ._coupon_item ._coupon_info p{
      font-size: 16px !important;
      margin: 0
    }
    .OrderCon ._coupon_box ._coupon_item ._coupon_info p._coupon_name{
      font-size: 14px !important;
      margin-bottom: 10px;
      max-width: 190px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }
    ._coupon_box ._coupon_item ._coupon_info p span._sale{
      font-size: 24px;
    }
    .OrderCon ._coupon_box ._coupon_item ._coupon_info p._repeat{
      padding: 0 5px;
      color: #7C6F01;
      position: absolute;
    top: 0px;
    right: 0px;
      background-color: #FFE71B;
      font-size: 12px !important;
    }
    ._coupon_box ._coupon_item ._coupon_info ._info_full {
      color: #FFFFFF;
      font-size: 12px;
      padding: 5px 0;
    }
    ._coupon_box ._coupon_item ._coupon_info ._info_time {
      font-size: 12px !important;
    }
    ._choice_box{
      height: 19px;
      position: absolute;
      right: 20px;
      bottom: 14px;
    }
    ._choice_box span{
      width: 16px;
      height: 16px;
      border-radius: 50%;
      line-height: 16px;
      text-align: center;
      background-color: white;
      display: inline-block;
      font-size: 12px !important;
    }
    .icon-xuanzhong2{
      color: #31AA21;
    }
    ._no_coupon{
      width: 100%;
      margin: 0 !important;
      color: gray !important;
    }
    ._trip_xiangqing_tips{
      color: red !important;
      font-size: 14px !important;
    }
    ._trip_xiangqing_tips span{
      color: #3965B0;
      cursor: pointer;
    }
</style>
