<!-- 库存图表 -->
<template>
  <div class="box">
    <div class="box-right" style="border-right: 1px solid #e6f7ff;">
      <div class="btn">
        <span class="right-img"></span>
        <p class="box-title">{{ '粮食等级占比' }}</p>
      </div>
      <div v-if="GrainList.length > 0" ref="chart" class="echats-box"></div>
      <div class="absence" v-else>{{ '暂无数据' }}</div>
    </div>
    <div class="box-right1">
      <div class="btn">
        <span class="right-img"></span>
        <p class="box-title">{{ '粮食性质占比' }}</p>
      </div>
      <div v-if="ograms.length > 0" ref="chartData" class="echats-box"></div>
      <div class="absence" v-else>{{ '暂无数据' }}</div>
    </div>
  </div>
</template>
<script setup>
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'
import * as echarts from 'echarts'
import { useRouter } from 'vue-router'
const chart = ref(null)
const chartData = ref(null)
const colorList = ['#5470c6', '#91cc75', '#fac858', '#e66', '#73c0de', '#3ba272', '#fc8452', '#9a60b4']
// 粮食等级
const drawGrade = (list) => {
  const arrList = list.map((item, index) => {
    return {
      label: {
        color: colorList[index],
      },
      ...item
    }
  })
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)',
      show: true,
    },
    legend: {
      top: 'bottom',
      left: 'right',  // 显示的位置
      orient: 'vertical',  //表示垂直排列
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['32%', '50%'], // 将中心点向左移动
        data: arrList,
        avoidLabelOverlap: false,
        label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
          normal: {
            show: true,
            fontSize: 14,// 是否显示标签[ default: false ]
            position: 'outside',    // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
            formatter: '{b} {c}吨\n{d}%',// 标签内容
            padding: [0, 0, 0, 0], //取消hr线跟延长线之间的间隙
          }
        },
        labelLine: {                    // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
          normal: {
            show: true,             // 是否显示视觉引导线。
            length: 20,             // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
            length2: 10,
            // 视觉引导项第二段的长度。
            lineStyle: {            // 视觉引导线的样式
              type: 'solid',
            }
          }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200;
        }
      }
    ]
  }
  // 使用刚刚创建的配置项来初始化你的 ECharts 实例
  const chartInstance = echarts.init(chart.value);
  chartInstance.setOption(option);
}
//粮食性质
const drawNature = (list) => {
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)',
      show: true,
    },
    legend: {
      top: 'bottom',
      left: 'right',  // 显示的位置
      orient: 'vertical',  //表示垂直排列
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['32%', '50%'], // 将中心点向左移动
        avoidLabelOverlap: false,
        label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
          normal: {
            show: true,
            fontSize: 14,// 是否显示标签[ default: false ]
            position: 'outside',    // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
            formatter: '{b} {c}吨\n{d}%',// 标签内容
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        labelLine: {                    // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
          normal: {
            show: true,             // 是否显示视觉引导线。
            length: 20,             // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
            length2: 10,
            // 视觉引导项第二段的长度。
            lineStyle: {            // 视觉引导线的样式
              type: 'solid',
            }
          }
        },
        data: list.map((item, index) => {
          return {
            label: {
              color: colorList[index],
            },
            ...item
          }
        })
      }
    ]
  }
  // 使用刚刚创建的配置项来初始化你的 ECharts 实例
  const chartInstanceData = echarts.init(chartData.value);
  chartInstanceData.setOption(option);
}
// 列表分页
const GrainList = ref([])
const onSearch = () => {
  // 等级 
  reserveDataApi.businessGrade({ orgId: useRouter().currentRoute.value.query.orgId, }).then((res) => {
    let arrList = res.map(i => {
      return {
        value: i.TotalKilograms || 0,
        name: i.GrainGrade || ''
      }
    })
    GrainList.value = res
    nextTick(() => {
      drawGrade(arrList)
    })
  })
}
// 性质
const ograms = ref([])
const onSearch1 = () => {
  reserveDataApi.businessNature({ orgId: useRouter().currentRoute.value.query.orgId, }).then((res) => {
    let arrList = res.map(i => {
      return {
        value: i.TotalKilograms || 0,
        name: i.GrainGrade || ''
      }
    })
    ograms.value = res
    nextTick(() => {
      drawNature(arrList)
    })
  })
}

onMounted(() => {
  onSearch(), onSearch1()
});
</script>
<style lang="less" scoped>
.box {
  width: 98%;
  height: 660px;
  margin-top: 32px;
  display: flex;

  .box-right {
    width: 48%;
  }

  .box-right1 {
    width: 52%;
  }

  .btn {
    display: flex;
  }

  .right-img {
    background-image: url('../../../../assets/img/标题三角图标.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 22px;
    height: 24px;
    margin: auto 8px;
  }

  .box-title {
    color: #333;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 6px;
  }

  .echats-box {
    width: 100%;
    padding-right: 20px;
    height: 400px;
  }

  .absence {
    color: #333;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
  }

}
</style>