<template>
  <div :style="{ minWidth: `${rightSize}px` }">
    <div style="padding-right: 8px; display: flex; align-items: center; height: 100%">
      <slot>
        <h-select v-model:value="selectModelValue" placeholder="请选择" style="width: 120px">
          <h-select-option
            v-for="item in selectOptions"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
            {{ item.label }}
          </h-select-option>
        </h-select>
        <h-input-search
          v-model:value="searchValue"
          :placeholder="$t('platform.common.placeholder')"
          enter-button
          @search="onSearch"
          style="height: 100%; display: flex; align-items: center"
        />
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'UtilContent',
  props: {
    rightSize: {
      type: Number,
      default: 208,
    },
  },
  setup() {
    // 顶部下拉框选中的值
    const selectModelValue = ref(null);
    // 顶部下拉框的选项
    const selectOptions = ref([
      {
        value: 'jack',
        label: 'Jack',
      },
      {
        value: 'lucy',
        label: 'Lucy',
      },
      {
        value: 'disabled',
        label: 'Disabled',
      },
      {
        value: 'yiminghe',
        label: 'Yiminghe',
      },
    ]);
    // 顶部搜索框的值
    const searchValue = ref('');
    // 顶部搜索框的搜索事件
    const onSearch = () => {
      console.log('搜索事件');
    };
    return {
      selectModelValue,
      selectOptions,
      searchValue,
      onSearch,
    };
  },
});
</script>
