<script lang="ts" setup name="userManage_userInfo">
import type { ACTION_TYPE } from '#/components/Filter'

import { useRouter } from 'vue-router'

import { getUserList, resetPwd } from '#/api'
import UploadDia from '#/components/upload-dia/index.vue'
import XbTableClass from '#/utils/xbTable'

import column from './column.jsx'
import Dia from './Dia.vue'
import ExtensionDia from './ExtensionDia.vue'
import { userService } from '#/api/service/user/user.js'

const tableRef = ref()
const router = useRouter()
const showUploadDia = ref(false)
const showAddDia = ref(false)
const showExtensionDia = ref(false)
const extensionData = ref({})
const diaTitle = ref('')
const diaData = ref<anyObj>({})

const pageData = reactive({
  size: 20,
  current: 1,
})
const xbTable = reactive(
  new XbTableClass(
    {
      column: column({ handleClick, updateState }, pageData),
      page: {
        size: 20,
        current: 1,
        total: 0,
      },
      data: [],
    },
    {
      handlePageSize,
      handlePageCurrent,
    },
  ),
)
provide('xbTable', xbTable)
async function init() {
  const res = await getUserList({
    ...xbTable.table.page,
    ...filterData.value,
    'orders[0].asc': false,
    'orders[0].column': 'create_time',
  })
  xbTable.table.page.total = res.totalRows
  xbTable.table.data = res.rows
}
// 过滤
const handleFilterData = (type: ACTION_TYPE) => {
  switch (type.value) {
    case 'reset': {
      xbTable.table.page.current = 1
      pageData.current = 1
      init()
      break
    }
    case 'search': {
      xbTable.table.page.current = 1
      pageData.current = 1
      init()
      break
    }
  }
}
// 筛选功能
const filterData = ref()
const config = computed(() => {
  return [
    {
      comName: 'el-input',
      label: '用户账号',
      placeholder: '请输入用户账号',
      prop: 'account',
      clearable: true,
    },
    {
      comName: 'el-input',
      label: '用户名称',
      placeholder: '请输入用户名称',
      prop: 'name',
      clearable: true,
    },
    {
      comName: 'el-input',
      label: '用户ID',
      placeholder: '请输入',
      prop: 'id',
      clearable: true,
    },
  ]
})

// 分页处理
function handlePageSize({ size }: { size: number }) {
  xbTable.table.page.size = size
  pageData.size = size
  init()
}
function handlePageCurrent({ current }: { current: number }) {
  xbTable.table.page.current = current
  pageData.current = current
  init()
}

function handleClick(val: anyObj, type = 0) {
  switch (type) {
    case 0: {
      extensionData.value = val
      showExtensionDia.value = true
      break
    }
    case 1: {
      resetPwd(val.id).then(() => {
        xbTable.table.page.current = 1
        init()
      })
      break
    }
    case 2: {
      router.push(`/user-mgr/user-details/${val.id}`)
      break
    }
    // 编辑
    case 3: {
      diaData.value = val
      diaTitle.value = '编辑账号'
      showAddDia.value = true
      // router.push(`/userManage/userDetails/${val.id}`);
      break
    }
  }
}

function handleAdd() {
  showAddDia.value = true
  diaData.value = {}
  diaTitle.value = '新建账号'
}

async function updateState(row: anyObj) {
  row.loading = true
  const newVal = row.status
  try {
    row.status = row.status ? 0 : 1
    await userService.updateStatus(row.id, newVal)
  } catch {
    row.status = newVal
    return false
  } finally {
    row.loading = false
  }
}
function onRefresh() {
  xbTable.table.page.current = 1
  init()
}

const tableHeight = computed(() => {
  if (tableRef.value && tableRef.value.getBox) {
    const { top, pageHeight } = tableRef.value!.getBox()
    return `${window.innerHeight - top - pageHeight}px`
  }
  return '600px'
})

onMounted(() => {
  init()
})
</script>

<template>
  <div class="page g-container">
    <Filter
      v-model="filterData"
      :config="config"
      @handle-action="handleFilterData"
    />
    <Table ref="tableRef" class="page-table" :height="tableHeight">
      <template #neck>
        <div class="btn">
          <el-button type="primary" @click="handleAdd"> 新建账号 </el-button>
          <!-- <el-button type="primary" @click="showUploadDia = true">
            批量导入
          </el-button> -->
        </div>
      </template>
    </Table>
    <UploadDia
      v-model="showUploadDia"
      :data="{ typeId: -1, type: 1 }"
      placeholder="仅支持*.xlsx、*.xls文件类型"
      action="/api/main/sysUser/import"
      download-url="https://template-1313840333.cos.ap-guangzhou.myqcloud.com/%E7%94%A8%E6%88%B7%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx"
      @on-refresh="onRefresh"
    />
    <Dia
      v-model="showAddDia"
      :title="diaTitle"
      :dia-data="diaData"
      @on-refresh="onRefresh"
    />
    <ExtensionDia
      v-model="showExtensionDia"
      :extension-data="extensionData"
      @on-refresh="onRefresh"
    />
  </div>
</template>
<style lang="scss" scoped>
@include xbj_table;
@include cell_user;

.page {
  .btn {
    margin-bottom: $box-mt;

    .el-button {
      padding: 6px 8px;
    }

    .icon-add {
      margin-right: 6px;
    }
  }
}
</style>
