<template>
  <div style="padding: 10px">
    <el-table
      ref="table"
      v-loading="crud.loading"
      highlight-current-row
      style="width: 100%;"
      :data="crud.data"
      border
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <div v-for="(item, index) in tableHeader" :key="index">
        <el-table-column
          v-if="item.code === 'level' && item.is_hidden === '0'"
          :prop="item.code"
          :label="item.name"
          :width="item.width"
          :align="item.align"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.level === 1"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.code === 'name' && item.is_hidden === '0'"
          :label="item.name"
          :width="item.width"
          :align="item.align"
        >
          <template slot-scope="scope">
            <el-tag type="success">
              {{ scope.row.name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.is_hidden === '0'"
          :prop="item.code"
          :label="item.name"
          :width="item.width"
          :align="item.align"
        />
      </div>
      <el-table-column label="操作" min-width="30" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" icon="el-icon-minus" @click="del(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import crudGridFields from '@/api/system/gridField'
import CRUD, { crud, header, presenter } from '@crud/crud'
import crudRoles from '@/api/system/role'

const role_grid_code = 'roleGrid' // 定义角色表格样式code
export default {
  name: 'TableTest',
  cruds() {
    return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }})
  },
  mixins: [presenter(), header(), crud()],
  data() {
    return {
      tableHeader: []
    }
  },
  created() {
    this.initRoleGridData()
  },
  methods: {
    initRoleGridData() { // 获取表格字段属性
      crudGridFields.getGridFieldsByCode(role_grid_code).then(res => {
        this.tableHeader = res
      })
    },
    del(row) {
      console.log(row)
    }
  }
}
</script>

<style scoped>

</style>
