<script setup lang="ts">
import { ref, unref, watch } from 'vue';
import { useConfigGlobal } from '@/hooks/web/useConfigGlobal';
import { useDesign } from '@/hooks/web/useDesign';
import { isEqual } from 'lodash-es';

const { getPrefixCls } = useDesign();

const prefixCls = getPrefixCls('input-range');

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => ([])
  },
});

watch(
  () => props.modelValue,
  (val: any) => {
    if (isEqual(val, unref(valueRef))) return;
    valueRef.value = val ? val : [];
  },
);

const { configGlobal } = useConfigGlobal();

const emit = defineEmits(['update:modelValue']);

// 设置input的type属性
const textType = ref<'text' | 'number'>('text');

// 输入框的值
const valueRef = ref(props.modelValue);

const isFocus = ref(false);

// handle focus
const handleFocus = function () {
  if(!isFocus.value) {
    isFocus.value = true;
  }
};

// handle blur
const handleBlur = function () {
  if(isFocus.value){
    isFocus.value = false;
  }
};

// 监听
watch(
  () => valueRef.value,
  (val: any) => {
    const rangeValues = val ?? val.filter(i => i);
    if (rangeValues.length && (rangeValues[0] || rangeValues[1])) {
      emit('update:modelValue', val);
    } else {
      emit('update:modelValue', null);
    }
  }, { deep: true }
);
</script>

<template>
  <div :class="[prefixCls, `${prefixCls}--${configGlobal?.size}`, isFocus ? 'is-focus' : '']" class="el-date-editor">
    <input
      autocomplete="off"
      placeholder="请输入"
      :class="`${prefixCls}-input`"
      :type="textType"
      v-model="valueRef[0]"
      name="test1"
      @focus="handleFocus"
      @blur="handleBlur"
      class="el-range-input"
    />
    <span :class="`${prefixCls}-separator`">至</span>
    <input
      autocomplete="off"
      placeholder="请输入"
      :class="`${prefixCls}-input`"
      :type="textType"
      v-model="valueRef[1]"
      name="test2"
      @focus="handleFocus"
      @blur="handleBlur"
      class="el-range-input"
    />
    <!-- <i
      @click="handleClickIcon"
      v-if="haveTrigger"
      :class="[showClose ? '' + clearIcon : '']"
      class="el-input__icon el-range__close-icon">
    </i> -->
  </div>
</template>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-input-range';

.el-form-item.is-error .@{prefix-cls} {
  border-color: var(--el-color-danger);
}

.@{prefix-cls} {
  width: 260px;
  position: relative;
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 0 10px;
  cursor: text;
  transition: border-color 0.5s;
  border: 1px solid var(--el-input-border-color, var(--el-border-color));
  height: var(--el-input-height, var(--el-component-size));
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));

  &.is-focus {
    border-color: #409eff;
  }

  .@{prefix-cls}-input {
    text-align: center;
    appearance: none;
    border: none;
    outline: none;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    width: 39%;
    font-size: inherit;
    background-color: transparent;
    color: var(--el-input-text-color, var(--el-text-color-regular));

    &::placeholder {
      // color: var(--el-text-placeholder-color);
      color: var(--el-input-placeholder-color);
    }
  }

  .@{prefix-cls}-separator {
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 5px;
    margin: 0;
    font-size: 14px;
    overflow-wrap: break-word;
    color: var(--el-text-color-primary);
  }
}
</style>
