<template>
  <div>
    <!-- <van-divider></van-divider> -->
    <van-cell-group title="分数设置">
      <!-- <van-field
        v-model="localConfig.min"
        label="最低分"
        @blur="getPrompt(localConfig.min, 'min')"
        input-align="right"
        placeholder="请输入"
      /> -->
      <div class="score">
        <p>最低分</p>
        <van-stepper
          v-model="localConfig.min"
          button-size="22px"
          :max="localConfig.max"
          @change="minChange"
          @blur="minChange(localConfig.min)"
        />
      </div>
      <div class="score">
        <p>最高分</p>
        <van-stepper
          v-model="localConfig.max"
          :min="localConfig.min"
          :max="maxLimit"
          button-size="22px"
          @change="maxChange"
          @blur="maxChange(localConfig.max)"
        />
      </div>
      <div class="score">
        <p>分数间隔</p>
        <van-stepper
          v-model="localConfig.score_interval"
          :min="0"
          button-size="22px"
          @blur="intervalChange(localConfig.score_interval)"
          @change="intervalChange(localConfig.score_interval)"
        />
      </div>
    </van-cell-group>
    <van-cell-group title="提示文字">
      <van-field
        v-model="localConfig.prompt_left"
        label="左边文字"
        input-align="right"
        placeholder="请输入"
        @blur="getPrompt(localConfig.prompt_left, 'prompt_left')"
      />
      <van-field
        v-model="localConfig.prompt_center"
        label="中间文字"
        input-align="right"
        placeholder="请输入"
        @blur="getPrompt(localConfig.prompt_center, 'prompt_center')"
      />
      <van-field
        v-model="localConfig.prompt_right"
        label="右边文字"
        input-align="right"
        placeholder="请输入"
        @blur="getPrompt(localConfig.prompt_right, 'prompt_right')"
      />
    </van-cell-group>
  </div>
</template>
<script setup>
import { ref, watch, computed, defineEmits, defineProps } from 'vue';
// import { showToast } from 'vant';

const MAX_NUM = 99999999;
const maxRange = ref(Number(11));

const props = defineProps({
  config: {
    type: Object
  }
});
const localConfig = ref({ ...props.config });
// 定义 emit
const emit = defineEmits(['updateConfig']);
watch(
  () => props.config,
  (newConfig, oldValue) => {
    // 如果最低分大于最高分或者分数过大，则取消赋值
    if (newConfig.max > MAX_NUM && newConfig.min > MAX_NUM) {
      // showToast({
      //   message: '分数设置有误',
      //   duration: 1000
      // });
      props.config.min = oldValue.min;
      props.config.max = oldValue.max;
      // return;
    }

    // 小数点增加限制，最高可以有两位
    // String(newConfig.min).split('.')[1]?.length > 2
    //   ? (newConfig.min = oldValue.min)
    //   : String(newConfig.max).split('.')[1]?.length > 2
    //     ? (newConfig.max = oldValue.max)
    //     : '';
    // localConfig.value = { ...newConfig };
  },
  { deep: true }
);

const getPrompt = (e, key) => {
  localConfig.value[key] = e;
  emit('updateConfig', localConfig.value);
};

const maxLimit = computed(() => {
  return localConfig.value.min + (maxRange.value - 1) * localConfig.value.score_interval;
});

/**
 * 设置最高分默认值
 */
function setDefaultMax() {
  localConfig.value.max = localConfig.value.min + 4 * localConfig.value.score_interval;
}

/**
 * 判断间隔能否为整数
 */
function isSurplus() {
  if (localConfig.value.max === 0 && localConfig.value.min === 0) {
    return false;
  } else {
    return (
      parseFloat(((localConfig.value.max - localConfig.value.min) * 1000).toFixed(4, 10)) %
        parseFloat((localConfig.value.score_interval * 1000).toFixed(4, 10)) ===
      0
    );
  }
}

function emitInfo() {
  emit('updateConfig', localConfig.value);
}

function intervalChange(value) {
  // localConfig.value.score_interval = value === 0 ? 1 : value;

  localConfig.value = JSON.parse(JSON.stringify(localConfig.value));
  setDefaultMax();
  emitInfo();
}

/**
 * 最低分变动之后的处理
 * @param value {number} 当数值改变之后的值
 */
const minChange = (value) => {
  localConfig.value.min = value ? value : 1;
  localConfig.value = JSON.parse(JSON.stringify(localConfig.value));
  setDefaultMax();
  emitInfo();
};

/**
 * 最高分变动之后的处理
 * @param value {number} 当数值改变之后的值
 */
function maxChange(value) {
  localConfig.value = JSON.parse(JSON.stringify(localConfig.value));
  // 如果当前变化的值小于最低分，取消赋值
  if (value < localConfig.value.min) {
    return;
  }
  const oldMax = Number(props.config.max);
  localConfig.value.max = value;
  if (!isSurplus()) {
    localConfig.value.max = oldMax;
  }
  if (localConfig.value.max < localConfig.value.min) {
    localConfig.value.max = oldMax;
  }
  emitInfo();
}
</script>
<style scoped lang="scss">
.score {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
  padding: 8px 9px;
  border-bottom: 1px solid #f2f3f5;
}
</style>
