import {
  DataTableColumn,
  NButton,
  NDataTable,
  NModal,
  NSpace,
  NTab,
  NTabPane,
  NTabs,
  useDialog,
  useMessage
} from 'naive-ui'
import { defineComponent, onMounted, reactive } from 'vue'
import {
  examinationKnowledgePointCategoryDel,
  examinationKnowledgePointCategoryPage
} from '../../api'
import styles from '../index.module.less'
import AddExamination from '../model/addExamination'

export default defineComponent({
  name: 'examination-site-management',
  setup() {
    const dialog = useDialog()
    const message = useMessage()
    const data = reactive({
      pagination: {
        page: 1,
        rows: 1000,
        total: 0
      },
      loading: false,
      active: '',
      list: [] as any
    })
    const modelData = reactive({
      open: false,
      isAdd: true,
      item: null as any
    })
    // 删除分类
    const handleDelete = (row: any) => {
      dialog.warning({
        title: '警告',
        content: '是否确认删除此类型?',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          const res = await examinationKnowledgePointCategoryDel(row.categoryId)
          if (res.data) {
            getList()
            message.success('删除成功')
          }
        }
      })
    }
    const columns = (): DataTableColumn[] => {
      return [
        {
          title: '考点名称',
          key: 'name'
        },
        {
          title: '编号',
          key: 'categoryId'
        },

        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 180,
          render(row: any) {
            return (
              <NSpace>
                <NButton
                  type="primary"
                  text
                  onClick={() => {
                    modelData.item = {
                      parentId: row.categoryId
                    }
                    modelData.open = true
                  }}
                >
                  添加类型
                </NButton>
                <NButton
                  type="primary"
                  text
                  onClick={() => {
                    modelData.item = row
                    modelData.open = true
                    modelData.isAdd = false
                  }}
                >
                  修改
                </NButton>
                <NButton type="primary" text onClick={() => handleDelete(row)}>
                  删除
                </NButton>
              </NSpace>
            )
          }
        }
      ]
    }

    // 获取数据
    const getList = async () => {
      data.loading = true
      try {
        const res: any = await examinationKnowledgePointCategoryPage({
          page: data.pagination.page,
          rows: data.pagination.rows,
          keyword: ''
        })
        if (Array.isArray(res?.data?.rows)) {
          data.list = res.data.rows
          data.pagination.total = res.data.total
        }
      } catch (error) {}
      data.loading = false
    }
    onMounted(() => {
      getList()
    })
    return () => (
      <div class={styles.examination}>
        <NSpace style={{ paddingBottom: '12px' }}>
          <NButton
            type="primary"
            //v-auth="materialCategory/save1599962104022290433"
            onClick={() => {
              modelData.item = null
              modelData.open = true
              modelData.isAdd = true
            }}
          >
            新增类型
          </NButton>
        </NSpace>
        <NDataTable
          loading={data.loading}
          columns={columns()}
          data={data.list}
          children-key="children"
          default-expand-all={false}
          row-key={(row: any) => row.categoryId}
        ></NDataTable>

        <NModal
          v-model:show={modelData.open}
          preset="dialog"
          showIcon={false}
          title={modelData.isAdd ? '新增类型' : '修改类型'}
          style={{ width: '400px' }}
          onClose={() => {
            modelData.item = null
          }}
        >
          <AddExamination
            item={modelData.item}
            list={data.list}
            isAdd={modelData.isAdd}
            onClose={() => {
              modelData.open = false
            }}
            onHandleSuccess={() => {
              modelData.open = false
              if (!modelData.item) {
                data.pagination.page = 1
              }
              getList()
            }}
          />
        </NModal>
      </div>
    )
  }
})
