<!--  -->
<template>
    <div class="assessment">
      <div class="assessment-form">
        <el-form ref="form" inline :model="form" >
          <div>
            <el-form-item >
              <el-input   size="small" clearable prefix-icon="el-icon-search" v-model="form.name" placeholder="搜索考核名称"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item >
              <el-dropdown  >
                <el-button  size="small" type="primary">
                  新增考评组<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu  slot="dropdown">
                  <el-dropdown-item @click.native="handleToEidt" >新增考评组</el-dropdown-item>
                  <el-dropdown-item @click.native="handleToEidt" > 复制考评组</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
          </div>
        </el-form>
      </div>
        <el-table
        :header-cell-style="{background:'#F5F7FA'}"
        @row-click='handleSelectClick'
        :data="tableData"
        style="width: 100%">
        <el-table-column
          fixed
          sortable
          prop="name"
          label="考核名称">
        </el-table-column>
        <el-table-column
          prop="date"
          label="时间周期">
        </el-table-column>
        <el-table-column
          prop="number"
          label="参与人数">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              查看
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
export default {
  data () {
    return {
      form: {},
      tableData: [{
        date: '2016-05-03',
        name: '2020年01月绩效考核',
        number: '10'
      }, {
        date: '2016-05-03',
        name: '2020年02月绩效考核',
        number: '10'
      }, {
        date: '2016-05-03',
        name: '2020年03月绩效考核',
        number: '10'
      }, {
        date: '2016-05-03',
        name: '2020年01月绩效考核',
        number: '10'
      }, {
        date: '2016-05-03',
        name: '2020年01月绩效考核',
        number: '10'
      }, {
        date: '2016-05-03',
        name: '2020年01月绩效考核',
        number: '10'
      }, {
        date: '2016-05-03',
        name: '2020年01月绩效考核',
        number: '10'
      }]
    }
  },
  computed: {},
  beforeMount () {},
  mounted () {
  },
  methods: {
    handleToEidt () {
      this.$router.push({name: 'workbench-edit-group'})
    },
    handleSelectClick (row, column, event) {
      console.log('event: ', event)
      console.log('column: ', column)
      console.log('row: ', row)
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.assessment{
  .el-form{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &-form{
    padding: 4px 0;
  }

  &-table{
    background: #fff;
    padding: 20px;
    border: 1px solid @borderColor;
  }
}
</style>
<style lang="less">
  .el-table__row{
    cursor:pointer;
  }
</style>
