import Pagination from '@/components/pagination'
import {
  NButton,
  NDataTable,
  NDatePicker,
  NFormItem,
  NIcon,
  NInput,
  NModal,
  NSelect,
  NSpace,
  NTag,
  NTooltip,
  useDialog,
  useMessage
} from 'naive-ui'
import { HelpCircleOutline } from '@vicons/ionicons5'
import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
import { sysUserLoginLogPage } from './api'
// import { filterClientType } from '@/utils/filters'
import SaveForm from '@/components/save-form'
// import { clientTypeArray } from '@/utils/searchArray'
import { getTimes } from '@/utils/dateUtil'
import OperationForms from './operation-forms'

export default defineComponent({
  name: 'login-log',
  setup() {
    const message = useMessage()
    const dialog = useDialog()
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        keyword: '',
        clientType: '',
        timer: null as any
      },
      dataList: [] as any,
      clientTypeList: [
        { value: 'BACKEND', label: '后台' },
        { value: 'SCHOOL', label: '管理端' },
        { value: 'TEACHER', label: '老师端' },
        { value: 'STUDENT', label: '学生端' },
        { value: 'REPAIR', label: '维修端' }
      ] as any,
      visiableMenu: false
    })

    const columns = () => {
      return [
        {
          title: '用户编号',
          key: 'userId'
        },
        {
          title: '登录用户',
          key: 'nickname'
        },
        {
          title: '登录账户',
          key: 'phone'
        },
        {
          title: '登录状态',
          key: 'successFlag',
          render(row: any) {
            return (
              <NTag type={row.successFlag ? 'success' : 'default'}>
                {row.successFlag ? '成功' : '失败'}
              </NTag>
            )
          }
        },
        {
          title: '登录IP',
          key: 'loginIp'
        },
        {
          title: '登录时间',
          key: 'loginTime'
        },
        {
          title: '登录地点',
          key: 'loginRegion'
        },
        {
          title: '操作',
          key: 'operation',
          render(row: any) {
            return (
              <NSpace>
                <NButton type="primary" text size="small" onClick={() => onRmove()}>
                  删除
                </NButton>
              </NSpace>
            )
          }
        }
      ]
    }

    const getList = async () => {
      state.loading = true
      try {
        const { timer, ...rest } = state.searchForm
        const { data } = await sysUserLoginLogPage({
          ...state.pagination,
          ...rest,
          ...getTimes(state.searchForm.timer, ['startTime', 'endTime'])
        })

        state.pagination.pageTotal = Number(data.total)

        state.dataList = data.rows || []
      } catch {}
      state.loading = false
    }

    const onRmove = () => {
      dialog.warning({
        title: '警告',
        content: `删除，是否继续？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            message.success('删除成功')
          } catch {}
        }
      })
    }

    const saveForm = ref()
    const onSubmit = () => {
      state.pagination.page = 1
      getList()
    }
    const onSearch = () => {
      saveForm.value?.submit()
    }
    const onBtnReset = () => {
      saveForm.value?.reset()
    }

    onMounted(() => {
      getList()
    })
    return () => (
      <div class="system-menu-container">
        <SaveForm
          ref={saveForm}
          model={state.searchForm}
          onSubmit={onSubmit}
          // label-width=""
          saveKey="loginLog-log"
          onSetModel={(val: any) => (state.searchForm = val)}
        >
          <NFormItem label="关键字" path="keyword">
            <NInput
              clearable
              v-model:value={state.searchForm.keyword}
              placeholder="姓名/手机号/编号"
            />
          </NFormItem>
          <NFormItem label="客户端" path="clientType">
            <NSelect
              clearable
              filterable
              v-model={[state.searchForm.clientType, 'value']}
              placeholder="请选择客户端"
              options={state.clientTypeList}
            />
          </NFormItem>
          <NFormItem path="time" label="登录时间">
            <NDatePicker v-model:value={state.searchForm.timer} type="daterange" clearable />
          </NFormItem>
          <NFormItem>
            <NSpace>
              <NButton type="primary" onClick={onSearch}>
                搜索
              </NButton>
              <NButton type="default" onClick={onBtnReset}>
                重置
              </NButton>
            </NSpace>
          </NFormItem>
        </SaveForm>
        <div class={['section-container']}>
          <NSpace style={{ paddingBottom: '12px' }}>
            <NButton type="primary" onClick={() => (state.visiableMenu = true)}>
              添加日志
            </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="loginLog-log"
          ></Pagination>
        </div>

        <NModal
          v-model:show={state.visiableMenu}
          preset="dialog"
          showIcon={false}
          title={'添加菜单'}
          style={{ width: '700px' }}
        >
          <OperationForms onClose={() => (state.visiableMenu = false)} type="add" />
        </NModal>
      </div>
    )
  }
})
