<template>
  <!-- 数据操作 -->
  <a-space style="margin-bottom: 10px">
    <a-button style="background-color: #5cc750" type="primary" class="ele-btn-icon" @click="handleAdd">
      <template #icon>
        <plus-outlined />
      </template>
      <span>新增</span>
    </a-button>
  </a-space>
  <a-table bordered
        :columns="columns"
        :dataSource="dataSource"
    >
    <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a @click="handleDeal(record)">编辑</a>
        </template>
    </template>
  </a-table>
  <!-- 编辑权限信息 -->
  <a-modal
    v-model:open="open"
    :title="openTitle"
    @ok="handleOkModal"
    @cancel="handleCancelModal"
    width="800px"
    :maskClosable="false"
  >
    <PermForm ref="formModel"></PermForm>
  </a-modal>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { message } from 'ant-design-vue'
import { callUser } from '@/apis/call.js'
import PermForm from '@/views/form/permmanage/permform.vue'

const open = ref(false);
const openTitle = ref('权限信息');
const formModel = ref(null);

const columns = [
  {
    title: '权限编码',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '权限名称',
    dataIndex: 'description',
    key: 'description',
  },
  {
    title: '级别',
    dataIndex: 'level',
    key: 'level',
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    align: 'center'
  }
];
// 表格行数据
const dataSource = ref([])
const data = ref([]);

onMounted(() => {
  getData();
})

const getData = async () => {
  callUser("/permissions/list", {},"get").then((res) => {
    if (res.code != 200) {
      message.error(res.message)
      dataSource.value = []
      data.value = []
      return
    }
    data.value = res.data
    data.value = data.value.map((item) => {
      return { ...item, key: item.permId }
    })
    dataSource.value = buildTreeWithChildren(data.value)
  });
}

const buildTreeWithChildren = (data) => {
  const map = new Map();
  const roots = [];
  data.forEach(item => {
    map.set(item.permId, { ...item });
  });
  data.forEach(item => {
    const child = map.get(item.permId);
    child.code = child.permCode;
    if (item.parentId === null || item.parentId === undefined) {
      roots.push(child); 
    } else {
      const parent = map.get(item.parentId);
      if (parent) {
        parent.children = parent.children || [];
        child.code = child.permCode.replace(parent.permCode + ".", '');
        parent.children.push(child); 
      } else {
        roots.push(child);
      }
    }
  });
  return roots;
}

const handleAdd = async () => {
  open.value = true;
  nextTick(() => {
    if (formModel.value) {
      formModel.value.openForm({});
    } else {
      console.log('formModel is not ready yet');
    }
  });
}

const handleDeal = async (record) => {
  open.value = true;
  nextTick(() => {
    if (formModel.value) {
      formModel.value.openForm({ ...record });
    } else {
      console.log('formModel is not ready yet');
    }
  });
}

/**
* 处理停车点申请modal确定
*/
const handleOkModal = () => {
  formModel.value.formSave(bres => {
    open.value = false;
    if(bres){
      getData()
    }
  });
}

const handleCancelModal = () => {
  formModel.value.resetAll(bres => {
    if(bres) open.value = false;
  });
}
</script>