<template>
  <div v-if="loading" class="w-[100%] h-[100%] flex justify-center items-center text-[#999]">数据加载中</div>
  <div v-else class="w-[100%] h-[100%]">
    <div v-if="show" ref="graphChart" class="w-[100%] h-[100%]"></div>
    <div v-else class="w-[100%] h-[100%] flex justify-center items-center text-[#999]">暂无数据</div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const avatarThis = new URL('@/assets/images/avatar_this.png', import.meta.url).href;
const avatarOther = new URL('@/assets/images/avatar_other.png', import.meta.url).href;
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const roles = ref(userStore.roles);
const props = defineProps({
  curUser: {
    type: Object,
    default: null
  },
  data: {
    type: Array,
    default: () => []
  },
  name: {
    type: String,
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  }
});
const expertId = computed(() => props.curUser?.expertId || '');
const loading = computed(() => props.loading);
const graphChart = ref(null);
const dataFormat = computed(() => {
  if (!props.curUser) return [];
  let arr: any = [props.curUser, ...props.data];
  return arr.map((el: any) => {
    return {
      name: el.expertName,
      id: `${el.expertId}`,
      value: `${el.expertId}`
    };
  });
});
const links = computed(() => {
  if (!expertId.value) return [];
  return props.data.map((el: any) => {
    return {
      source: `${el.expertId}`,
      target: `${expertId.value}`
    };
  });
});

const init = async () => {
  await proxy?.$nextTick();
  const myChart = echarts.init(graphChart.value);
  myChart.setOption({
    color: ['rgb(64, 158, 255)'],
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        if (params.value) {
          let label = params.value == expertId.value ? '当前专家' : params.seriesName;
          return `${label}：${params.name}`;
        }
        return params.seriesName;
      }
    },
    axisLabel: {},
    series: [
      {
        name: props.name,
        type: 'graph',
        center: ['50%', '50%'],
        layout: 'force',
        symbol: (value) => {
          return value == expertId.value ? `image://${avatarThis}` : `image://${avatarOther}`;
        },
        label: {
          show: true,
          color: '#333',
          position: 'inside',
          offset: [0, 30],
          shadowColor: '#333',
          shadowBlur: 2,
          fontSize: 12
        },
        emphasis: {
          label: {
            color: '#409EFF'
          }
        },
        edgeLabel: {
          fontSize: 20
        },
        symbolSize: 30,
        data: dataFormat.value,
        links: links.value,
        roam: true,
        force: {
          repulsion: 300,
          layoutAnimation: false
        }
      }
    ]
  });
  myChart.on('click', function (params: any) {
    if (roles.value.includes('expert') || params.value == expertId.value) return;
    proxy?.$router.push({
      path: '/expert/expertDetail',
      query: {
        id: params.value,
        type: 'detail'
      }
    });
  });
  window.onresize = () => {
    myChart.resize();
  };
};
const show = ref(true);
watch(
  expertId,
  (n) => {
    show.value = false;
    if (!n) return;
    proxy?.$nextTick(() => {
      show.value = true;
    });
  },
  { deep: true, immediate: true }
);
watch(show, (s) => {
  if (!s) return;
  init();
});
</script>

<style lang="scss" scoped></style>
