<template>
  <select-filter-user
    v-if="isSpecialUserMeta"
    v-model="fieldVal"
    multiple
    @change="emitChange"
  ></select-filter-user>
  <t-input-number
    v-else-if="isNumber"
    v-model="fieldVal"
    theme="column"
    :decimalPlaces="0"
    style="width: 100%"
    @change="emitChange"
  ></t-input-number>
  <t-input
    v-else-if="isInput"
    v-model="fieldVal"
    placeholder="请输入"
    style="width: 100%"
    @change="emitChange"
  ></t-input>
  <t-select
    v-else-if="isSelect"
    v-model="fieldVal"
    multiple
    :options="field.options || []"
    placeholder="请选择"
    :min-collapsed-num="1"
    style="width: 100%"
    @change="emitChange"
  ></t-select>
  <template v-else-if="isDate">
    <t-date-range-picker
      v-if="field.operator === 'RANGE'"
      v-model="fieldVal"
      value-type="time-stamp"
      style="width: 100%"
      @change="emitChange"
    />
    <t-date-picker
      v-else
      v-model="fieldVal"
      value-type="time-stamp"
      style="width: 100%"
      @change="emitChange"
    />
  </template>
</template>

<script setup lang="jsx" name="FieldValue">
import { ref, computed, watch } from 'vue';
import { specialUserMeta } from './config';

const emit = defineEmits(['update:modelValue', 'change']);
const props = defineProps({
  modelValue: { type: [Number, String, Array], default: undefined },
  field: {
    type: Object,
    default() {
      return {
        fieldId: '',
        code: '',
        operator: '',
        options: [],
      };
    },
  },
});
let fieldVal = ref(null);

const isSpecialUserMeta = computed(() => {
  return specialUserMeta.includes(props.field.fieldId);
});
const isNumber = computed(() => {
  return ['NUMBER'].includes(props.field.code);
});
const isDate = computed(() => {
  return ['DATE'].includes(props.field.code);
});
const isInput = computed(() => {
  return ['TEXT', 'TEXTAREA'].includes(props.field.code);
});
const isSelect = computed(() => {
  return ['SINGLE_SELECT', 'MULTIPLE_SELECT', 'CHECKBOX', 'RADIO'].includes(
    props.field.code
  );
});

function emitChange() {
  emit('update:modelValue', fieldVal.value);
  emit('change', fieldVal.value);
}

watch(
  () => props.modelValue,
  (val) => {
    fieldVal.value = val;
  },
  {
    immediate: true,
  }
);
</script>
