<template>
  <div class="fl-tree width-100 fl-mt-md">
    <a-tree style="backgorund:transparent;"
            v-model:expandedKeys="state.expandedKeys"
            v-model:selectedKeys="state.selectedKeys"
            :defaultExpandAll="true"
            ref='myComponentRef'
            :tree-data="state.treeData"
            @select="handleSelectTree">
      <template #title="{ dataRef }">
        <div class="row items-center">
          <div v-if="dataRef.edit">
            <a-input v-model:value="state.editTitle"
                     style="width:120px"></a-input>
          </div>
          <a-popover v-else>
            <template #content>
              <div>{{ dataRef.title }}</div>
            </template>
            <div style="width:120px"
                 :style="props.clickKey === dataRef.key ? 'background:#DFD7F2;border-radius:15px;' : ''"
                 class="fl-px-sm sf-text-ellipsis">{{ dataRef.title }}</div>

          </a-popover>
          <edit-outlined v-if="config?.actions.includes('edit')&&!dataRef.edit"
                         class="fl-ml-sm"
                         @click.stop="handleTreeEdit(dataRef)" />
          <plus-outlined v-if="config?.actions.includes('add')&&!dataRef.edit&&visibleFormItem(config.addShow, dataRef)"
                         class="fl-ml-sm"
                         @click.stop="handleTreeAdd(dataRef)" />
          <minus-outlined v-if="config?.actions.includes('subtraction')&&!dataRef.edit&&visibleFormItem(config.subtractionShow, dataRef)"
                          class="fl-ml-sm"
                          @click.stop="handleTreeSubtraction(dataRef)" />
          <check-outlined v-if="dataRef.edit"
                          class="fl-ml-sm"
                          @click.stop="handleTreeSave(dataRef)" />
          <close-outlined v-if="dataRef.edit"
                          class="fl-ml-md"
                          @click.stop="handleTreeNotSave(dataRef)" />
        </div>
      </template>
      <template #switcherIcon="{ expanded }">
        <plus-circle-outlined v-if="!expanded" />
        <minus-circle-outlined v-else />
      </template>
    </a-tree>
  </div>
</template>
<script setup>
// 岗位
import flFormItem from "@/components/layout/form/formItem.vue";
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
  defineEmits,
  watch,
  nextTick
} from "vue";
import {
  visibleFormItem,
} from "@/utils/helper/form";
import { PlusCircleOutlined, MinusCircleOutlined, EditOutlined, PlusOutlined, MinusOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { processError } from "@/utils/helper/message";
import flTable from "@/components/layout/table/commonTable.vue";
import flTree from "@/components/layout/tree/index.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
let props = defineProps({
  data: Object,
  refreshCount: Number,
  config: Object,
  expandedKeys: Array,
  clickKey: [String, Number]
})
const state = reactive({
  expandedKeys: [],
  selectedKeys: [],
  editTitle: '',
  treeData: [],
});

watch(() => props.refreshCount, () => {
  state.treeData = props.data
  calcDefaultConfig(state.treeData, 1)
});

watch(() => props.expandedKeys, () => {
  state.expandedKeys = props.expandedKeys
}, { deep: true });

onBeforeMount(() => {
  state.treeData = props.data
  calcDefaultConfig(state.treeData, 1);
  state.expandedKeys = state.treeData.map(item => item.key)
  // if (props.expandedKeys.length > 0) {
  //   state.expandedKeys = props.expandedKeys
  // }
});

onMounted(() => {
});
const emit = defineEmits(["triggerTreeAction", "triggerTreeClick"]);
const handleSelectTree = (selectedKey, tree) => {
  emit('triggerTreeClick', selectedKey, tree.node.dataRef)
}
const myComponentRef = ref(null);
const handleTreeEdit = (dataRef) => {
  state.editTitle = dataRef.title
  // nextTick(() => {
  //   dataRef.edit = true
  // })
  dataRef.edit = true
  myComponentRef.value.$forceUpdate();
  console.log('tree edit', dataRef);
}
const handleTreeAdd = (dataRef) => {
  console.log('tree add');
  emit('triggerTreeAction', { type: 'add', val: dataRef })
  // let arr = dataRef.children || []
  // arr.push({ title: '新增节点' })
  // dataRef.children = arr
  // state.expandedKeys = [...state.expandedKeys, dataRef.key]
}
const handleTreeSubtraction = (dataRef) => {
  console.log('tree subtraction')
  emit('triggerTreeAction', { type: 'subtraction', val: dataRef })
}
const handleTreeSave = (dataRef) => {
  console.log('tree save')
  dataRef.title = state.editTitle
  // dataRef.edit = false
  emit('triggerTreeAction', { type: 'save', val: dataRef })
}
const handleTreeNotSave = (dataRef) => {
  state.editTitle = ''
  emit('triggerTreeAction', { type: 'cancel', val: dataRef })
}
const calcDefaultConfig = (data, level) => {
  for (let item of data) {
    if (!item.key) {
      item.key = item.title + '_' + level;
    }
    item.edit = false
    if (item.children) {
      calcDefaultConfig(item.children, level + 1);
    }
  }
}

</script>
<style lang="scss" scoped>
    
.fl-tree :deep(.ant-tree) {
  background: transparent !important;
}
.fl-tree :deep(.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected) {
  background: transparent !important;
}
</style>
