<script lang="ts" setup name="authManage_roleManage">
import { delRolesById, getRolesList, updateRoleStatus } from '#/api'
import Table from '#/components/Table/index.vue'
import { delConfirm } from '#/utils/tool'
import XbTableClass from '#/utils/xbTable'

import column from './column.jsx'
import Dia from './Dia.vue'
import Filter from './Filter.vue'
import GrantDia from './GrantDia.vue'

const filterData = ref({
  name: '',
  startTime: '',
  endTime: '',
})
const tableRef = ref()
const showDia = ref(false)
const showGrant = ref(false)
const diaTitle = ref('')
const diaData = ref({})
const xbTable = reactive(
  new XbTableClass({
    column: column({
      updateState,
      handleClick,
      // updateKeepalive,
    }),
    page: {
      size: 20,
      current: 1,
      total: 0,
    },
    data: [],
  }),
)

provide('xbTable', xbTable)
async function getTableData() {
  const res = await getRolesList({
    ...xbTable.table.page,
  })
  xbTable.table.data = res.records
  xbTable.table.page!.total = Number(res.total)
}

async function updateState(row: anyObj) {
  row.loading = true
  try {
    await updateRoleStatus({
      id: row.id,
      status: row.status === 0 ? 1 : 0,
    })
    return true
  } catch {
    return false
  } finally {
    row.loading = false
  }
}

// async function updateKeepalive(row: anyObj) {
//     row.KLoading = true
//     try {
//         let val = 0
//         let { data: res } = await updateMenuRule({
//             id: row.id,
//             keepalive: row.keepalive === 0 ? (val = 1) : (val = 0),
//         })
//         row.keepalive = val
//     } catch (err) {
//         return false
//     } finally {
//         row.KLoading = false
//     }
// }

function handleClick(type: number, row: anyObj) {
  switch (type) {
    case 0: {
      diaData.value = row
      showGrant.value = true
      break
    }
    case 1: {
      showDia.value = true
      diaTitle.value = '编辑'
      diaData.value = row
      break
    }
    case 2: {
      delConfirm()
        .then(() => delRolesById(row.id))
        .then(() => {
          getTableData()
          ElMessage.success('删除成功')
        })
      break
    }
  }
}

function onFilterClick(type: string, value?: any) {
  switch (type) {
    case 'add': {
      showDia.value = true
      diaTitle.value = '新增'
      diaData.value = {}
      break
    }
    case 'refresh': {
      getTableData()
      break
    }
    case 'tableRows': {
      if (value) {
        xbTable.table.expandAll = true
      } else {
        xbTable.table.expandAll = false
        xbTable.foldAll()
      }
      break
    }
  }
}

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

onMounted(() => {
  xbTable.table.ref = tableRef.value
  getTableData()
  nextTick(() => {
    xbTable.dragSort()
  })
})
</script>

<template>
  <section class="page g-container">
    <Filter v-model="filterData" @handle-click="onFilterClick" />
    <Table
      ref="tableRef"
      class="page-table"
      :height="tableHeight"
      :pagination="false"
    />
    <Dia
      v-model:show-dia="showDia"
      :title="diaTitle"
      :dia-data="diaData"
      @on-refresh="getTableData"
    />
    <GrantDia v-model:show-grant="showGrant" :dia-data="diaData" />
  </section>
</template>

<style lang="scss" scoped>
@include xbj_table;
</style>
