<template>
  <van-cell title="文件数量" :border="false" label-align="left"> </van-cell>
  <van-field
    :model-value="displayValue(actionQuestion.config.min_number)"
    label="最少"
    type="digit"
    :border="false"
    label-align="left"
    input-align="right"
    class="action-field"
    placeholder="0"
    :min="1"
    :max="actionQuestion.config.max_number"
    @blur="handleMinNumberBlur"
    @update:model-value="
      (value) => {
        actionQuestion.config.min_number = value === '' ? 1 : value;
      }
    "
  >
    <template #right-icon>
      <span>个</span>
    </template>
  </van-field>
  <van-field
    :model-value="displayValue(actionQuestion.config.max_number)"
    label="最多"
    :min="actionQuestion.config.min_number"
    type="digit"
    :border="false"
    placeholder="不限"
    input-align="right"
    class="action-field"
    @blur="handleMaxNumberBlur"
    @update:model-value="
      (value) => {
        actionQuestion.config.max_number = value === '' ? 1 : value;
      }
    "
  >
    <template #right-icon>
      <span>个</span>
    </template>
  </van-field>
  <van-divider></van-divider>
  <van-cell title="文件大小" :border="false" label-align="left"> </van-cell>
  <van-field
    :model-value="displayValue(actionQuestion.config.min_size)"
    label="最少"
    type="number"
    :border="false"
    label-align="left"
    input-align="right"
    class="action-field"
    placeholder="0"
    :min="1"
    :max="actionQuestion.config.max_size"
    @blur="handleMinSizeBlur"
    @update:model-value="
      (value) => {
        actionQuestion.config.min_size = value === '' ? 1 : value;
      }
    "
  >
    <template #right-icon>
      <span>M</span>
    </template>
  </van-field>
  <van-field
    :model-value="displayValue(actionQuestion.config.max_size)"
    label="最多"
    type="number"
    :min="actionQuestion.config.min_size"
    :border="false"
    placeholder="0"
    input-align="right"
    class="action-field"
    @blur="handleMaxSizeBlur"
    @update:model-value="
      (value) => {
        actionQuestion.config.max_size = value === '' ? 1 : value;
      }
    "
  >
    <template #right-icon>
      <span>M</span>
    </template>
  </van-field>

  <van-divider></van-divider>
  <!--  <van-field label="文件格式" :border="false" label-align="top">-->
  <!--    <template #input>-->
  <!--      <div style="width: 100%">-->
  <!--        <YLCascader-->
  <!--          v-if="fileTypeList.length > 0"-->
  <!--          v-model="fileType"-->
  <!--          :options="fileTypeList"-->
  <!--          @update:model-value="changeFileType"-->
  <!--        ></YLCascader>-->
  <!--      </div>-->
  <!--    </template>-->
  <!--  </van-field>-->
</template>
<script setup>
import { computed, defineEmits, onMounted, ref, watch } from 'vue';
// import YLCascader from '@/components/YLCascader.vue';

import { getFileType } from './Api/Index.js';
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const emit = defineEmits(['update:modelValue', 'saveOption']);
const actionQuestion = computed({
  get() {
    return props.modelValue;
  },
  set(newValue) {
    emit('update:modelValue', newValue);
  }
});

// 处理显示值，如果值为0则返回空字符串以显示placeholder
const displayValue = (value) => {
  return value === 0 ? '' : Number(value);
};

// 处理最小数量失焦事件
const handleMinNumberBlur = (e) => {
  // 如果输入为空，设置为0
  if (e.target.value === '') {
    actionQuestion.value.config.min_number = 1;
  }
  minMax(e);
};

// 处理最大数量失焦事件
const handleMaxNumberBlur = (e) => {
  // 如果输入为空，设置为0
  if (e.target.value === '') {
    actionQuestion.value.config.max_number = 1;
  }
  emit('saveOption');
};

// 处理最小大小失焦事件
const handleMinSizeBlur = (e) => {
  // 如果输入为空，设置为0
  if (e.target.value === '') {
    actionQuestion.value.config.min_size = 0;
  }
  emit('saveOption');
};

// 处理最大大小失焦事件
const handleMaxSizeBlur = (e) => {
  // 如果输入为空，设置为0
  if (e.target.value === '') {
    actionQuestion.value.config.max_size = 0;
  }
  emit('saveOption');
};

// 最小大于最大 同步到最大
const minMax = (e) => {
  const minValue = e.target.value === '' ? 0 : Number(e.target.value);
  if (minValue > Number(actionQuestion.value.config.max_number)) {
    actionQuestion.value.config.min_number = actionQuestion.value.config.max_number;
  }
  emit('saveOption');
};

const fileTypeList = ref([]);
const fileType = ref([]);
actionQuestion.value.config.file_type.split(',').map((item) => {
  const type = item.split('-');
  fileType.value.push(type);
});
const getFileTypeList = () => {
  getFileType().then((res) => {
    if (res.data) {
      // 对象keymap
      fileTypeList.value = Object.keys(res.data.data).map((key) => {
        return {
          label: key,
          value: key,
          children: res.data.data[key].map((item) => {
            return {
              label: item,
              value: item
            };
          })
        };
      });
      fileTypeList.value.unshift({
        label: '不限',
        value: '0',
        isUnlimitSelected: 1,
        children: null
      });
    }
  });
};

// const changeFileType = (value) => {
//   if (value === [['0']]) {
//     actionQuestion.value.config.file_type = '0';
//     emit('saveOption');
//     return;
//   }
//   const ls = [];
//   value.map((item) => {
//     const obj = [];
//     item.map((s) => {
//       obj.push(s);
//     });
//     ls.push(obj.join('-'));
//   });
//   actionQuestion.value.config.file_type = ls.join(',');
//   emit('saveOption');
// };
onMounted(() => {
  getFileTypeList();
});
watch(
  () => actionQuestion.value.config.min_number,
  (minVal) => {
    // console.log(minVal);
    minVal = Number(minVal);
    // console.log(typeof minVal);
    let max_number = Number(actionQuestion.value.config.max_number);
    if (minVal > 1000) {
      actionQuestion.value.config.max_number = 9999;
      actionQuestion.value.config.min_number = 9999;
    } else {
      if (minVal > max_number || minVal === max_number) {
        actionQuestion.value.config.max_number = minVal;
      }
    }
  },
  {
    deep: true
  }
);
watch(
  () => actionQuestion.value.config.max_number,
  (maxVal) => {
    maxVal = Number(maxVal);
    let min_number = Number(actionQuestion.value.config.min_number);
    if (maxVal > 1000) {
      actionQuestion.value.config.max_number = 9999;
      actionQuestion.value.config.min_number = 9999;
    } else {
      if (maxVal < min_number || maxVal === min_number) {
        actionQuestion.value.config.min_number = maxVal;
      }
    }
  },
  {
    deep: true
  }
);

watch(
  () => actionQuestion.value.config.min_size,
  (minVal) => {
    // console.log(minVal);
    minVal = Number(minVal);
    // console.log(typeof minVal);
    let max_number = Number(actionQuestion.value.config.max_size);
    if (minVal > 1024) {
      actionQuestion.value.config.max_size = 1024;
      actionQuestion.value.config.min_size = 1024;
    } else {
      if (minVal > max_number || minVal === max_number) {
        actionQuestion.value.config.max_size = minVal;
      }
    }
  },
  {
    deep: true
  }
);
watch(
  () => actionQuestion.value.config.max_size,
  (maxVal) => {
    maxVal = Number(maxVal);
    let min_number = Number(actionQuestion.value.config.min_size);
    if (maxVal > 1024) {
      actionQuestion.value.config.max_size = 1024;
      actionQuestion.value.config.min_size = 1024;
    } else {
      if (maxVal < min_number || maxVal === min_number) {
        actionQuestion.value.config.min_size = maxVal;
      }
    }
  },
  {
    deep: true
  }
);
</script>
<style scoped lang="scss">
.action-field {
  :deep(.van-field__label) {
    color: #bfbfbf;
    font-size: 14px;
  }
}
</style>
