<template>
  <div class="Tableform">
    <el-row type="flex" align="middle" justify="center" style="margin-bottom: 20px">
      <el-col :span="23" class="button-col">
        <el-button type="success" @click="adduser">{{ userrole }}</el-button>
        <el-button type="warning" @click="deletuser">删除</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col class="table-container" :span="23">
        <el-table highlight-current-row ref="multipleTable" :data="tableData" class="user-table" height="calc(100vh - 120px - 80px - 60px - 85px)" style="width: 95%" @selection-change="handleSelection">
          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column v-if="tabletitel[0]" :label="tabletitel[0]" label-class-name="title-column" class-name="user-column" show-overflow-tooltip :width="tabletitel[2] ? '170' : ''">
            <template slot-scope="scope">
              <span>{{ scopename(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="tabletitel[1]" :label="tabletitel[1]" class-name="user-column" show-overflow-tooltip label-class-name="title-column">
            <template slot-scope="scope">
              <span>{{ scopeusername(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="tabletitel[2]" class-name="user-column" show-overflow-tooltip label-class-name="title-column" :label="tabletitel[2]">
            <template slot-scope="scope">
              <span>{{ scope.row ? '' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="tabletitel[3]" width="77" class-name="user-column" show-overflow-tooltip label-class-name="title-column" :label="tabletitel[3]">
            <template slot-scope="scope">
              <span>{{ scopegender(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="tabletitel[4]" class-name="user-column" show-overflow-tooltip label-class-name="title-column" :label="tabletitel[4]">
            <template slot-scope="scope">
              <span>{{ scopepostName(scope.row) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TableForm',
  components: {},
  props: {
    tabletitel: {
      type: Array,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    },
    userrolenumber: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeindex: 0,
      // 非多个禁用
      multiple: true
    }
  },
  computed: {
    userrole() {
      if (this.userrolenumber == 0) {
        return '新增用户'
      } else {
        return '新增角色'
      }
    },

    scopename() {
      return function (row) {
        if (row.name) {
          return row.name
        } else if (row.nickName) {
          return row.nickName
        } else if (row.roleLogo) {
          return row.roleLogo
        }
      }
    },

    scopeusername() {
      return function (row) {
        if (row.loginnumber) {
          return row.loginnumber
        } else if (row.userName) {
          return row.userName
        } else if (row.roleName) {
          return row.roleName
        }
      }
    },

    scopedeptName() {
      return function (row) {
        if (row.loginnumber) {
          return row.loginnumber
        } else if (row.deptName) {
          return row.deptName
        }
      }
    },

    scopegender() {
      return function (row) {
        if (row.gender) {
          if (row.gender == 1) {
            return '男'
          } else {
            return '女'
          }
        }
      }
    },

    scopepostName() {
      return function (row) {
        if (row.postName) {
          return row.postName
        }
      }
    }
  },
  beforeMount() {},
  methods: {
    adduser() {
      this.$emit('adduser')
    },
    deletuser() {
      this.$emit('deletuser')
    },
    handleSelection(val) {
      this.$emit('handleSelection', val)
      this.multiple = !val.length
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../index.scss';
.Tableform {
  width: 100%;
  .button-col {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
  }
  .Add-user {
    // float: right;
    margin-right: 10px;
    height: 32px;
    padding: 0px;
    width: 100px;
  }
  .delet {
    height: 32px;
    padding: 0px;
    width: 100px;
  }
  ::v-deep .user-table {
    width: 100% !important;
    .title-column {
      text-align: center;
    }
    .user-column {
      text-align: center;
    }
  }
}
</style>
