<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
// import api from '@/api'

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    parentId?: string | number
    id?: string | number
    tree: any[]
  }>(),
  {
    modelValue: false,
    parentId: '',
    id: '',
  },
)

const emit = defineEmits(['update:modelValue', 'addNode', 'editNode'])
const myVisible = ref(props.modelValue)
const title = computed(() => props.id === '' ? '新增字典' : '编辑字典')
function formatTree(tree: any[], id: string | number, childrenDisabled = false) {
  const data: any[] = []
  tree.forEach((item) => {
    const temp = { ...item }
    if (temp.id === id || childrenDisabled) {
      temp.disabled = true
      if (temp.children) {
        temp.children = formatTree(temp.children, id, true)
      }
    }
    else {
      temp.disabled = false
      if (temp.children) {
        temp.children = formatTree(temp.children, id, childrenDisabled)
      }
    }
    data.push(temp)
  })
  return data
}
const myTree = computed(() => formatTree(props.tree, props.id))

const formRef = ref<FormInstance>()
const form = ref({
  parentId: props.parentId,
  id: props.id,
  name: '',
  code: '',
})
const formRules = ref<FormRules>({
  name: [
    { required: true, message: '请输入字典名称' },
  ],
  code: [
    { required: true, message: '请输入字典编码' },
  ],
})

onMounted(() => {
  if (props.id !== '') {
    // api.get('pages_example/dictionary/detail', {
    //   params: {
    //     id: props.id,
    //   },
    //   baseURL: '/mock/',
    // }).then((res) => {
    //   // form.value.parentId = res.data.parentId
    //   form.value.id = res.data.id
    //   form.value.name = res.data.name
    //   form.value.code = res.data.code
    // })
  }
})

function onSubmit() {
  if (form.value.id === '') {
    formRef.value && formRef.value.validate((valid) => {
      if (valid) { /* empty */ }
    })
  }
  else {
    formRef.value && formRef.value.validate((valid) => {
      if (valid) { /* empty */ }
    })
  }
}

function onCancel() {
  myVisible.value = false
}
</script>

<template>
  <el-dialog v-model="myVisible" :title="title" width="400px" :close-on-click-modal="false" append-to-body destroy-on-close @closed="emit('update:modelValue', false)">
    <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
      <el-form-item label="父级字典" prop="parentId">
        <el-cascader v-model="form.parentId" :options="myTree" :props="{ value: 'id', emitPath: false, checkStrictly: true }" :show-all-levels="false" placeholder="请选择父级字典，默认为根字典" clearable />
      </el-form-item>
      <el-form-item label="字典名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入字典名称" clearable />
      </el-form-item>
      <el-form-item label="字典编码" prop="code">
        <el-input v-model="form.code" placeholder="请输入字典编码" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button size="large" @click="onCancel">
        取消
      </el-button>
      <el-button type="primary" size="large" @click="onSubmit">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-cascader) {
  width: 100%;
}
</style>
