<!-- 出入库分析 -->
<template>
  <div>
    <a-space class="header-box">
      <div class="input-top">
        <div class="inputBox">
          <span class="title-box">{{ '品种' }}</span>
          <a-input class="select-box" style="width: 190px" v-model:value="informationData.lspzName" placeholder="请输入" />
          <span class="title-box">{{ '等级' }}</span>
          <a-select class="select-box" v-model:value="informationData.lsdjName" style="width: 190px" placeholder="请选择">
            <a-select-option v-for="item in gradeList" :key="item.id" :value="item.id">
              {{ item.dictLabel }}
            </a-select-option>
          </a-select>
        </div>
        <div class="btnBox">
          <a-button style="margin-right: 16px" type="primary" @click="searchData">查询</a-button>
          <a-button style="margin-right: 16px" @click="reset">重置</a-button>
        </div>
      </div>
    </a-space>
    <div class="accident-content">
      <div class="accident-box">
        <div class="btn">
          <span class="right-img"></span>
          <p class="accident-text">{{ '出入库数量统计' }}</p>
        </div>
        <!-- 事故发生次数 echarts图表 -->
        <div ref="chart" class="echats-box"></div>
      </div>
      <div class="accident-box">
        <div class="btn">
          <span class="right-img"></span>
          <p class="accident-text">{{ '粮食等级统计' }}</p>
        </div>
        <!-- 事故发生次数 echarts图表 -->
        <div ref="chartgrade" class="echats-box"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'
import * as echarts from 'echarts'

const informationData = ref({
  lspzName: '',
  lsdjName: undefined,
})
const chart = ref(null)
const chartgrade = ref(null)

const gradeList = ref([])
// echarts柱状图实例 品种
const drawQuantity = (list) => {
  const option = {
    grid: {
      left: '7%',  // 调整图表距离容器左侧的距离，'20%' 表示图表向右靠近
    },
    tooltip: {
      show: true,
      trigger: 'axis', // 坐标轴触发
      axisPointer: { // 坐标轴指示器配置项
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        show: false
      }
    },
    legend: {
      data: ['入库', '出库'],
      left: 'center',
      top: 'top'
    },
    xAxis: {
      type: 'category',
      data: list.map(i => {
        return i.lspzName || '-'
      }),
      axisLabel: {
        interval: 0,
        rotate: '45',
        margin: 10, // 与轴线之间的距离
        alignTo: 'edge', // 标签与轴线对齐
        verticalAlign: 'middle', // 垂直对齐
        // 如果名称过长，可以使用formatter截断并添加省略号
        formatter: function (value) {
          return echarts.format.truncateText(value, 80, '80px', '…');
        },
        textStyle: { //x轴坐标的文字样式
          fontSize: 12,  //x轴坐标的文字大小
          color: 'rgba(85, 88, 95, 1)' //x轴坐标的文字颜色
        },
      },
      axisTick: false,// 隐藏刻度代码
      axisLine: {
        lineStyle: {
          color: '#d3d5d9' // 修改为你想要的颜色
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '数量（吨）',
      axisLabel: {
        // 使用 formatter 函数将刻度值格式化为整数
        formatter: function (value) {
          return Math.ceil(value); // 使用 Math.ceil 函数向上取整
        }
      },
      minInterval: 2, // 设置最小间隔为1,
    },
    series: [
      {
        name: '入库',
        type: 'bar',
        color: '#02a7f0',
        barWidth: '20', // 设置为类目宽度的50%,
        data: list.map(i => {
          return i.sumRk || 0
        }),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, // x1, y1, x2, y2 指定渐变的起点和终点位置
            [
              { offset: 0, color: '#4b82ff' }, // 渐变起始颜色
              { offset: 1, color: '#f2f6ff' } // 渐变结束颜色
            ]
          )
        }
      },
      {
        name: '出库',
        type: 'bar',
        color: '#caf982',
        barWidth: '20',
        data: list.map(i => {
          return i.sumZl || 0
        }),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, // x1, y1, x2, y2 指定渐变的起点和终点位置
            [
              { offset: 0, color: '#3bd6c6' }, // 渐变起始颜色
              { offset: 1, color: '#f2f6ff' } // 渐变结束颜色
            ]
          )
        }
      }
    ]
  }
  // 使用刚刚创建的配置项来初始化你的 ECharts 实例
  const chartInstance = echarts.init(chart.value);
  chartInstance.setOption(option);
}
// 等级
const drawGrade = (list) => {
  const option = {
    grid: {
      left: '7%',  // 调整图表距离容器左侧的距离，'20%' 表示图表向右靠近
    },
    tooltip: {
      show: true,
      trigger: 'axis', // 坐标轴触发
      axisPointer: { // 坐标轴指示器配置项
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        show: false
      }
    },
    legend: {
      left: 'center',
      top: 'top'
    },
    xAxis: {
      type: 'category',
      data: list.map(i => {
        return i.lsdjName || '-'
      }),
      axisLabel: {
        interval: 0,
        rotate: '45',
        margin: 10, // 与轴线之间的距离
        alignTo: 'edge', // 标签与轴线对齐
        verticalAlign: 'middle', // 垂直对齐
        // 如果名称过长，可以使用formatter截断并添加省略号
        formatter: function (value) {
          return echarts.format.truncateText(value, 80, '80px', '…');
        },
        textStyle: { //x轴坐标的文字样式
          fontSize: 12,  //x轴坐标的文字大小
          color: 'rgba(85, 88, 95, 1)' //x轴坐标的文字颜色
        },
      },
      axisTick: false,// 隐藏刻度代码
      axisLine: {
        lineStyle: {
          color: '#d3d5d9' // 修改为你想要的颜色
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '数量（吨）',
      axisLabel: {
        // 使用 formatter 函数将刻度值格式化为整数
        formatter: function (value) {
          return Math.ceil(value); // 使用 Math.ceil 函数向上取整
        }
      },
      minInterval: 2, // 设置最小间隔为1,
    },
    series: [
      {
        type: 'bar',
        color: '#02a7f0',
        barWidth: '20', // 设置为类目宽度的50%,
        data: list.map(i => {
          return i.sumZl || 0
        }),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, // x1, y1, x2, y2 指定渐变的起点和终点位置
            [
              { offset: 0, color: '#4e84fe' }, // 渐变起始颜色
              { offset: 1, color: '#f2f6ff' } // 渐变结束颜色
            ]
          )
        }
      }
    ]
  }
  // 使用刚刚创建的配置项来初始化你的 ECharts 实例
  const chartInstance = echarts.init(chartgrade.value);
  chartInstance.setOption(option);
}
// 等级查询
const getChildrenData = () => {
  reserveDataApi.getAllChildrenData({
    enumid: 1002,
    isQueryFristNode: true
  }).then((res) => {
    gradeList.value = res.map(item => {
      return {
        id: item.enumid,
        dictLabel: item.enumname
      }
    })
  })
}
// 品种
const onSearch = () => {
  const fd = {
    type: 1,
    lspzName: informationData.value.lspzName,
    lsdjName: informationData.value.lsdjName,
  }
  let outboundList = []//出库
  let arr = [] // 入库
  let list = []
  reserveDataApi.chartData(fd).then((res) => {
    nextTick(() => {
      res.forEach(i => {
        if (i.ywlx == '1') {
          outboundList.push(i)
        } else {
          arr.push(i)
        }
      })
      arr.map(i => {
        return outboundList.map(e => {
          return list.push({
            ...e,
            sumRk: i.sumZl
          })
        })
      })
      drawQuantity(list)
    })
  })
}
// 等级
const onSearch1 = () => {
  const fd = {
    type: 2,
    lspzName: informationData.value.lspzName,
    lsdjName: informationData.value.lsdjName,
  }
  reserveDataApi.chartData(fd).then((res) => {
    nextTick(() => {
      let arrlist = res
      drawGrade(arrlist)
    })
  })
}
// 查询
const searchData = () => {
  onSearch(), onSearch1(), getChildrenData()
}
// 重置
const reset = () => {
  informationData.value = {
    lspzName: '',
    lsdjName: undefined,
  }
  onSearch(), onSearch1(), getChildrenData()
}
onMounted(() => {
  onSearch(), onSearch1(), getChildrenData()
})
</script>
<style scoped>
.header-box {
  padding: 20px;
  width: 100%;
  margin-bottom: 24px;
}

.input-top {
  display: flex;
}


.select-box {
  margin-left: 12px;
}

.title-box {
  margin-left: 20px;
  line-height: 30px;
}

.btnBox {
  width: 260px;
  margin-left: 20px;
  justify-content: start;
  display: flex;
}

.accident-content {
  background-color: #fff;
  width: 100%;
  display: flex;
}

.accident-text {
  font-size: 20px;
  color: #69c0ff;
  font-weight: bold;
  padding: 16px 0;
  margin: 0;
}

.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;
}

.accident-box {
  width: 49%;
  padding-left: 4%;
  margin-bottom: 16px;
}

.accident-title {
  display: flex;
  width: 18%;
}

.ant-input-group-addon {
  border: 0;
}

.ant-input,
.ant-btn {
  border-radius: 5px;
}

.ant-pagination {
  margin-top: 12px;
  float: right;
  margin-right: 16px;
}

.echats-box {
  width: 98%;
  height: 420px;
}
</style>