<template>
  <div class="container">
    <div class="header-box">
      <p> 剩料计划</p>
      <el-button type="primary" plain class="add-btn" @click="addBtn">新 增</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="surplus"
          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="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="surplus">
              <el-select v-model="ruleForm.surplus" placeholder="请选择替代方案" @change="getLeftObj">
                <el-option v-for="item in leftList" :key="item.id" :label="item.fname" :value="item"></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="addLeftData()">确 定</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
  import {
    GetDataByName,
    getSurplus,
    addSurplus,
    delSurplus
  } from '@/api/common'
  import Cookies from 'js-cookie'
  import {
    MessageBox
  } from 'element-ui'
  export default {
    name: 'LeftoverManagement',
    data() {
      return {
         pastureId:parseInt(Cookies.get('pastureid')),
         title:"",
         leftgetParams:{ // 获取下拉剩料列表
          name: "getFeedData",          "page": 1,
          offset: 1,
          pagecount: "",
          returntype: "Map",
          parammaps: {
          pastureid:  Cookies.get('pastureid'), // "1654779860",
          fname: ""
          }
        },
        leftList:[],
        tableData: [],
        currentPage1: 1,
        dialogVisible:false,
        ruleForm: {
          id: 0,
          pastureId: Cookies.get('pastureid'),
          surplus: "",
          feedId: ""
        },
        rules:{
          surplus: [
            { required: true, message: '请选择替代方案', trigger: 'change' }
          ]
        }
      }
    },
    created() {
      this.getLeftoverData();
      this.getLeftTable();
    },
    methods: {
      // 获取剩料列表
     async getLeftTable(){
        const {data} = await getSurplus(Cookies.get('pastureid'));
        console.log(data,'table')
        this.tableData = data;
      },
      // 点击新增按钮
      addBtn(){
        this.title ="剩料新增"
        this.dialogVisible = true;
        this.ruleForm={
          id: 0,
          pastureId: parseInt(Cookies.get('pastureid')),
          surplus: "",
          feedId: ""
        };
      },
      // 获取下拉的数据
      getLeftObj(obj){
        this.ruleForm.feedId = obj.id;
        this.ruleForm.surplus = obj.fname;
        console.log(obj,this.ruleForm,'0000');
      },
      // 获取剩料下拉数据
      async getLeftoverData(){
        const { data }= await GetDataByName(this.leftgetParams);
        this.leftList = data.list;
      },

      // 剩料新增
      async addLeftData(){
        const { data }  = await addSurplus(this.ruleForm);
        if(data == true){
          this.$message({
                type: 'success',
                message: this.title =="剩料新增"?'新增成功':"编辑成功"
            });
          this.dialogVisible = false;
          this.getLeftTable();
        } else{
          this.$message({
                type: 'error',
                message: data
            });
        }

      },

      // 点击编辑
      handleEdit(index, row) {
        this.title = "剩料编辑";
        this.ruleForm = row;
        this.dialogVisible = true;
      },
      // 点击删除
      handleDelete(index, row) {
        this.$confirm('确定删除当前剩料信息吗?', this.$t('message.msg111'), {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              delSurplus({id:row.id}).then(res=>{
                const {data} = res;
                if(data == true){
                  this.getLeftTable();
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                } else {
                  this.$message({
                    type: 'error',
                    message: data
                  });
                }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      //
      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>
