<template>
  <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-position="left" label-width="95px" size="mini" v-loading="loading">
      <el-row gutter="20">
        <el-col :span="12">
          <el-form-item label="发票类型" prop="invoice_type">
            <el-select v-model="ruleForm.invoice_type" style="width:100%" placeholder="发票类型">
              <el-option 
                v-for="invoice in invoiceTypeList" 
                :key="invoice.value" 
                :value="invoice.value" 
                :label="invoice.label"  
              />
            </el-select>
          </el-form-item>


          <el-form-item label="备注" prop="remark">
            <el-input placeholder="备注" v-model="ruleForm.remark" style="width:100%" type="textarea" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="发票抬头" prop="invoice_id">
            <search-invoice-title 
              :value.sync="ruleForm.invoice_id" 
              @change="_invoiceInfo => invoiceInfo = _invoiceInfo" 
              style="width:100%"
              placeholder="请选择发票抬头" 
            >
    
            </search-invoice-title>
          </el-form-item>

          <show-data-table 
            v-if="invoiceInfo"
            :sitem="invoiceInfo"
            style="padding: -5px 0 10px 0"
            :newTime="newTime"
            :columns="invoiceColumns"
          />
        </el-col>
      </el-row>

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

<script>
import demandRequest from "@/apis/service/customerService/demandOrder";
import { demandStatusOptions, invoiceTypeList } from '@/assets/js/statusList'
import asyncRequest from "@/apis/service/customerService/invoiceApply";

  /** 
  * @props
  * req_id 需求订单
    invoice_id /发票抬头
    invoice_type 发票类型
    total_amount 申请总金额
    remark // 备注
  */

export default {
  name:'CreateInvoiceNode',
  props:['isApply'],  //isApply 是否为创建开票申请
  data(){
      return {
        loading: false,
        demandStatusOptions,
        invoiceTypeList,
        demandInfo : null,
        invoiceInfo: null,
        demandVisible:false,
          invoiceColumns:[
            {
              prop: 'title',
              label: '抬头',
              span:24
            },
            {
              prop: 'tax_no',
              label: '纳税人识别号',
              span:24
            },
            {
              prop: 'tel',
              label: '地址、电话',
              span:24,
              // _slot_: 'tel'
            },
            {
              prop: 'bank_account',
              label: '开户行及账号',
              span:24
            }
          ],
          newTime:"",
          demandVisible: false,
          ruleForm:{
            req_id:"",
            invoice_id:"", //发票抬头
            invoice_type:"", //发票类型
            total_amount:"", //申请总金额
            remark:"", // 备注
          },
          rules:{
            invoice_id:[
              {
                required:true,
                trigger:'change',
                message:'请输入发票抬头'
              }
            ],
            req_id:[
               {
                required:true,
                trigger:'change',
                message:'请选择需求订单'
              }
            ],
            invoice_type:[
              {
                required:true,
                trigger:'change',
                message:'请选择发票类型'
              }
            ],
            total_amount:[
              {
                required:true,
                trigger:'change',
                message:'请输入申请总金额'
              }
            ],
            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)
      }
    },
  }
}
</script>
