<script setup lang="ts">
import type { VxeFormEventProps } from 'vxe-table'

import type { TextBookWord } from '#/api/modules/word-book'
import type { MjFormProps } from '#/components/mj/mj-table'

import { addWordApi, word_type_abbr_options } from '#/api'
import MjModal from '#/components/mj/mj-modal/index.vue'
import {
  mj_form_button_group,
  mj_form_input,
  mj_form_select,
} from '#/components/mj/mj-table'
import { router } from '#/router'
import hud from '#/utils/hud'

defineOptions({ name: 'AddWord' })
// 属性
const props = defineProps<{
  meanings: any[]
  modelValue: boolean
  word: TextBookWord
}>()
const emit = defineEmits(['update:modelValue'])
const value = computed({
  get: () => props.modelValue,
  set: async (val) => {
    emit('update:modelValue', val)
    if (val) {
      formOptions.data.simpleDesc = props.word.wordDesc
      formOptions.data.typeAbbr = 'phrase.'
    }
  },
})

const formOptions = reactive({
  data: {
    simpleDesc: '',
    typeAbbr: '',
  },
  rules: {
    simpleDesc: [
      {
        required: true,
        message: '请输入释义',
      },
    ],
    typeAbbr: [
      {
        required: true,
        message: '请选择词性',
      },
    ],
  },
  items: [
    {
      field: 'simpleDesc',
      title: '释义',
      span: 24,
      itemRender: { name: mj_form_input },
    },
    {
      field: 'typeAbbr',
      title: '词性',
      span: 24,
      itemRender: { name: mj_form_select, options: word_type_abbr_options },
    },
    {
      align: 'center',
      span: 24,
      itemRender: {
        name: mj_form_button_group,
        options: [
          { type: 'submit', content: '提交', status: 'primary' },
          { type: 'reset', content: '重置' },
        ],
      },
    },
  ],
} as MjFormProps)

const formEvents = {
  submit() {
    emit('update:modelValue', false)

    const spell = props.word.wordSpell
    hud.toastLoad({
      option: `添加单词【${spell}】`,
      task: async () => {
        await addWordApi({
          spell,
          meaningList: [
            {
              form: 1,
              simpleDesc: formOptions.data.simpleDesc,
              typeAbbr: formOptions.data.typeAbbr,
            },
          ],
        })
      },
      hideSuccess: false,
    })
  },
} as VxeFormEventProps
</script>

<template>
  <div class="add-word">
    <MjModal
      v-model="value"
      :options="{
        title: '添加单词',
      }"
    >
      <div class="spell">{{ word.wordSpell }}</div>
      <div v-if="meanings.length > 0" class="meanings">
        <div v-for="item in meanings" :key="item.id" class="meaning">
          <span>{{ item.label }}</span>
        </div>
        <el-button @click="router.push(`/word-mgr/word-detail/${word.wordId}`)">
          进入单词详情
        </el-button>
      </div>
      <VxeForm v-bind="formOptions" v-on="formEvents" />
    </MjModal>
  </div>
</template>

<style lang="scss" scoped>
.add-word {
  .spell {
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
  }

  .meanings {
    .meaning {
      display: flex;
      column-gap: 10px;
      justify-content: center;

      span {
        flex: 1;
      }
    }
  }
}
</style>
