import Pagination from '@/components/pagination'
import { NDataTable } from 'naive-ui'
import { defineComponent, onMounted, reactive } from 'vue'
import { sysSuggestionPage } from '../api'
import { filterClientType, filterSuggestionType } from '@/utils/filters'
import TheTooltip from '@/components/TheTooltip'

export default defineComponent({
  name: 'subsidy-list',
  setup() {
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        keyword: null,
        status: null
      },
      dataList: [] as any
    })
    const columns = () => {
      return [
        {
          title: '建议类型',
          key: 'type',
          width: 100,
          render(row: any) {
            return filterSuggestionType(row.type)
          }
        },
        {
          title: '学校名称',
          key: 'schoolName',
          render(row: any) {
            return <TheTooltip content={row.schoolName} />
          }
        },
        {
          title: '反馈时间',
          key: 'createTime'
        },
        {
          title: '内容',
          key: 'content',
          render(row: any) {
            return <TheTooltip content={row.content} />
          }
        },
        {
          title: '用户',
          key: 'nickname'
        },
        {
          title: '手机号',
          key: 'mobileNo'
        },
        {
          title: '客户端',
          key: 'clientType',
          render(row: any) {
            return filterClientType(row.clientType)
          }
        },
        {
          title: '设备号',
          key: 'userAgent',
          width: '300'
        }
      ]
    }

    const getList = async () => {
      try {
        state.loading = true
        const { data } = await sysSuggestionPage({ ...state.pagination, ...state.searchForm })
        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">
        <h2>意见反馈</h2>

        <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>
    )
  }
})