<script>
import {
  addShovelApi,
  deleteTableDataApi,
  findAllshovel,
  findShovelById,
  updateshovelApi,
} from "@@/apis/tables/diceke/shovel.js";

export default {
  data() {
    return {
      shovelQuerry: null, // 电铲平台数据
      shovelform: null,
      updateshovelform: false,
    };
  },
  created() {
    // 页面渲染之前执行，一般调用methods定义的方法
    this.getList();
  },
  methods: {
    getList() {
      findAllshovel().then((Response) => {
        console.log(Response);
        this.shovelQuerry = Response.data.shovel;
        console.log(this.shovelQuerry);
      });
    },
    // 删除电铲
    removeDataById(id) {
      ElMessageBox.confirm("此操作将永久删除电铲记录，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteTableDataApi(id).then(() => {
            // 删除成功
            ElMessage({
              type: "success",
              message: "删除成功!",
            });
            // 重新加载列表
            this.getList();
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增电铲信息
    handleAdd() {
      this.isEdit = false;
      this.shovelform = { shovelCode: "", attribute: "1" };
      this.updateshovelform = true; // 显示弹窗
    },
    /** 修改电铲信息 */
    handleEdit(id) {
      this.isEdit = true;
      findShovelById(id)
        .then((Response) => {
          this.shovelform = Response.data.dicekeShovel;
          if (this.shovelform.attribute === 1) {
            this.shovelform.attribute = "自营";
          } else if (this.shovelform.attribute === 2) {
            this.shovelform.attribute = "外委";
          }
          this.updateshovelform = true;
        })
        .catch(() => {
          ElMessage.error("查询失败，请稍后重试");
        });
    },

    updateshovel() {
      if (this.shovelform.attribute === "自营") {
        this.shovelform.attribute = 1;
      } else if (this.shovelform.attribute === "外委") {
        this.shovelform.attribute = 2;
      }
      if (this.isEdit) {
        updateshovelApi(this.shovelform)
          .then(() => {
            ElMessage({
              type: "success",
              message: "修改成功!",
            });
            this.updateshovelform = false;
            this.getList();
          })
          .catch(() => {
            ElMessage.error("修改失败，请稍后重试");
          });
      } else {
        addShovelApi(this.shovelform)
          .then(() => {
            ElMessage({
              type: "success",
              message: "新增成功!",
            });
            this.updateshovelform = false;
            this.getList();
          })
          .catch(() => {
            ElMessage.error("新增失败，请稍后重试");
          });
      }
    },
    //批量删除
    handleSelectionChange(val) {
      console.log(val);
    },
  },
};
</script>

<template>
  <div class="app-container">
    <div
      style="
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <div>
        <el-input
          v-model="searchQuery"
          placeholder="请输入铲号"
          style="width: 200px; margin-right: 10px"
        />
        <el-button type="primary" @click="searchData">查询</el-button>
      </div>
      <!-- 新增按钮 -->
      <el-button
        type="primary"
        @click="handleAdd"
        style="
          width: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        >新增</el-button
      >
    </div>
    <el-table
      :cell-style="rowStyle"
      :data="shovelQuerry"
      border
      style="width: 100%"
      :span-method="spanMethod"
      @selection-change="handleSelectionChange"
    >
      <!-- 表格列定义 -->
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" prop="shovelCode" label="铲号（#）" />
      <el-table-column align="center" label="属性">
        <template #default="scope">
          <span>{{ scope.row.attribute === 1 ? "自营" : "外委" }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300" align="center">
        <template #default="scope">
          <div style="display: flex; justify-content: center; gap: 8px">
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              @click="handleEdit(scope.row.shovelID)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              size="small"
              icon="Delete"
              @click="removeDataById(scope.row.shovelID)"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="updateshovelform" title="修改平盘信息" width="500">
      <el-form :model="shovelform">
        <el-form-item label="铲号" :label-width="formLabelWidth">
          <el-input v-model="shovelform.shovelCode" autocomplete="off" />
        </el-form-item>
        <el-form-item label="属性" :label-width="formLabelWidth">
          <el-select v-model="shovelform.attribute" placeholder="请选择属性">
            <el-option label="自营" value="1"></el-option>
            <el-option label="外委" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="updateshovelform = false"> 取消 </el-button>
          <el-button type="primary" @click="updateshovel"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
