<template>
  <div class="main">
    <card title="成员列表">
      <div class="member-card" v-if="isMine && memberApplicationList.length">
        <div class="member-card-hd">新成员申请</div>
        <div class="member-card-bd">
          <member-item
            v-for="item in memberApplicationList"
            :data="item"
            :key="item.id"
          >
            <template #member-after="{ user }">
              <ul class="tools">
                <li class="tools-default" @click="onRefuse(user)">拒绝</li>
                <li class="tools-primary" @click="onAgree(user)">同意</li>
              </ul>
            </template>
          </member-item>
        </div>
      </div>
      <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="{ org_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'
import * as api from '@/api'
export default {
  name: 'GroupMember',
  components: { Card, MemberList, MemberItem },
  data() {
    return {
      list: []
    }
  },
  computed: {
    pid() {
      return this.$route.params.id
    },
    isMine() {
      return this.$route.query.is_mine === '1'
    },
    // 申请列表
    memberApplicationList() {
      // role: -1待审核、0拒绝、1通过
      return this.list.filter(item => item.status === '-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
    },
    // 拒绝
    onRefuse(user) {
      this.checkGroupMember(user.check_id, { pass: 0, remark: '' })
    },
    // 同意
    onAgree(user) {
      this.checkGroupMember(user.check_id, { pass: 1, remark: '' })
    },
    // 审核
    checkGroupMember(id, params) {
      api.updateGruopMemberStatus(id, params).then(() => {
        this.$refs.list.refresh()
      })
    }
  },
  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;
}
.member-creater {
  margin-left: 10px;
  width: 31px;
  height: 13px;
  background: url('~@/assets/img/member_creater_icon.png') no-repeat;
  background-size: contain;
}
.tools {
  display: flex;
  li {
    margin-left: 20px;
  }
}
.tools-default {
  color: #999;
}
.tools-primary {
  color: #1989fa;
}
</style>
