<template>
  <div style="margin-bottom:10px">
    <div style="display:flex;justify-content:flex-end" v-if="!readonly">
      <el-button size="mini" @click="onDownloadTemplate">下载结算函模板</el-button>
      <el-button size="mini" type="primary" @click="handleUploadVisible">上传结算函</el-button>
    </div>

    <ex-table
      :columns="columns"
      :table="table"
      :data="planList"
      style="margin: 15px 0 0 0"
      noPagination
    >
      <template #is_check="{scope}">
        <el-tag size="mini" :type="String(scope.row.is_check) === '1' ? '' :'info'">
         {{String(scope.row.is_check) === "1" ?  "已选择" : "未选择"}}
        </el-tag>
      </template>

    </ex-table>
    <letter-modal :visible.sync="xlsxVisible" :sitem="sitem" :title="title" @refresh="refresh" />
  </div>
</template>

<script>
import { columns } from "./_columns"
import { template } from "./_template"
import LetterModal from "./xlsxUploadModal.vue"
import { writeFile, utils } from "xlsx";
import { budgetStatusOptions } from '@/assets/js/statusList';
import asyncRequest from "@/apis/service/customerService/workbench";

export default {
  name:'SettlementBudgetLetter',
  props:["sitem"],
  components:{ LetterModal },
  data(){
    return {
      currentId: 0,
      budgetStatusOptions,
      title: '结算函',
      table: {
        stripe: true,
        border: true,
        'max-height': '800px'
      },
      loading:true,
      template,
      columns,
      planList:[],
      xlsxVisible:false
    }
  },
  methods:{
    refresh(){
      this.$emit('refresh')
    },
    handleUploadVisible(){
      this.xlsxVisible = true
    },
    onDownloadTemplate(){
      const workBook = utils.book_new()
      const workSheet = utils.json_to_sheet(template)
      utils.book_append_sheet(workBook,workSheet,"sheet")
      writeFile(workBook,`${this.title}模板.xlsx`,{
        bookType:'xlsx'
      })
    }
  }
}
</script>
