<template>
  <ElDrawer ref="elDrawerRef" v-model="drawerVisible" :title="drawerProps.title" v-bind="$attrs" destroy-on-close>
    <template #header="scope">
      <slot name="header" v-bind="scope">
        <div style="display: flex">
          <slot name="title">
            <span style="flex: 1">{{ drawerProps.title }}</span>
          </slot>
        </div>
      </slot>
    </template>

    <el-form ref="ruleFormRef" label-width="120px" label-suffix=" :" :rules="rules" :model="drawerProps.row" @submit.enter.prevent="handleConfirm">
      <el-form-item label="上级部门" prop="parentId">
        <el-tree-select
          v-model="drawerProps.row.parentId"
          :data="treeData"
          check-strictly
          placeholder="请选择上级"
          :render-after-expand="false"
          clearable
          :default-expand-all="true"
          :props="treeProps" />
      </el-form-item>
      <el-form-item label="组织名称" prop="name">
        <el-input v-model="drawerProps.row.name" placeholder="请填写部门名称" clearable />
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input-number v-model="drawerProps.row.orderNum" :precision="0" :min="1" :max="999999" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="drawerProps.row.status" default-value="1">
          <el-radio-button :value="item.dictValue" v-for="(item, index) in commonStatus" :key="index" :label="item.dictLabel" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="负责人" prop="leader">
        <el-input v-model="drawerProps.row.leader" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="drawerProps.row.remark" placeholder="请填写备注" clearable />
      </el-form-item>
    </el-form>

    <template #footer>
      <slot name="footer">
        <ElButton @click="drawerVisible = false">取 消</ElButton>
        <ElButton type="primary" @click="handleConfirm()">确 定</ElButton>
      </slot>
    </template>
  </ElDrawer>
</template>

<script setup lang="ts" name="OrgForm">
import { OrgTreeVO, OrgFormBo } from '@/api/interface/system/org'
import OrgApi from '@/api/module/system/org'
import { ResultEnum } from '@/enums/HttpEnum'
import { FormInstance } from 'element-plus'
import { useDictOptions } from '@/hooks'

const commonStatus = useDictOptions('COMMON_STATUS')
const rules = reactive({
  name: [{ required: true, message: '请填写组织名称' }],
  parentId: [{ required: true, message: '请选择上级' }],
  orderNum: [{ required: true, message: '排序不能为空' }],
  status: [{ required: true, message: '状态不能为空' }]
})

interface EcoDrawerProps {
  api?: (params: any) => Promise<any> // 调用接口
  title: string // 顶部标题
  isView: boolean
  row: Partial<OrgFormBo>
  getTableList?: () => void
}

const treeData = ref<OrgTreeVO[]>([])
const treeProps = {
  label: 'name',
  value: 'id'
}

const drawerVisible = ref(false)
const drawerProps = ref<EcoDrawerProps>({
  isView: false,
  title: '',
  row: {}
})

// emit
const emit = defineEmits(['submit'])

// 接收父组件传过来的参数
const acceptParams = (params: EcoDrawerProps) => {
  drawerProps.value = params
  drawerVisible.value = true
  loadTree()
}

const loadTree = () => {
  OrgApi.tree().then(res => {
    treeData.value = [
      {
        parentId: '-1',
        orgId: '0',
        name: '顶层',
        children: res.data
      }
    ]
  })
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleConfirm = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return
    try {
      const { code } = await drawerProps.value.api!(drawerProps.value.row)
      if (code == ResultEnum.SUCCESS) {
        ElMessage.success({ message: `${drawerProps.value.title}成功！` })
        drawerProps.value.getTableList!()
        emit('submit')
        drawerVisible.value = false
      }
    } catch (error) {
      console.log(error)
    }
  })
}

defineExpose({
  acceptParams
})
</script>

<style scoped lang="scss"></style>
