<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    :title="dialogTitle"
    width="880px"
    append-to-body
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <div>
      <el-form ref="form" :model="formData" :rules="rules" :inline-message="true">
        <table class="from_table">
          <!--发票抬头--->
          <tr>
            <td>
              <el-form-item label="发票抬头" prop="invoiceTitle" />
            </td>
            <td>
              <el-input
                v-model="formData.invoiceTitle"
                disabled
                placeholder="发票抬头"
              />
            </td>
          </tr>
          <!--是否专票--->
          <tr>
            <td>
              <el-form-item label="发票类型" prop="invoiceType" />
            </td>
            <td>
              <el-radio-group v-model="formData.invoiceType">
                <el-radio label="00">
                  普票
                </el-radio>
                <el-radio label="01">
                  专票
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
          <!--税号-->
          <tr>
            <td>
              <el-form-item label="税号" prop="taxpayerIdentificationNumber" />
            </td>
            <td>
              <el-input
                v-model="formData.taxpayerIdentificationNumber"
                disabled
                placeholder="税号"
              />
            </td>
          </tr>
          <!--联系人-->
          <tr>
            <td>
              <el-form-item label="联系人" prop="consigneeName" />
            </td>
            <td>
              <el-input
                v-model="formData.consigneeName"
                disabled
                placeholder="联系人"
              />
            </td>
          </tr>
          <!--联系电话-->
          <tr>
            <td>
              <el-form-item label="联系电话 " prop="consigneeMobileNum" />
            </td>
            <td>
              <el-input
                v-model="formData.consigneeMobileNum"
                disabled
                placeholder="联系电话"
              />
            </td>
          </tr>
          <!--缴费金额-->
          <tr>
            <td>
              <el-form-item label="缴费金额(元)" prop="invoicePrice" />
            </td>
            <td>
              <el-input
                v-model="formData.invoicePrice"
                disabled
                placeholder="缴费金额"
              />
            </td>
          </tr>
          <!--发票号码-->
          <tr>
            <td>
              <el-form-item label="发票号码(元)" prop="invoiceNo" />
            </td>
            <td>
              <el-input
                v-model="formData.invoiceNo"
                placeholder="发票号码"
              />
            </td>
          </tr>
          <!--发票附件-->
          <tr>
            <td>
              <el-form-item label="发票附件" prop="credentialsId" />
            </td>
            <td>
              <upload
                v-if="dialogData.dialog"
                :on-change="photoIdFile"
                :data="photoIdType"
                :auto-delete="true"
                :auto-upload="true"
                :limit="1"
                file-ref="fileRefs"
                but-text="发票附件上传"
                title=""
                :accept="accept"
              />
            </td>
          </tr>
        </table>
        <table class="from_table">
          <!--开户行-->
          <tr>
            <td>
              <el-form-item label="开户行" prop="bankname" />
            </td>
            <td>
              <el-input
                v-model="formData.bankname"
                disabled
                placeholder="开户行"
              />
            </td>
          </tr>
          <!--账号-->
          <tr>
            <td>
              <el-form-item label="账号" prop="bankaccount" />
            </td>
            <td>
              <el-input
                v-model="formData.bankaccount"
                disabled
                placeholder="账号"
              />
            </td>
          </tr>
          <!--电话-->
          <tr>
            <td>
              <el-form-item label="电话" prop="taxpayertel" />
            </td>
            <td>
              <el-input
                v-model="formData.taxpayertel"
                disabled
                placeholder="电话"
              />
            </td>
          </tr>
        </table>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="opType === 'add'" type="primary" @click="ensure()">提交</el-button>
      <el-button @click="dialogData.dialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { saveInvoiceForServiceOrder } from '@/api/bidService/bidServiceStatistics.js'
import { upLoadFileUrl } from '@/api/common/uploadCenter'
import upload from '@comp/common/updownload/upload'
/* 常用方法 */
/* 组件*/
import { commonMxin } from '@/mixins/commonMxin'
export default {
  name: 'BidServiceFeeInvoiceAddDialog',
  components: {
    upload
  },
  mixins: [commonMxin],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialog: false, // 展示状态
          id: '' // 编辑时才会有财务状况id
        }
      }
    }
  },
  data() {
    return {
      dialogTitle: '',
      opType: '',
      formData: {
        invoiceTitle: '', // 发票抬头
        invoiceType: '00', // 普票   专票
        taxpayerIdentificationNumber: '', // 税号
        consigneeName: '', // 联系人
        consigneeMobileNum: '', // 联系电话
        invoicePrice: '', // 缴费金额
        invoiceNo: '', // 发票号码
        bankname: '', // 开户行
        bankaccount: '', // 账号
        taxpayertel: '', // 电话
        credentialsId: '', // 证明文件
        id: ''
      },
      photoIdType: {
        bizId: '', // 业务主键Id
        fileType: 'bidServiceInvoiceFile' // 文件类型
      },
      rules: {
        // 发票号码
        invoiceNo: [{ required: true, message: '请填写发票号码', trigger: 'blur' }]
      },
      loading: true,
      idImportFileUrl: upLoadFileUrl,
      accept: '.pdf' // 上传类型
    }
  },
  created() {
    // 生成附件bizId

  },
  methods: {
    //  证件扫描件
    photoIdFile(file, fileList) {
      if (fileList.length > 0) {
        this.$set(this.formData, 'businessLicenseType', 'true')// 上传了
      } else {
        this.$set(this.formData, 'businessLicenseType', '')// 未上传
      }
    },
    // 打开弹框
    openInvoiceDialog(opType, data) {
      this.opType = opType
      this.formData = data
      if (this.opType === 'add') {
        this.dialogTitle = '录入投标服务费发票'
        this.formData.id = this.dialogData.id// 主键id
        this.photoIdType.bizId = this.formData.id// 财务审计报告扫描件
      } else {
        this.dialogTitle = '投标服务费发票信息'
        this.formData.id = this.dialogData.id// 主键id
        this.photoIdType.bizId = this.formData.id// 财务审计报告扫描件
      }
    },
    // 提交信息
    ensure() {
      this.$refs.form.validate((valid, field) => {
        if (valid) {
          const data = { ...this.formData }

          if (this.opType === 'add') {
            saveInvoiceForServiceOrder(data)
              .then(res => {
                this.$emit('loadData', {
                  pageSize: 10
                })
                this.dialogData.dialog = false
              }).catch(() => {
              })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.el-dialog__body {
  height: 55vh;
}
</style>
