<template>
  <div class="filter flex justify-between items-center">
    <div class="my-title">
      <slot name="left" />
    </div>
    <div>
      <Select :value="value" @change="setValue">
        <Option
          v-for="(option, i) in optionList"
          :key="i"
          :value="option.value"
          :label="option.name"
        ></Option>
      </Select>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { iOptionItem } from './types'
import { Select, Option } from 'element-ui'

export default Vue.extend({
  components: {
    Select,
    Option,
  },
  props: {
    value: [String, Number],
    setValue: Function,
    optionList: Array as PropType<iOptionItem[]>,
  },
})
</script>

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