<template>
  <div class="table-page">
    <GiTable
      row-key="id"
      title="用户列表"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['title']"
      @refresh="search"
    >
      <template #toolbar-left>
        <a-input-search v-model="queryForm.userName" placeholder="用户昵称" allow-clear @search="search" />
        <DateRangePicker v-model="queryForm.time" @change="search" />
        <a-button @click="reset">
          <template #icon><icon-refresh /></template>
          <template #default>重置</template>
        </a-button>
      </template>
      <template #toolbar-right>
        <!--        <a-button v-permission="['system:notice:add']" type="primary" @click="onAdd"> -->
        <!--          <template #icon><icon-plus /></template> -->
        <!--          <template #default>新增</template> -->
        <!--        </a-button> -->
      </template>
      <template #avatar="{ record }">
        <a-avatar v-if="record.avatar">
          <img :src="record.avatar" />
        </a-avatar>
      </template>
      <template #nickname="{ record }">
        <span>{{ record.firstName }} {{ record.lastName }}</span>
      </template>
      <template #passengerFlowWay="{ record }">
        <GiCellTag :value="record.passengerFlowWay" :dict="passenger_type" />
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link title="详情" @click="onDetail(record)">详情</a-link>
          <a-link title="一级" @click="goDetail('A', record.id)">一级</a-link>
          <a-link title="二级" @click="goDetail('B', record.id)">二级</a-link>
          <a-link title="禁用" @click="onDisable(record)">禁用</a-link>
          <!--          <a-link v-permission="['system:notice:update']" title="修改" @click="onUpdate(record)">修改</a-link> -->
          <!--          <a-link v-permission="['system:notice:delete']" status="danger" title="删除" @click="onDelete(record)"> 删除 </a-link> -->
        </a-space>
      </template>
    </GiTable>
    <UserListAddModal ref="UserListAddModalRef" @save-success="search"></UserListAddModal>
  </div>
</template>

<script setup lang="ts">
import UserListAddModal from './userlistAddModal.vue'
import type { TableInstanceColumns } from '@/components/GiTable/type'
import { useTable } from '@/hooks'
import { useDict } from '@/hooks/app'
import { isMobile } from '@/utils'
import DateRangePicker from '@/components/DateRangePicker/index.vue'
import type { UserListResp, UserQuery } from '@/apis/user/type'
import { listUserTg, userListDisable } from '@/apis/user/userlist'
import type { TeamListResp } from '@/apis/team/type'

defineOptions({ name: 'Userlist' })

const { passenger_type } = useDict('passenger_type')

const router = useRouter()
const queryForm = reactive<UserQuery>({} as UserQuery)

const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable((page) => listUserTg({ ...queryForm, ...page }), { immediate: true })
const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: 'tgId', dataIndex: 'tgId', slotName: 'tgId', align: 'center', width: 180 },
  { title: '头像', dataIndex: 'avatar', slotName: 'avatar', align: 'center', width: 180 },
  { title: '名称', dataIndex: 'nickname', slotName: 'nickname', align: 'center', width: 180 },
  { title: 'TG账号', dataIndex: 'tgAccount', slotName: 'tgAccount', align: 'center', width: 180 },
  { title: '钱包地址', dataIndex: 'walletAddress', slotName: 'walletAddress', align: 'center', width: 180 },
  { title: '推荐人', dataIndex: 'referrerName', slotName: 'referrerName', align: 'center', width: 180 },
  { title: '年限', dataIndex: 'ageLimit', slotName: 'ageLimit', align: 'center', width: 180 },
  { title: '客流途径', dataIndex: 'passengerFlowWay', slotName: 'passengerFlowWay', align: 'center', width: 180 },
  { title: '注册日期', dataIndex: 'createdTime', width: 180 },
  { title: '在线时间', dataIndex: 'onlineTime', width: 180 },
  { title: '用户地址', dataIndex: 'ipAddressConvert', width: 180 },
  { title: 'ip地址', dataIndex: 'loginIp', width: 180 },
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
    width: 200,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
    show: true,
  },
]

// 重置
const reset = () => {
  queryForm.userName = undefined
  queryForm.time = undefined
  search()
}

const UserListAddModalRef = ref<InstanceType<typeof UserListAddModal>>()
const onDetail = (record: UserListResp) => {
  UserListAddModalRef.value?.onUpdate(record)
}
const onDisable = (record: TeamListResp) => {
  return handleDelete(() => userListDisable(record.id), {
    content: `是否禁用该用户`,
    showModal: true,
  })
}
const goDetail = (type: string, id: number) => {
  router.push({
    path: '/user/detail',
    query: { type, id },
  })
}
</script>

<style scoped lang="scss"></style>
