<template>
  <div v-loading="loading">
    <div class="heior_box">
      <el-button size="small" type="primary" icon="el-icon-edit" @click="add">添加</el-button>      
      <div class="search-box">             
        <el-input v-model="searchModel.keyWord" placeholder="请输入方案名称" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      row-key="Id"
      border
      size="medium"
      :data="retData.Data"
      :height="$getHeight(100)"        
    >   
      <el-table-column prop="Name" label="方案名称"></el-table-column>
      <el-table-column prop="Remark" label="方案说明"></el-table-column>     
      <el-table-column prop="discount" label="折扣"></el-table-column>     
      <el-table-column prop="CreateTime" label="创建时间"></el-table-column> 
      <el-table-column label="操作" width="140px">
        <template slot-scope="scope">
          <span class="handel cursor edit" @click="edit(scope.row)">编辑</span>
           <!-- <router-link :to="{name:'pricediscount',query:{id:scope.row.Id}}">
            <span class="handel cursor edit">折扣</span>
          </router-link> -->      
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        v-if="retData.Data.length>0"
        @current-change="get"
        :page-size="50"
        :current-page.sync="searchModel.PageIndex"
        layout="total,prev, pager, next"
        :total="retData.TotalCount"
      ></el-pagination>
    </div>  
    <el-dialog title="方案维护" :visible.sync="showDialog" width="500px">
      <el-form :model="schemeModel" :rules="rules" ref="inputForm" label-width="80px">        
        <el-form-item prop="Name" label="方案名称">
          <el-input v-model="schemeModel.Name" size="small"></el-input>
        </el-form-item>
         <el-form-item prop="Remark" label="方案说明">
          <el-input v-model="schemeModel.Remark" size="small"></el-input>
        </el-form-item>        
        <el-form-item prop="discount" label="折扣">
          <el-input v-model="schemeModel.discount" size="small"></el-input>
        </el-form-item>  
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('inputForm')">取 消</el-button>
        <el-button type="primary" @click="save('inputForm')">确定</el-button>
      </span>
    </el-dialog> 
  </div>
</template>
<script>
export default {
  name: "treeTable",
  components: {
    
  },
  data() {
    return {
      loading: false,
      showDialog:false,
      optype:1,    
      retData: { TotalCount: 0, Data: [] },     
      searchModel: {       
        PageIndex: 1,
        keyWord: "",       
      },    
      schemeModel: {
        Name:'',
        Remark:'',
        discount:100
      },   
      types: [       
      ],
      rules: {
        Name: [this.$vaild.required("方案名称")]      
      },
    }
  },
  created() {
    this.$store.commit("setCurrentNav", "产品管理>>价格方案");   
    this.get();
  },
  methods: {
    search(){
      this.searchModel.PageIndex=1;
      this.get();
    },
    get() {
      this.$api
        .get("course/v1/scheme/page", this.searchModel)
        .then(res => {
          this.retData = res;
        });
    },
    del(item) {
      var that = this;
      this.$confirm("确定删除？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(_ => {
        this.$api
          .post("course/v1/scheme/Delete?id=" + item.Id)
          .then(res => {
            that.get();
          });
      });
    },
   add() {
      this.showDialog = true;
      this.optype = 1;
    },
    edit(item) {
      this.showDialog = true;
      this.optype = 2;
      this.schemeModel = clone(item);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();    
      this.showDialog = false;    
    },
    save(formName) {
      var that=this;       
      this.$refs[formName].validate(valid => {
        if (!valid) return;       
        if (that.optype == 1) {
          that.$api.post("course/v1/scheme/post", that.schemeModel).then(res => {
            that.resetForm('inputForm');
            that.get();
          });
        } else {
          that.$api.post("course/v1/scheme/put", that.schemeModel).then(res => {
            that.resetForm('inputForm');
            that.get();
          });
        }
      })
    } 
  }
};
</script>
<style scoped>
</style>
