<template>
  <div class="select-wrapper" :class="{ 'select-wrapper-custom': selectValue === '自定义' }">
    <div class="select-left text-tip-1">{{ selectTitle + ':' }}</div>
    <div class="select-right" :class="{ 'select-right-custom': selectValue === '自定义' }">
      <el-select v-model="selectValue" :placeholder="placeholderName" filterable style="width: 240px">
        <!-- <el-option label="全部领域" value="全部领域" /> -->
        <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-date-picker style="width: 300px" v-if="selectValue==='自定义'" v-model="customTimeValue" type="daterange" value-format="YYYY-MM-DD"
        range-separator="--" start-placeholder="开始日期" end-placeholder="结束日期" size="default" />
      <!-- <el-date-picker v-model="customTimeValue" type="daterange" value-format="YYYY-MM-DD">
      </el-date-picker> -->
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  selectTitle: {
    type: String,
    default: ''
  },
  selectList: {
    type: Array,
    default: []
  },
  placeholderName: {
    type: String,
    default: ''
  },
  selectName: {
    type: String,
    default: ''
  },
  customTime: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:selectText', 'update:customTime'])

const selectValue = computed({
  get: () => props.selectName,
  set: (value) => emit('update:selectText', value)
})

const customTimeValue = computed({
  get: () => props.customTime,
  set: (value) => emit('update:customTime', value)
})


</script>

<style lang="scss" scoped>
.select-wrapper {
  width: 348px;
  height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;

  .select-left {
    width: 100px;
    height: 24px;
    color: var(--text-primary-65-color);
  }

  .select-right {
    width: 240px;
    display: flex;
    gap: 8px;
    justify-content: space-between;

    :deep(.el-input__wrapper) {
      border-radius: 4px;
    }
  }

  .select-right-custom {
    width: 630px;
  }
}

.select-wrapper-custom {
  width: 738px;
}
</style>