<script setup lang="ts">
import { detailAssistMemory, getAssistMemoryList, putAssistMemory } from '#/api'
import { delConfirm } from '#/utils/tool'
import XbTableClass from '#/utils/xbTable'

import PopMnemonicItem from '../MnemonicItem/PopMnemonicItem.vue'
import column from './column.jsx'

interface rootSelectedItem {
  wordRootId: string
  wordRootName: string
}

const props = defineProps<{
  diaData: anyObj
  showDia: boolean
}>()
const emits = defineEmits(['update:showDia'])
const show = computed({
  get() {
    return props.showDia
  },
  set(val) {
    emits('update:showDia', val)
  },
})
const showPopMnemonicItem = ref(false)
const diaTitle = ref('添加助记')
const childDiaData = ref()

/* 表格 */
const tableRef = ref()
const xbTable = reactive(
  new XbTableClass({
    column: column({
      handleClick,
    }),
    page: {
      size: -1,
      current: 1,
      total: 0,
    },
    data: [],
  }),
)
provide('xbTable', xbTable)

async function getTableData() {
  if (!props.diaData?.id) return
  xbTable.table.data = await getAssistMemoryList(
    props.diaData.wordId,
    props.diaData.id,
  )
}

function createMnemonic() {
  showPopMnemonicItem.value = true
  diaTitle.value = '添加助记'

  childDiaData.value = {
    id: props.diaData.id,
    wordId: props.diaData.wordId,
    assistType: 1,
    assistText: '',
    wordRootVoList: [],
  }
}

function handleClick(type: number, row: anyObj) {
  switch (type) {
    case 1: {
      showPopMnemonicItem.value = true
      diaTitle.value = '编辑助记'
      childDiaData.value = row
      break
    }
    case 2: {
      delConfirm()
        .then(() => detailAssistMemory(row.id))
        .then(() => {
          getTableData()
          ElMessage.success('删除成功')
        })
      break
    }
  }
}

async function submit() {
  if (!xbTable.table.data) return

  const params = xbTable.table.data.map((item) => {
    return {
      id: item.id || null,
      wordId: item.wordId || null,
      assistText: item.assistText,
      assistType: item.assistType,
      wordRootIds: item.wordRootVoList
        ? item.wordRootVoList
            .map((childItem: rootSelectedItem) => childItem.wordRootId)
            .join(',')
        : '',
    }
  })

  await putAssistMemory(params)
  show.value = false
  ElMessage.success('保存成功')
}
watch(
  () => childDiaData.value,
  (nv) => {
    const data = xbTable.table.data
    if (!data?.length) return
    const rowIndex = data.findIndex((item) => item.id === nv.id)
    if (rowIndex !== undefined && rowIndex > -1) {
      data[rowIndex] = nv
    }
  },
)

onMounted(() => {
  xbTable.table.ref = tableRef.value
})
</script>
<template>
  <el-dialog
    v-model="show"
    width="40vw"
    top="10vh"
    class="box"
    destroy-on-close
    @open="getTableData"
  >
    <template #header>
      <div class="text-center text-lg font-bold">
        <span>添加助记</span>
        <el-button class="absolute mx-3" type="primary" @click="createMnemonic">
          添加助记
        </el-button>
      </div>
    </template>
    <Table ref="tableRef" :pagination="false" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false"> 取消 </el-button>
        <el-button type="primary" @click="submit"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
  <PopMnemonicItem
    v-model:show-dia="showPopMnemonicItem"
    v-model:dia-data="childDiaData"
    :dia-title="diaTitle"
    @on-refresh="getTableData"
  />
</template>
