<template lang="">
  <div>
    <el-dialog
      v-model="addChildVisible"
      :title="operType == 3 ? '编辑分类' : '新增分类'"
      width="500"
      align-center
    >
      <el-form
        ref="departmentFormRef"
        style="max-width: 600px"
        :model="categoryForm"
        status-icon
        :rules="depRules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item prop="name">
          <div class="label">
            <div>分类名称</div>
            <div class="red">*</div>
          </div>
          <el-input
            v-model="categoryForm.categoryName"
            autocomplete="on"
            placeholder="请输入分类名称"
          />
        </el-form-item>

        <el-form-item prop="parentId">
          <div class="label">
            <div>上级分类</div>
            <!-- <div class="red">*</div> -->
          </div>

          <el-tree-select
            v-model="categoryForm.parentId"
            :data="categoryList"
            :props="defaultProps"
            check-strictly
            node-key="id"
            clearable
            filterable
          >
            <template #default="{ data: { categoryName } }">
              {{ categoryName }}
            </template>
          </el-tree-select>
        </el-form-item>
        <el-form-item prop="comment">
          <div class="label">
            <div>分类描述</div>
          </div>
          <el-input
            v-model="categoryForm.comment"
            autocomplete="on"
            placeholder="请输入分类描述"
            type="textarea"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addChildCancel">取消</el-button>
          <el-button type="info" @click="conAddCategory"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { getList, addCategory, updateCategory } from '@/api/category'
import { ElMessageBox ,ElMessage} from 'element-plus'
import { defineProps } from 'vue'
import { Search } from '@element-plus/icons-vue'
// import { useUserStore } from '@/store/modules/user'
// const userStore = useUserStore()

let props = defineProps({
  //接收父组件方法
  getCategoryList: {
    type: Function,
  },
})

const categoryList = ref([])
const operType = ref(1)
const addChildVisible = ref(false) //显示隐藏
const departmentFormRef = ref(null) //表单
const depRules = {
  categoryName: [
    { required: true, message: '分类名称不能为空', trigger: 'blur' },
  ],
}
const defaultProps = {
  children: 'childList',
  label: 'categoryName',
}

const categoryForm = ref({
  categoryName: '',
  parentId: '',
  comment: '',
  type: 0,
})

//进入添加--------------------------------------------
const addChildHandle = function (type, data) {
  console.log(type, data)
  addChildVisible.value = true
  getList().then(res => {
    categoryList.value = res.data.data
  })

  if (type == 2) {
    //添加子分类
    categoryForm.value.parentId.value = data.id
  }
  if (type == 3 && data != null) {
    //修改
    operType.value = type
    categoryForm.value = data
  }
}

//操作提交
const conAddCategory = () => {
  departmentFormRef.value.validate(valid => {
    if (valid) {
      console.log(categoryForm)
      if (operType.value == 1 || operType.value == 2) {
        addCategoryMethod()
      } else if (operType.value == 3) {
        updateCategoryMethod()
      } else {
        alert('操作类型不存在')
      }
    } else {
      return false
    }
  })
}

//修改分类
const updateCategoryMethod = function () {
  updateCategory(categoryForm.value)
    .then(res => {
      if (res.data.code == 200) {
        ElMessageBox.alert('修改成功', '提示', {
          confirmButtonText: '确定',
          type: 'success',
        })
        resetForm()
        addChildVisible.value = false
        props.getCategoryList()
      } else {
        ElMessage({
          message: res.data.msg,
          type: 'error',
        })
      }
    })
    .catch(err => {
      console.log(err)
    })
}

//添加分类
const addCategoryMethod = function () {
  addCategory(categoryForm.value)
    .then(res => {
      if (res.data.code == 200) {
        ElMessageBox.alert('添加成功', '提示', {
          confirmButtonText: '确定',
          type: 'success',
        })
        resetForm()
        addChildVisible.value = false
        props.getCategoryList()
      } else {
        ElMessage({
          message: res.data.msg,
          type: 'error',
        })
      }
    })
    .catch(err => {
      console.log(err)
    })
}

const addChildCancel = () => {
  addChildVisible.value = false
  resetForm()
}
const resetForm = () => {
  categoryForm.value.categoryName = ''
  categoryForm.value.parentId = ''
  categoryForm.value.comment = ''
}
// 获取部门名称

defineExpose({
  addChildHandle,
})
</script>

<style lang="scss" scoped>
.label {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #1f2329;
  .red {
    color: #ff3535;
  }
}
</style>
