<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="LEVEL_NAME" label="级别名称" width="130">
          <template slot-scope="scope">
            <el-tag type="warning" size="small" class="no-border">{{scope.row.LEVEL_NAME}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="等级要求" width="400">
          <template slot-scope="scope">
            <span v-show="scope.row.LOCATION_NUM>0">有 {{scope.row.LOCATION_NUM}} 个部门（及以上）</span>
            <span v-show="scope.row.OTHER_DEPART_PERF>0">去最大部门，其他部门累计大于等于 {{scope.row.OTHER_DEPART_PERF}} PV</span>
            <span v-show="scope.row.MIN_EMPLOY_LEVEL !== null && scope.row.MIN_EMPLOY_NUM>0">，各{{scope.row.MIN_EMPLOY_NUM}}个 {{scope.row.MIN_EMPLOY_LEVEL_NAME}} </span>
            <span v-show="scope.row.SORT==='8'">，任意部门1个高级总监</span>
          </template>
        </el-table-column>
        <el-table-column label="图标">
          <template slot-scope="scope">
            <img :src="getEmpIco(scope.row.ICON_TYPE)" alt="" v-for="(o,key) in parseInt(scope.row.ICON_NUM)" :key="key" v-if="scope.row.ICON_TYPE>0">
          </template>
        </el-table-column>
        <el-table-column label="创建人">
          <template slot-scope="scope">
            {{scope.row.CREATE_ADMIN}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="更新人">
          <template slot-scope="scope">
            {{scope.row.UPDATE_ADMIN}}
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.UPDATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" plain size="small" @click="editHandle(scope.row)" v-if="permission.hasPermission(`config/emp-level-edit`)">编辑</el-button>
            <el-button type="danger" plain size="small" @click="delHandle(scope)" v-if="false">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <el-dropdown size="small" trigger="click" @command="muliDelHandle" v-if="false">
          <el-button type="primary" size="small">
            所选数据<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="delete">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" size="small" @click="onAdd" style="display: none;" v-if="false">添加级别</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import network from './../../utils/network'
import tool from './../../utils/tool'
import permission from '@/utils/permission'

export default {
  name: 'emp-level',
  created () {

  },
  mounted () {
    network.getData('config/emp-level').then(response => {
      this.tableData = response.list
      this.loading = false
    })
  },
  data () {
    return {
      tableData: null,
      loading: true,
      tool: tool,
      permission: permission,
      multipleSelection: []
    }
  },
  methods: {
    getEmpIco(type){
      return require('@/assets/emp-ico-'+type+'.png')
    },
    editHandle (row) {
      this.$router.push({path: `/config/emp-level-edit/${row.ID}`})
    },
    onAdd () {
      this.$router.push({path: `/config/emp-level-add`})
    },
    delHandle (scope) {
      network.getData(`config/emp-level-delete/${scope.row.ID}`).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        Vue.delete(this.tableData, scope.$index)
      })
    },
    muliDelHandle (command) {
      if (command === 'delete') {
        let selectedIds = []
        for (let val of this.multipleSelection) {
          selectedIds.push(val.ID)
        }
        network.postData(`config/emp-level-delete`, {
          selected: selectedIds
        }).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          let tempNewTableData = []
          for (let i in this.tableData) {
            if (!tool.isInArray(selectedIds, this.tableData[i].ID)) {
              tempNewTableData.push(this.tableData[i])
            }
          }
          this.tableData = tempNewTableData
        })

      }

    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>

</style>
