<script setup lang="ts" name="replace-mgr">
import type { MjGridProps } from '#/components/mj/mj-table'

import { wordBookReplaceService } from '#/api/service/word-book/word-book-replace'
import MjTable, { mj_form_input } from '#/components/mj/mj-table'
import UploadDia from '#/components/upload-dia/index.vue'

// 表单
const editForm = {
  form: {
    items: [
      {
        required: true,
        field: 'origin',
        title: '旧',
        span: 24,
        itemRender: {
          name: mj_form_input,
        },
      },
      {
        required: true,
        field: 'target',
        title: '新',
        span: 24,
        itemRender: {
          name: mj_form_input,
        },
      },
    ],
    data: {},
  },
  updateFields: ['id', 'origin', 'target'],
} as any

// 表格
const gridRef = ref()
const grid = {
  columns: [
    { type: 'seq' },
    {
      field: 'origin',
      title: '旧',
    },
    { field: 'target', title: '新' },
  ],
} as MjGridProps

// 导入数据
const showUpload = ref(false)
async function importData() {
  showUpload.value = true
}
</script>

<template>
  <div class="replace-mgr g-container">
    <MjTable
      ref="gridRef"
      :edit-form="editForm"
      :grid="grid"
      :service="wordBookReplaceService"
    >
      <template #toolbarButtonsExtra>
        <el-button type="primary" @click="importData">导入</el-button>
      </template>
    </MjTable>

    <UploadDia
      v-model="showUpload"
      title="导入替换词"
      accept="application/json"
      action="/api/main/wordtransform/importData"
      placeholder="仅支持json文件"
      name="file"
      @on-refresh="gridRef?.reload"
    />
  </div>
</template>

<style lang="scss" scoped>
.replace-mgr {
  height: 100% !important;
}
</style>
