<template>
  <el-dialog :visible="visible" @close="close" @open="open">
    <template slot="title">
      <div class="el-dialog__title">{{ $t('日志') }}: {{ $l(source, 'title') }} - {{ $l(target, 'title') }}</div>
    </template>
    <el-table class="logs" :data="list" v-loading="loading">
      <el-table-column type="index" :label="$t('序号')" align="center"/>
      <el-table-column :label="$t('修改人')">
        <template v-slot="{ row }">
          <div>
            <div><i>{{ user(row.updater).nickname }}</i>: <i class="remarks">{{ row.remarks || $t('无') }}</i></div>
            <div><i>{{ parseTime(row.updateTime) }}</i></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('金额修改')" align="center">
        <template v-slot="{ row }">
          <div v-if="row.sourceAmount1 === row.sourceAmount2 && row.targetAmount1 === row.targetAmount2">
            <div>{{ amount(row.sourceAmount2, row.targetAmount2) }}</div>
          </div>
          <div v-else>
            <div class="after">{{ amount(row.sourceAmount2, row.targetAmount2) }}</div>
            <div class="before">{{ amount(row.sourceAmount1, row.targetAmount1) }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('国家变化')" align="center">
        <template v-slot="{ row }">
          <div v-if="row.countries1String === row.countries2String">
            <div>{{ countriesString(row.countries2) }}</div>
          </div>
          <div v-else>
            <div class="after">{{ row.countries2String }}</div>
            <div class="before">{{ row.countries1String }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('日期变化')" align="center">
        <template v-slot="{ row }">
          <div v-if="row.expiration1 === row.expiration2">
            <div>{{ parseTime(row.expiration2) }}</div>
          </div>
          <div v-else>
            <div class="after">{{ parseTime(row.expiration2) }}</div>
            <div class="before">{{ parseTime(row.expiration1) }}</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :background="false" small layout="total,prev,pager,next,jumper" :total="total" :page.sync="page" :limit.sync="limit" @pagination="pagination"/>
  </el-dialog>
</template>

<script>
import { getCurrencyRateLogs } from '@/api/ecw/currencyRate'
import Decimal from 'decimal.js'
import Vue from 'vue'
import Audit from './audit.vue'

const components = {
  Audit,
}

const props = {
  id: Number,
  visible: { type: Boolean, default: false, },
  source: Object,
  target: Object,
  users: Object,
  countries: Object,
}

export default Vue.extend({
  components,
  props,
  model: { prop: 'visible', event: 'update', },
  data() {
    return { loading: false, page: 1, limit: 10, list: [], total: 0, }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    },
    user(id) {
      return this.users[id] || { id, nickname: id, }
    },
    countriesString(list) {
      return (list || []).map(e => this.countries[e]).filter(e => e).map(c => this.$l(c, 'name')).join(',')
    },
    decimal(a) {
      return new Decimal(a)
    },
    amount(amount1, amount2) {
      return `${this.source.fuhao} ${amount1} : ${this.target.fuhao} ${amount2}`
    },
    rate(amount1, amount2) {
      return this.decimal(amount2).dividedBy(amount1).toFixed(8)
    },
    async pagination() {
      this.loading = true
      try {
        const result = await getCurrencyRateLogs({ id: this.id, page: this.page, rows: this.limit, }).then(it => it.data)
        this.list = result.list.map(e => (e.countries1String = this.countriesString(e.countries1), e.countries2String = this.countriesString(e.countries2), e))
        this.total = result.total
      } finally {
        this.loading = false
      }
    },
    async open() {
      await this.pagination()
    },
  },
})
</script>

<style scoped>
::v-deep .before {
  color: gray;
  text-decoration: line-through;
}

::v-deep .after {
  color: green;
}

::v-deep .logs .el-table__cell {
  padding: 4px 0;
}
</style>
