<template>
  <view class="border border-solid border-gray-300 rounded-md mt-3 p-2" @click="collapsed = !collapsed">
    <view class="top flex justify-between">
      <view class="mr-3 text-sm">审核人</view>
      <!-- 展示选择的审核人 -->
      <view class="flex item-center justify-end flex-1 text-sm">
        <view v-for="item in showCheckers" class="mx-1">
          <!-- <u-badge :is-dot="true" is-center></u-badge> -->
          {{ item.name }}
        </view>
        <view class="mx-1" v-show="checkedCheckers.length > 3">...</view>
      </view>

      <!-- 点击更换图标 -->
      <u-icon :name="collapsed ? 'arrow-down' : 'arrow-up'"></u-icon>
    </view>

    <!-- 隐藏的审核人选项 -->
    <view v-show="!collapsed" class="foot mt-2 flex flex-wrap">
      <u-button
        v-for="item in checkers"
        :type="checkedCheckers.find(checker => checker.memberId === item.memberId) ? 'primary' : 'default'"
        size="mini"
        class="my-1 mx-2"
        @click="handleSelectChecker(item)"
      >
        {{ item.name }}
      </u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, defineExpose } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
// 图标切换
const collapsed = ref(true);

// 审核人员列表 从store获取真实的项目成员列表
// 项目加载之初 就已经获取了
const checkers = computed(() => store.state.role.members);

// 所有选中的审核人
const checkedCheckers = ref([]);

// 折叠状态 显示的选中的检查人
const showCheckers = computed(() => (checkedCheckers.value.length > 3 ? checkedCheckers.value.slice(0, 3) : checkedCheckers.value));

defineExpose({ checkedCheckers, collapsed });

/**
 * 点击成员 切换检查人的选中状态
 * @param {object} member 成员对象
 */
function handleSelectChecker(member) {
  const target = checkedCheckers.value.find(item => item.memberId === member.memberId);
  if (target) {
    // 已经选中 将此项移除选中的数组中
    checkedCheckers.value = checkedCheckers.value.filter(item => item.memberId !== member.memberId);
  } else {
    checkedCheckers.value.push(member);
  }
}
</script>
