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

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

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

const props = defineProps<{
  fixedStage?: any
  stageId?: any
  stageName?: any
}>()
const gridRef = ref()

const stageRender = useSearchStage({
  prepare: {
    gridRef,
    props,
    fixedName: 'stage',
  },
})

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,
      },
    },
  },
] as any

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

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

// 表格
const grid = {
  columns: [
    { type: 'seq' },
    {
      field: 'stageName',
      title: '阶段',
    },
    {
      field: 'name',
      title: '版本',
    },
  ],
} as MjGridProps
</script>

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

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