<template>
  <div class="content_right">
    <!-- 战力竞技场区域 -->
    <div class="title">
      战力竞技场
      <span> (本年)</span>
    </div>
    <div class="power">
      <el-table :data="tableData">
        <el-table-column label="排名" align="center">
          <template #default="scope">
            <div :class="scope.$index > 2 ? 'green' : 'gray'">
              <img class="indexImg" src="@/assets/images/index-bg.png" />
              NO.{{ scope.$index + 1 }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="名称">
          <template #default="{ row }">
            <div class="power_name">
              <img class="power_img" :src="row.imgurl" />
              {{ row.name }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="战力值" align="center" width="220">
          <template #default="{ row }">
            <div class="power_value">{{ row.value }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 课程使用占比区域 -->
    <div class="title">
      课程使用占比
      <span> (本月)</span>
    </div>
    <div class="use" ref="barChart"></div>

    <!-- 知识点掌握情况区域 -->
    <div class="title">
      知识点掌握情况
      <span> (本月)</span>
    </div>

    <div class="knowledge" ref="pieChart"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as Echarts from 'echarts'

const tableData = ref([
  {
    id: 1,
    name: '朱冬梅',
    imgurl:
      'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    value: 35465
  },
  {
    id: 2,
    name: '朱梅',
    imgurl:
      'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    value: 30465
  },
  {
    id: 3,
    name: '朱一梅',
    imgurl:
      'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    value: 30465
  },
  {
    id: 4,
    name: '朱小梅',
    imgurl:
      'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    value: 30465
  }
])

// 课程使用占比图表实例
let myBarChart
// 课程使用占比图表DOM
const barChart = ref(null)

// 知识点掌握情况图表实例
let myPieChart
// 知识点掌握情况图表DOM
const pieChart = ref(null)

onMounted(() => {
  myBarChart = Echarts.init(barChart.value)
  initBarChart()

  myPieChart = Echarts.init(pieChart.value)
  initPieChart()
})

// 初始化课程使用占比图表
const initBarChart = () => {
  const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '8%',
      right: '4%',
      bottom: '18%'
    },
    xAxis: {
      type: 'category',
      data: ['人文学', '社会科学', '教育科学', '艺术学', '理化与材料', '资源环境学'],
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 12,
        interval: 0,
        fontSize: 13,
        color: '#fff'
      }
    },
    yAxis: {
      name: '小时',
      nameTextStyle: {
        fontSize: 13,
        color: '#fff'
      },
      type: 'value',
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(108, 128, 151, 0.1)'
        }
      }
    },
    series: [
      {
        data: [2.1, 1.6, 1.7, 1.9, 1.2, 5.5],
        type: 'bar',
        barWidth: '40%',
        showBackground: true,
        label: {
          show: true,
          position: 'top',
          distance: 5,
          color: '#fff'
        },
        itemStyle: {
          color: new Echarts.graphic.LinearGradient(
            0,
            0,
            100,
            100,
            [
              { offset: 0, color: '#EE814C' },
              { offset: 0.05, color: '#EE814C' },
              { offset: 0.05, color: 'rgba(0, 58, 255, 0)' },
              { offset: 1, color: '#159AFF' }
            ],
            true
          )
        }
      }
    ]
  }

  myBarChart.setOption(options)
}

// 初始化知识点掌握情况图表
const initPieChart = () => {
  const options = {
    tooltip: {
      trigger: 'item'
    },
    title: {
      text: '知识点掌握率',
      left: 'center',
      top: '45%',
      textStyle: {
        fontSize: 12,
        color: '#FFF'
      },
      subtext: '56%',
      subtextStyle: {
        fontSize: 13,
        color: '#57FFF4'
      }
    },
    color: ['#21D6F2', '#367BFB', '#B840EB'],
    series: [
      {
        type: 'pie',
        radius: [50, 90],
        center: ['50%', '50%'],
        roseType: 'area',
        label: {
          show: true,
          color: 'inherit',
          fontSize: 14,
          fontWeight: 'bold',
          formatter: (params) => {
            return params.name + params.value + '个'
          }
        },
        data: [
          { value: 40, name: '实测已掌握' },
          { value: 38, name: '实测未掌握' },
          { value: 32, name: '推测已掌握' }
        ]
      }
    ]
  }

  myPieChart.setOption(options)
}
</script>
<style lang="scss" scoped>
.content_right {
  z-index: 1;
  width: 490px;
  color: #fff;

  .title {
    box-sizing: border-box;
    padding-top: 2px;
    padding-left: 30px;
    height: 38px;
    font-size: 16px;
    font-weight: bold;
    background-image: url(@/assets/images/book-title-bg.png);
    background-size: 100% 100%;

    span {
      font-size: 14px;
    }
  }

  .power {
    margin-top: 18px;
    margin-bottom: 20px;
    height: 232px;
    overflow: hidden;

    .green {
      color: #57fff4;
    }

    .gray {
      color: #ff7734;
    }

    .indexImg {
      position: absolute;
      top: 0;
      left: 0;
      width: 8px;
      height: 8px;
    }

    .power_name {
      display: flex;
      align-items: center;
      color: #fff;
      .power_img {
        margin-right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
    }

    .power_value {
      font-size: 18px;
      font-weight: bold;
      color: #57fff4;
    }
  }

  .use {
    width: 490px;
    height: 270px;
  }

  .knowledge {
    width: 490px;
    height: 250px;
  }
}

/*最外层透明*/
.power ::v-deep(.el-table),
.power ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.power ::v-deep(.el-table th),
.power ::v-deep(.el-table tr),
.power ::v-deep(.el-table td),
::v-deep(.el-table th.el-table__cell.is-leaf) {
  background-color: transparent;
  color: #5cb3ff;
  border: none;
  height: 52px;
  margin-bottom: 1px;
}

.power ::v-deep(.el-table td) {
  border-bottom: 3px solid rgba(000, 000, 000, 0.3);
  background-color: rgba(20, 144, 245, 0.1);
}

::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

::v-deep(.el-table__header) {
  font-size: 16px;
  background-color: rgba(20, 144, 245, 0.5);
}

::v-deep(.el-scrollbar__view) {
  animation: run 10s linear infinite;
}

.power ::v-deep(.el-table tbody tr:hover > td) {
  background-color: rgba(20, 144, 245, 0.1);
}
</style>
