<template>
  <el-form v-model="params" inline v-show="show">
    <el-form-item :label="$t('原币种')" prop="source">
      <el-select v-model="params.sourceId" :placeholder="$t('请选择币种')" clearable>
        <el-option v-for="item in currencies" :key="item.id" :label="`${$l(item, 'title')} ${item.fuhao}`" :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('支付币种')" prop="target">
      <el-select v-model="params.targetId" :placeholder="$t('请选择币种')" clearable>
        <el-option v-for="item in currencies" :key="item.id" :label="`${$l(item, 'title')} ${item.fuhao}`" :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('国家')" prop="countries">
      <el-select v-model="params.countries" filterable multiple :multiple-limit="5" :placeholder="$t('请选择国家')" clearable>
        <el-option v-for="item in countries" :key="item.id" :label="$l(item, 'name')" :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('状态')" prop="expired">
      <el-select v-model="params.expired" :placeholder="$t('状态')" clearable>
        <el-option v-for="item in getDictDatas(DICT_TYPE.CURRENCY_RATE_STATUS)" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('有效期')" prop="expiration">
      <el-date-picker v-model="params.expiration" type="daterange" value-format="yyyy-MM-dd" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="submit">{{ $t('搜索') }}</el-button>
      <el-button @click="clear">{{ $t('重置') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import Vue from 'vue'

const props = {
  show: { type: Boolean, default: false, },
  value: { type: Object, default: {}, },
  countries: { type: Array, default: [], },
  currencies: { type: Array, default: [], },
}

export default Vue.extend({
  props,
  model: { prop: 'value', event: 'update', },
  data() {
    return {
      params: this.value,
    }
  },
  methods: {
    submit() {
      this.$emit('query', this.params)
    },
    clear() {
      this.$emit('update:value', this.params = {})
    },
  },
})
</script>
