<!-- 新增/修改 分类 -->
<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="上级分类" prop="pid">
        <tree-select
          :id="formData.pid"
          :data="treeList"
          :treeProps="treeProps"
          style="width: 100%"
          disabled
        />
      </el-form-item>
      <el-form-item label="分类编号" prop="classifyNo">
        <el-input v-model="formData.classifyNo" placeholder="请输入内容" :maxlength="20" />
      </el-form-item>
      <el-form-item label="分类名称" prop="classifyName">
        <el-input v-model="formData.classifyName" placeholder="请输入内容" :maxlength="20" />
      </el-form-item>
      <el-form-item label="排序号" prop="orderNo">
        <el-input
          v-model.number="formData.orderNo"
          type="orderNo"
          placeholder="请输入内容"
          :maxlength="9"
          @input="
            (val) => {
              formData.orderNo = val.replace(/[^\d]/g, '')
            }
          "
        />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <div>
        <el-button @click="handleClose"> 取消</el-button>
        <el-button type="primary" @click="submit"> 保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  createBusinessType,
  updateBusinessType,
  findBusinessType
} from '@common/src/api/system-config/field'
import TreeSelect from './TreeSelectSingle.vue'
import { ElDialog, ElButton, ElInput, ElForm, ElFormItem, ElMessage } from 'element-plus'
import { ref, watch, nextTick, computed } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'add' // 表示该弹窗是 新增模式/修改模式
  },
  visible: {
    type: Boolean,
    default: false
  },
  typeList: {
    type: Array,
    default: () => []
  },
  id: {
    type: [Number, String],
    default: null
  }
})

const emits = defineEmits(['update:visible', 'save'])
// 标题
const title = computed(() => {
  return props.type === 'add' ? '新增分类' : '修改分类'
})

const formData = ref({
  pid: null,
  classifyNo: '',
  classifyName: '',
  orderNo: 0
})

const rules = {
  classifyNo: [{ required: true, message: '该项必填', trigger: 'blur' }],
  classifyName: [{ required: true, message: '该项必填', trigger: 'submit' }]
}

const treeList = ref([])
watch(
  () => props.typeList,
  (val) => {
    treeList.value = val
  },
  {
    immediate: true
  }
)
const treeProps = ref({
  label: 'classifyName',
  children: 'children'
})
// 弹窗
const dialogVisible = ref(false)
watch(
  () => dialogVisible.value,
  (val) => {
    emits('update:visible', val)
  }
)
watch(
  () => props.visible,
  (val) => {
    dialogVisible.value = val
    if (val && props.id) {
      if (props.type === 'edit') {
        // 查询详情
        getTypeDetail()
      } else {
        formData.value.pid = props.id
      }
    }
  }
)
const getTypeDetail = async () => {
  const { data, success } = await findBusinessType(props.id)
  if (success) {
    const { classifyName, classifyNo, id, orderNo, pid, version } = data
    formData.value = {
      classifyName,
      classifyNo,
      id,
      orderNo,
      pid,
      version
    }
  }
}
const form = ref()
// 保存
const submit = () => {
  form.value.validate((valit) => {
    if (valit) {
      const API = props.type === 'add' ? createBusinessType : updateBusinessType
      API(formData.value).then(({ success, message }) => {
        if (success) {
          emits('save')
          handleClose()
        }
        ElMessage({
          type: success ? 'success' : 'error',
          message: message || '操作成功'
        })
      })
    }
  })
}

const handleClose = () => {
  dialogVisible.value = false
  // 这里可以写重置的操作
  formData.value = ref({
    pid: null,
    classifyNo: '',
    classifyName: '',
    orderNo: 0
  })
  nextTick(() => {
    form.value.clearValidate()
  })
}
</script>
