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

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

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

const gridRef = ref()

const bookRender = useSearchBook({
  prepare: {
    gridRef,
  },
  props: {
    title: (book: any) => {
      return `${book.stageName}·${book.versionName}·${book.name}`
    },
  },
})

const updateItems = [
  {
    required: true,
    field: 'name',
    title: '章节',
    span: 24,
    itemRender: {
      name: mj_form_input,
      props: { clearable: true },
    },
  },
] as any
const addItems = [
  ...updateItems,
  {
    required: true,
    field: 'textbookName',
    title: '教材',
    span: 24,
    itemRender: {
      name: mj_form_text,
      props: {
        linkedRender: bookRender,
      },
    },
  },
] as any

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

// 搜索表单
const searchForm = {
  items: [
    {
      title: '教材',
      field: 'textbookId',
      span: 6,
      itemRender: bookRender,
    },
  ],
} as MjFormProps

// 表格
const grid = {
  columns: [
    { type: 'seq' },
    {
      title: '教材',
      formatter: (params: any) => {
        const row = params.row
        return `${row.stageName}·${row.versionName}·${row.textbookName}`
      },
    },
    {
      field: 'name',
      title: '章节',
    },
    {
      field: 'allWordCount',
      title: '单词数',
    },
  ],
} as MjGridProps
</script>

<template>
  <div class="chapter-mgr g-container">
    <MjTable
      ref="gridRef"
      :search-form="searchForm"
      :edit-form="editForm"
      :grid="grid"
      :service="wordBookChapterService"
      v-bind="$attrs"
    />
  </div>
</template>

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