<template>
  <cacp-search-layout>
    <template #search>
      <cacp-search-panel-layout label-position="left" :gutter="30" :colSpan="8">
        <el-form-item label="年份">
          <el-input v-model="model.year"></el-input>
        </el-form-item>
        <template #buttonGroup>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <!-- <el-button type="info" @click="onReset">重置</el-button> -->
        </template>
      </cacp-search-panel-layout>
    </template>
    <cacp-complex-table :actions="actions" :data="tableData" stripe v-loading="loading">
      <template #title>
        <el-row justify="space-between" align="middle">
          <span class="cacp-group__title">节假日列表</span>
          <el-upload
            action="#"
            :multiple="false"
            :show-file-list="false"
            :auto-upload="false"
            accept=".xlsx,.xls"
            :on-change="onUpload"
          >
            <template #trigger>
              <el-button type="primary">
                <template #icon>
                  <el-icon><Upload /></el-icon>
                </template>
                上传excel
              </el-button>
            </template>
          </el-upload>
        </el-row>
      </template>
      <el-table-column prop="holidayDate" label="日期"></el-table-column>
      <el-table-column prop="holidayName" label="名称"></el-table-column>
      <el-table-column prop="holidayFlag" label="标志"></el-table-column>
    </cacp-complex-table>
  </cacp-search-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type UploadFile, type UploadProps } from 'element-plus'
import * as xlsx from 'xlsx'
import { SuccessResultCode, useComplexTable, useLoading, type Result, type TableAction } from '@cacp/ui'
import config from '@/config'
import type { CacpHoliday } from '@/types/holiday'
import * as apis from '@/apis/holiday'

const router = useRouter()
const { loading, setLoading } = useLoading()
const { tableData, setData } = useComplexTable(config)

const actions: Array<TableAction> = [
  {
    key: 'view',
    text: '查看',
    limit: 'none',
    onclick: onView
  }
]

const model = ref({
  year: 2024
})

async function onQuery(): Promise<void> {
  setLoading(true)

  const res: Result<Array<CacpHoliday>> = await apis.getList(config.CUSTOMS_CODE, model.value.year)
  if (res.code === SuccessResultCode && res.data) {
    setData(res.data)
  } else {
    ElMessage.error({
      message: res.message,
      showClose: true
    })
  }

  setLoading(false)
}

async function onView() {
  router.push({
    path: '/holiday/view',
    query: { year: model.value.year }
  })
}

const onUpload: UploadProps['onChange'] = (file: UploadFile): void => {
  const reader = new FileReader()
  reader.onload = async (ev: ProgressEvent<FileReader>): Promise<void> => {
    const workbook = xlsx.read(ev.target?.result, { type: 'buffer' })
    const worksheet = workbook.Sheets[workbook.SheetNames[0]]
    const data = xlsx.utils.sheet_to_json(worksheet) as Array<CacpHoliday>

    console.log(data)
    const res = await apis.saveList(data)
    if (res.code === SuccessResultCode) {
      ElMessage.success('保存成功')
      onQuery()
    }
  }
  reader.readAsArrayBuffer(file.raw!)
}
</script>
