<template>
  <a-modal
    :width="400"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="confirmLoading"
    :forceRender="true"
    :title="props.title"
    :body-style="{ paddingBottom: '8px', height: '500px', overflowY: 'auto' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <div class="wh100">
      <a-spin style="position: absolute; top: 50%; left: 50%" :spinning="dataListLoading" />
      <a-checkbox-group v-model:value="selectList">
        <a-checkbox style="width: 100%" :value="item.id" name="type" v-for="item in dataList" :key="item.id">
          {{ item.name }}
        </a-checkbox>
      </a-checkbox-group>
    </div>
  </a-modal>
</template>

<script setup name="selectModalComponent">
import { onMounted, ref, inject } from 'vue';
import { CarouselApi } from '@/views/portal/backend/config_detail/carousel/api/CarouselApi';
import { NewApi } from '@/views/portal/backend/config_detail/new/api/NewApi';
import { AppApi } from '@/views/portal/backend/config_detail/app/api/AppApi';

const emits = defineEmits(['update:visible', 'done']);

const props = defineProps({
  // 是否显示
  visible: {
    type: Boolean,
    default: false
  },
  // 标题
  title: {
    type: String,
    default: '请选择'
  },
  // 类型 rotation：轮播图  applink: 应用分类  news:新闻分类
  type: {
    type: String,
    default: 'rotation'
  },
  // 选中的列表
  checkList: {
    type: Array
  }
});

const designId = inject('designId');

// 确定按钮加载状态
const confirmLoading = ref(false);
// 数据列表
const dataList = ref([]);
// 数据列表加载状态
const dataListLoading = ref(false);

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

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

const save = () => {
  // 关闭弹框，通过控制visible的值，传递给父组件
  updateVisible(false);

  // 传递选中的数据
  let _selectList = [];
  selectList.value.forEach(id => {
    let filter = dataList.value.filter(item => item.id === id);
    if (filter.length > 0) {
      _selectList.push(...filter);
    }
  });

  // 触发父组件done事件
  emits('done', _selectList);
};

onMounted(() => {
  if (props.type === 'rotation') {
    dataListLoading.value = true;
    // 获取轮播图选择列表
    CarouselApi.getSelectList({ designId: designId.value })
      .then(res => {
        dataList.value =
          res?.map(item => {
            return { id: item.slideshowId, name: item.slideshowTitle };
          }) || [];
      })
      .finally(() => {
        dataListLoading.value = false;
      });
  } else if (props.type === 'applink') {
    dataListLoading.value = true;
    // 获取应用分类列表
    AppApi.getCategoryList({ designId: designId.value })
      .then(res => {
        dataList.value =
          res?.map(item => {
            return { id: item.categoryId, name: item.categoryName };
          }) || [];
      })
      .finally(() => {
        dataListLoading.value = false;
      });
  } else if (props.type === 'news') {
    dataListLoading.value = true;
    // 获取新闻分类列表
    NewApi.getCategoryList({ designId: designId.value })
      .then(res => {
        dataList.value =
          res.data?.map(item => {
            return { id: item.categoryId, name: item.categoryName };
          }) || [];
      })
      .finally(() => {
        dataListLoading.value = false;
      });
  }

  if (props.checkList || props.checkList.length > 0) {
    selectList.value = props.checkList;
  }
});
</script>

<style scoped lang="less">
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin: 0;
}
</style>
