import SaveForm from '@/components/save-form'
import Pagination from '@/components/pagination'
import { NButton, NDataTable, NModal, NSpace, useDialog, useMessage } from 'naive-ui'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { helpCenterCatalogPage, helpCenterCatalogRemove } from '../../api'
import HelpCenterCategoryOperation from '../modal/help-center-category-operation'

export default defineComponent({
  name: 'content-flash',
  setup() {
    const dialog = useDialog()
    const message = useMessage()
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      dataList: [] as any,
      visiableCategory: false,
      categoryOperation: 'add',
      categoryData: {} as any
    })

    const columns = () => {
      return [
        {
          title: '编号',
          key: 'id'
        },
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '操作',
          key: 'operation',
          render(row: any) {
            return (
              <NSpace>
                <NButton
                  type="primary"
                  size="small"
                  text
                  //v-auth="helpCenterCatalog/update1599694974123089922"
                  onClick={() => {
                    state.visiableCategory = true
                    state.categoryOperation = 'edit'
                    state.categoryData = row
                  }}
                >
                  修改
                </NButton>
                <NButton
                  type="primary"
                  size="small"
                  text
                  onClick={() => onRmove(row)}
                  //v-auth="helpCenterCatalog/remove1599695049448595458"
                >
                  删除
                </NButton>
              </NSpace>
            )
          }
        }
      ]
    }

    const onRmove = (row: any): void => {
      console.log(row, 'row')
      dialog.warning({
        title: '警告',
        content: `是否删除该数据？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await helpCenterCatalogRemove({ id: row.id })
            getList()
            message.success('删除成功')
          } catch {}
        }
      })
    }

    const getList = async () => {
      try {
        state.loading = true
        const { data } = await helpCenterCatalogPage({ ...state.pagination })
        state.loading = false
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {
        state.loading = false
      }
    }

    onMounted(() => {
      getList()
    })
    return () => (
      <div class="system-menu-container">
        <div class={['section-container']}>
          <NSpace style={{ paddingBottom: '12px' }}>
            <NButton
              type="primary"
              //v-auth="helpCenterCatalog/save1599694895257591809"
              onClick={() => {
                state.visiableCategory = true
                state.categoryOperation = 'add'
                state.categoryData = {}
              }}
            >
              添加分类
            </NButton>
          </NSpace>

          <NDataTable
            loading={state.loading}
            columns={columns()}
            data={state.dataList}
          ></NDataTable>
          <Pagination
            v-model:page={state.pagination.page}
            v-model:pageSize={state.pagination.rows}
            v-model:pageTotal={state.pagination.pageTotal}
            onList={getList}
            sync
            saveKey="help-center-category"
          ></Pagination>
        </div>
        <NModal
          v-model:show={state.visiableCategory}
          preset="dialog"
          showIcon={false}
          title={state.categoryOperation === 'add' ? '新增帮助分类' : '修改帮助分类'}
          style={{ width: '500px' }}
        >
          <HelpCenterCategoryOperation
            type={state.categoryOperation}
            data={state.categoryData}
            onClose={() => (state.visiableCategory = false)}
            onGetList={getList}
          />
        </NModal>
      </div>
    )
  }
})