<script>
import {} from "@@/apis/tables/drainageWorkshop/pumpOperationLog.ts";
import { getSpecificDate } from "@@/utils/datetime";
export default {
  data() {
    return {
      date: "",
      tableList: [
        {
          projectName: "运矿量",
          unit: "节",
          month: { plan: "15167", actual: "15624", percentage: "103.01" },
          cumulativeForMonth: {
            plan: "",
            actual: "",
            percentage: "",
          },
          notes: "每次交班必须至少留1列重矿，在葵站待命",
        },
        { projectName: "其中：东倒", unit: "节", month: { plan: "" } },
        { projectName: "西倒", unit: "节" },
        { projectName: "", unit: "单位" },
        { projectName: "装车质量", unit: "t/列" },
        { projectName: "电机车周转量", unit: "吨公里" },
        { projectName: "电机车综合效率", unit: "吨台班" },
        { projectName: "电机车出车率（台班）", unit: "吨" },
        { projectName: "电机作业率（分时）", unit: "吨" },
        { projectName: "电机车完好率（台班）", unit: "吨" },
        { projectName: "", unit: "单位" },
        { projectName: "列车周转时间", unit: "分" },
        { projectName: "大选厂卸车数" },
      ],
    };
  },
  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);
    },
    // 合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 12) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        }
      }
    },
  },
};
</script>

<template>
  <div class="app-container">
    <div style="margin-bottom: 20px">
      <el-date-picker v-model="date" type="month" placeholder="选择年月">
      </el-date-picker>
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 20px"
        @click="getMouthLoss"
        >查询</el-button
      >
    </div>
    <el-table
      :data="tableList"
      border
      style="width: 100%"
      :span-method="objectSpanMethod"
      :header-align="center"
    >
      <el-table-column
        align="center"
        prop="projectName"
        fixed
        label="项目"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="unit"
        label="单位"
      ></el-table-column>
      <el-table-column align="center" prop="amount" label="月份">
        <el-table-column
          align="center"
          prop="month.plan"
          label="计划"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="month.actual"
          label="实际"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="month.percentage"
          label="%"
        ></el-table-column>
      </el-table-column>
      <el-table-column align="center" prop="amount" label="一月份累计">
        <el-table-column
          align="center"
          prop="cumulativeForMonth.plan"
          label="计划"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="cumulativeForMonth.actual"
          label="实际"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="cumulativeForMonth.percentage"
          label="%"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        prop="notes"
        label="备注"
      ></el-table-column>
      <!-- 空数据时的显示 -->
      <template #empty>
        <div style="display: grid; place-items: center center">
          <el-empty :image-size="242" :description="暂无数据" />
        </div>
      </template>
    </el-table>
  </div>
</template>
