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

import { wordBookBookService } from '#/api/service/word-book/word-book-book'
import MjTable, { mj_form_input, mj_form_text } from '#/components/mj/mj-table'

import { useSearchStageVersion } from '../hooks/search'

const gridRef = ref()

const { stageRender, versionRender } = useSearchStageVersion({
  prepare: { gridRef },
})

// 搜索表单
const searchForm = {
  items: [
    {
      title: '阶段',
      field: 'stageId',
      span: 6,
      itemRender: stageRender,
    },
    {
      title: '版本',
      field: 'versionId',
      span: 6,
      itemRender: versionRender,
    },
  ],
} as MjFormProps

const updateItems = [
  {
    required: true,
    field: 'name',
    title: '教材',
    span: 24,
    itemRender: {
      name: mj_form_input,
    },
  },
] as any

const addItems = [
  ...updateItems,
  {
    required: true,
    field: 'stageName',
    title: '阶段',
    span: 24,
    itemRender: {
      name: mj_form_text,
      props: {
        linkedRender: stageRender,
      },
    },
  },
  {
    field: 'versionName',
    title: '版本',
    span: 24,
    itemRender: {
      name: mj_form_text,
      props: {
        linkedRender: versionRender,
      },
    },
  },
]

// 表单
const editForm = {
  addForm: {
    items: addItems,
  },
  updateForm: {
    items: updateItems,
  },
  form: {
    data: {},
  },
  addFields: ['versionId', 'name'],
  updateFields: ['id', 'name'],
} as MjEditFormProps

// 表格
const grid = {
  columns: [
    { type: 'seq' },
    {
      field: 'stageName',
      title: '阶段',
    },
    {
      field: 'versionName',
      title: '版本',
    },
    {
      field: 'name',
      title: '年级',
    },
    {
      field: 'allWordCount',
      title: '单词数',
    },
    {
      title: '操作',
      slots: {
        default: 'operation',
      },
    },
  ],
} as MjGridProps

// 导入数据
const showImport = ref(false)
const importBook = ref({} as any)
function importData(row: any) {
  importBook.value = {
    textbookId: row.id,
  }
  showImport.value = true
}
</script>

<template>
  <div class="book-mgr g-container">
    <MjTable
      ref="gridRef"
      :search-form="searchForm"
      :edit-form="editForm"
      :grid="grid"
      :service="wordBookBookService"
      v-bind="$attrs"
    >
      <template #operation="{ row }">
        <el-button type="primary" @click="importData(row)"> 导入 </el-button>
      </template>
    </MjTable>

    <UploadDia
      v-model="showImport"
      title="导入单词书数据"
      accept="application/json"
      action="/api/main/textbook/import"
      placeholder="仅支持json文件"
      :data="importBook"
      name="file"
    />
  </div>
</template>

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