<template>
  <div class="role-function-table">
    <el-table ref="roleFunction" v-loading="loading" size="small" :data="list" class="table" @select="handleSelect">
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" width="50" />
      <el-table-column label="Function Name" prop="FunctionName" width="180" />
      <el-table-column label="Description" prop="Note" />
    </el-table>
  </div>
</template>
<script>
import { getRoleFunction, updateRoleFunction } from '@/api/admin'
export default {
  name: 'RoleFunction',
  data() {
    return {
      loading: false,
      list: []
    }
  },
  methods: {
    getFunctions(roleId, menuId) {
      this.roleId = roleId
      this.loading = true
      this.list = []
      getRoleFunction(roleId, menuId).then((res) => {
        this.list = res.Result
        this.loading = false
        this.list.forEach((val) => {
          this.$nextTick(() => {
            this.$refs['roleFunction'].toggleRowSelection(val, val.IsSelect)
          }
          )
        })
      })
    },
    handleSelect(rows, row) {
      const selected = rows.length && rows.indexOf(row) !== -1
      const param = {
        RoleId: this.roleId,
        FunctionId: row.Id,
        IsSelect: selected
      }
      updateRoleFunction(param).then((res) => {
        if (res.IsSuccess) {
          this.$message.success('Updated successfully')
        }
      })
    },
    resetTable() {
      this.list = []
    }
  }
}
</script>
<style  lang="scss">
  .role-function-table{
    thead {
      .el-table-column--selection {
        .cell {
          display: none;
        }
      }
    }
  }
</style>
