<script>
import {
  updateFangpaishuiPumpoperationrecordApi,
  deleteFangpaishuiPumpoperationrecordApi,
  findPumpoperationrecordByDetailApi,
  addFangpaishuiPumpoperationrecordApi,
  findFangpaishuiPumpoperationrecordByMonthApi,
} from "@@/apis/tables/drainageWorkshop/pumpOperationLog.ts";
import { getSpecificDate } from "@@/utils/datetime";
import { ref, onMounted, onBeforeUnmount } from "vue";

// 按需引入 echarts 核心模块
import * as echarts from "echarts/core";
import { BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
export default {
  data() {
    return {
      date: "",
      machine: "",
      tableList: [
        {
          //日期
          index: "1",
          //东川河
          dongchuanRiver: {
            vehiclesNum: "36",
            tonnage: "",
          },
          //西川河
          xichuanRiver: {
            vehiclesNum: "",
            tonnage: "",
          },
          //合计
          riverAmount: "",
          //选矿卸
          mineralProcessing: {
            vehiclesNum: "36",
            tonnage: "",
          },
          mineralProcessingAmount: "", //合计
          workingWorkbench: "360", //作业台时
          count: "360", //计
          powerFailure: "", //停电
          fault: "", //故障
          standby: "", //待命
          other: "", //其他
          percentage: "360", //百分比
        },
        {
          //日期
          index: "2",
          //东川河
          dongchuanRiver: {
            vehiclesNum: "",
            tonnage: "",
          },
          //西川河
          xichuanRiver: {
            vehiclesNum: "72",
            tonnage: "",
          },
          //合计
          riverAmount: "",
          //选矿卸
          mineralProcessing: {
            vehiclesNum: "72",
            tonnage: "",
          },
          mineralProcessingAmount: "", //合计
          workingWorkbench: "660", //作业台时
          count: "60", //计
          powerFailure: "", //停电
          fault: "", //故障
          standby: "", //待命
          other: "", //其他
          percentage: "60", //百分比
        },
        {
          //日期
          index: "3",
          //东川河
          dongchuanRiver: {
            vehiclesNum: "12",
            tonnage: "",
          },
          //西川河
          xichuanRiver: {
            vehiclesNum: "36",
            tonnage: "",
          },
          //合计
          riverAmount: "",
          //选矿卸
          mineralProcessing: {
            vehiclesNum: "36",
            tonnage: "",
          },
          mineralProcessingAmount: "", //合计
          workingWorkbench: "360", //作业台时
          count: "360", //计
          powerFailure: "", //停电
          fault: "", //故障
          standby: "", //待命
          other: "", //其他
          percentage: "360", //百分比
        },
        {
          //日期
          index: "4",
          //东川河
          dongchuanRiver: {
            vehiclesNum: "72",
            tonnage: "",
          },
          //西川河
          xichuanRiver: {
            vehiclesNum: "",
            tonnage: "",
          },
          //合计
          riverAmount: "",
          //选矿卸
          mineralProcessing: {
            vehiclesNum: "84",
            tonnage: "",
          },
          mineralProcessingAmount: "", //合计
          workingWorkbench: "660", //作业台时
          count: "60", //计
          powerFailure: "", //停电
          fault: "", //故障
          standby: "", //待命
          other: "", //其他
          percentage: "60", //百分比
        },
        {
          //日期
          index: "5",
          //东川河
          dongchuanRiver: {
            vehiclesNum: "36",
            tonnage: "",
          },
          //西川河
          xichuanRiver: {
            vehiclesNum: "",
            tonnage: "",
          },
          //合计
          riverAmount: "",
          //选矿卸
          mineralProcessing: {
            vehiclesNum: "36",
            tonnage: "",
          },
          mineralProcessingAmount: "", //合计
          workingWorkbench: "360", //作业台时
          count: "360", //计
          powerFailure: "", //停电
          fault: "", //故障
          standby: "", //待命
          other: "", //其他
          percentage: "360", //百分比
        },
        {
          //日期
          index: "6",
          //东川河
          dongchuanRiver: {
            vehiclesNum: "72",
            tonnage: "",
          },
          //西川河
          xichuanRiver: {
            vehiclesNum: "",
            tonnage: "",
          },
          //合计
          riverAmount: "",
          //选矿卸
          mineralProcessing: {
            vehiclesNum: "72",
            tonnage: "",
          },
          mineralProcessingAmount: "", //合计
          workingWorkbench: "660", //作业台时
          count: "60", //计
          powerFailure: "", //停电
          fault: "", //故障
          standby: "", //待命
          other: "", //其他
          percentage: "60", //百分比
        },
      ],
      reportDialogVisible: false,
      machineOptions: [
        {
          value: "1501",
          label: "1501",
        },
        {
          value: "1502",
          label: "1502",
        },
        {
          value: "1503",
          label: "1503",
        },
        {
          value: "1504",
          label: "1504",
        },
        {
          value: "1505",
          label: "1505",
        },
      ],
      machineNum: "",
      classOptions: [
        {
          value: "classA",
          label: "甲班",
        },
        {
          value: "classB",
          label: "乙班",
        },
        {
          value: "classC",
          label: "丙班",
        },
      ],
      classNum: "",
      timeFrame: "",
    };
  },
  created() {
    // 页面渲染之前执行，一般调用methods定义的方法
    this.getList();
  },
  methods: {
    //获取列表
    async getList() {
      const res = await findAllMiningglossApi();
      console.log(res);
    },
    //按月查询
    async getMouthLoss() {
      let data = getSpecificDate(this.date);
      const res = await findTotalMiningByMonthApi(data);
      console.log(res);
    },
    //生成报表
    generateReport() {
      this.reportDialogVisible = true;
    },
  },
};
</script>

<template>
  <div class="app-container">
    <div style="margin-bottom: 20px">
      <el-date-picker v-model="date" type="month" placeholder="选择年月">
      </el-date-picker>
      <el-input
        v-model="machine"
        style="width: 220px; margin-left: 20px"
        placeholder="请输入机台号"
        maxlength="4"
      >
        <template #prefix>
          <span>#</span>
        </template></el-input
      >
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 20px"
        @click="getMouthLoss"
        >查询</el-button
      >
      <el-button
        type="success"
        size="mini"
        style="margin-left: 20px"
        @click="generateReport"
        >生成报表</el-button
      >
    </div>
    <div
      class="title"
      style="display: flex; justify-content: space-between; margin-bottom: 10px"
    >
      <el-tag type="primary" effect="dark" size="large">1501机台</el-tag>
      <el-tag type="primary" effect="dark" size="large">2025年4月甲班</el-tag>
    </div>
    <el-table
      :data="tableList"
      border
      style="width: 100%"
      :span-method="spanMethod"
      :header-align="center"
      :cell-style="rowStyle"
      :header-cell-style="{ 'background-color': '#EDF5FF' }"
    >
      <!-- 表格列定义 -->
      <el-table-column align="center" fixed prop="index" label="日期" />
      <el-table-column align="center" label="倒装站装车">
        <el-table-column align="center" label="东川河"
          ><el-table-column
            align="center"
            prop="dongchuanRiver.vehiclesNum"
            label="车数"
          ></el-table-column
          ><el-table-column
            align="center"
            prop="dongchuanRiver.tonnage"
            label="吨数"
          ></el-table-column
        ></el-table-column>
        <el-table-column align="center" label="西川河">
          <el-table-column
            align="center"
            prop="xichuanRiver.vehiclesNum"
            label="车数"
          ></el-table-column
          ><el-table-column
            align="center"
            prop="xichuanRiver。tonnage"
            label="吨数"
          ></el-table-column
        ></el-table-column>
        <el-table-column
          align="center"
          prop="amount"
          label="合计"
        ></el-table-column>
      </el-table-column>
      <el-table-column align="center" label="百花岭">
        <el-table-column align="center" label="选矿卸">
          <el-table-column
            align="center"
            prop="mineralProcessing.vehiclesNum"
            label="车数"
          ></el-table-column
          ><el-table-column
            align="center"
            prop="mineralProcessing.tonnage"
            label="吨数"
          ></el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" prop="amount" label="合计" />
      <el-table-column
        align="center"
        prop="electricLocomotives"
        label="电机车运用情况"
      >
        <el-table-column
          align="center"
          prop="workingWorkbench"
          label="作业台时"
        ></el-table-column>
        <el-table-column align="center" label="停车台时">
          <el-table-column align="center" prop="count" label="计">
          </el-table-column
          ><el-table-column align="center" prop="powerFailure" label="停电">
          </el-table-column
          ><el-table-column align="center" prop="fault" label="故障">
          </el-table-column
          ><el-table-column align="center" prop="standby" label="待命">
          </el-table-column
          ><el-table-column align="center" prop="other" label="其它">
          </el-table-column
          ><el-table-column align="center" prop="percentage" label="%">
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <!-- 空数据时的显示 -->
      <template #empty>
        <div style="display: grid; place-items: center center">
          <el-empty :image-size="242" :description="暂无数据" />
        </div>
      </template>
    </el-table>
    <el-dialog
      v-model="reportDialogVisible"
      title="报表"
      width="850"
      align-center
    >
      <div class="dialogbox">
        <div class="dialogbox-header">
          <el-select
            v-model="machineNum"
            placeholder="请选择机台"
            style="width: 200px; margin-right: 20px"
          >
            <el-option
              v-for="item in machineOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="classNum"
            placeholder="请选择班组"
            style="width: 200px; margin-right: 20px"
          >
            <el-option
              v-for="item in classOptions"
              :key="item.value"
              :label="item.label"
              npm
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="timeFrame"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
        <div class="dialogbox-container">
          <div ref="chartRef" style="width: 600px; height: 400px"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.dialogbox {
  height: 70vh;
  .dialogbox-header {
    margin-bottom: 10px;
  }
}
</style>
