<script lang="ts" setup>
import { ref, toRefs } from 'vue';
import groupIcon from './assets/group.png';
import projectIcon from './assets/project.png';
import parkingIcon from './assets/parking.png';
import { useI18n } from 'vue-i18n';

const win = window.rawWindow!;

// @ts-ignore
const emitter = win.__emitter__;

// @ts-ignore
const myTreeStore = win.__myTreeStore__ ?? {
  state: {
    selectedKeys: [],
    treeData: []
  }
};

const handleSelect = (...args: any[]) => {
  searchValue.value = '';
  myTreeStore.select(...args);
  count.value++;
};

const { t, t: $t } = useI18n();

// @ts-ignore
const { selectedKeys, treeData } = toRefs(myTreeStore.state);

const count = ref(0);

const searchValue = ref('');

const handleSearch = (value: string) => {
  searchValue.value = value;
};

const getIcon = (groupType: number) => {
  if (groupType === 1) return groupIcon;
  if (groupType === 2) return projectIcon;
  return parkingIcon;
};

// 高亮搜索文字
const hightLightResult = (name: string) => {
  const index = name.indexOf(searchValue.value);
  return `<span>
  <span> ${name.substr(0, index)}</span>
  <span style="color: #f50">${searchValue.value}</span>
  <span >${name.substr(index + searchValue.value.length)}</span>
  </span>`;
};

emitter.on('GLOBAL_TREE_SELECT_STATE_CHANGE', () => {
  count.value++;
});
</script>

<template>
  <a-form-item class="my-tree-select-new">
    <a-tree-select
      :value="selectedKeys[0]"
      style="width: 220px"
      dropdownClassName="my-tree-select"
      :dropdownMatchSelectWidth="false"
      :placeholder="$t('输入机构名称') as any"
      tree-default-expand-all
      :tree-data="treeData"
      :fieldNames="{ label: 'name', value: 'id' }"
      show-search
      tree-node-filter-prop="name"
      @select="handleSelect"
      @search="handleSearch"
    >
      <template #title="{ name, type, disabled, isTopGroup, groupType }">
        <div class="flex items-center gap-[4px] truncate">
          <div v-if="!isTopGroup" class="flex items-center">
            <img :src="getIcon(groupType)" alt="" />
          </div>
          <div
            v-if="name && name.includes(searchValue)"
            v-html="hightLightResult(name)"
            class="name"
            :class="{ isLot: type === 2 }"
            :style="{
              color: disabled ? 'rgba(0,0,0,0.2)' : '',
              fontSize: isTopGroup ? '14px' : ''
            }"
          />
          <div
            v-else
            class="name"
            :class="{ isLot: type === 2 }"
            :style="{
              color: disabled ? 'rgba(0,0,0,0.2)' : '',
              fontSize: isTopGroup ? '14px' : ''
            }"
          >
            {{ name }}
          </div>
        </div>
      </template>
    </a-tree-select>
    <span v-show="false">{{ count }}</span>
  </a-form-item>
</template>

<style lang="less">
// 设置下拉框最大高度
.my-tree-select {
  .ant-select-tree-list-holder {
    max-height: 600px !important;
  }

  .ant-select-tree-node-content-wrapper {
    font-size: 12px;
    &:hover {
      background: #f3fbff !important;
    }
  }
  .isLot {
    color: #8fb3f0;
  }
  .ant-select-tree-node-selected {
    background: #f3fbff !important;
    color: #51abff !important;
    font-weight: 600 !important;
    .isLot {
      color: #51abff !important;
    }
  }

  .ant-select-tree-switcher {
    width: 16px !important;
  }
}
</style>

<style lang="less" scoped>
.my-tree-select-new {
  display: none;
}
</style>
