<template>
  <div class="menu-index">
    <el-card :bordered="false" class="pt-3 mb-3 proCard">
      <div>
        <el-button  type="primary" @click="handleAdd()" v-perm="['sys:city:add']">
          <template #icon>
            <el-icon>
              <plus />
            </el-icon>
          </template>
          新增
        </el-button>
      </div>
      </el-card>
      <el-card :bordered="false" class="pt-3 mb-3 proCard">
      <el-table border v-loading="loading" ref="tableRef" :data="lists" row-key="id" lazy
      :load="loadTree" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="城市名称" prop="name" min-width="150" show-overflow-tooltip/>
        <el-table-column label="城市拼音" prop="pinyin" min-width="150" show-overflow-tooltip/>
        <el-table-column align="center" label="城市级别" prop="level" min-width="80">
          <template #default="{ row }">
            <div v-if="row.level ==0">省份</div>
            <div v-else-if="row.level == 1">城市</div>
            <div v-else-if="row.level == 2">县区</div>
            <div v-else-if="row.level == 3">街道</div>
            <div v-else-if="row.level == 4">居委会</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="城市区号" prop="cityCode" min-width="100"/>
        <el-table-column align="center" label="行政编码" prop="areaCode" min-width="100"/>
        <el-table-column align="center" label="城市邮编" prop="zipCode" min-width="100"/>
        <el-table-column align="center" label="操作" width="300" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" icon="Plus" @click="handleAdd(row)" v-perm="['sys:city:addz']">
              新增
            </el-button>
            <el-button type="warning" icon="Edit" @click="handleEdit(row)" v-perm="['sys:city:update']">
              编辑
            </el-button>
            <el-button  type="danger" icon="Delete" @click="handleDelete(row)" v-perm="['sys:city:delete']">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <editDialog
        ref="editRef"
        v-if="editVisible"
        :cityId="cityId"
        :parentData="parentData"
        v-model:visible="editVisible"
        @success="refreshDataList"
    >
    </editDialog>
  </div>
</template>

<script lang="ts" setup name="menu">
import {defineAsyncComponent, nextTick, onMounted, ref, shallowRef} from "vue";
import {cityDelete} from "@/api/data/city";
import {getCityByList} from "@/api/system/user";
import type {ElTable} from "element-plus";
// const tableRef = shallowRef<InstanceType<typeof ElTable>>();
  const tableRef = ref()
import {confirm, message} from "@/utils/auth";

const editDialog = defineAsyncComponent(() =>
    import('./edit.vue')
)

const loading = ref(false);
const editVisible=ref(false);
const cityId=ref(0);
const parentData=ref()
const lists = ref([]);
const maps = ref(new Map())

const getDataList = async (code: any, resolve?: any) => {
  try {
    loading.value = true;
    let res = await getCityByList(code);
    let data = res.length>0 ?res: [];
    data.map(item => {
      if (item.level <=3) {
        item.hasChildren = true;
      } else {
        item.hasChildren = false;
      }
    });
    if (resolve) {
      resolve(data);
    } else {
      lists.value = data;
    }
  } catch (e) {
    if (resolve) {
      resolve([]);
    } else {
      lists.value = [];
    }
  } finally {
    loading.value = false;
  }
};

const refreshDataList=(code)=>{
  if(code==0) {
    getDataList(0);
  } else if( maps.value.get(code)) {
    const { tree, treeNode, resolve } = maps.value.get(code)
    if (tree) {
      loadTree(tree, treeNode, resolve);
    }
  }
}
const loadTree = (tree: any, treeNode: any, resolve: any) => {
  maps.value.set(tree.areaCode, { tree, treeNode, resolve })
  getDataList(tree.areaCode, resolve);
};
const handleAdd = async (data:any) => {
  cityId.value=0
  parentData.value=data
  await nextTick();
  editVisible.value=true
};

const handleEdit = async (data: any) => {
  cityId.value=data.id
  await nextTick();
  editVisible.value=true
};

const handleDelete = async (row: any) => {
  await confirm("确定要删除？");
  try {
    loading.value = true;
    await cityDelete(row.id);
    message("删除成功");
    loading.value = false;
    refreshDataList(row.parentCode);
  } catch (e) {
    loading.value = false;
  }
};
onMounted(() => {
  getDataList(0)
});


</script>

<style scoped>

</style>