<template>
  <!-- 前方需求情况 -->
  <div class="forwardDemand-container">
    <!-- 筛选 -->
<!--    <div class="formData-box">
      <el-form ref="form" :model="formData" label-width="90px">
        <el-form-item label="请选择年份" size="mini">
          <el-select v-model="formData.year">
            <el-option label="2024" :value="2024"></el-option>
            <el-option label="2025" :value="2025"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="query-btn" @click="queryBtn">检索</div>
    </div>-->
    <div class="forwardDemand-box">
      <div class="left-box">
        <div class="border-out">
          <div class="border-inner">
            <div class="left-top-title">需求计划情况</div>
            <!-- 表格 -->
            <div class="left-top-box">
              <el-row class="sum-border">
                <el-col :span="7" class="col-right-border">需求总量</el-col>
                <el-col :span="17" class="col-right-border-text green"
                  >{{ rowObj.xq }}吨</el-col
                >
              </el-row>
              <vue-seamless-scroll
                :data="tableList"
                :class-option="classOption"
                class="warp-box"
                :class="
                  tableList.length == 1
                    ? 'warp-box-1'
                    : tableList.length == 2
                    ? 'warp-box-2'
                    : ''
                "
              >
                <el-row
                  class="row-border"
                  v-for="(item, index) in tableList"
                  :key="index"
                  ref="refHeight"
                >
                  <el-col :span="3" class="col-right-border">船号</el-col>
                  <el-col :span="4" class="col-right-border">{{
                    item.dcCh
                  }}</el-col>
                  <el-col :span="4" class="col-right-border">批次数量</el-col>
                  <el-col :span="5" class="col-right-border"
                    >{{ item.pcsl }} 张</el-col
                  >
                  <el-col :span="3" class="col-right-border">重量</el-col>
                  <el-col :span="5" class="col-right-border-text"
                    >{{ hasDot(item.zl) }} 吨</el-col
                  >
                </el-row>
              </vue-seamless-scroll>
            </div>
            <!-- 需求、计划柱状图 -->
            <div class="left-bottom-box">
              <div id="TableBar" class="TableBar"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="border-out">
          <div class="border-inner">
            <div class="right-top-title">需求与生产情况</div>
            <div class="right-top-box">
              <div class="table-text">
                <div>
                  <span class="span1">前方需求</span>
                  <span class="span2-orage">{{ hasDot(xqzlSum) }}吨</span>
                </div>
                <div>
                  <span class="span1">月度计划</span>
                  <span class="span2-orage">{{ hasDot(jhzlSum) }}吨</span>
                </div>
                <div>
                  <span class="span1">完工总量</span>
                  <span class="span2-red">{{ hasDot(wczlSum) }}吨</span>
                </div>
                <div>
                  <span class="span1">需求与计划百分比</span>
                  <span class="span2-green">{{
                    xqzlSum && jhzlSum
                      ? ((jhzlSum / xqzlSum) * 100).toFixed(2) + "%"
                      : "0%"
                  }}</span>
                </div>
                <div>
                  <span class="span1">需求与完成百分比</span>
                  <span class="span2-green">{{
                    xqzlSum && wczlSum
                      ? ((wczlSum / xqzlSum) * 100).toFixed(2) + "%"
                      : "0%"
                  }}</span>
                </div>
              </div>
            </div>
            <!-- 需求、计划、完成柱状图 -->
            <div class="right-bottom-box">
              <div id="ShipBar" class="ShipBar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { qfxqTable, qfxqWc } from "@/api/forwardDemand";
import VueSeamlessScroll from "vue-seamless-scroll";
import { hasDot } from "@/utils/tool";
export default {
  name: "ForwardDemand",
  components: {
    VueSeamlessScroll,
  },
  data() {
    return {
      hasDot,
      formData: {
        year: 2024,
      },
      // 1.前方需求汇总表
      tableList: [],
      classOption: {
        step: 1,
        singleHeight: 0,
        waitTime: 500,
      },
      // 3.	需求与生产情况文本
      rowObj: {},
      xqzlSum: 0,
      jhzlSum: 0,
      wczlSum: 0,
    };
  },
  mounted() {
    this.queryBtn();
  },
  methods: {
    // 根据年份查询
    queryBtn() {
      this.qfxqTable();
      this.qfxqWc();
    },
    // 1.前方需求汇总表
    qfxqTable() {
      qfxqTable({
        nf: this.formData.year,
      }).then((res) => {
        this.tableList = res.data.detail;
        res.data.xq=res.data.xq?parseInt(res.data.xq).toFixed(0):'0'
        this.xqzlSum=res.data.xq
        this.rowObj = res.data;
        this.$nextTick(() => {
          const elementHeight = this.$refs.refHeight;
          elementHeight.forEach((li, index) => {
            this.classOption.singleHeight = li.$el.offsetHeight;
          });
        });
      });
    },
    // 2.4.柱状图 3.计算
    qfxqWc() {
      qfxqWc({
        nf: this.formData.year,
      }).then((res) => {
        let dataX = [];
        let dataJhzlY = [];
        let dataWczlY = [];
        let dataXqzlY = [];
        // this.xqzlSum = 0;
        this.jhzlSum = 0;
        this.wczlSum = 0;
        res.data.forEach((item) => {
          dataX.push(item.dc_ch);
          dataJhzlY.push(item.jhzl);
          dataWczlY.push(item.wczl);
          dataXqzlY.push(item.xqzl);
          // this.xqzlSum += item.xqzl;
          this.jhzlSum += item.jhzl;
          this.wczlSum += item.wczl;
        });

        // 按船只划分重量柱状图
        this.TableBar(dataX, dataXqzlY, dataJhzlY);
        // 按船只月度计划--完成总量柱状图
        this.ShipBar(dataX, dataXqzlY, dataJhzlY, dataWczlY);
      });
    },
    TableBar(dataX, dataXqzlY, dataJhzlY) {
      var myChart = this.$echarts.init(document.getElementById("TableBar"));

      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          top: "",
          textStyle: {
            color: "#e9ebee",
          },
          right: "2%",
          orient: "vertical",
        },
        grid: {
          left: "2%",
          right: "4%",
          top: "2%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: dataX,
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: "#e4e4e4",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: "#e4e4e4",
            },
          },
        ],
        series: [
          {
            name: "需求重量",
            type: "bar",
            data: dataXqzlY,
            itemStyle: {
              color: "#5470c6",
            },
          },
          {
            name: "计划重量",
            type: "bar",
            data: dataJhzlY,
            itemStyle: {
              color: "#fac858",
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    ShipBar(dataX, dataXqzlY, dataJhzlY, dataWczlY) {
      var myChart = this.$echarts.init(document.getElementById("ShipBar"));

      var option = {
        title: {
          text: "需求和计划以及完工重量情况",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
          padding: [40, 0, 0, 0],
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "15%",
          textStyle: {
            color: "#e9ebee",
          },
          right: "2%",
          orient: "vertical",
        },
        grid: {
          top: "15%",
          left: "2%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: dataX,
            axisLabel: {
              color: "#e4e4e4",
            },
            nameTextStyle: {
              color: "#e4e4e4",
              fontSize: 12,
              padding: [0, 0, 0, 0],
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
              lineStyle: {
                color: "#064585",
                // type: "dashed"
              },
            },
            axisLabel: {
              color: "#e4e4e4",
            },
            nameTextStyle: {
              color: "#e4e4e4",
              fontSize: 12,
              padding: [0, 0, 10, 0],
            },
          },
        ],
        series: [
          {
            name: "需求重量",
            type: "bar",
            data: dataXqzlY,
            itemStyle: {
              color: "#5470c6",
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
                {
                  type: "min",
                  name: "最小值",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "计划重量",
            type: "bar",
            data: dataJhzlY,
            itemStyle: {
              color: "#fac858",
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
                {
                  type: "min",
                  name: "最小值",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "完工重量",
            type: "bar",
            data: dataWczlY,
            itemStyle: {
              color: "#91cc75",
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
                {
                  type: "min",
                  name: "最小值",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.forwardDemand-container {
  margin-top: 50px;
  padding-left: 5px;
  padding-right: 5px;
  .forwardDemand-box {
    display: flex;
    align-items: stretch;
    height: calc(100vh - 105px);
    // 需求计划情况
    .left-box {
      width: 30%;
      height: 100%;
      margin-right: 5px;

      .left-top-title {
        width: 32%;
        height: 22px;
        background-image: url("@/assets/image/tit01s.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin: 0 auto;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        margin: 0 auto;
      }
      .left-top-box {
        height: 22.1%;
        margin: 3% 2% 2% 2%;
        .sum-border {
          border: 1px solid #3490ba;
          color: #fff;
          font-size: 0.8rem;
          .col-right-border {
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
            border-right: 1px solid #3490ba;
          }
          .col-right-border-text {
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
          }
          .green {
            color: #4cae4c;
            font-size: 1.25rem;
          }
        }
        .warp-box {
          height: 6rem;
          overflow: hidden;
          border-left: 1px solid #3490ba;
          border-right: 1px solid #3490ba;
          border-bottom: 1px solid #3490ba;
        }
        .warp-box-1 {
          height: 2rem;
        }
        .warp-box-2 {
          height: 4rem;
        }
        // .warp-box-3 {
        //   height: 6rem;
        // }
        // .warp-box-4 {
        //   height: 8rem;
        // }
        .row-border {
          color: #fff;
          text-align: left;
          font-size: 0.8rem;
          .col-right-border {
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            border-right: 1px solid #3490ba;
            border-top: 1px solid #3490ba;
          }
          .col-right-border-text {
            height: 2rem;
            line-height: 2rem;
            text-align: right;
            padding-right: 10px;
            padding-left: 10px;
            border-top: 1px solid #3490ba;
          }
        }
      }
      .left-bottom-box {
        height: 71%;
        .TableBar {
          width: 100%;
          height: 100%;
        }
      }
    }
    .right-box {
      width: 70%;
      height: 100%;
      .right-top-title {
        width: 32%;
        height: 24px;
        background-image: url("@/assets/image/tit01s.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin: 0 auto;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        margin: 0 auto;
      }
      // 需求与生产情况
      .right-top-box {
        height: 8%;
        padding: 1% 1% 2% 1%;
        .table-text {
          height: 100%;
          border: 1px solid #5bc0de;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;
          .span1 {
            color: #ffffff;
            font-size: 1.25rem;
            margin-right: 0.5rem;
          }
          .span2-orage {
            font-size: 1.25rem;
            color: #feb602;
          }
          .span2-green {
            font-size: 1.25rem;
            color: #4cae4c;
          }
          .span2-red {
            font-size: 1.25rem;
            color: #e9230d;
          }
        }
      }
      .right-bottom-box {
        height: 82%;
        .ShipBar {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  // 共用
  .border-out {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px #0174f5 solid;
    padding: 1px;
    box-sizing: border-box;
  }
  .border-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #016ae0;
    border-radius: 10px;
  }
  .box-top {
    margin-top: 5px;
  }
  .border-out {
    height: 100%;
    .border-inner {
      height: 100%;
      background-color: rgba(2, 8, 23, 0.1);
    }
  }
}
</style>
