<template>
  <ChartsContainer title="主观印象">
    <div v-if=" props.type === 'personal' " style="height: 100%;">
      <div class="chartsContainer-content" v-for=" ( item, index ) in pageData " :key="item.name">
        <div class="chartsContainer-content-top">
          <div class="chartsContainer-content-name">{{ item.name }}</div>
        </div>
        <div class="chartsContainer-content-content">
          <el-tag
            v-for=" attr in item.children "
            :key="attr.name"
            :color="colorList[ index % 5 ]"
            size="large"
            effect="dark">
            {{ attr.name }} ( {{ attr.count }} )
          </el-tag>
        </div>
      </div>
    </div>
    <div v-else ref="content" style="height: 100%;" />
  </ChartsContainer>
</template>

<script setup>
import ChartsContainer from '../ChartsContainer.vue';
import { computed, ref } from 'vue';
import { useTimeOut } from './useTimeOut';
import { useECharts } from '@/hooks/useEcharts.js';
import { getCollaborationProfile } from '@/api/item/items'
const props = defineProps({
  type: {
    type: String,
    default: '' // team, department, station
  }
})
const content = ref(null)
const pageData = ref([])
const colorList = [
  '#509430',
  '#B99136',
  '#157BC3',
  '#9A60B4',
  '#FC8452'
]
const chartData = ref({
  outerData: [],
  innerData: []
})
const params = inject('provideParams')
const setOptions = computed(() => {
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}次 ({d}%)'
    },
    legend: {
      show: false
    },
    series: [
      {
        type: 'pie',
        selectedMode: 'single',
        radius: [ 0, '50%' ],
        label: {
          position: 'inner',
          fontSize: 14,
          fontWeight: 'bold',
          show: true,
          formatter: function (params) {
            // 对四个字的中文分类名称进行折行处理
            const name = params.name;
            if (name && name.length === 4) {
              return name.substring(0, 2) + '\n' + name.substring(2, 4);
            }
            return name;
          }
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff'
        },
        data: chartData.value.innerData
      },
      {
        type: 'pie',
        radius: [ '55%', '75%' ],
        label: {
          position: 'outer',
          show: true,
          color: '#fff',
          fontWeight: 'bold',
          formatter: '{b}: {c}'
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 10
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff'
        },
        data: chartData.value.outerData
      }
    ]
  }
})
props.type !== 'personal' && useECharts(content, setOptions)
useTimeOut(() => {
  if (!params.value.deptId) return
  if (props.type === 'personal') {
    getCollaborationProfile({ userId: params.value.deptId }).then(res => {
      const { subjectiveImpressionList = [] } = res.data
      pageData.value = subjectiveImpressionList
    })
  } else {
    getCollaborationProfile({ deptId: params.value.deptId }).then(res => {
      const { subjectiveImpressionList = [] } = res.data
      chartData.value = subjectiveImpressionList.reduce((cur, acc) => {
        cur.innerData.push({
          value: acc.count || 0,
          name: acc.name
        })
        // 子项数据
        if (acc.children && acc.children.length > 0) {
          acc.children.forEach(child => {
            cur.outerData.push({
              value: child.count || 0,
              name: child.name
            });
          });
        }
        return cur
      }, {
        outerData: [],
        innerData: []
      })
    })
  }

}, [ params ])
</script>

<style lang="scss" scoped>
.chartsContainer-content {
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  flex: 1;
  flex-direction: column;
  row-gap: 10px;
  overflow: hidden;

  .chartsContainer-content-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #78DEF5;

    .chartsContainer-content-name {
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      display: flex;
      align-items: center;

      &::before {
        content: '';
        display: inline-block;
        border-left: 9px solid #1CB6FF;
        border-top: 8px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 8px solid transparent;
      }
    }

    .chartsContainer-content-other {
      display: flex;
      align-items: center;
    }
  }

  .chartsContainer-content-describe {
    color: #78DEF5;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }

  .chartsContainer-content-content {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
    :deep(.el-tag__content) {
      font-weight: bold;
    }
  }
}
</style>