<script setup name="roleManage">
import { nextTick, onMounted, ref } from 'vue'
import { districtList } from '@/http/apis/commonApi'
import { storeToRefs } from 'pinia'
import store from '@/store'
const userInfo = storeToRefs(store.userStore).userInfo
const props = defineProps({
  defaultExpandAll: {
    type: Boolean,
    default: true
  },
  defaultData: {
    type: Object,
    default: undefined
  },
  params: {
    type: Object,
    default: () => {
      return {
        regionCode: 330500,
        regionLevel: 2
      }
    }
  }
})
const treeData = ref([]),
  emits = defineEmits(['getTree']),
  customNodeClass = {
    label: 'name'
  },
  nodeClick = (data) => {
    console.log(data)
    emits('getTree', { ...data })
  },
  treeRef = ref()
onMounted(async () => {
  const res = await districtList(props.params)
  treeData.value = [res.data]
  // 默认选中某个节点
  if (props.defaultData) {
    nextTick(() => {
      treeRef.value && treeRef.value.setCurrentKey(props.defaultData.regionCode, true)
      emits('getTree', { ...treeRef.value.getCurrentNode() })
    })
  } else {
    nextTick(() => {
      treeRef.value && treeRef.value.setCurrentKey(userInfo.value.regionCode, true)
      emits('getTree', { ...treeRef.value.getCurrentNode() })
    })
  }
})
</script>

<template>
  <div class="userManageMenu">
    <div class="treeTitle flexItem">
      <svg-icon name="location" svg-class="svgIcon" />&nbsp;<span
        style="font-weight: 600"
      >区划选择</span>
    </div>
    <el-tree
      ref="treeRef"
      class="tree"
      :data="treeData"
      node-key="regionCode"
      :highlight-current="true"
      :props="customNodeClass"
      :default-expand-all="defaultExpandAll"
      :current-node-key="defaultData&&defaultData.code||undefined"
      :expand-on-click-node="false"
      @node-click="nodeClick"
    />
  </div>
</template>
<style lang="less" scoped>
.userManageMenu {
  background: #fff;
  padding: 16px 0px 0px;
  box-shadow: 0px 3px 6px 0px rgba(62,99,170,0.06);
  height:auto;
  :deep(.el-menu){
    border-right: none;
  }
  .tree {
    padding: 16px 16px;
  }
  .treeTitle {
    padding: 0px 16px 16px;
    border-bottom: 1px solid #d8dadf;
  }
}
</style>
