<template>
  <div class="app-container">
    <query :show="query.show" v-model="query.params" :countries="dict.countries" :currencies="dict.currencies" @query="pagination"/>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" v-hasPermi="['ecw:currency:rate:create']" @click="add">{{ $t('新增') }}</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="query.show" @queryTable="pagination"></right-toolbar>
    </el-row>

    <el-table v-loading="query.loading" :data="query.result.list">
      <el-table-column align="center" :label="$t('原币种')">
        <template v-slot="{ row }">
          {{ $l(currency(row.sourceId), 'title') }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('支付币种')">
        <template v-slot="{ row }">
          {{ $l(currency(row.targetId), 'title') }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('汇率')">
        <template v-slot="{ row }">
          {{ currency(row.sourceId).fuhao }} {{ row.sourceAmount }} : {{ row.targetAmount }} {{ currency(row.targetId).fuhao }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('有效期')">
        <template v-slot="{ row }">
          {{ dayjs(row.expiration).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column align="left" :label="$t('国家')" prop="countries" :formatter="countries"/>
      <el-table-column :label="$t('备注')" prop="remarks"/>
      <el-table-column :label="$t('状态')">
        <template v-slot="{ row }">
          <dict-tag :type="DICT_TYPE.CURRENCY_RATE_STATUS" :value="expired(row.expiration)" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('最后修改时间')">
        <template v-slot="{ row }">
          {{ parseTime(row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('最后修改人')" prop="updater"/>
      <el-table-column align="center" :label="$t('操作')">
        <template v-slot="{ row }">
          <el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['ecw:currency:rate:update']" @click="edit(row)">{{ $t('修改') }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" v-hasPermi="['ecw:currency:rate:delete']" @click="remove(row)">{{ $t('删除') }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-tickets" v-hasPermi="['ecw:currency:rate:history']" @click="logs(row)">{{ $t('日志') }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-link" v-hasPermi="['ecw:currency:rate:update']" @click="reverse(row)">{{ $t('复制反向汇率') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="query.result.total" :page.sync="query.params.page" :limit.sync="query.params.rows" @pagination="pagination"/>

    <form-dialog :visible.sync="dialogs.form.visible" :id="dialogs.form.id" :data="dialogs.form.data" @update:model="pagination" :countries="dict.countries" :currencies="dict.currencies"/>
    <logs-dialog :visible.sync="dialogs.logs.visible" :id="dialogs.logs.id" :source="dialogs.logs.source" :target="dialogs.logs.target"/>
  </div>
</template>

<script>
import { getCountryListAll } from '@/api/ecw/country'
import { getCurrencyList } from '@/api/ecw/currency'
import { deleteCurrencyRate, getCurrencyRate, getCurrencyRatePage } from '@/api/ecw/currencyRate'
import dayjs from 'dayjs'
import Vue from 'vue'
import FormDialog from './form.vue'
import LogsDialog from './logs.vue'
import Query from './query.vue'
import Audit from './audit.vue'
import Decimal from 'decimal.js'

const components = { FormDialog, LogsDialog, Query, Audit, }

export default Vue.extend({
  components,
  data() {
    return {
      map: { countries: {}, currencies: {}, },
      dict: { countries: [], currencies: [], },
      query: {
        show: true,
        loading: false,
        params: { page: 1, rows: 10, expiration: ['', ''], },
        result: { list: [], total: 0, },
      },
      dialogs: {
        form: { visible: false, update: false, data: {}, },
        logs: { visible: false, source: null, target: null, },
      }
    }
  },
  methods: {
    dayjs,
    async pagination() {
      this.query.loading = true
      try {
        this.query.result = await getCurrencyRatePage(this.query.params).then(it => it.data)
      } finally {
        this.query.loading = false
      }
    },
    expired(day) {
      return dayjs().isAfter(day) ? 1 : 0
    },
    amount(row) {
      const source = this.currency(row.sourceId)
      const target = this.currency(row.targetId)
      return `${source.fuhao} ${row.sourceAmount} : ${target.fuhao} ${row.targetAmount}`
    },
    rate(row) {
      return this.decimal(row.targetAmount).dividedBy(row.sourceAmount).toFixed(8)
    },
    add() {
      this.dialogs.form = { visible: true, id: null, data: {}, }
    },
    edit(row) {
      this.dialogs.form = { visible: true, id: row.id, data: {...row, }, }
    },
    remove(row) {
      this.$confirm(this.$t('确定要删除吗？'), this.$t('确认'), { type: 'warning' }).then(() => deleteCurrencyRate(row.id)).catch(() => {}).finally(this.pagination)
    },
    logs(row) {
      this.dialogs.logs = { visible: true, id: row.id, source: this.currency(row.sourceId), target: this.currency(row.targetId), }
    },
    async reverse(row) {
      var swap = { sourceId: row.targetId, targetId: row.sourceId, }
      const saved = await getCurrencyRate(swap).then(it => it.data)
      swap = saved || { ...swap, sourceAmount: row.targetAmount, targetAmount: row.sourceAmount, countries: row.countries, expiration: row.expiration, }
      this.dialogs.form = { visible: true, id: swap.id, data: { ...swap, }, }
    },
    decimal(a) {
      return new Decimal(a)
    },
    country(id) {
      return this.map.countries[id]
    },
    countries(row) {
      return (row.countries || []).map(this.country).map(c => this.$l(c, 'name')).join(',')
    },
    currency(id) {
      return this.map.currencies[id]
    },
  },
  async mounted() {
    this.dict.countries = await getCountryListAll().then(it => it.data)
    this.dict.currencies = await getCurrencyList().then(it => it.data)
    this.map.countries = this.dict.countries.reduce((m, e) => (m[e.id] = e, m), {})
    this.map.currencies = this.dict.currencies.reduce((m, e) => (m[e.id] = e, m), {})
    await this.pagination()
  },
})
</script>

<style scoped>
.rate {
  color: black;
  white-space: nowrap;
  font-size: 110%;
  font-family: monospace;
}
</style>
