<template>
  <view class="border border-solid border-gray-300 rounded-md mt-4 p-2 pt-4 pl-1" @click="collapsed = !collapsed">
    <view class="relative flex justify-between">
      <view class="absolute text-sm bg-white reviewer-title">审核人</view>

      <view class="flex flex-wrap">
        <template v-for="(item, index) in checkers">
          <u-button
            v-if="index < 4"
            :type="checkedCheckers.find(checker => checker.memberId === item.memberId) ? 'primary' : 'default'"
            size="mini"
            class="m-1"
            @click="handleSelectChecker(item)"
          >
            {{ item.name }}
          </u-button>
        </template>
      </view>

      <!-- 展示选择的审核人 -->
      <!-- <view class="flex items-center justify-end flex-1 text-sm">
        <view v-for="item in showCheckers" class="mx-1">
          {{ 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">
      <template v-for="(item, index) in checkers">
        <u-button
          v-if="index >= 4"
          :type="checkedCheckers.find(checker => checker.memberId === item.memberId) ? 'primary' : 'default'"
          size="mini"
          class="m-1"
          @click="handleSelectChecker(item)"
        >
          {{ item.name }}
        </u-button>
      </template>
    </view>
  </view>
</template>

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

const props = defineProps({
  dataCheckers: {
    type: Array,
    default: () => [],
  },
});

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

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

if (!checkers.value.length && checkersStorage) {
  store.commit('role/setMembers', JSON.parse(checkersStorage));
}

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

if (props.dataCheckers && checkers.value.length > 0) {
  props.dataCheckers.forEach(item => {
    item.name = item.checkerName;
    item.memberId = item.checkerId;
  })

  checkedCheckers.value = props.dataCheckers;

  let arr = [];
  checkers.value.forEach(item => {
    let data = props.dataCheckers.find(checker => checker.memberId === item.memberId);
    if (data) { arr.push(item); }
  })

  checkers.value.forEach(item => {
    let data = props.dataCheckers.find(checker => checker.memberId === item.memberId);
    if (!data) { arr.push(item); }
  })

  store.commit('role/setMembers', arr);
}

// 折叠状态 显示的选中的检查人
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>

<style scoped lang="scss">
  .reviewer-title {
    width: 60px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    top: -25px;
    left: 10px;
  }
</style>
