<template>
  <div class="container">
    <div class="header-box">
      <p>剩料计划</p>
      <el-button
        type="primary"
        plain
        class="add-btn"
        @click="dialogVisible = true"
        >新 增</el-button
      >
    </div>

    <div class="table">
      <el-table
        element-loading-text="给我一点时间"
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%"
        class="elTable table-fixed"
      >
        <el-table-column label="序号" width="60" type="index">
        </el-table-column>
        <el-table-column label="替代方案" prop="name" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              class="miniSuccess"
              icon="el-icon-edit-outline"
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  -->
      <el-pagination
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
      >
      </el-pagination>
    </div>

    <!-- 新增删除提示 -->
    <el-dialog title="剩料新增" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="替代方案" prop="name">
            <el-select v-model="ruleForm.name" placeholder="请选择替代方案">
              <el-option label="日料" value="1"></el-option>
              <el-option label="豆bo" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="add-btn" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button class="add-btn" type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetDataByName, GetDataByNames } from "@/api/common";
import Cookies from "js-cookie";
import { MessageBox } from "element-ui";
export default {
  name: "LeftoverManagement",
  data() {
    return {
      tableData: [
        {
          id: 1,
          num: "1",
          name: "日粮",
        },
        {
          id: 2,
          num: "2",
          name: "豆泊",
        },
        {
          id: 3,
          num: "3",
          name: "日粮",
        },
      ],
      currentPage1: 1,
      dialogVisible: false,
      //
      ruleForm: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "请选择替代方案", trigger: "change" },
        ],
      },
    };
  },
  created() {},
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      // 获取当前数据,点击编辑
      this.ruleForm = row;
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("确定删除当前剩料配置吗?", this.$t("message.msg111"), {
        confirmButtonText: this.$t("common.confirm"),
        cancelButtonText: this.$t("common.cancel"),
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("common.cancelMsg"),
          });
        });
    },
    //
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
}

.container {
  padding: 15px;
  min-height: 600px;
  margin-left: 10px;
  .add-btn {
    width: 90px;
    height: 40px;
  }
  .page {
    margin-top: 20px;
  }
}
</style>
