<template>
  <div class="sel-any-range">
    <div class="view-box el-input" :class="{
      'is-out-focus': focus
    }">
      <s-dom class="sel-start"
             :type="type"
             :placeholder="startPlaceholder"
             @focus="focus=true"
             @blur="blur(changeStart)"
             @change="changeStart"
             v-model="startValue"
             :options="options"
             v-bind="props" />
      <span class="line">
        {{ separator }}
      </span>
      <s-dom class="sel-end"
             :type="type"
             :placeholder="endPlaceholder"
             v-model="endValue"
             @focus="focus=true"
             @blur="blur(changeEnd)"
             @change="changeEnd"
             :options="options"
             v-bind="props" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref, watch } from 'vue'
import { get } from 'lodash-es'
import { set, useVModel } from '@vueuse/core'

defineOptions({
  name: 'SAnyRange'
})

interface Props {
  modelValue: any
  startPlaceholder: string
  endPlaceholder: string
  type: string
  keys: string[]
  separator: string
  options: any[]
  props: {
    [key: string]: any
  }
  innerSize: string
}

const emits = defineEmits<{
  (e: 'update:modelValue', value: any): void
  (e: 'change', value: any): void
}>()
const cProps = withDefaults(defineProps<Props>(), {
  startPlaceholder: '请选择起始值',
  endPlaceholder: '请选择结束值',
  separator: '~',
  keys: () => ['0', '1'],
  options: () => [],
  innerSize: () => '26px'
})
const startValue = ref()
const endValue = ref()
const model = useVModel(cProps, 'modelValue', emits)

const viewBoxRef = ref<any>()
const focus = ref(false)

function blur (fn) {
  focus.value = false
  fn()
}

async function changeStart () {
  await nextTick()
  console.log(startValue.value)
  set(model.value, cProps.keys[0], startValue.value)
  emits('change', model.value)
}

async function changeEnd () {
  await nextTick()
  console.log(endValue.value)
  set(model.value, cProps.keys[1], endValue.value)
  emits('change', model.value)
}

watch(() => cProps.modelValue, (value) => {
  if (value) {
    startValue.value = get(value, cProps.keys[0])
    endValue.value = get(value, cProps.keys[1])
  } else {
    startValue.value = ''
    endValue.value = ''
  }
}, {
  deep: true,
  immediate: true
})
</script>
<style lang="scss">
.sel-any-range {
  height: 100%;
  --el-component-size: v-bind(innerSize);

  &.is-error {
    .view-box {
      box-shadow: 0 0 0 1px var(--el-color-danger) inset !important;
    }
  }

  & > .view-box {
    width: 100%;
    height: 100%;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    background: #fff;
    box-shadow: 0 0 0 1px var(--el-input-border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 5px;
    border: 1px solid var(--el-input-border);
    overflow: hidden;

    &.is-out-focus {
      border-color: var(--el-input-hover-border);
      box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;

      .sel-start, .sel-end {
        .el-input__wrapper {
          width: unset !important;
          outline: none !important;
          border: none !important;
          box-shadow: none !important;
        }
      }
    }

    .line {
      color: #999;
      min-width: 10px;
      text-align: center;
      margin: 0 8px;
    }

    .sel-start, .sel-end {
      flex: 1;
      width: unset !important;

      .el-input__wrapper, .el-input, .el-select {
        width: unset !important;
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
      }
    }
  }
}
</style>
