import SaveForm from '@/components/save-form'
import Pagination from '@/components/pagination'
import { getTimes } from '@/utils/dateUtil'
import {
  DataTableColumn,
  NButton,
  NDataTable,
  NDatePicker,
  NFormItem,
  NInput,
  NModal,
  NSelect,
  NSpace,
  NTooltip,
  useDialog,
  useMessage
} from 'naive-ui'
import { defineComponent, onMounted, reactive, ref, provide } from 'vue'
import { employeeArray } from '@/utils/searchArray'
import dayjs from 'dayjs'
import { lessonTrainingPage, lessonTrainingRemove } from '../../api'
import { InternalRowData } from 'naive-ui/es/data-table/src/interface'
import { useRouter } from 'vue-router'
import { knowledgeTypeData, lessonType } from '@/views/knowledge-manage/knowledgeTypeData'

export default defineComponent({
  name: 'after-class-training-manage',
  emits: ['handleSuccess'],
  props: {
    courseTypeCode: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const router = useRouter()
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      dataList: [] as any
    })

    const searchForm = reactive({
      keyword: '',
      time: null,
      operatorId: null
    })

    const getList = async () => {
      try {
        state.loading = true
        const { time, ...reset } = searchForm
        const { data } = await lessonTrainingPage({
          ...reset,
          ...getTimes(searchForm.time, ['startUpdateTime', 'endUpdateTime']),
          enableFlag: true,
          courseType: props.courseTypeCode,
          page: state.pagination.page,
          rows: state.pagination.rows
        })
        state.loading = false
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {
        state.loading = false
      }
    }

    onMounted(() => {
      getList()
    })

    // 打开详情
    const openDetail = (row?: any) => {
      emit('handleSuccess', row)
    }

    const columns = (): DataTableColumn[] => {
      return [
        {
          title: '训练名称',
          key: 'name',
          fixed: 'left'
        },
        {
          title: '编号',
          key: 'id'
        },

        {
          title: '课程类型',
          key: 'courseTypeName',
          width: 200,
          ellipsis: true,
          render(row: InternalRowData) {
            return (
              <NTooltip placement="top-start">
                {{
                  default: () => row.courseTypeName,
                  trigger: () => row.courseTypeName
                }}
              </NTooltip>
            )
          }
        },
        {
          title: '训练条数',
          key: 'trainingNum'
        },
        {
          title: '更新时间',
          key: 'updateTime'
        },
        {
          title: '更新人',
          key: 'operatorName'
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          render(row: any) {
            return (
              <NSpace>
                <NButton type="primary" size="small" text onClick={() => openDetail(row)}>
                  添加
                </NButton>
              </NSpace>
            )
          }
        }
      ]
    }

    const saveForm = ref()
    const onSubmit = () => {
      state.pagination.page = 1
      getList()
    }

    const onSearch = () => {
      saveForm.value?.submit()
    }
    const onBtnReset = () => {
      saveForm.value?.reset()
    }

    return () => (
      <div>
        <SaveForm
          ref={saveForm}
          model={searchForm}
          onSubmit={onSubmit}
          onSetModel={(val: any) => Object.assign(searchForm, val)}
          saveKey="selectAfterClassTraining-key"
        >
          <NFormItem path="search">
            <NInput v-model:value={searchForm.keyword} placeholder="训练名称/编号" clearable />
          </NFormItem>
          {/* <NFormItem label="课程类型" path="courseType">
            <NSelect clearable v-model:value={searchForm.courseType} options={lessonType} />
          </NFormItem> */}
          <NFormItem path="time">
            <NDatePicker
              value-format="yyyy-MM-dd HH:mm:dd"
              v-model:value={searchForm.time}
              type="daterange"
              clearable
            ></NDatePicker>
          </NFormItem>
          <NFormItem>
            <NSpace>
              <NButton type="primary" onClick={onSearch}>
                搜索
              </NButton>
              <NButton type="default" onClick={onBtnReset}>
                重置
              </NButton>
            </NSpace>
          </NFormItem>
        </SaveForm>

        <NDataTable
          scrollX={1300}
          loading={state.loading}
          columns={columns()}
          data={state.dataList}
          childrenKey="children"
          default-expand-all={false}
          row-key={(row: any) => row.id}
        ></NDataTable>
        <Pagination
          saveKey="selectAfterClassTraining-key"
          v-model:page={state.pagination.page}
          v-model:pageSize={state.pagination.rows}
          v-model:pageTotal={state.pagination.pageTotal}
          onList={getList}
          sync
        ></Pagination>
      </div>
    )
  }
})
