<template>
  <div>
    <ProTable ref="proTable" :config="config" :show-pagination="false"
      @search="handleSearch"
      :data="tableData">
      <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="handleSearch" />

  </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 { ElButton, ElMessage, ElMessageBox } from 'element-plus';
import { onMounted } from 'vue';
import { saveDepartment, getdepartmentTree, batchDeleteByIds } from '@/api/departmentManage';
const proTable = ref();
const tableData = ref([]);
const DepartmentFormModalRef = ref();
const current = ref();
const onRadioChange = ({newValue}) => {
  console.log('onRadioChange', newValue)
  current.value = newValue
}
const addDeparment = () => {
  DepartmentFormModalRef.value?.openModal('add', current.value)
}
const editDepartment = (row) => {
  DepartmentFormModalRef.value?.openModal('edit', row)
}
const handleDelete = async (row) => {
  await ElMessageBox.confirm('是否确认删除该菜单？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  });

  await batchDeleteByIds(row.id);

  ElMessage({
    type: 'success',
    message: '删除成功！',
    plain: true,
  });
  handleSearch();
}
const handleSearch = async (params) => {
    current.value = null
    const { result } = await getdepartmentTree(params ?? {});
    tableData.value = result;
  };
const config = reactive({
  stripe: false, // tree 不支持 stripe
  radioConfig: {strict: false},
  onRadioChange: onRadioChange,
  treeConfig: {
    rowField: 'id',
    childrenField: 'children'
  },
  columns: [
    { type: 'radio', width: 60, fixed: 'left' },
    { field: 'name', title: '部门名称', treeNode: true },
    // { 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>
            </>
          );
        },
      },
    },
  ],
});
 
onMounted(() => {
    handleSearch();
  });
</script>