<script setup>
import axios from 'axios';
import * as echarts from 'echarts';

import { onMounted, reactive, onUnmounted } from 'vue';
const state = reactive({
  loading: false,
  searchValue: 'qq_38870145',
  firstChart: null,
  columns: [{
    title: '文章名称',
    dataIndex: 'title',
  }, {
    title: '链接',
    dataIndex: 'url',
    sorter: true,
    width: '20%',
  }, {
    title: '浏览量',
    dataIndex: 'viewCount',
    sorter: true,
    width: '20%',
  }, {
    title: '收藏量',
    dataIndex: 'collectCount',
    sorter: true,
    width: '20%',
  }, {
    title: '分数',
    dataIndex: 'score',
    sorter: true,
    width: '20%',
  }, {
    title: '建议',
    dataIndex: 'message',
  }, {
    title: '发文时间',
    dataIndex: 'postTime',
  }],
  dataSource: []
})
const getCsdnData = (uId) => {

  const url = 'https://yongma16.xyz/common-api/getCsdnGrade/'
  const data = {
    uId
  }
  state.loading = true
  axios.post(url, data, { timeout: 100000 }).then(res => {
    console.log('res', res)
    state.dataSource = res.data.data
    state.loading = false
    initFirstData()
  }).finally(() => {
    state.loading = false
    state.dataSource = []
    initFirstData()
  })
}
onMounted(() => {
  getCsdnData()
})
const onSearch = () => {
  if (!state.searchValue) {
    return window.alert('请输入用户id')
  }
  getCsdnData(state.searchValue)
}

function initFirstData() {

  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('first'));
  const option = {
    title: {
      text: 'csdn 质量分柱状图 点击跳转到对应的文章'
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}
      }
    },
    dataZoom: [
      {
        id: 'dataZoomX',
        type: 'slider',
        xAxisIndex: [0],
        filterMode: 'filter'
      },
      {
        id: 'dataZoomY',
        type: 'slider',
        yAxisIndex: [0],
        filterMode: 'empty'
      }
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    xAxis: {
      type: 'category',
      data: state.dataSource.map(item => item.postTime)
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      formatter: function (params) {
        console.log('params', params)
        const findItem = state.dataSource.find(item => {
          return item.title == params.name
        })
        return `<span style='color:blue'>-<span> 博客标题：${params.name}  <br>
                <span style='color:green'>-<span> 博客质量：${params.value} <br>
                <span style='color:red'>-<span> 博客建议：${findItem.message}<br>
                <span style='color:blue'>-<span> 博客地址：${findItem.url}<br>
                    `
      },
    },
    series: [
      {
        data: state.dataSource.map(item => item.score),
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        label: { //柱体上显示数值
          show: true,//开启显示
          position: 'center',//在上方显示
          textStyle: {//数值样式
            fontSize: '2px',
            color: 'white'
          }
        },
        markPoint: {
          data: [
            { type: 'max', name: '最高分' },
            { type: 'min', name: '最低分' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: '平均分' }]
        }
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 监听
  state.firstChart = myChart;
  window.onresize = myChart.resize
  myChart.on('click', function (params) {
    const findItem = state.dataSource.find(item => {
      return item.title == params.name
    })
    if (params.name) {
      window.open(findItem.src, '_blank')
    }
  });
  onUnmounted(() => {
    window.onresize = null
  })
}
</script>

<template>
  <div class="container">
    <div>
      <a-input-search v-model:value="state.searchValue" :disabled="state.loading" placeholder="输入用户id" enter-button
        @search="onSearch" />
    </div>
    <br>
    <div>
      <a-table :columns="state.columns" :data-source="state.dataSource" :loading="state.loading">
      </a-table>
    </div>
    <div>
      <div id="first" style="width:100vw;height:100vh;"></div>
    </div>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {

  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
