<template>
  <div class="associated-club-list">
    <div class="filter-container">
      <div class="filter-control">
        <span>机构名称:</span>
        <el-input v-model="listQuery.authParty" placeholder="机构名称" size="mini" @keyup.enter.native="handleFilter" />
      </div>
      <div class="filter-control">
        <el-button size="mini" type="primary" @click="handleFilter">搜索</el-button>
      </div>
    </div>
    <el-table
      v-if="height"
      :data="list"
      :show-header="false"
      border
      :height="height"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="selection" type="selection" width="50" align="center" />
      <el-table-column prop="authParty" />
      <el-table-column v-if="control" width="100" align="center">
        <template slot-scope="{ row }">
          <slot name="control" :row="row" />
        </template>
      </el-table-column>
    </el-table>
    <el-table v-else :data="list" :show-header="false" border @selection-change="handleSelectionChange">
      <el-table-column v-if="selection" type="selection" width="50" align="center" />
      <el-table-column prop="authParty" />
      <el-table-column v-if="control" width="100" align="center">
        <template slot-scope="{ row }">
          <slot name="control" :row="row" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'AssociatedClubList',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    deleted: {
      type: Boolean,
      default: true
    },
    selection: {
      type: Boolean,
      default: true
    },
    control: {
      type: Boolean,
      default: true
    },
    detail: {
      type: Boolean,
      default: true
    },
    height: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listQuery: {
        authParty: ''
      }
    }
  },
  methods: {
    handleFilter() {
      this.$emit('filter', this.listQuery)
    },
    handleSelectionChange(val) {
      if (!this.selection) return
      this.$emit('selected', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
  background: #eee;
  padding: 6px 10px;

  .filter-control {
    margin-bottom: 0;
  }
}
</style>
