<template>
  <div class="filter flex justify-between items-center">
    <div class="my-title">
      <slot name="left" />
    </div>
    <div>
      <MySelect
        v-if="!hideSelect"
        style="width: 310px;"
        :selectedValue="value"
        :optionList="optionList"
        @change="setValue"
      ></MySelect>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { iOptionItem } from './types'
import MySelect from '@/components/pc/Select.vue'
export default Vue.extend({
  components: {
    MySelect,
  },
  props: {
    value: [String, Number],
    setValue: Function,
    optionList: Array as PropType<iOptionItem[]>,
    hideSelect: {
      type: Boolean,
    },
  },
  data() {
    return {}
  },
})
</script>

<style scoped>
.filter {
  padding: 0 30px;
  height: 80px;
  background: #fafbfc;
  border-radius: 4px;
}
</style>
