<template>
  <view class="edit-invoice">
    <view class="invoice-type">
      <view class="title">发票类型</view>
      <u-radio-group v-model="type" @change="radioGroupChange" icon-size="0" active-color="#FF780F" size="16">
        <u-radio 
          v-for="(item, index) in list" :key="index" 
          :name="item.type"
          :disabled="action==0"
        >
          {{item.name}}
        </u-radio>
      </u-radio-group>
    </view>
    <view class="info-item">
      <view class="title">发票抬头</view>
      <input type="text" placeholder="抬头名称或极速开票6位代码" v-model="title" />
    </view>
    <view class="personal" v-show="type==1">
      <view class="info-item">
        <view class="title">手机号</view>
        <input type="text" placeholder="请输入您的手机号" maxlength="11"  v-model="personalPhone" />
      </view>
      <view class="info-item">
        <view class="title">身份证号</view>
        <input type="text" placeholder="请输入您的身份证号" v-model="idCard" />
      </view>
    </view>
    <view class="company" v-show="type==2">
       <view class="info-item">
        <view class="title">税号</view>
        <input type="text" placeholder="纳税人识别号或社会统一征信代码" v-model="taxNumber" />
      </view>
      <view class="info-item">
        <view class="title">单位地址</view>
        <input type="text" placeholder="请输入公司地址" v-model="address" />
      </view>
      <view class="info-item">
        <view class="title">电话号码</view>
        <input type="text" placeholder="请输入公司电话" maxlength="11" v-model="companyPhone" />
      </view>
      <view class="info-item">
        <view class="title">开户银行</view>
        <input type="text" placeholder="请输入开户银行" v-model="bankDeposit" />
      </view>
      <view class="info-item">
        <view class="title">银行账户</view>
        <input type="text" placeholder="请输入银行账户" v-model="bankAccounts" />
      </view>
    </view>
    <view class="save-btn" @click="submit">保存</view>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      invoice_id: '',
      action: '', // 0 编辑 1 添加
      type: '', // 发票类型
      list: [{
        type: 1,
        name: '个人或事业单位'
      }, {
        type: 2,
        name: '企业'
      }],
      title: '',
      personalPhone: '',
      idCard: '',
      taxNumber: '',
      address: '',
      companyPhone: '',
      bankDeposit: '',
      bankAccounts: '',
    }
  },
  onLoad(option) {
    this.action = option.action;
    if(option.invoice_id) {
      this.type = 0;
      this.invoice_id = option.invoice_id;
      this.getInvoiceInfo();
    } else {
      this.type = 1;
    }
  },
  methods: {
    submit() {
      this.action == 1 ? this.invoiceAdd() : this.invoiceEdit();
    },
    verificationParams() {
      const phone = /^0\d{2,3}-?\d{7,8}$/;
      if(this.type == 1) {
        if(this.$u.test.isEmpty(this.title)) {
          this.$u.toast('发票抬头不可为空');
          return false;
        }
        if(this.$u.test.isEmpty(this.personalPhone)) {
          this.$u.toast('手机号不可为空');
          return false;
        }
        if(!this.$u.test.mobile(this.personalPhone) && !phone.test(this.personalPhone)) {
          this.$u.toast('请正确填写手机号');
          return false;
        }
        if(this.$u.test.isEmpty(this.idCard)) {
          this.$u.toast('身份证号不可为空');
          return false;
        }
        if(!this.$u.test.idCard(this.idCard)) {
          this.$u.toast('请正确填写身份证号');
          return false;
        }
      } else {
        if(this.$u.test.isEmpty(this.title)) {
          this.$u.toast('发票抬头不可为空');
          return false;
        }
        if(this.$u.test.isEmpty(this.taxNumber)) {
          this.$u.toast('税号不可为空');
          return false;
        }
        if(this.$u.test.isEmpty(this.address)) {
          this.$u.toast('单位地址不可为空');
          return false;
        }
        if(this.$u.test.isEmpty(this.companyPhone)) {
          this.$u.toast('电话号码不可为空');
          return false;
        }
        if(!this.$u.test.mobile(this.companyPhone) && !phone.test(this.companyPhone)) {
          this.$u.toast('请正确填写电话号码');
          return false;
        }
        if(this.$u.test.isEmpty(this.bankDeposit)) {
          this.$u.toast('开户银行不可为空');
          return false;
        }
        if(this.$u.test.isEmpty(this.bankAccounts)) {
          this.$u.toast('银行账户不可为空');
          return false;
        }
      }
      return true;
    },
    invoiceAdd() {
      if(!this.verificationParams()) return false;
      let params = {};
      this.type == 1 
      ? params = {
        invoice_type: 1,
        invoice_title: this.title,
        invoice_code: this.idCard,
        invoice_rec_mobphone: this.personalPhone,
      }
      : params = {
        invoice_type: 2,
        invoice_title: this.title,
        invoice_code: this.taxNumber,
        invoice_goto_addr: this.address,
        invoice_rec_mobphone: this.companyPhone,
        invoice_reg_bname: this.bankDeposit,
        invoice_reg_baccount: this.bankAccounts,
      }
      this.$u.api.invoiceAdd(params).then(res => {
        if(res.errCode == 0) {
          this.$refs.uToast.show({
            title: res.message,
            back: true
          })
        } else {
          this.$u.toast(res.message);
        }
      })
    },
    invoiceEdit() {
      if(!this.verificationParams()) return false;
      let params = {};
      this.type == 1 
      ? params = {
        invoice_id: this.invoice_id,
        invoice_type: 1,
        invoice_title: this.title,
        invoice_code: this.idCard,
        invoice_rec_mobphone: this.personalPhone,
      }
      : params = {
        invoice_id: this.invoice_id,
        invoice_type: 2,
        invoice_title: this.title,
        invoice_code: this.taxNumber,
        invoice_goto_addr: this.address,
        invoice_rec_mobphone: this.companyPhone,
        invoice_reg_bname: this.bankDeposit,
        invoice_reg_baccount: this.bankAccounts,
      }
      this.$u.api.invoiceEdit(params).then(res => {
        if(res.errCode == 0) {
          this.$refs.uToast.show({
            title: res.message,
            back: true
          })
        } else {
          this.$u.toast(res.message);
        }
      })
    },
    getInvoiceInfo() {
      this.$u.api.getInvoiceInfo({ invoice_id: this.invoice_id }).then(res => {
        if(res.errCode == 0) {
          const invoice = res.data;
          if(res.data.invoice_type == 1) {
            this.title = invoice.invoice_title;
            this.personalPhone = invoice.invoice_rec_mobphone;
            this.idCard = invoice.invoice_code;
            this.type = invoice.invoice_type;
          } else if(res.data.invoice_type == 2) {
            this.title = invoice.invoice_title;
            this.taxNumber = invoice.invoice_code;
            this.address = invoice.invoice_goto_addr;
            this.companyPhone = invoice.invoice_rec_mobphone;
            this.bankDeposit = invoice.invoice_reg_bname;
            this.bankAccounts = invoice.invoice_reg_baccount;
            this.type = invoice.invoice_type;
          }
        }
      })
    },
    radioGroupChange(e) {
      this.type = e;
    }
  }
};
</script>
<style lang="scss" scoped>
.edit-invoice {
  min-height: calc(100vh - var(--window-top));
	background: #ECECEC;
  .invoice-type {
    height: 98rpx;
    background: #FFFFFF;
    margin-bottom: 2rpx;
    padding: 35rpx 30rpx;
    display: flex;
    align-items: center;
    .title {
      font-size: 30rpx;
      color: #333333;
      width: 120rpx;
      margin-right: 50rpx;
    }
    .u-radio-group {
      flex: 1;
      /deep/ .u-radio {
        .u-radio__icon-wrap {
          margin: 0 20rpx;
          position: relative;
          background-color: #DBDBDB;
          &::before {
            content: '';
            position: absolute;
            width: 29rpx;
            height: 29rpx;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1rpx solid #DBDBDB;
            border-radius: 50%;
          }
        }
        .u-radio__icon-wrap--checked {
          background-color: #FF780F;
          &::before {
            border-color: #FF780F;
          }
        }
        .u-radio__icon-wrap--disabled {
          border: none;
        }
      }
    }
  }
  .info-item {
    height: 98rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    margin-bottom: 2rpx;
    padding: 35rpx 30rpx;
    .title {
      font-size: 30rpx;
      color: #333333;
      width: 120rpx;
      margin-right: 50rpx;
    }
    > input {
      flex: 1;
      font-size: 28rpx;
    }
  }
  .save-btn {
    width: 690rpx;
    height: 98rpx;
    background: #FF780F;
    border-radius: 49rpx;
    font-size: 36rpx;
    color: #FFFFFF;
    margin: 120rpx auto 0;
    line-height: 98rpx;
    text-align: center;
  }
}
</style>