<template>
  <div v-loading="loading">
    <div style="display:flex;justify-content:flex-end">
      <el-button size="mini" @click="onDownloadTemplate">下载发票模板</el-button>
      <el-button size="mini" type="primary" @click="xlsxVisible = true">上传发票信息</el-button>
    </div>
    <el-table size="mini" style="margin-top:10px" border :data="list">
      <!-- <el-table-column label="发票申请编号" prop="invoiceNo"></el-table-column> -->
      <!-- <el-table-column label="发票状态" :prop="mapFields/invoiceStatus']"></el-table-column> -->
      <el-table-column label="发票类型" :prop="mapFields.invoiceType">
        <template slot-scope="scope">
          {{invoiceTypeList.find(({value}) => value === scope.row[mapFields.invoiceType]).label}}
        </template>
      </el-table-column>
      <el-table-column label="发票代码" :prop="mapFields.invoiceCode"></el-table-column>
      <el-table-column label="发票号码" :prop="mapFields.invoiceNumber"></el-table-column>
      <el-table-column label="开票日期" :prop="mapFields.openTime"></el-table-column>
      <el-table-column label="税前金额" :prop="mapFields.beforeTax"></el-table-column>
      <el-table-column label="税后金额" :prop="mapFields.afterTax"></el-table-column>
      <el-table-column label="校验码" :prop="mapFields.checkNumber"></el-table-column> 
      <el-table-column label="操作">
        <template #header>
          <div style="display:flex;justify-content:space-between;">
            <span>操作</span>
            <el-button size="mini" type="text" @click="onCreateItem">添加</el-button>
          </div>
        </template>

        <template slot-scope="scope">
          <el-button @click="deleteItem(scope.$index)" size="mini" type="text">删除</el-button>
          <el-button @click="onUpdateItem(scope.$index)" size="mini" type="text">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="display:flex;justify-content:flex-end;padding:10px 0px">
      <el-button size="mini" type="primary" @click="onSave">保存</el-button>
    </div>

    <manually-upload-modal 
      :visible.sync="manuallyVisible"
      :updateItem="updateItem"
      :updateIndex="updateIndex"
      @change="handleModalChange" 
    />
    <excel-upload-modal :visible.sync="xlsxVisible" @change="handleUploadChange" />
  </div>
</template>


<script>
import ManuallyUploadModal from "./manuallyUploadModal.vue"
import ExcelUploadModal from "./xlsxUploadModal.vue"
import { template,mapFields } from "./_template"
import { writeFile, utils } from "xlsx";
import { invoiceTypeList } from '@/assets/js/statusList';
/***
 * @props
 * 发票申请编号 invoiceNo
 * 发票状态 invoiceStatus
 * 发票类型 invoiceType
 * 发票号码 invoiceNumber
 * 发票代码 invoiceCode
 * 发票名称 invoiceName
 * 开票日期 openTime
 * 税前金额 beforeTax
 * 税后金额 afterTax
 * 校验码 checkNumber
*/

export default {
  props:['requestMethod'],
  name:'UploadInvoiceNode',
  components:{
    ManuallyUploadModal,
    ExcelUploadModal
  },
  data(){
    return {
      invoiceTypeList,
      mapFields,
      manuallyVisible: false,
      xlsxVisible: false,
      loading: false,
      list: [],
      updateIndex: -1,
      updateItem:null
    }
  },
  methods:{
    onCreateItem(){
      this.updateIndex = -1
      this.updateItem = null
      this.manuallyVisible = true
    },
    onUpdateItem(index){
      this.updateIndex = index
      this.updateItem = this.list[index]
      this.manuallyVisible = true
    },
    deleteItem(index){
      this.list.splice(index, 1)
    },
    handleUploadChange(list){
      this.list = [...this.list,...list]
    },
    handleModalChange({data,index}){
      if(index === -1){
        this.list.push(data)
        return
      }

      this.$set(this.list,index,{
        ...data
      })
    },
    async onSave(){
      this.loading = true
      const { code , data } = await this.requestMethod(this.list)
      this.loading = false
      if(code !== 1) return
      this.$emit("refresh")
    },
    onDownloadTemplate(){
      const workBook = utils.book_new()
      const workSheet = utils.json_to_sheet(template)
      utils.book_append_sheet(workBook,workSheet,"sheet")
      writeFile(workBook,"开票模板.xlsx",{
        bookType:'xlsx'
      })
    }
  }
}
</script>
