<template>
  <div v-if="page < pages" class="footer-page">
    <van-row class="pagination-mob" :gutter="10">
      <!-- mob端 -->
      <van-col :span="12">
        <van-button v-show="showLastButton" color="#71b73c" @click="previous">
          {{ prevButtonText }}
        </van-button>
      </van-col>
      <van-col :span="showLastButton ? 12 : 24">
        <van-button v-show="page < pages" color="#71b73c" @click="next">
          {{
            showStart && page === 0
              ? startText
              : showSubmit && page + 1 === pages
                ? submitText
                : nextText || nextButtonText
          }}
        </van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { computed, defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { useQuestionStore } from '@/stores/Questions/useQuestionStore';

export default defineComponent({
  props: {
    // 当前页数
    page: {
      type: Number,
      default: 1
    },
    // 总页数
    pages: {
      type: Number,
      default: 1
    },
    // 最小页数
    min: {
      type: Number,
      default: 1
    },
    // 显示上一页按钮
    showPrevious: {
      type: [Boolean, Number],
      default: false
    },
    // 显示开始按钮
    showStart: {
      type: [Boolean, Number],
      default: false
    },
    // 开始按钮文字
    startText: {
      type: String,
      default: '开始'
    },
    // 显示提交按钮
    showSubmit: {
      type: [Boolean, Number],
      default: false
    },
    // 提交按钮文字
    submitText: {
      type: String,
      default: '提交'
    },
    // 按钮背景颜色
    buttonColor: {
      type: String,
      default: ''
    },
    // 按钮文字颜色
    buttonTextColor: {
      type: String,
      default: ''
    },
    // 下一页按钮文字
    nextText: {
      type: String,
      default: ''
    },
    // 下一页按钮禁用
    nextDisabled: {
      type: Boolean,
      default: false
    },
    // 是否移动端
    isMobile: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    prevLoading: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const { questionsData } = storeToRefs(useQuestionStore());

    const prevButtonText = computed(
      () => questionsData.value?.survey?.style?.up_button_text || '上一页'
    );
    const nextButtonText = computed(
      () => questionsData.value?.survey?.style?.next_button_text || '下一页'
    );

    // console.log(`prevButtonText name:`, prevButtonText.value, nextButtonText.value);
    // 上一页
    function previous() {
      if (props.page > props.min) {
        context.emit('previous');
        context.emit('update:page', props.page - 1);
      }
    }

    // 下一页
    function next() {
      if (props.nextDisabled) return;
      if (props.page < props.pages) {
        context.emit('next');
        context.emit('update:page', props.page + 1);
      }
    }

    const showLastButton = computed(
      () =>
        props.showPrevious &&
        props.page > props.min &&
        // props.page < props.pages - 1 &&
        props.page > 1
    );
    // console.log(`pages-page`, props.page, props.pages);
    return {
      prevButtonText,
      nextButtonText,
      previous,
      next,
      showLastButton
    };
  }
});
</script>

<style lang="scss" scoped>
.pagination-mob {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 0 10px;

  .van-button {
    width: 100%;
    height: 35px;
    border-radius: 8px;
  }
}

.footer-page {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  padding-top: 8px;
  border-radius: 16px 16px 0 0;
  background-color: white;
}
</style>
