<!-- 物资入库情况 -->

<template>
  <div class="box">
    <div ref="wzqk" class="charts"></div>
    <div class="title">物资出入库统计</div>
    <el-select
      @change="GetData"
      v-model="selcetData"
      :teleported="false"
      popper-class="popperClass"
      class="select"
      size="small"
      placeholder="请选择"
      style="width: 150px; height: 21px"
    >
      <!-- <el-option value="1" label="全部" />
            <el-option value="2" label="入库采购" />
            <el-option value="3" label="多发，增发入库" />
            <el-option value="4" label="调用后返还" />
            <el-option value="5" label="未调用实际在库" />
            <el-option value="6" label="移库入库" />
            <el-option value="7" label="维修完成入库" /> -->
      <el-option value="1" label="出库" />
      <el-option value="2" label="入库" />
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { getInventoryReceiptStatus, getInventoryDispatchStatus } from "@/api/keshihua/index";
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const wzqk = ref(null);
const myColor = [
  "#eb2100",
  "#eb3600",
  "#d0570e",
  "#d0a00e",
  "#34da62",
  "#00e9db",
  "#00c0e9",
  "#0096f3",
  "#33CCFF",
  "#33FFCC"
];
let Ydata = [];
let Xdata = [];
let selcetData = ref("1");
async function GetData(e) {
  //入库
  if (e == 2) {
    try {
      const res = await getInventoryReceiptStatus();
      console.log(res, "入库的数据");
      // Xdata = [];
      // Ydata = [];
      res.forEach((item) => {
        Ydata.push(item.materialType);
        Xdata.push(item.totalPrice);
      });
      let myChart = echarts.init(wzqk.value);
      let option = {
        //你的代码
        backgroundColor: "",
        grid: {
          left: "21%",
          top: "38%",
          right: "10%",
          width: "70%",
          height: "60%",
          bottom: "8%",
          containLabel: true
        },
        dataZoom: [
          {
            yAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4 // 一次性展示5个。。
          }
        ],
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            axisTick: "none",
            axisLine: "none",
            offset: "12",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "12"
              }
            },
            data: Ydata
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "12"
              }
            },
            //y
            data: ["5", "4", "3", "2", "1"]
          }
          // {
          //     name: '滚动TOP 10',
          //     nameGap: '50',
          //     nameTextStyle: {
          //         color: '#ffffff',
          //         fontSize: '16',
          //     },
          //     axisLine: {
          //         lineStyle: {
          //             color: 'rgba(0,0,0,0)'
          //         }
          //     },
          //     data: [],
          // }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: Xdata,
            label: {
              normal: {
                show: true,
                position: "right",
                textStyle: {
                  color: "#ffffff",
                  fontSize: "16"
                }
              }
            },
            barWidth: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                }
              }
            },
            z: 2
          },
          {
            name: "白框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [99, 99.5, 99.5, 99.5, 99.5],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "transparent",
                barBorderRadius: 5
              }
            },
            z: 1
          }
          // {
          //     name: '外框',
          //     type: 'bar',
          //     yAxisIndex: 2,
          //     barGap: '-100%',
          //     data: [100, 100, 100, 100, 100],
          //     barWidth: 24,
          //     itemStyle: {
          //         normal: {
          //             color: function (params) {
          //                 var num = myColor.length;
          //                 return myColor[params.dataIndex % num]
          //             },
          //             barBorderRadius: 5,
          //         }
          //     },
          //     z: 0
          // },
          // {
          //     name: '外圆',
          //     type: 'scatter',
          //     hoverAnimation: false,
          //     data: [0, 0, 0, 0, 0],
          //     yAxisIndex: 2,
          //     symbolSize: 35,
          //     itemStyle: {
          //         normal: {
          //             color: function(params) {
          //                 var num = myColor.length;
          //                 return myColor[params.dataIndex % num]
          //             },
          //             opacity: 1,
          //         }
          //     },
          //     z: 2
          // }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    } catch (err) {
      throw "获取入库的数据失败";
    }
  }
  //出库
  else if (e == 1) {
    try {
      const res = await getInventoryDispatchStatus();
      console.log(res, "出库的数据");
      Xdata = [];
      Ydata = [];
      res.forEach((item) => {
        Ydata.push(item.materialType);
        Xdata.push(item.totalPrice);
      });
      let myChart = echarts.init(wzqk.value);
      let option = {
        //你的代码
        backgroundColor: "",
        grid: {
          left: "21%",
          top: "38%",
          right: "10%",
          width: "70%",
          height: "60%",
          bottom: "8%",
          containLabel: true
        },
        dataZoom: [
          {
            yAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4 // 一次性展示5个。。
          }
        ],
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            axisTick: "none",
            axisLine: "none",
            offset: "12",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "12"
              }
            },
            data: Ydata
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "12"
              }
            },
            //y
            data: ["5", "4", "3", "2", "1"]
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: Xdata,
            label: {
              normal: {
                show: true,
                position: "right",
                textStyle: {
                  color: "#ffffff",
                  fontSize: "16"
                }
              }
            },
            barWidth: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                }
              }
            },
            z: 2
          },
          {
            name: "白框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [99, 99.5, 99.5, 99.5, 99.5],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "transparent",
                barBorderRadius: 5
              }
            },
            z: 1
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    } catch (err) {
      throw "获取出库的数据失败";
    }
  }
}

onMounted(() => {
  GetData(selcetData.value);
});
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.box .charts {
  width: 100%;
  height: 100%;
  /* background: pink; */
}

.title {
  font-size: 20px;
  color: red;
  position: absolute;
  left: 14%;
  top: 6%;
  font-weight: 700;
  background: linear-gradient(to bottom, #ffffff, rgb(29, 233, 234));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

:deep(.select .el-select-dropdown) {
  background: rgba(132, 159, 228, 0.2) !important;
}

:deep(.select .el-select-dropdown .el-select-dropdown__item) {
  /* background: rgba(12,21,44,0.2); */
}

.el-select-dropdown__item.selected,
.el-select-dropdown__item:hover,
.el-select-dropdown__item.hover {
  color: #fff;
  background: #409eff;
}

.select {
  position: absolute;
  left: 14%;
  top: 20%;
  /* height: 10%; */
}

:deep(.el-popper.is-light) {
  background: #307cbf;
  border: 1px solid #273f70;
}

:deep(.el-select-dropdown__item.hover) {
  background: transparent;
  border: none;
  color: #04faa0;
}

:deep(.el-select-dropdown__item) {
  background: transparent;
  border: none;
  color: #fff;
}

:deep(.el-popper.is-light .el-popper__arrow::before) {
  border: 1px solid #4778d9;
  background: #4778d9;
  right: 0;
}

:deep(.el-select__wrapper) {
  /* position: absolute; */
  /* width: 50%; */
  /* height: 4%; */
  /* left: 20%;
    top:; */
  background: transparent !important;
  border: rgba(255, 255, 255, 0.2) 1px solid !important;
  box-shadow: none;
}
</style>
