<template>
  <div class="content_right">
    <!-- 学情分析学生区域 -->
    <div class="student">
      <div class="student_title">学情分析（学生）</div>
      <div class="student_form">
        <el-table :data="tableData">
          <el-table-column label="学情类型" align="center">
            <template #default="{ row }">
              <div :class="row.type === '起立' ? 'green' : 'blue'">{{ row.type }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="姓名" align="center" />
          <el-table-column label="图片" align="center">
            <template #default="{ row }">
              <img class="form_img" :src="row.imgurl" />
            </template>
          </el-table-column>
          <el-table-column prop="time" label="时间" align="center" width="130" />
        </el-table>
      </div>
    </div>
    <!-- 学情分析老师区域 -->
    <div class="teacher">
      <div class="teacher_title">学情分析（老师）</div>
      <div class="teacher_chart" ref="pieChart"></div>
    </div>
  </div>
</template>

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

let myPieChart
const pieChart = ref(null)

const tableData = ref([
  {
    id: 1,
    type: '起立',
    name: '朱冬梅',
    imgurl:
      'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    time: new Date().toLocaleDateString()
  },
  {
    id: 2,
    type: '听讲',
    name: '李乐松',
    imgurl:
      'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    time: new Date().toLocaleDateString()
  },
  {
    id: 3,
    type: '阅读',
    name: '罗鸿文',
    imgurl:
      'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    time: new Date().toLocaleDateString()
  },
  {
    id: 4,
    type: '书写',
    name: '夏皓君',
    imgurl:
      'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    time: new Date().toLocaleDateString()
  },
  {
    id: 5,
    type: '举手',
    name: '舒霖',
    imgurl:
      'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    time: new Date().toLocaleDateString()
  },
  {
    id: 6,
    type: '趴桌子',
    name: '刘景辉',
    imgurl:
      'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    time: new Date().toLocaleDateString()
  },
  {
    id: 7,
    type: '讨论',
    name: '甘旭彬',
    imgurl:
      'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    time: new Date().toLocaleDateString()
  }
])

onMounted(() => {
  myPieChart = Echarts.init(pieChart.value)
  initPieChart()
})

const initPieChart = () => {
  const options = {
    title: {
      text: '学情分析', //主标题文本
      left: 'center',
      top: '36%',
      textStyle: {
        fontSize: 18,
        color: '#FFA951',
        align: 'center'
      }
    },

    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    color: ['#3BAC7C', '#014AF6', '#1DADFF', '#808080'],
    series: [
      {
        name: '学情分析',
        type: 'pie',
        center: ['50%', '40%'],
        radius: ['30%', '40%'],
        label: {
          show: true,
          position: 'outside',
          color: 'inherit',
          fontSize: 18,
          lineHeight: 25,
          formatter: (params) => {
            return params.percent + '%' + '\n' + '{a|' + params.name + '}'
          },
          rich: {
            a: {
              color: '#fff',
              fontSize: 16
            }
          }
        },
        labelLine: {
          show: true,
          length: 25,
          length2: 30
        },
        data: [
          { value: 1048, name: '离开讲桌' },
          { value: 735, name: '低头或弯腰操作桌面' },
          { value: 580, name: '正在授课' },
          { value: 484, name: '玩手机' }
        ]
      }
    ]
  }

  myPieChart.setOption(options)
}
</script>
<style lang="scss" scoped>
.content_right {
  width: 450px;
  height: 934px;
  color: #fff;

  .student {
    height: 446px;
    background-image: url(@/assets/images/right-box-bg.png);
    background-size: 100% 100%;
    overflow: hidden;

    .student_title {
      margin-top: 12px;
      margin-left: 42px;
      height: 55px;
      font-size: 20px;
      font-weight: bold;
    }

    .student_form {
      box-sizing: border-box;
      padding-right: 20px;
      height: 360px;
      overflow: hidden;

      .green {
        color: #54e2a9;
      }

      .blue {
        color: #00a0e9;
      }
      .form_img {
        width: 55px;
        height: 30px;
      }
    }
  }

  .teacher {
    margin-top: 29px;
    height: 459px;
    background-image: url(@/assets/images/right-box-bg.png);
    background-size: 100% 100%;
    overflow: hidden;

    .teacher_title {
      margin-top: 12px;
      margin-left: 42px;
      height: 55px;
      font-size: 20px;
      font-weight: bold;
    }

    .teacher_chart {
      width: 450px;
      height: 360px;
    }
  }
}

/*最外层透明*/
.student_form ::v-deep(.el-table),
.student_form ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.student_form ::v-deep(.el-table th),
.student_form ::v-deep(.el-table tr),
.student_form ::v-deep(.el-table td),
::v-deep(.el-table th.el-table__cell.is-leaf) {
  background-color: transparent !important;
  //表格字体颜色
  color: white;
  border: none;
  height: 52px;
}

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

::v-deep(.el-scrollbar__view) {
  animation: run 12s linear infinite;
}
</style>
