<template>
  <div>
    <ConfigTitle title="分页设置" :quiz-index="quizIndex" />

    <ConfigBaseItem class="line-item">
      <div class="title">
        <span>最短时间</span>
        <a-tooltip :mouseEnterDelay="0.2" :overlayStyle="{ width: '248px' }">
          <template #title>
            <div style="padding: 0 4px; font-size: 12px">
              设置最短时间后用户即使填写内容，未到规定时间也不可以点击进入下一页。
            </div>
          </template>
          <i class="iconfont use-min-icon">&#xe72b;</i>
        </a-tooltip>
      </div>
      <div class="row">
        <a-switch
          :checked="!!+copyConfig.is_short_time"
          class="custom-switch"
          @change="switchChanged('is_short_time', $event)"
        />
      </div>
    </ConfigBaseItem>

    <template v-if="copyConfig.is_short_time">
      <ConfigBaseItem class="line-item">
        <div class="title">本页至少显示</div>
        <div class="row">
          <a-input-number
            ref="shortTimeRef"
            v-model:value="copyConfig.short_time"
            :formatter="shortTimeFormatter"
            :parser="(val) => (val === '不限' ? 0 : val || 0)"
            :min="0"
            placeholder="不限"
            class="custom-input-number display-count"
            @focus="inputSelectAll(shortTimeRef)"
            @blur="numberChange('short_time', copyConfig.short_time)"
          />
          <span>S</span>
        </div>
      </ConfigBaseItem>

      <ConfigBaseItem class="line-item">
        <div class="title">显示计时器</div>
        <div class="row">
          <a-switch
            :checked="!!+copyConfig.is_show"
            class="custom-switch"
            @change="switchChanged('is_show', $event)"
          />
        </div>
      </ConfigBaseItem>

      <ConfigBaseItem class="line-item">
        <div class="title">批量应用</div>
      </ConfigBaseItem>

      <a-radio-group
        v-model:value="copyConfig.use_type"
        @change="radioChange('use_type', copyConfig.use_type)"
      >
        <ConfigBaseItem v-for="item in useTypes" :key="item.id" class="line-item">
          <div class="title">
            <a-radio :value="item.id">{{ item.name }}</a-radio>
          </div>
        </ConfigBaseItem>
      </a-radio-group>

      <ConfigBaseItem v-if="[2].includes(copyConfig.use_type)" class="line-item">
        <span>第</span>
        <a-select
          v-model:value="copyConfig.pages"
          :get-pupup-container="(el) => el.parentNode"
          mode="multiple"
          placeholder="请选择页码"
          class="custom-select select-page"
          @blur="selectChanged('pages', copyConfig.pages)"
        >
          <a-select-option v-for="(item, index) in pages" :key="index + 1" :value="index + 1">
            {{ index + 1 }}
          </a-select-option>
        </a-select>
        <span>页</span>
      </ConfigBaseItem>
    </template>
  </div>
</template>

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

import ConfigTitle from '../../components/config/ConfigTitle.vue';
import ConfigBaseItem from '../../components/config/ConfigBaseItem.vue';

const store = useStore();
const emits = defineEmits(['update']);
const props = defineProps({
  config: { type: Object, default: Object.create(null) }
});

const copyConfig = computed(() => {
  return reactive({
    is_short_time: 0,
    short_time: 0,
    is_show: 0,
    use_type: 0,
    pages: [],
    ...JSON.parse(JSON.stringify(props.config || {}))
  });
});

const quizIndex = computed(() => `第${copyConfig.value.page}页`);
const pages = computed(() => store.state.common.questionInfo.survey?.pages || []);

const useTypes = ref([
  { id: 0, name: '应用到当前页' },
  { id: 1, name: '应用到所有页' },
  { id: 2, name: '应用到指定页' }
]);

const shortTimeRef = ref(null);

function inputSelectAll(elRef) {
  const inputEl = elRef?.$el?.querySelector('input');
  if (inputEl.select) {
    inputEl.select();
  }
}

function shortTimeFormatter(val) {
  const num = `${val}`.replace(/[^0-9]/g, '');
  return !+num ? '不限' : num;
}

function switchChanged(field, value) {
  update({ [field]: +value });
}

function numberChange(field, value) {
  update({ [field]: +value });
}

function radioChange(field, value) {
  const info = { [field]: +value };
  if (field === 'use_type' && +value !== 2) {
    info.pages = [];
  }
  update(info);
}

function selectChanged(field, value) {
  update({ [field]: value });
}

function update(values) {
  emits('update', {
    ...(copyConfig.value || {}),
    ...(values || {})
  });
}
</script>

<style scoped lang="scss">
.line-item {
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: none !important;

  .title,
  .row {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.use-min-icon {
  margin-left: 8px;
  color: #bfbfbf;
  font-size: 14px;
}

.display-count {
  margin-right: 16px;
}

.select-page {
  flex: 1 1 1px;
  margin-right: 4px;
  margin-left: 4px;
}
</style>
