<template>
  <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-position="left" label-width="80px" size="mini">
    <ul style="display:flex">
      <li style="width:500px;margin-right:10px">
        <el-form-item label="发票抬头" :prop="mapFields.invoiceTitle">
          <el-input v-model="ruleForm[mapFields.invoiceTitle]" style="width:400px" />
        </el-form-item>

        <show-data-table 
          :sitem="{}"
          style="padding: -5px 0 10px 0"
          :newTime="newTime"
          :columns="invoiceColumns"
        />
      </li>

      <li style="500px">
        <el-form-item label="申请总金额" label-width="95px" :prop="mapFields.applyAmount" v-if="isApply">
          <digital-input
            :values="ruleForm[mapFields.applyAmount]"
            :placeholder="'采购毛利率'"
            :min="0"
            :position="'right'"
            :precision="2"
            :size="'mini'"
            :controls="false"
            :append="'元'"
            @reschange="number_change($event)"
          />
        </el-form-item>

        <el-form-item label="发票类型" :prop="mapFields.invoiceType">
          <el-select v-model="ruleForm[mapFields.invoiceType]" style="width:400px" placeholder="发票类型">
            <el-option />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" :prop="mapFields.remark">
          <el-input placeholder="备注" v-model="ruleForm[mapFields.remark]" style="width:400px" type="textarea" />
        </el-form-item>
      </li>
    </ul>

    <div style="width:980px;display:flex;justify-content:flex-end;margin-bottom:10px">
      <el-button size="mini" type="primary" @click="onSubmit">保存</el-button>
    </div>
    
  </el-form>
</template>

<script>
const mapFields = {
  invoiceTitle:'invoiceTitle', //发票抬头
  invoiceType:'invoiceType', //发票类型
  applyAmount:'applyAmount', //申请总金额
  remark:'remark' // 备注
}

export default {
  name:'CreateInvoiceNode',
  props:['isApply'],  //isApply 是否为创建开票申请
  data(){
      return {
          invoiceColumns:[
            {
              prop: 'todo',
              label: '抬头',
              span:24
            },
            {
              prop: 'todo',
              label: '纳税人识别号',
              span:24
            },
            {
              prop: 'todo',
              label: '地址、电话',
              span:24
            },
            {
              prop: 'todo',
              label: '开户行及账号',
              span:24
            }
          ],
          mapFields,
          newTime:"",
          ruleForm:{
            [mapFields.invoiceTitle]:'',
            [mapFields.invoiceType]:"",
            [mapFields.applyAmount]:"",
            [mapFields.remark]:""
          },
          rules:{
            [mapFields.invoiceTitle]:[
              {
                required:true,
                trigger:'change',
                message:'请输入发票抬头'
              }
            ],
            [mapFields.invoiceType]:[
              {
                required:true,
                trigger:'change',
                message:'请选择发票类型'
              }
            ],
            [mapFields.applyAmount]:[
              {
                required:true,
                trigger:'change',
                message:'请输入申请总金额'
              }
            ],
            [mapFields.remark]:[
              {
                required:true,
                trigger:'change',
                message:'请输入发票备注'
              }
            ]
          }
      }
  },
  methods:{
    async onSubmit(){
      try {
        await this.$refs.ruleForm.validate()
        this.$emit('confirm',this.ruleForm)
      }catch(err){
        console.log(err)
      }
    },
    number_change(e) {
      this.ruleForm[mapFields.applyAmount] = e || 0
    },
  }
}
</script>
