<template>
  <div class="page" :class="{ active: active }">
    <div class="page-text">
      <div class="page-text-line"></div>
      <span class="page-text-content">
        第 {{ info.page }}/{{ info.total }} 页：{{ info.first_title }}-{{ info.last_title }}
      </span>
      <div class="page-text-line"></div>
      <div v-if="!isOneQuestionPerPage" class="page-icon">
        <i
          class="iconfont active-icon"
          :style="{ marginRight: isLastPage ? '0' : '16px' }"
          @click="activePage"
          >&#xe86c;</i
        >
        <template v-if="!isLastPage">
          <i class="iconfont moverQues" style="margin-right: 16px">&#xe71b;</i>
          <i class="iconfont" @click="deleteHandle">&#xe6c5;</i>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';

// Props 定义
const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  },
  index: {
    type: Number,
    default: 0
  },
  active: {
    type: Boolean,
    default: false
  }
});

// 使用 Pinia Store
const counterStore = useCounterStore();
const { questionsInfo } = storeToRefs(counterStore);

// 计算属性
const isOneQuestionPerPage = computed(() => {
  return !!questionsInfo.value?.survey?.is_one_page_one_question;
});

const isLastPage = computed(() => {
  return props.index === (questionsInfo.value?.questions?.length - 1 || -1);
});

// 自定义事件
const emit = defineEmits(['activePage', 'removePage']);

function activePage() {
  emit('activePage');
}

function deleteHandle() {
  emit('removePage');
}
</script>

<style lang="scss" scoped>
@import '@/style/whole/whole';

.page {
  &.active {
    color: $yili-default-color;

    .page-text-line {
      border-color: $yili-default-color;
    }

    .active-icon {
      color: $yili-default-color;
    }
  }

  .page-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 38px;
    border-radius: 6px;
  }

  .page-text-line {
    flex: 1;
    height: 1px;
    border: 1px dashed #bfbfbf;
  }

  .page-text-content {
    margin: 0 3px;
    cursor: default;
  }

  .page-icon {
    display: flex;
    align-items: center;
    padding-right: 18px;
    padding-left: 20px;
  }

  .iconfont {
    width: 24px;
    height: 24px;
    color: #dadada;
    cursor: pointer;

    &:hover {
      color: $yili-default-color;
    }
  }
}
</style>
