<template>
  <div style="width: 100%;">
    <div style="width: 525px;background: #eee;margin: 150px auto;">
      <div style="padding: 25px 100px;text-align: center;">
        <div v-for="item in list" :key="item.id">
          <div style="color: #9e9e9e;font-size: 28px;margin-top: 10px;">{{ item.fromFee }}{{ item.fromCurrency | currencyDataFilter(type) }}  =  {{ item.toFee }}{{ item.toCurrency | currencyDataFilter(type) }}</div>
        </div>
        <div v-if="remark" style="margin-top: 20px;">
          <span style="color: red;font-size: 25px;font-weight: bold;">{{ remark }}</span>
        </div>
      </div>
    </div>
    <div style="font-size: 20px;margin-left: 50px;">
      <div style="margin-top: 10px;">
        <span>{{ $t('ecash.time') }}：</span>
        <span>{{ data.bjStartTime }} - {{ data.bjEndTime }}  ({{ $t('ecash.bj') }})</span>
      </div>
      <div style="margin-top: 20px;margin-left: 100px;">
        <span>{{ data.nrlyStartTime }} - {{ data.nrlyEndTime }}  ({{ $t('ecash.nrly') }})</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getEcash, getCurrencyList } from '@/api/data'
export default {
  filters: {
    currencyDataFilter(e, currencyDictDatas) {
      // eslint-disable-next-line eqeqeq
      if (e) return currencyDictDatas.find(item => item.id == e).titleZh
    }
  },
  data() {
    return {
      list: [],
      type: [],
      data: {},
      show: new Date()
    }
  },
  computed: {
    remark() {
      const { bjStartTime, bjEndTime, nrlyStartTime, nrlyEndTime } = this.data
      const now = new Date()
      // 北京时间过期，或者尼日利亚时间过期则显示备注
      const invalidBj = now > new Date(bjEndTime) || now < new Date(bjStartTime)
      const invalidNrly = now > new Date(nrlyEndTime) || now < new Date(nrlyStartTime)
      if (invalidBj || invalidNrly) {
        return this.data.remark
      }
      return ''
    }
  },
  created() {
    getEcash({ page: 1, rows: 100 }).then(r => {
      this.list = r.data.list
      this.data = r.data.list[0]
    })
    getCurrencyList().then(res => {
      this.type = res.data
    })
  }
}
</script>

<style>

</style>
