<template>
  <div>
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="80px">
      <el-form-item label="薪资配置:" prop="name">
        <el-input v-model="queryParams.name" placeholder="请选择基础薪资" clearable size="small"/>
      </el-form-item>
      <el-form-item label="员工:" prop="name">
        <el-input v-model="queryParams.name" placeholder="请选择员工" clearable size="small"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="staffName" label="教练姓名" />
      <el-table-column prop="salaryBaseName" label="基础薪资名称" />
      <el-table-column prop="salary" label="薪资金额(元)" />
      <el-table-column width="150" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
    />

    <ChangeStaffSalaryBase ref="changeStaffSalaryBase" @success="getList"/>
  </div>
</template>

<script>

import ChangeSalaryBase from "@/views/school/salary/comps/ChangeSalaryBase.vue";
import {delSalaryBase, list} from "@/api/school/salary/staff";
import ChangeStaffSalaryBase from "@/views/school/salary/comps/ChangeStaffSalaryBase.vue";

export default {
  name: 'SalaryBase',
  components: {ChangeStaffSalaryBase, ChangeSalaryBase},
  data(){
    return{
      loading: true,
      single: true,
      multiple: true,
      total: 0,
      dataList: [],
      open: false,
      queryParams:{
        name:'',
        pageNum:1,
        pageSize: 10,
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleAdd(){
      this.$refs.changeStaffSalaryBase.handleAdd()
    },
    handleUpdate(row){
      this.$refs.changeStaffSalaryBase.handleUpdate(row)
    },
    handleDelete(){
      this.$confirm('是否确认删除?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delSalaryBase({id:row.id})
      }).then((res) => {
        this.getList()
        this.msgSuccess(res.msg)
      }).catch(function() {})
    },
    getList(){
      this.loading=false
      list(this.queryParams).then(res=>{
        this.total=res.data.total
        this.dataList=res.data.rows
      })
    },
    handleQuery(){
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery(){
      this.resetForm('queryForm')
      this.handleQuery()
    }
  }
}
</script>
