<template>
    <div class="">
      <div class="inv-container">
        <div class="inv-head" v-show="!pageIndex">
          <p>选择发票</p>
          <div class="inv-type flex-box">
            <span @click="isInvoive=false" :class="{bgColor:!isInvoive}"><i class="iconfont icon-gou5"></i>不要发票</span>
            <span @click="isInvoive=true" :class="{bgColor:isInvoive}"><i class="iconfont icon-gou5"></i>要发票</span>
          </div>
        </div>
        <div class="inv-content" v-show="isInvoive">
            <div class="text-wrap flex-box border-bottom">
              <label for="">发票类型</label>
              <p class="radio-wrap flex">
                <span @click="form.invoiceType=0"><i class="iconfont icon-weixuanzhongyuanquan" :class="{'icon-gou mColor':form.invoiceType==0}"></i>个人</span>
                <span @click="form.invoiceType=1"><i class="iconfont icon-weixuanzhongyuanquan" :class="{'icon-gou mColor':form.invoiceType==1}"></i>企业</span>
                <span @click="form.invoiceType=2"><i class="iconfont icon-weixuanzhongyuanquan" :class="{'icon-gou mColor':form.invoiceType==2}"></i>非企业性单位</span>
              </p>
            </div>
            <div class="text-wrap flex-box border-bottom" :class="{'error-wrap':errorObj.titleError}">
              <label for="">发票抬头</label>
              <input type="text" class="flex" placeholder="请输入发票抬头" v-model="form.title" @change="inputChangeFun('title','titleError')" v-fixedInput="">
              <span class="error-msg">{{errorObj.titleError}}</span>
            </div>
            <div class="text-wrap flex-box border-bottom" v-show="form.invoiceType!=0" :class="{'error-wrap':errorObj.taxpayerNumberError}">
              <label for="">税号<i class="iconfont icon-wenhao mColor" @click="popAlertVisible=true"></i></label>
              <input type="text" class="flex" :placeholder="form.invoiceType==1 ? '必填' : '非必填'" v-model="form.taxpayerNumber" @change="inputChangeFun('taxpayerNumber','taxpayerNumberError')" v-fixedInput="">
              <span class="error-msg">{{errorObj.taxpayerNumberError}}</span>
            </div>
            <div class="text-wrap flex-box border-bottom" :class="{'error-wrap':errorObj.invoiceDetailError}">
              <label for="">发票明细</label>
              <select class="flex iconfont icon-arrow-down" v-model="form.invoiceDetail" @change="invoiceDetailChange" v-fixedInput="">
                <option :value="d.label" v-for="d in invoiceD">{{d.label}}</option>
              </select>
              <i class="iconfont icon-arrow-right1"></i>
              <span class="error-msg">{{errorObj.invoiceDetailError}}</span>
            </div>
            <div class="text-wrap flex-box border-bottom">
              <label for="">发票种类</label>
              <p class="radio-wrap flex">
                <span @click="form.type=2"><i class="iconfont icon-weixuanzhongyuanquan" :class="{'icon-gou mColor':form.type==2}"></i>电子发票</span>
                <span @click="form.type=1"><i class="iconfont icon-weixuanzhongyuanquan" :class="{'icon-gou mColor':form.type==1}"></i>纸质发票</span>
              </p>
            </div>
            <div class="text-wrap flex-box border-bottom" v-show="form.type==2" :class="{'error-wrap':errorObj.emailError}">
              <label for="">电子邮箱</label>
              <input type="text" class="flex" placeholder="用于接收电子发票" v-model="form.contactEmail" @change="inputChangeFun('contactEmail','emailError')" v-fixedInput="">
              <span class="error-msg">{{errorObj.emailError}}</span>
            </div>
            <div v-if="form.type==1">
              <!--<div class="text-wrap flex-box border-bottom">-->
                <!--<label for="">配送方式</label>-->
                <!--<p class="flex">申通快递</p>-->
              <!--</div>-->
              <div class="text-wrap flex-box border-bottom" :class="{'part-wrap':isAddressInfo,'error-wrap':errorObj.addressError}">
                <label for="">配送地址</label>
                <p class="flex" @click="editAddressFun">
                  <span v-show="!isAddressInfo"> 请选择配送地址</span>
                  <span v-show="isAddressInfo">
                    <em>{{form.recipientName}}</em>
                    <em>{{form.recipientPhone}}</em>
                    <em>{{form.province}}{{form.city}}{{form.address}}</em>
                  </span>
                </p>
                <i class="iconfont icon-arrow-right1"></i>
                <span class="error-msg">{{errorObj.addressError}}</span>
              </div>
              <p class="ruleTip" v-if="airName!='hn'"><i class="iconfont icon-gantanhao"></i>纸质发票邮费需旅客自行承担，旅客到付。</p>
            </div>

          </div>
      </div>

      <!--税号-->
      <taxpayerInfo  v-if="popAlertVisible"  @closePopAlert="popAlertVisible=false"></taxpayerInfo>

      <!--地址信息-->
      <div class="popAlert" v-show="addrAlertVisible">
        <addressInfo ref="addressInfo" @chooseAddressFun="chooseAddressFun($event)" @closeAddressFun="addrAlertVisible=false"></addressInfo>
      </div>

    </div>
</template>
<script>
  import addressInfo from '../address/address.vue'
  import taxpayerInfo from '../invoice/taxpayerInfo.vue'
    export default {
      name: '',
      props:{
        pageIndex:'',
        invoiceD:'',
        invoiceDetail:''
      },
      data () {
            return {
              airName:airName,
              isInvoive:false,
              popAlertVisible:false,
              form:{
                type:2, //类型 1：纸质发票 2：电子发票
                title:'', //发票抬头
                taxpayerNumber:'', //纳税人识别号
                invoiceDetail:this.invoiceDetail,//发票明细
                invoiceRemark:'',//发票备注
                invoiceType:1, //发票类型 0：个人 1：企业 2：非企业
                orderNumber:this.$route.params.orderNumber, //订单编号
                province:'',//收货地址 省份
                city:'',//收货地址 城市
                area:'',//收货地址 区域纸
                address:'',//收货地址 详细地址
                recipientName:'', //收货人
                recipientPhone:'',//收货人电话
                contactEmail:'', //电子邮箱
                createType:1,  // 1出行人页面，不填补开发票
              },
              errorObj:{
                titleError:'',
                taxpayerNumberError:'',
                invoiceDetailError:'',
                addressError:'',
                emailError:''
              },
              addrAlertVisible:false,
              addressInfo:{},
              isAddressInfo:false,
              invoiceId:''
            }
        },
      methods: {
          inputChangeFun(name,error){
            if(this.form[name]){
              this.errorObj[error]='';
            }
          },
          /*返回*/
          back(){
            if(!this.invoiceId){
              this.isInvoive=false;
              this.errorObj={
                titleError:'',
                taxpayerNumberError:'',
                invoiceDetailError:'',
                addressError:'',
                emailError:''
              };
              this.form={
                type:2, //类型 1：纸质发票 2：电子发票
                title:'', //发票抬头
                taxpayerNumber:'', //纳税人识别号
                invoiceDetail:invoiceDetail,//发票明细
                invoiceRemark:'',//发票备注
                invoiceType:1, //发票类型 0：个人 1：企业 2：非企业
                orderNumber:this.$route.params.orderNumber, //订单编号
                province:'',//收货地址 省份
                city:'',//收货地址 城市
                area:'',//收货地址 区域纸
                address:'',
                recipientName:'',
                recipientPhone:'',
                contactEmail:'',
                createType:1,
              }
              this.isAddressInfo=false;
              this.addressInfo={};
            }else {
              this.isInvoive=true;
            }
            this.$emit("close");
          },
          invoiceDetailChange(){
          },
          /*编辑地址*/
          editAddressFun(){
            this.addrAlertVisible=true;
            this.$refs.addressInfo.queryAddressList();
          },
          /*配送地址*/
          chooseAddressFun(addr){
            this.addressInfo=addr;
            this.form.recipientName=addr.recipientName;
            this.form.recipientPhone=addr.recipientPhone;
            this.form.province=addr.province;
            this.form.city=addr.city;
            this.form.area=addr.area;
            this.form.address=addr.address;
            this.isAddressInfo=true;
            this.addrAlertVisible=false;
            this.errorObj.addressError='';
          },

          /*保存发票信息*/
          saveInvoice(){
            if(this.isInvoive){
              if(this.verificationForm()){
                if(this.pageIndex){
                  this.form.createType='';
                }else {
                  this.form.createType=1;
                }
                applyInvoice(this.form).then(data=>{
                  if(data.returnCode==200){
                    this.$parent.back(data.data);
                  }else{
                    Toast(data.returnMsg);
                  }
                });
              }
            }else {
              this.invoiceId='';
              this.back();
              let invoiceParam={
                isInvoive:this.isInvoive,
                invoiceId:this.invoiceId,
                form:this.form
              };
              this.$parent.back(-2);
            }

          },
          /*验证发票信息*/
          verificationForm(){
            var reg = /^[0-9a-zA-Z]+$/;
            let isFlag=true;
            if(!this.form.title){
              this.errorObj.titleError='请输入发票抬头';
              isFlag=false;
            }else {
              this.errorObj.titleError='';
            }

            if((this.form.invoiceType==1 && !this.form.taxpayerNumber) || (this.form.taxpayerNumber && !reg.test(this.form.taxpayerNumber))){
              this.errorObj.taxpayerNumberError='请输入纳税人识别号（只支持数字或字母）';
              isFlag=false;
            }else {
              this.errorObj.taxpayerNumberError='';
            }

            if(!this.form.invoiceDetail){
              this.errorObj.invoiceDetailError='请选择发票明细';
              isFlag=false;
            }else {
              this.errorObj.invoiceDetailError='';
            }

            if(this.form.type==2 && !this.form.contactEmail ){
              this.errorObj.emailError='请输入电子邮箱';
              isFlag=false;
            }else {
              this.errorObj.emailError='';
            }

            if(this.form.type==1 && !this.isAddressInfo ){
              this.errorObj.addressError='请选择配送地址';
              isFlag=false;
            }else {
              this.errorObj.addressError='';
            }
            return isFlag
          },
        },
        components:{
          addressInfo,taxpayerInfo
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "invoice.styl"
</style>
