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

import { DeletePersonalData, getPersonalList, updatePersonalData } from '#/api'
import XbTableClass from '#/utils/xbTable'

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

// const router = useRouter()

const tableRef = ref()

const xbTable = reactive(
  new XbTableClass(
    {
      column: column({
        handleClick,
        updateState,
      }),
      page: {
        size: 20,
        current: 1,
        total: 0,
      },
      data: [],
    },
    {
      handlePageSize,
      handlePageCurrent,
    },
  ),
)
provide('xbTable', xbTable)
async function init() {
  const res = await getPersonalList({
    ...xbTable.table.page,
    ...filterData.value,
  })
  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
      filterData.value = {}
      init()
      break
    }
    case 'search': {
      xbTable.table.page.current = 1
      init()
      break
    }
  }
}
const filterData = ref()

// 筛选功能
const config = ref([
  {
    comName: 'el-input',
    label: 'ID',
    placeholder: '请输入ID',
    prop: 'idOrCode',
    clearable: true,
  },
  {
    comName: 'el-input',
    label: '名称',
    placeholder: '请输入名称',
    prop: 'name',
    clearable: true,
  },
  {
    comName: 'el-select',
    label: '类别',
    placeholder: '请选择类别',
    prop: 'remark',
    clearable: true,
    options: [
      { label: '头像', value: 1 },
      { label: '头像框', value: 2 },
      { label: '昵称框', value: 4 },
    ],
  },
])
// 分页处理
function handlePageSize({ size }: { size: number }) {
  xbTable.table.page.size = size
  init()
}
function handlePageCurrent({ current }: { current: number }) {
  xbTable.table.page.current = current
  init()
}

const showDia = ref(false)
const diaTitle = ref('新增个性装扮')
const diaData = ref<anyObj>({})

function getBookdetail(_: any) {
  // getBookDetailAPI(id).then(res => {
  //     diaData.value = res.data.data;
  //     showDia.value = true;
  //     console.log(res.data.data);
  // });
}
function handleClick(val: anyObj, type = 0) {
  switch (type) {
    case 0: {
      // getBookDetail(val.id);
      diaData.value = val
      diaTitle.value = '编辑个性装扮'
      showDia.value = true
      break
    }
    case 1: {
      DeletePersonalData(val.id).then(() => {
        xbTable.table.page.current = 1
        init()
      })
      break
    }
  }
}
// 更新书籍状态
function updateState(val: anyObj) {
  updatePersonalData({
    id: val.id,
    status: val.status ? 0 : 1,
  }).then(init)
}

function handleAdd() {
  showDia.value = true
  diaData.value = {}
  diaTitle.value = '新增个性装扮'
}

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

function refresh() {
  // handlePageCurrent({ current: 1 });
  handlePageCurrent({ current: xbTable.table.page.current as number })
}

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

<template>
  <div class="page">
    <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>
        </div>
      </template>
    </Table>
    <Dia
      v-model="showDia"
      :title="diaTitle"
      :dia-data="diaData"
      @on-refresh="refresh"
      @reload-dia="getBookdetail($event)"
    />
  </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;
    }
  }

  :deep(.el-table__row) {
    .row-page {
      height: 50px;

      .el-image {
        height: 50px;
      }
    }
  }
}
</style>
