<!--
  @description:录入开票信息
  @Modifier:qrf
  @routerPath:/supperManagement/invoiceInFormation
  @date:2020/9/14-10:00
-->
<template>
  <div>
    <section class="title p0-16 clearfix">
      <router-link :to="'/supperManagement/enterpriseManagement-list'">
        <div class="title-back pointer">
          <i class="iconfont icon-fanhui mr10" />录入开票信息
        </div>
      </router-link>
    </section>
    <div class="main md16">
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        :inline-message="true"
      >
        <table class="from_table">
          <tr>
            <td>
              <!--发票类型-->
              <el-form-item
                ref="invoiceType"
                label="发票类型"
                prop="invoiceType"
              />
            </td>
            <td colspan="3">
              专票
              <!-- <el-radio v-model="form.invoiceType" label="00">普票</el-radio>
              <el-radio v-model="form.invoiceType" label="01">专票</el-radio> -->
            </td>
          </tr>
          <tr>
            <td>
              <!--开票抬头-->
              <el-form-item
                ref="invoiceTitle"
                label="开票抬头"
                prop="invoiceTitle"
              />
            </td>
            <td>
              <el-input v-model="form.invoiceTitle" placeholder="" style="width: calc(100% - 60px)" />
            </td>
            <td>
              <!--纳税人识别号-->
              <el-form-item
                ref="taxpayerIdentificationNumber"
                label="纳税人识别号"
                prop="taxpayerIdentificationNumber"
              />
            </td>
            <td>
              <el-input v-model="form.taxpayerIdentificationNumber" placeholder="" style="width: calc(100% - 60px)" />
            </td>
          </tr>
          <tr v-if="form.invoiceType === '01'">
            <td>
              <!--开户行-->
              <el-form-item
                ref="bankname"
                label="开户行"
                maxlength="200"
                prop="bankname"
              />
            </td>
            <td>
              <el-input v-model.trim="form.bankname" placeholder="" style="width: calc(100% - 60px)" />
            </td>
            <td>
              <!--开户行卡号-->
              <el-form-item
                ref="bankaccount"
                label="开户行卡号"
                maxlength="200"
                prop="bankaccount"
              />
            </td>
            <td>
              <el-input v-model.trim="form.bankaccount" placeholder="" style="width: calc(100% - 60px)" />
            </td>
          </tr>
          <tr v-if="form.invoiceType === '01'">
            <td>
              <!--地址-->
              <el-form-item
                ref="consigneeAddress"
                label="地址"
                maxlength="300"
                prop="consigneeAddress"
              />
            </td>
            <td>
              <el-input v-model.trim="form.consigneeAddress" placeholder="" style="width: calc(100% - 60px)" />
            </td>
            <td>
              <!--联系电话-->
              <el-form-item
                ref="consigneeMobilenum"
                label="电话"
                maxlength="300"
                prop="consigneeMobilenum"
              />
            </td>
            <td>
              <el-input v-model.trim="form.consigneeMobilenum" placeholder="" style="width: calc(100% - 60px)" />
            </td>
          </tr>
          <tr v-if="form.invoiceType === '01'">
            <td>
              <!--一般纳税人证明文件说明-->
              <el-form-item
                ref="paytaxes"
                label="一般纳税人证明文件说明"
                prop="paytaxes"
              />
            </td>
            <td>
              <el-link type="primary" @click="dielAdd">
                点击查看开具增值税专用发票证明文件说明
              </el-link>
            </td>
            <td>
              <!--一般纳税人证明-->
              <el-form-item
                ref="principalList"
                label="一般纳税人证明"
                prop="principalList"
              />
            </td>
            <td>
              <upload
                ref="upload"
                :on-change="fileChange"
                :data="principalData"
                :auto-delete="true"
                :auto-upload="true"
                :limit="1"
                file-ref="fileRef"
                but-text="上传文件"
                title=""
                accept="image/jpg,image/jpeg,image/png,.docx,.pdf,PDF,DOCX"
                tip-text="彩色扫描件,只限图片、word、pdf文档"
              />
            </td>
          </tr>
        </table>
      </el-form>
      <div class="but_footer">
        <div class="but_footer-h">
          <div class="but_footer-but">
            <el-button @click="prevStep('form')">
              生效
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 发票说明 -->
    <invoiceInFormation v-if="dialogData.consignContractVisible" :dialog-data="dialogData" />
  </div>
</template>

<script>
/* 组件*/
import upload from '@comp/common/updownload/upload'
import invoiceInFormation from './invoiceInFormation-dialog'
/* 常用方法*/
import { randomData } from '@/assets/js/utils/index'
import { validateInput, taxpayerIdentificationNumber, characters1_auto, checkLinktel, bankCardNumber } from '@/assets/js/validate'
/* 混入 */
import { invoiceInformationMixin } from './mixins/invoiceInformationMixin'
import { declareHegSupperMixins } from '@/views/supplier/editorDeclaration/mixins/declareHegSupperMixins'// 供应商-公用方法参数
/* 接口*/
import { saveInvoice } from '@api/common/user'
export default {
  name: 'BusinessManagerInfo',
  components: {
    upload,
    invoiceInFormation // 发票说明
  },
  mixins: [declareHegSupperMixins, invoiceInformationMixin],
  data() {
    return {
      dialogData: {
        consignContractVisible: false // 发票说明
      },
      form: {
        id: '', // 发票主键id
        invoiceTitle: '', // 发票抬头
        invoiceType: '01', // 发票类型 00普票 01 专票
        taxpayerIdentificationNumber: '', // 纳税人识别号
        consigneeAddress: '', // 地址
        consigneeMobilenum: '', // 电话
        bankname: '', // 开户行，
        bankaccount: '', // 开户行卡号
        principalList: ''
      },
      // 校验输入内容
      rules: {
        invoiceType: [{ required: true, message: '请输入', trigger: 'change' }], // 发票类型
        invoiceTitle: [{ required: true, validator: validateInput, trigger: 'change' }], // 发票抬头
        taxpayerIdentificationNumber: [{ required: true, validator: taxpayerIdentificationNumber, trigger: 'blur' }], // 纳税人识别号
        consigneeAddress: [{ required: true, validator: characters1_auto, trigger: 'change' }], // 收货地址
        consigneeMobilenum: [{ required: true, validator: checkLinktel, trigger: 'change' }], // 收货电话
        bankname: [{ required: true, validator: validateInput, trigger: 'blur' }], // 开户行
        bankaccount: [{ required: true, validator: bankCardNumber, trigger: 'blur' }], // 开户行账号
        principalList: [{ required: true, message: '请上传', trigger: 'change' }]
      }
    }
  },
  created() {
    // 前端生成主键id
    this.principalData.bizId = randomData()
    this.form.id = this.principalData.bizId // 发票主键id
  },
  methods: {
    // 生效
    prevStep(formName) {
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          // 生效
          delete this.form.principalList // 法人/负责人身份证号或护照号
          this.$confirm('确认生效吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            saveInvoice(this.form).then(res => {
              this.$router.push('/supperManagement/enterpriseManagement-list')
              this.$message({
                type: 'success',
                message: '生效成功!'
              })
            })
          }).catch(() => {
          })
        }
      })
    },
    // 一般纳税人证明上传监听
    fileChange(file, fileList) {
      if (fileList.length > 0) {
        this.form.principalList = 'true'// 上传了
      } else {
        this.form.principalList = '' // 未上传
      }
    },
    dielAdd() {
      this.dialogData.consignContractVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
</style>
