<template>
  <a-modal
    :width="600"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="选择参与者"
    :body-style="{ paddingBottom: '8px', height: '400px', overflowY: 'auto' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <a-checkbox-group v-model:value="selectData" style="width: 100%; border: 1px solid #eee; height: 350px; overflow-y: auto">
      <a-checkbox :value="item.userId" v-for="item in props.dataList" :key="item.userId" class="part-checkbox">{{
        item.userName
      }}</a-checkbox>
      <a-empty v-show="props.dataList.length == 0" style="margin-top: 100px"></a-empty>
    </a-checkbox-group>
  </a-modal>
</template>

<script setup name="ParticipantSelect">
import { ref, onMounted } from 'vue';

const props = defineProps({
  visible: Boolean,
  // 选中列表
  selectList: {
    type: Array,
    default: []
  },
  // 数据列表
  dataList: {
    type: Array,
    default: []
  }
});

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);

// 选中列表
const selectData = ref([]);

onMounted(() => {
  selectData.value = props.selectList.map(item => item.userId);
});

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = () => {
  let list = [];
  selectData.value.forEach(item => {
    if (props.dataList.find(vItem => vItem.userId == item)) {
      list.push(props.dataList.find(vItem => vItem.userId == item));
    }
  });
  emits('done', list);
  updateVisible(false);
};
</script>

<style scoped lang="less">
.part-checkbox {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0px 10px;
  border-bottom: 1px solid #eee;
  &:hover {
    background: #eee;
  }
}
:deep(.ant-checkbox-wrapper) {
  margin-left: 0 !important;
}
</style>
