<template>
  <el-dialog :visible="innerVisible" title="上传发票" align="center" @close="handleClose" :close-on-click-modal="false">
    <el-form :rules="rules" :model="ruleForm" ref="ruleForm"  label-width="90px" size="mini">
      <el-form-item label="扫码枪">
        <el-input v-model="scanValue" type="textarea" placeholder="请在扫码完成后手动回车" @keyup.native.enter="handleEnterParse" />
      </el-form-item>
      <el-form-item label="发票类型" prop="invoiceType">
        <el-select v-model="ruleForm.invoiceType" style="width:100%" placeholder="发票类型">
          <el-option />
        </el-select>
      </el-form-item>
      <el-form-item label="发票代码" prop="invoiceCode">
        <el-input v-model="ruleForm.invoiceCode" placeholder="发票代码" />
      </el-form-item>
      <el-form-item label="发票号码" prop="invoiceNumber">
        <el-input v-model="ruleForm.invoiceNumber"  placeholder="发票号码" />
      </el-form-item>
      <el-form-item label="税前金额" prop="beforeTax">
        <el-input v-model="ruleForm.beforeTax" placeholder="税前金额" />
      </el-form-item>
      <el-form-item label="校验码" prop="checkNumber">
        <el-input v-model="ruleForm.checkNumber"  placeholder="校验码" />
      </el-form-item>
      <el-form-item label="开票日期" prop="openTime">
        <el-date-picker v-model="ruleForm.openTime" style="width:100%" placeholder="开票日期" />
      </el-form-item>

      <el-form-item style="display:flex;justify-content:flex-end">
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import dayjs from "dayjs"
import { manuallyUploadRules, mapFields } from "./_template"

/***
 * @props
 * 发票申请编号 invoiceNo
 * 发票状态 invoiceStatus
 * 发票类型 invoiceType
 * 发票号码 invoiceNumber
 * 发票代码 invoiceCode
 * 发票名称 invoiceName
 * 开票日期 openTime
 * 税前金额 beforeTax
 * 税后金额 afterTax
 * 校验码 checkNumber
*/

export default {
  props:['visible'],
  computed:{
    innerVisible:{
      get(){
        return this.visible
      },
      set(newVal){
        this.$emit('update:visible',newVal)
      }
    }
  },
  data(){
    return {
      scanValue:"",
      rules:manuallyUploadRules,
      mapFields,
      ruleForm:{
        invoiceType:"",
        invoiceCode:"",
        beforeTax:"",
        openTime: "",
        invoiceNumber:"",
        checkNumber:""
      }
    }
  },
  methods:{
    handleClose(){
      this.innerVisible = false
    },
    handleEnterParse(evt){
      /* 校验是否有中文逗号 **/
      if(this.scanValue.indexOf('，') >= 0){
        this.scanValue = ""
        this.$message.error("不能包含中文逗号")
        return
      }
      
      const result = this.scanValue.split(",")
      if(result.length !== 8 && result.length !== 9){
        this.scanValue = ""
        this.$message.error("扫码枪识别数据格式不正确,请重新扫描")
      }
      
      const [_1,invoiceType,invCode,invNumber,subtotal_amount,open_time,checkNumber] = result
      let _open_time = ""
      
      if(open_time){
        const year = open_time.slice(0, 4);
        const month = open_time.slice(4, 6);
        const day = open_time.slice(6);
        _open_time = dayjs(`${year}-${month}-${day}`).format("YYYY-MM-DD HH:mm:ss");
      }
      
      this.scanValue = ""
      const { invoice } = mapPropertys
      this.ruleForm = {
        invoiceType:invoiceType,
        invoiceCode:invCode,
        beforeTax:subtotal_amount,
        openTime: _open_time,
        invoiceNumber:invNumber,
        checkNumber:checkNumber
      }
    },
    async onSubmit(){
      try{
        await this.$refs.ruleForm.validate()
        console.log('todo...')
      }catch(err){
        console.log(err)
      }
    }
  }
}
</script>
