<template>
  <view class="my-3" v-if="allMembers && allMembers.length">
    <view class="flex justify-between">
      <view class="flex flex-wrap text-center items-center">
        <u-tag
          :type="member.checked ? 'primary' : 'info'"
          :mode="member.checked ? 'dark' : 'light'"
          v-for="(member, index) in topMembers"
          :key="member.memberId"
          class="mb-2 mr-3"
          style="width: 60px"
          :text="member.name"
          :closeable="false"
          @click="tagClick(index, member, 'topMembers')"
        />
        <span class="ml-2" v-if="!show" @click="show = true">...</span>
      </view>
    </view>
    <!-- 折叠起来的 -->
    <view class="flex flex-wrap text-center items-center" v-if="show">
      <u-tag
        :type="member.checked ? 'primary' : 'info'"
        :mode="member.checked ? 'dark' : 'light'"
        v-for="(member, index) in bottomMembers"
        :key="member.memberId"
        class="mb-2 mr-3"
        style="width: 60px"
        :text="member.name"
        :closeable="false"
        @click="tagClick(index, member, 'bottomMembers')"
      />
      <u-icon class="ml-2" name="arrow-up" v-if="show" size="26" @click="show = false"></u-icon>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  props: {
    checkerList: {
      default: () => [],
      type: Array,
    },
  },

  data() {
    return { allMembers: [], show: false, topMembers: [], bottomMembers: [] };
  },

  computed: mapState('role', ['members']),

  mounted() {
    if (this.members && this.members.length) {
      this.allMembers = this.members;
      // TODO: 等后台返回默认检查人后修改
      this.allMembers.forEach(item => {
        item.checked = false;
      });
      this.topMembers = this.members.slice(0, 3);
      this.bottomMembers = this.members.slice(3);
    }
  },

  methods: {
    tagClick(index, item, membersType) {
      // 点击选择或取消选择
      const arr = this.$u.deepClone(this[membersType]);
      arr[index].checked = !arr[index].checked;
      this[membersType] = [...arr];
      // 将选中的id传给checkerList
      this.$emit('setCheckerList', arr[index].checked, item);
    },

    // 清空所有选中的检查人
    clearChecked() {
      for (let i = 0; i < this.topMembers.length; i++) {
        this.topMembers[i].checked = false;
      }
      for (let i = 0; i < this.bottomMembers.length; i++) {
        this.bottomMembers[i].checked = false;
      }
    },
  },
};
</script>
