<script setup lang="ts">
import {
  getSpinnerListApi,
  getSpinnerTypeApi,
  getSonSpinnerListApi,
} from '#/api'
import type {
  wordSpinnerListType,
  meaningListType,
  wordSonSpinnerListType,
  wordSpinnerTypeListType,
} from '../../word-edit/interface'
import NewWordMeaningBox from '../../word-edit/components/NewWordMeaningBox.vue'
import hud from '#/utils/hud'
import { addMeaningApi } from '#/api/modules/word-book'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '新增释义',
  },
  diaData: {
    type: Object,
    default: () => ({}),
  },
  wordId: {
    type: String,
    default: '',
  },
})
const emits = defineEmits(['update:modelValue', 'onRefresh'])

const wordSpinnerList = ref<wordSpinnerListType[]>([{ type: 0, name: '' }])
const wordSonSpinnerList = ref<wordSonSpinnerListType[]>([
  { spell: '', znDesc: '' },
])
const wordSpinnerTypeList = ref<wordSpinnerTypeListType[]>([
  {
    abbr: '',
    code: 0,
    spell: '',
    znDesc: '',
  },
])

const show = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  },
})

const wordMeaning = ref()
const formData = ref([
  {
    originWordId: null,
    form: null,
    simpleDesc: '',
    enDesc: '',
    subTypeStr: '',
    znDesc: '',
    originWordSpell: '',
    typeAbbr: '',
  },
])

function handleChangeData(index: number, item: meaningListType) {
  formData.value[index] = item as any
}

// 获取多个下拉框数据

function getSpinnerList() {
  // 获取形式数据
  getSpinnerListApi().then((res) => {
    wordSpinnerList.value = res
  })
  // 获取子词性数据
  getSonSpinnerListApi().then((res) => {
    wordSonSpinnerList.value = res
  })
  // 获取词性数据
  getSpinnerTypeApi().then((res) => {
    wordSpinnerTypeList.value = res
  })
}

async function handleSave() {
  emits('update:modelValue', false)
  hud.toastLoad({
    task: async () => {
      await addMeaningApi({
        ...formData.value[0],
        wordId: props.wordId,
      })
      emits('onRefresh')
    },
    option: '保存',
    hideSuccess: false,
  })
}

onMounted(() => {
  getSpinnerList()
  // if (props.diaData.id) {
  // }
})
</script>

<template>
  <el-dialog
    v-model="show"
    width="700px"
    :title="title"
    class="box"
    destroy-on-close
  >
    <NewWordMeaningBox
      v-for="(item, index) in formData"
      ref="wordMeaning"
      :key="index"
      hide-remove
      :data="item"
      :index="index"
      :wordSpinnerTypeList="wordSpinnerTypeList"
      :wordSonSpinnerList="wordSonSpinnerList"
      :wordSpinnerList="wordSpinnerList"
      @change-data="handleChangeData(index, $event)"
    />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="handleSave"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.box {
  .el-dialog__body {
    padding-bottom: 20px;
  }

  :deep(.upload-demo) {
    .el-upload-list {
      margin: 0;
    }
  }

  .add-box {
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }
}

.word-meaning-content {
  height: 380px;
  padding: 0 20px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;

  .word-meaning {
    border-top: 2px dashed #558ef0;

    &:first-child {
      border: none;
    }
  }
}
</style>
