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

import { getSysConfig } from '#/api'
import XbTableClass from '#/utils/xbTable'

import column from './column.jsx'
import Dia from './dia.vue'

const tableRef = ref()
const showDia = ref(false)
const diaTitle = ref('')
const diaData = ref({ code: '', name: '', remark: '', sort: 0, status: 0 })

// const showSub = ref(false)
// const subData = ref({})

const xbTable = reactive(
  new XbTableClass(
    {
      column: column({
        handleClick,
      }),
      page: {
        size: 20,
        current: 1,
        total: 0,
      },
      data: [],
    },
    {
      handlePageSize,
      handlePageCurrent,
    },
  ),
)

// 筛选功能
const filterData = ref()
const config = computed(() => {
  return [
    {
      comName: 'el-input',
      label: '配置名称',
      prop: 'name',
      clearable: true,
    },
    {
      comName: 'el-input',
      label: '配置编码',
      prop: 'code',
      clearable: true,
    },
  ]
})
const handleFilterData = (type: ACTION_TYPE) => {
  switch (type.value) {
    case 'reset': {
      xbTable.table.page.current = 1
      getTableData()
      break
    }
    case 'search': {
      getTableData()
      break
    }
  }
}

provide('xbTable', xbTable)

async function getTableData() {
  const res = await getSysConfig({
    ...xbTable.table.page,
    ...filterData.value,
  })
  xbTable.table.data = res.rows
  xbTable.table.page.total = Number(res.totalRows)
}

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

function addDictType() {
  showDia.value = true
  diaData.value = { code: '', name: '', remark: '', sort: 0, status: 0 }
  diaTitle.value = '新增'
}

function handleClick(
  type: number,
  row: {
    code: string
    name: string
    remark: string
    sort: number
    status: number
  },
) {
  switch (type) {
    case 1: {
      showDia.value = true
      diaTitle.value = '编辑'
      diaData.value = row
      break
    }
    // case 2:
    //     delConfirm()
    //         .then(() => delDictType(row))
    //         .then(() => {
    //             getTableData();
    //             ElMessage.success('删除成功');
    //         });
    //     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(() => {
  getTableData()
})
</script>
<template>
  <section class="page g-container">
    <Filter
      v-model="filterData"
      :config="config"
      @handle-action="handleFilterData"
    />
    <Table ref="tableRef" class="page-table" :height="tableHeight">
      <template #neck>
        <ElButton type="primary" class="add-btn" @click="addDictType">
          +&nbsp; 新增配置
        </ElButton>
      </template>
    </Table>
    <Dia
      v-model:show-dia="showDia"
      :title="diaTitle"
      :dia-data="diaData"
      @on-refresh="getTableData"
    />
    <!-- <SubsetDia
            v-model:showSub="showSub"
            :subData="subData"
            @onRefresh="getTableData"
        ></SubsetDia> -->
  </section>
</template>
<style lang="scss" scoped>
@include xbj_table;

.add-btn {
  width: 94px;
  padding: 0;
  margin-bottom: 16px;
}
</style>
