<template>
  <div class="sel-any-select">
    <s-popper ref="popperRef" placement="bottom" @show="changeStatus('show')" @hide="changeStatus('hide')">
      <template #reference>
        <div ref="viewBoxRef" :class="popperStatus" class="view-box">
          <template v-if="!current.value">{{ placeholder }}</template>
          <component :is="component" v-else v-model="current.value" v-bind="current.props" readonly />
        </div>
      </template>
      <template #popper>
        <div class="sel-select-list" :style="{ width: width }">
          <div v-if="!options || options.length === 0" class="nodata select-item">
            暂无数据
          </div>
          <template v-else>
            <div
              @click="pickItem(item)" :class="{ active: current === item }" v-for="(item, index) in options"
              :key="index"
              class="select-item"
            >
              <component :is="component" v-model="item.value" v-bind="item.props" readonly />
            </div>
          </template>
        </div>
      </template>
    </s-popper>
  </div>
</template>

<script lang="ts" setup>
import { ref, PropType, onMounted, watch } from 'vue'
import SPopper from '../../Popper/src/index.vue'
import { compareOnA } from 'utils'
import { Op } from '../../GroupForm/form.type'

defineOptions({
  name: 'SAnySelect'
})

interface Props {
  modelValue: any
  options: Array<Op>
  placeholder: string
  component: any
}

const props = withDefaults(defineProps<Props>(), {
  options: () => ([]),
  placeholder: '请选择'
})

const viewBoxRef = ref<any>()

const emits = defineEmits<{
  (e: 'update:modelValue', value: any): void
  (e: 'select', value: any): void
  (e: 'change', value: any): void
}>()
const popperRef = ref()
const width = ref('0px')
const popperStatus = ref('hide')
const current: any = ref({
  value: null
})

watch(() => props.modelValue, () => {
  current.value = findCurrent()
}, {
  deep: true,
  immediate: true
})

function findCurrent (): any {
  if (props.options && props.options.length > 0 && Array.isArray(props.options)) {
    return props.options.find(item => compareOnA(item.value, props.modelValue)) || {
      value: null
    }
  } else {
    return {
      value: null
    }
  }
}

function changeStatus (status: string) {
  popperStatus.value = status
}

function pickItem (item: any) {
  current.value = item
  popperRef && popperRef?.value.popperHide()
  console.log(item.value)
  emits('select', current.value)
  emits('update:modelValue', item.value)
  emits('change', item.value)
}

onMounted(() => {
  width.value = viewBoxRef?.value?.clientWidth + 'px'
})
</script>
<style lang="scss">
.sel-any-select {
  height: 100%;

  .view-box {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 0 1px #e6e6e6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 3px 5px;

    &.show {
      box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
    }
  }
}

.sel-select-list {
  padding: 5px;
  width: 100%;

  .select-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 30px;
    background: #fff;
    cursor: pointer;

    &.active, &:hover {
      background-color: var(--el-fill-color-light);
    }

    &.nodata {
      justify-content: center;
      color: #ddd;
    }
  }
}
</style>
