<template>
  <div class="main">
    <card title="成员列表">
      <div class="member-card" v-if="memberManagementList.length">
        <div class="member-card-hd">活动创建者、管理员</div>
        <div class="member-card-bd">
          <member-item
            v-for="item in memberManagementList"
            :data="item"
            :key="item.id"
          >
          </member-item>
        </div>
      </div>
      <div class="member-card">
        <div class="member-card-hd">成员</div>
        <div class="member-card-bd">
          <member-list
            :params="{ act_id: pid }"
            :request-callback="requestCallback"
            @request-success="requestSuccess"
            ref="list"
          ></member-list>
        </div>
      </div>
    </card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import MemberList from '@/components/MemberList'
import MemberItem from '@/components/MemberItem'
export default {
  name: 'ActivityMember',
  components: { Card, MemberList, MemberItem },
  data() {
    return {
      list: []
    }
  },
  computed: {
    pid() {
      return this.$route.params.id
    },
    isMine() {
      return this.$route.query.is_mine === '1'
    },
    // 管理员列表
    memberManagementList() {
      // role: 1参与者、 2发起人
      return this.list.filter(item => item.role === '2')
    }
  },
  methods: {
    // 请求数据处理
    requestCallback(data) {
      // role: 1参与者、 2发起人
      return data.filter(item => item.role === '1' && item.status === '1')
    },
    // 请求成功
    requestSuccess(list) {
      this.list = list
    }
  },
  beforeMount() {}
}
</script>

<style lang="scss" scoped>
.member-card {
  margin-left: -20px;
  margin-right: -20px;
}
.member-card-hd {
  height: 36px;
  padding: 0 20px;
  font-size: 14px;
  line-height: 36px;
  color: #999;
  background-color: #f1f1f1;
}
.member-card-bd {
  margin: 0 20px;
}
::v-deep .member-item {
  margin: 20px 0;
}
</style>
