<script lang="ts" setup>
import { createCategory, updateCategory, moveCategory } from '../api'
import { ElMessage } from 'element-plus'

import { Search } from '@element-plus/icons-vue'
import type { FormRules } from 'element-plus'
import TreeDialog from './TreeDialog.vue'
import { useMapStore } from '@/stores/map'
const categoryName = ref('')
const store = useMapStore()
const classList = store.getMapValuesByKey('system_need_pass')
const statusList = store.getMapValuesByKey('system_status')
const isTreeVisible = ref(false)
const formRef = ref()

const categoryForm = reactive({
  parent_id: '',
  category_name: '',
  depth: 1,
  status: '1',
  need_pass: '0'
})
const rules = reactive<FormRules>({
  category_name: [
    { required: true, message: '请输入类别名称', trigger: 'blur' },
    { message: '请输入类别名称', trigger: 'blur' }
  ]
})
const props = defineProps({
  // 是否弹框
  dialogVisible: {
    type: Boolean,
    required: true
  },
  // 编辑数据
  editData: {
    type: Object,
    required: true
  },
  // 是否编辑
  isEdit: {
    type: Boolean,
    required: true
  },
  // 弹框标题
  title: {
    type: String,
    required: true
  },
  // 上级类别名称
  prevCategoryName: {
    type: String,
    required: true
  }
})
const emit = defineEmits<{
  (e: 'update:dialogVisible', dialogVisible: false): void
  (e: 'updatePage'): void
}>()

// 打开类别选择弹框
const handleOpenTree = () => {
  isTreeVisible.value = true
}
// 获取子组件确定之后节点回显
const getCheckedLabel = (val: any) => {
  categoryName.value = val.checkedCategory.checkedLabel
  categoryForm.parent_id = val.checkedCategory.checkedId
  categoryForm.depth = parseInt(val.checkedCategory.checkedLevel) + 1
}
// 关闭弹框
const handleCancel = () => {
  emit('update:dialogVisible', false)
  categoryName.value = ''
  formRef.value.resetFields()
}
// 确认提交表单
const handleConfirm = () => {
  if (props.isEdit) {
    const params = Object.assign({ id: props.editData.id }, categoryForm)
    updateCategory(params).then(() => {
      ElMessage.success('更新类别成功')
      moveCategory({
        id: props.editData.id,
        brother_id: categoryForm.parent_id,
        type: 'child'
      }).then(() => {
        ElMessage.success('更新类别成功')
        emit('update:dialogVisible', false)
        emit('updatePage')
      })
    })
  } else {
    const params = Object.assign({}, categoryForm)
    createCategory(params).then(() => {
      ElMessage.success('新建类别成功')
      emit('update:dialogVisible', false)
      emit('updatePage')
    })
  }
}

onMounted(() => {
  categoryForm.depth = parseInt(props.editData?.depth) + 1 || 0
  categoryForm.parent_id = props.editData?.id
  categoryName.value = props.editData.category_name
  if (props.isEdit) {
    categoryName.value = props.prevCategoryName
    categoryForm.depth = props.editData.depth
    categoryForm.category_name = props.editData.category_name
    categoryForm.status = props.editData.status
    categoryForm.need_pass = props.editData.need_pass
  }
})
</script>
<template>
  <el-dialog :model-value="dialogVisible" draggable :before-close="handleCancel" :title="props.title" width="30%">
    <el-form
      :model="categoryForm"
      label-position="right"
      label-width="auto"
      :rules="rules"
      ref="formRef"
      label-suffix="："
    >
      <el-form-item label="上级类别" prop="parent_id">
        <div style="width: 100%">
          <el-input v-model="categoryName" disabled>
            <template #append>
              <el-button :icon="Search" @click="handleOpenTree" />
            </template>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="类别层级" prop="hierarchy">
        <el-input v-model="categoryForm.depth" disabled></el-input>
      </el-form-item>
      <el-form-item label="类别名称" prop="category_name">
        <el-input v-model="categoryForm.category_name"></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="categoryForm.status">
          <el-radio v-for="(item, id) in statusList" :key="id" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="互动课" prop="need_pass">
        <el-radio-group v-model="categoryForm.need_pass">
          <el-radio v-for="(item, id) in classList" :key="id" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <template v-if="isTreeVisible">
    <TreeDialog v-model:isTreeVisible="isTreeVisible" @getCheckedLabel="getCheckedLabel" />
  </template>
</template>
