<template>
  <div>
    <ProTable ref="proTable" :config="config" :api="getdepartmentTree" :paramCallback="paramCallback">
      <template #left_buttons>
          <!-- v-permission="'risk_member_add'" -->
        <el-button
          type="primary"
          :icon="Plus"
          @click="addDeparment"
          >新增</el-button
        >
        <!-- <el-button v-permission="'risk_member_del'" type="danger" :icon="Delete" @click="handleDelete"
          >删除</el-button
        > -->
      </template>
    </ProTable>
    <DepartmentFormModal ref="DepartmentFormModalRef" @success="query" />

  </div>
</template>

<script setup name="departmentManage" lang="jsx">
import DepartmentFormModal from './components/DepartmentFormModal.vue';
import { Delete, Edit, Plus } from '@element-plus/icons-vue';
import { ref,reactive  } from 'vue';
import { onMounted } from 'vue';
import { saveDepartment, getdepartmentTree, batchDeleteByIds } from '@/api/departmentManage';
const proTable = ref();
const DepartmentFormModalRef = ref();
const current = ref();
const query = () => proTable.value?.search();
const paramCallback = (param) => {
    const obj = JSON.parse(JSON.stringify(param));
    obj['staffRole'] = 'risk_control_commissioner'
    return obj;
  };
const onRadioChange = ({newValue}) => {
  current.value = newValue
}
const addDeparment = () => {
  DepartmentFormModalRef.value?.openModal('add', current.value)
}
const editDepartment = (row) => {
  DepartmentFormModalRef.value?.openModal('edit', row)
}
const handleDelete = () => {
  
}
const config = reactive({
  onRadioChange: onRadioChange,
  treeConfig: {
    rowField: 'id',
    childrenField: 'children'
  },
  columns: [
    { type: 'radio', width: 60, fixed: 'left' },
    { field: 'name', title: '部门名称', search: { el: 'input', labelWidth: 85 } },
    // { field: 'code', title: '部门编码', search: { el: 'input', labelWidth: 85 } },
    {
      field: 'action',
      title: '操作',
      fixed: 'right',
      slots: {
        default: ({ row }) => {
          return (
            <>
              <ElButton link type="primary" icon={Edit} onClick={() => editDepartment(row)}>
                编辑
              </ElButton>
              <ElButton link type="primary" icon={Delete} onClick={() => handleDelete(row)}>
                删除
              </ElButton>
            </>
          );
        },
      },
    },
  ],
});
 
// 添加
function append(data) {
    const newChild = { id: id++, label: 'testtest', children: [] };
    if (!data.children) {
        data.children = []
    }
    data.children.push(newChild);
}
 
// 删除
function remove(node, data) {
    const parent = node.parent;
    const children = parent.data.children || parent.data;
    const index = children.findIndex(d => d.id === data.id);
    children.splice(index, 1);
}
 
// 编辑
function edit(data) {
    ElMessageBox.prompt('请输入标题', '编辑', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(({ value }) => {
        if (value != null) {
            data.label = value;
        }
    }).catch(() => { });
}
 
onMounted(() => {
    query();
  });
</script>