import Pagination from '@/components/pagination'
import {NButton, NDataTable, NDatePicker, NFormItem, NInput, NSelect, NSpace, NTag} from 'naive-ui'
import {defineComponent, onMounted, reactive, ref} from 'vue'
import {sysExceptionLogPage, sysSuggestionPage} from '../api'
import {filterClientType, filterSuggestionType} from '@/utils/filters'
import TheTooltip from '@/components/TheTooltip'
import SaveForm from "@components/save-form";
import {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
import {appKey, appType, clientType, deviceType, exceptionType} from "@/utils/constant";
import {filterTimes, getTimes} from "@/utils/dateUtil";

export default defineComponent({
  name: 'expection-log-index',
  setup() {
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        appKey: null,
        clientType: null,
        phone: null,
        appType: null,
        exceptionType: null,
        deviceType: null,
        exceptionTime: null,
        exceptionStartTime: null,
        exceptionEndTime: null,
      },
      dataList: [] as any
    })

    const saveForm = ref()


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


    const getList = async () => {
      try {
        state.loading = true
        const {data} = await sysExceptionLogPage({
          ...state.pagination,
          ...state.searchForm,
          ...getTimes(state.searchForm.exceptionTime, ['exceptionStartTime', 'exceptionEndTime']),
            },
        )
        state.loading = false
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {
        state.loading = false
      }
    }

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

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

    const columns = () => {
      return [
        {
          title: '应用标识',
          key: 'appKey',
          render(row: any) {
            return <div>{getMapValueByKey(row.appKey, new Map(Object.entries(appKey)))}</div>
          }
        },
        {
          title: '客户端类型',
          key: 'clientType',
          render(row: any) {
            return <div>{getMapValueByKey(row.clientType, new Map(Object.entries(clientType)))}</div>
          }
        },
        {
          title: '手机号',
          key: 'phone'
        },
        {
          title: '异常类型',
          key: 'exceptionType',
          render(row: any) {
            return <div>{getMapValueByKey(row.exceptionType, new Map(Object.entries(exceptionType)))}</div>
          }
        },
        {
          title: '客户端信息',
          key: 'userAgent',
          render(row: any) {
            return (
                <TheTooltip showContentWidth={280} content={row.userAgent}/>
            )
          }
        },
        {
          title: '应用类型',
          key: 'appType',
          render(row: any) {
            return <div>{getMapValueByKey(row.appType, new Map(Object.entries(appType)))}</div>
          }
        },
        {
          title: '设备类型',
          key: 'deviceType',
        },
        {
          title: '设备版本',
          key: 'deviceVersion'
        },
        {
          title: '异常时间',
          key: 'exceptionTime'
        },
        {
          title: '内容',
          key: 'content',
          width: 400,
          render(row: any) {
            return (
                <TheTooltip showContentWidth={280} content={row.content}/>
            )
          }
        },
      ]
    }

    return () => (
        <div class="system-menu-container">
          <SaveForm
              ref={saveForm}
              model={state.searchForm}
              onSubmit={onSubmit}
              saveKey='expection-log-index'
              onSetModel={(val: any) => (state.searchForm = val)}
          >
            <NFormItem label="应用标识" path="appKey">
              <NSelect
                  v-model:value={state.searchForm.appKey}
                  placeholder="请选择应用标识"
                  clearable
                  options={getSelectDataFromObj(appKey)}
              />
            </NFormItem>
            <NFormItem label="客户端类型" path="clientType">
              <NSelect
                  v-model:value={state.searchForm.clientType}
                  placeholder="请选择客户端类型"
                  clearable
                  options={getSelectDataFromObj(clientType)}
              />
            </NFormItem>
            <NFormItem label="手机号" path="phone">
              <NInput
                  v-model:value={state.searchForm.phone}
                  placeholder="请输入手机号"
                  clearable
              />
            </NFormItem>
            <NFormItem label="应用类型" path="appType">
              <NSelect
                  v-model={[state.searchForm.appType, 'value']}
                  placeholder="请选择应用类型"
                  options={getSelectDataFromObj(appType)}
                  clearable
              />
            </NFormItem>
            <NFormItem label="异常类型" path="exceptionType">
              <NSelect
                  v-model={[state.searchForm.exceptionType, 'value']}
                  placeholder="请选择异常类型"
                  options={getSelectDataFromObj(exceptionType)}
                  clearable
              />
            </NFormItem>
            <NFormItem label="异常时间" path="exceptionTime">
              <NDatePicker
                  v-model:value={state.searchForm.exceptionTime}
                  type="daterange"
                  clearable
                  value-format="yyyy-MM-dd HH:mm:dd"
                  startPlaceholder="开始时间"
                  endPlaceholder="结束时间"
              />
            </NFormItem>
            <NFormItem>
              <NSpace>
                <NButton type="primary" onClick={onSearch}>
                  搜索
                </NButton>
                <NButton type="default" onClick={onBtnReset}>
                  重置
                </NButton>
              </NSpace>
            </NFormItem>
          </SaveForm>


          <div class={['section-container']}>
            <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
            ></Pagination>
          </div>
        </div>
    )
  }
})
