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

import { useRouter } from 'vue-router'

import {
  deleteWordApi,
  getStageList,
  getVocabularyList,
  getWordDetail,
  getWordEditingList,
  updateWord,
} from '#/api'
import { wordEdit } from '#/store'
import XbTableClass from '#/utils/xbTable'

import column from './column.jsx'
import JoinLevel from './JoinLevel.vue'
import AddWordDia from './popup/AddWordDia.vue'

const wordEditData = wordEdit()
const tableRef = ref()
const router = useRouter()
const expireStatusOptions = ref([])
const showAddWordDia = ref(false) // 添加单词弹框
const checkFlagOptions = ref([
  {
    label: '未审查',
    id: 0,
  },
  {
    label: '已审查',
    id: 1,
  },
])

const checkLevelOptions = ref([
  {
    label: '否',
    id: 0,
  },
  {
    label: '是',
    id: 1,
  },
])

const xbTable = reactive(
  new XbTableClass(
    {
      column: column({ handleClick, updateState, joinLevel, handleDelete }),
      page: {
        size: wordEditData.pageSize,
        current: wordEditData.currentPage,
        total: 0,
      },
      data: [],
    },
    {
      handlePageSize,
      handlePageCurrent,
    },
  ),
)
watch(
  () => xbTable.table.page,
  (newVal) => {
    wordEditData.currentPage = newVal.current as number
    wordEditData.pageSize = newVal.size as number
  },
  {
    // deep: true,
    immediate: true,
  },
)
provide('xbTable', xbTable)
const init = async () => {
  const res = await getWordEditingList({
    ...wordEditData.formData,
    current: wordEditData.currentPage,
    size: wordEditData.pageSize,
  })
  xbTable.table.page.total = res.totalRows
  xbTable.table.data = res.rows
}

const updateState = async (row: anyObj) => {
  row.loading = true
  try {
    let val = 0
    await updateWord({
      id: row.id,
      checkFlag: row.checkFlag === 0 ? (val = 1) : (val = 0),
    })
    row.checkFlag = val
  } catch {
    return false
  } finally {
    row.loading = false
  }
}

const initVocabularyList = async () => {
  const res = await getVocabularyList({
    size: -1,
    current: 1,
    total: 0,
  })
  expireStatusOptions.value = res.rows
}
// 过滤
const handleFilterData = (type: ACTION_TYPE) => {
  switch (type.value) {
    case 'reset': {
      xbTable.table.page.current = 1
      wordEditData.formData = {}
      init()
      break
    }
    case 'search': {
      wordEditData.formData = filterData.value
      init()
      break
    }
  }
}
// 筛选功能
const filterData = ref()
filterData.value = wordEditData.formData
const config = computed(() => {
  return [
    {
      comName: 'el-input',
      label: '拼写',
      placeholder: '请输入',
      prop: 'spell',
      clearable: true,
    },
    {
      comName: 'el-select',
      label: '筛选阶段',
      prop: 'vocabularyId',
      clearable: true,
      options: expireStatusOptions.value,
      selectConfig: {
        label: 'name',
        value: 'id',
      },
    },
    {
      comName: 'el-select',
      label: '审查标志',
      prop: 'checkFlag',
      clearable: true,
      options: checkFlagOptions.value,
      selectConfig: {
        label: 'label',
        value: 'id',
      },
    },
    {
      comName: 'el-select',
      label: '是否被关卡选中',
      prop: 'inLevel',
      clearable: true,
      options: checkLevelOptions.value,
      selectConfig: {
        label: 'label',
        value: 'id',
      },
    },
  ]
})
// 分页处理
const handlePageSize = ({ size }: { size: number }) => {
  xbTable.table.page.size = size
  wordEditData.pageSize = size
  init()
}
const handlePageCurrent = ({ current }: { current: number }) => {
  xbTable.table.page.current = current
  wordEditData.currentPage = current
  init()
}

const handleClick = (val: anyObj, type = 0) => {
  switch (type) {
    case 0: {
      router.push(`/word-mgr/word-detail/${val.id}`)
      break
    }
  }
}
const handleAdd = () => {
  showAddWordDia.value = true
}

const handleDelete = (row: anyObj) => {
  deleteWordApi({ id: row.id }).then(handleRefresh)
}
const tableHeight = computed(() => {
  if (tableRef.value && tableRef.value.getBox) {
    const { top, pageHeight } = tableRef.value!.getBox()
    return `${window.innerHeight - top - pageHeight}px`
  }
  return '600px'
})

const showDia = ref(false)
const diaData = reactive({
  wordId: null,
  stageList: [],
  shiyiList: [],
})

const joinLevel = async (row: any) => {
  const stageRes = await getStageList({
    current: 1,
    size: 1000,
    status: 0,
  })
  diaData.stageList = stageRes.rows
  const res = await getWordDetail({
    wordId: row.id,
  })
  diaData.shiyiList = res.meaningList
  diaData.wordId = row.id
  showDia.value = true
}

const handleRefresh = () => {
  init()
  initVocabularyList()
}

onMounted(() => {
  init()
  initVocabularyList()
})
</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>
        </div>
      </template>
    </Table>
    <JoinLevel v-model="showDia" :dia-data="diaData" />
    <AddWordDia v-model="showAddWordDia" @on-refresh="handleRefresh" />
  </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;
    }
  }
}

.el-popper.is-dark {
  max-width: 50% !important;
}

:deep(.box) {
  .el-dialog__body {
    padding-bottom: 0;
  }
}

// :deep(.box) {
//     .el-dialog__body {
//         padding-top: 10px;
//         padding-bottom: 20px;
//         .el-upload-list {
//             width: 170px;
//             margin: 0;
//             transform: translateX(-62px);
//             .el-upload-list__item {
//                 line-height: 25px;
//                 margin: 0;
//                 a {
//                     span {
//                         font-size: 12px;
//                     }
//                 }
//             }
//         }
//     }
// }
</style>
