<script >
import {
  formatDateToChinese,
  formatChineseToEnglish,
} from "@/common/utils/datetime.ts";
export default {
  data() {
    return {
      date: "",
      tableList: [
        {
          date: "2025年11月21日",
          id: "69",
          shift: "早班",
          mineralcapacity: "100",
        },
        {
          date: "2025年11月21日",
          id: "69",
          shift: "中班",
          mineralcapacity: "200",
        },
        {
          date: "2025年11月21日",
          id: "69",
          shift: "晚班",
          mineralcapacity: "500",
        },
        {
          date: "2025年11月22日",
          id: "70",
          shift: "早班",
          mineralcapacity: "350",
        },
        {
          date: "2025年11月22日",
          id: "70",
          shift: "中班",
          mineralcapacity: "260",
        },
        {
          date: "2025年11月22日",
          id: "70",
          shift: "晚班",
          mineralcapacity: "400",
        },
        {
          date: "2025年11月25日",
          id: "01",
          shift: "早班",
          mineralcapacity: "200",
        },
        {
          date: "2025年11月25日",
          id: "01",
          shift: "中班",
          mineralcapacity: "150",
        },
        {
          date: "2025年11月25日",
          id: "01",
          shift: "晚班",
          mineralcapacity: "300",
        },
        {
          date: "2025年11月25日",
          id: "03",
          shift: "早班",
          mineralcapacity: "100",
        },
        {
          date: "2025年11月25日",
          id: "03",
          shift: "中班",
          mineralcapacity: "200",
        },
        {
          date: "2025年11月25日",
          id: "03",
          shift: "晚班",
          mineralcapacity: "500",
        },
      ],
      dialogFormVisible: false,
      title: "",
      form: {
        date: "",
        shift: "",
        id: "",
        mineralcapacity: "",
      },
      formLabelWidth: 140,
      index: 0,
    };
  },
  created() {},
  methods: {
    //添加日报
    addDayReportDialog() {
      this.dialogFormVisible = true;
      this.title = "添加日报";
    },
    //提交日报
    addDayReportSub() {
      this.form.date = formatDateToChinese(this.form.date);
      if ((this.tilte = "编辑日报")) {
        this.tableList[this.index] = this.form;
      } else {
        this.tableList.push(this.form);
      }
      this.dialogFormVisible = false;
    },
    //excel导入
    excelImport() {},
    //日报导出
    dayreportExport() {},
    handleSelectionChange(val) {
      console.log(val);
    },
    //编辑
    handleEdit(index, row) {
      this.index = index;
      this.title = "编辑日报";
      this.dialogFormVisible = true;
      this.form.date = formatChineseToEnglish(row.date);
      this.form.id = row.id;
      this.form.mineralcapacity = row.mineralcapacity;
      this.form.shift = row.shift;
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);
      ElMessageBox.confirm("此操作将永久删除此记录，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableList.splice(index, 1);
          // 删除成功
          ElMessage({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<template>
  <div class="app-container">
    <div style="margin-bottom: 20px">
      <el-date-picker
        v-model="date"
        type="date"
        placeholder="请选择时间"
        format="YYYY/MM/DD"
      />
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 20px"
        @click="getMouthLoss"
        icon="Search"
        >查 询</el-button
      >
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 20px"
        @click="addDayReportDialog"
        icon="CirclePlus"
        >添加日报</el-button
      >
      <el-button
        type="success"
        size="mini"
        style="margin-left: 20px"
        @click="excelImport"
        icon="Upload"
        >excel导入</el-button
      >
      <el-button
        type="warning"
        size="mini"
        style="margin-left: 20px"
        @click="dayreportExport"
        icon="Document"
        >日报导出</el-button
      >
    </div>
    <el-table
      :data="tableList"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" :selectable="selectable" />
      <el-table-column prop="date" label="时间" />
      <el-table-column prop="id" label="铲号" />
      <el-table-column prop="shift" label="班次" />
      <el-table-column prop="mineralcapacity" label="装矿量" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            icon="Edit"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.$index, scope.row)"
            icon="Delete"
          >
            删除
          </el-button>
        </template>
      </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="dialogFormVisible" :title="title" width="800">
      <el-form :model="form">
        <el-form-item label="时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="请选择时间"
            format="YYYY/MM/DD"
          />
        </el-form-item>
        <el-form-item label="铲号" :label-width="formLabelWidth">
          <el-select v-model="form.id" placeholder="请选择铲号">
            <el-option label="01" value="01" />
            <el-option label="10" value="10" />
            <el-option label="69" value="69" />
            <el-option label="70" value="70" />
          </el-select>
        </el-form-item>
        <el-form-item label="班次" :label-width="formLabelWidth">
          <el-select v-model="form.shift" placeholder="请选择班次">
            <el-option label="早班" value="早班" />
            <el-option label="中班" value="中班" />
            <el-option label="晚班" value="晚班" />
          </el-select>
        </el-form-item>
        <el-form-item label="装矿量" :label-width="formLabelWidth">
          <el-input v-model="form.mineralcapacity" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDayReportSub"> 提 交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
