<template>
  <div class="app-container customer-control">
      <div ref="buttonRef">
        <!-- 按钮组 -->
         <el-button icon="Sort" type="primary">{{ btnText }}</el-button>
      </div>
      <div class="table-cont">
        <el-table :data="tableData" style="width: 100%" row-key="id" border lazy v-loading="loading"
          :tree-props="{ children: 'areaChildVOS' }" default-expand-all>
          <el-table-column prop="areaName" label="区域名称" />
          <el-table-column prop="areaCode" label="区域代码" />
          <el-table-column prop="level" label="区域级别" />
          <el-table-column prop="operate" label="操作" slotName="operate">
            <template #default="slotProps">
              <el-button text type="success">新增</el-button>
              <el-button text type="success" v-if="slotProps.row.areaCode != 530000">编辑</el-button>
              <el-button text type="danger" v-if="slotProps.row.areaCode != 530000">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getRegion } from "@/api/common";
const route = useRoute()
const router = useRouter()
const { params, query } = route

let btnText = ref('展开全部');

const tableData = ref([]);
let loading = ref(false);
const getArea = async () => {
  const res = await getRegion();
  if (res.code === 200) {
    tableData.value = res.data;
  }
};

onMounted(() => {
  getArea();
});
</script>
<style scope></style>