<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>
