<template>
  <ContentWrap>
    <div class="top-box">
      <div class="top-box-left"> 统计视图 </div>
      <div class="top-box-right">
        <div class="top-box-right-title"> 统计方式 </div>
        <el-select v-model="type" placeholder="请选择" style="width: 100px; margin-left: 10px">
          <el-option :label="'天'" :value="1" />
          <el-option :label="'周'" :value="2" />
          <el-option :label="'月'" :value="3" />
        </el-select>
        <el-button style="margin-left: 16px">看板管理</el-button>
      </div>
    </div>
  </ContentWrap>

  <div class="">
    <el-row :gutter="16">
      <el-col :span="12">
        <el-card style="width: 100%">
          <div class="charts-title"> 任务总览 </div>
          <div ref="chartDom" style="width: 100%; height: 400px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="width: 100%">
          <div class="charts-title"> 任务完成率 </div>
          <div ref="chartDomFinish" style="width: 100%; height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="16" style="margin-top: 12px">
      <el-col :span="12">
        <el-card style="width: 100%"> 
          <div class="charts-title"> AGV工作利用率统计 </div>
          <div ref="chartDomAgv" style="width: 100%; height: 400px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="width: 100%"> 
          <div class="charts-title"> 任务异常数 </div>
          <div ref="chartDomError" style="width: 100%; height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

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


// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null)
const chartDomFinish = ref(null)
const chartDomError = ref(null)
const chartDomAgv = ref(null)

// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
  await nextTick() // 确保DOM已经渲染完成
  initEcharts()
})

const initEcharts = () => {
  initOne()
  initTwo()
  initFour()
}

const chartInstance = ref(null)
const initOne = () => {
  chartInstance.value = echarts.init(chartDom.value)
  let ydata = [
    {
      name: '执行中',
      value: 18
    },
    {
      name: '已完成',
      value: 16
    },
    {
      name: '已取消',
      value: 15
    },
    {
      name: '未开始',
      value: 14
    },
    {
      name: '异常',
      value: 10
    }
  ]
  let color = ['#0147EB', '#01BCEB', '#C800FF', '#F1CD0B', '#EB0000']
  let xdata = ['执行中', '已完成', '已取消', '未开始', '异常']
  const option = {
    backgroundColor: 'rgba(255,255,255,1)',
    color: color,
    // tooltip: {
    //     trigger: 'item',
    //     // formatter: '{a} <br/>{b} : {c} ({d}%)'
    // },
    legend: {
      orient: 'vartical',
      x: 'left',
      top: 'center',
      left: '60%',
      bottom: '0%',
      data: xdata,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 16,
      formatter: function (name) {
        let str = ''
        ydata.forEach((item) => {
          if (item.name == name) {
            str = `{c|${item.name}} {a|${item.value}}`
          }
        })
        return str
      },
      textStyle: {
        rich: {
          a: {
            color: '#0D162A',
            fontSize: 18
          },
          c: {
            color: '#536387',
            fontSize: 12
          }
        }
      }
    },
    series: [
      {
        type: 'pie',
        clockwise: false, //饼图的扇区是否是顺时针排布
        minAngle: 2, //最小的扇区角度（0 ~ 360）
        radius: ['50%', '65%'],
        center: ['30%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          //图形样式
          normal: {
            borderColor: '#ffffff',
            borderWidth: 6
          }
        },
        label: {
          // '{text|{b}}\n{c} ({d}%)'
          normal: {
            show: true,
            position: 'center',
            formatter: '{c|234,12} \n {a|任务总数}',
            rich: {
              c: {
                color: '#0D162A',
                fontSize: 15,
                fontWeight: 'bold',
                height: 30
              },

              a: {
                align: 'center',
                color: '#727272',
                fontSize: 12
              }
            }
          }
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
        },
        data: ydata
      }
    ]
  }
  chartInstance.value.setOption(option)
}

const chartInstanceTwo = ref(null)
const initTwo = () => {
  chartInstanceTwo.value = echarts.init(chartDomFinish.value)
  let option = {
    backgroundColor: '#fff',
    grid: {
      top: '9%',
      bottom: '19%',
      left: '6%',
      right: '4%'
    },
    tooltip: {
      trigger: 'axis',
      label: {
        show: true
      }
    },
    xAxis: {
      boundaryGap: true, //默认，坐标轴留白策略
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      data: [
        '武汉',
        '襄阳',
        '黄冈',
        '荆门',
        '十堰',
        '随州',
        '鄂州',
        '恩施',
        '宜昌',
        '孝感',
        '咸宁',
        '仙桃',
        '潜江',
        '天门',
        '黄石',
        '荆州',
        '神农架'
      ]
    },
    yAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#E2E7F5'
        }
      },
      axisTick: {
        show: false
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: 'rgb(245,250,254)'
        }
      }
    },
    series: [
      {
        type: 'line',
        symbol: 'circle',
        symbolSize: 1,
        lineStyle: {
          color: '#0147EB'
        },

        label: {
          show: false,
          distance: 1,
          emphasis: {
            show: true,
            offset: [25, -2],
            backgroundColor: 'rgba(0,0,0,0.7)',
            color: '#FFF',
            padding: [8, 20, 8, 6],
            //width:60,
            height: 36,
            formatter: function (params) {
              var name = params.name
              var value = params.data
              var str = name + '\n数据量：' + value
              return str
            },
            rich: {
              bg: {
                width: 78,
                //height:42,
                color: '#FFF',
                padding: [20, 0, 20, 10]
              },
              br: {
                width: '100%',
                height: '100%'
              }
            }
          }
        },
        data: [
          2000, 1800, 2800, 900, 1600, 2000, 3000, 2030, 1356, 1900, 4000, 3000, 2000, 3000, 4200,
          3200, 3800
        ]
      }
    ]
  }
  chartInstanceTwo.value.setOption(option)
}

const chartInstanceFour = ref(null)
const initFour = () => {
  chartInstanceFour.value = echarts.init(chartDomError.value)
  let option = {
    backgroundColor: '#fff',
    grid: {
      top: '9%',
      bottom: '19%',
      left: '6%',
      right: '4%'
    },
    tooltip: {
      trigger: 'axis',
      label: {
        show: true
      }
    },
    xAxis: {
      boundaryGap: true, //默认，坐标轴留白策略
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      data: [
        '武汉',
        '襄阳',
        '黄冈',
        '荆门',
        '十堰',
        '随州',
        '鄂州',
        '恩施',
        '宜昌',
        '孝感',
        '咸宁',
        '仙桃',
        '潜江',
        '天门',
        '黄石',
        '荆州',
        '神农架'
      ]
    },
    yAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#E2E7F5'
        }
      },
      axisTick: {
        show: false
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: 'rgb(245,250,254)'
        }
      }
    },
    series: [
      {
        type: 'line',
        symbol: 'circle',
        symbolSize: 1,
        lineStyle: {
          color: '#0147EB'
        },

        label: {
          show: false,
          distance: 1,
          emphasis: {
            show: true,
            offset: [25, -2],
            backgroundColor: 'rgba(0,0,0,0.7)',
            color: '#FFF',
            padding: [8, 20, 8, 6],
            //width:60,
            height: 36,
            formatter: function (params) {
              var name = params.name
              var value = params.data
              var str = name + '\n数据量：' + value
              return str
            },
            rich: {
              bg: {
                width: 78,
                //height:42,
                color: '#FFF',
                padding: [20, 0, 20, 10]
              },
              br: {
                width: '100%',
                height: '100%'
              }
            }
          }
        },
        data: [
          2000, 1800, 2800, 900, 1600, 2000, 3000, 2030, 1356, 1900, 4000, 3000, 2000, 3000, 4200,
          3200, 3800
        ]
      }
    ]
  }
  chartInstanceFour.value.setOption(option)
}
// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance.value != null && chartInstance.value.dispose) {
    chartInstance.value.dispose()
  }
})

const type = ref(1)
</script>

<style lang="scss" scoped>
.top-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-box-left {
  color: #0d162a;
  font-size: 18px;
}
.top-box-right {
  display: flex;
  align-items: center;
}
.top-box-right-title {
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #0d162a;
}
</style>
