<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 }"><audit :row="row"/></template>
      </el-table-column>
      <el-table-column :label="$t('金额修改')" align="right">
        <template v-slot="{ row }">
          <div v-if="row.sourceAmount1 == row.sourceAmount2 && row.targetAmount1 == row.targetAmount2">
            <div>{{ amount(row.sourceAmount1, row.targetAmount1) }}</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="left">
        <template v-slot="{ row }">
          <div v-if="row.sourceAmount1 == row.sourceAmount2 && row.targetAmount1 == row.targetAmount2">
            <div>1 : {{ rate(row.sourceAmount1, row.targetAmount1) }}</div>
          </div>
          <div v-else>
            <div class="after">1 : {{ rate(row.sourceAmount2, row.targetAmount2) }}</div>
            <div class="before">1 : {{ rate(row.sourceAmount1, row.targetAmount1) }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('日期变化')">
        <template v-slot="{ row }">
          <div v-if="dayjs(row.sourceExpiration) != dayjs(row.targetExpiration)">
            <div class="after">{{ dayjs(row.targetExpiration).format('YYYY-MM-DD HH:mm:ss') }}</div>
            <div class="before">{{ dayjs(row.sourceExpiration).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
          <div v-else>
            <div>{{ dayjs(row.sourceExpiration).format('YYYY-MM-DD HH:mm:ss') }}</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 dayjs from 'dayjs'
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,
}

export default Vue.extend({
  components,
  props,
  model: { prop: 'visible', event: 'update', },
  data() {
    return { loading: false, page: 1, limit: 10, list: [], total: 0, }
  },
  methods: {
    dayjs,
    close() {
      this.$emit('update:visible', false)
    },
    decimal(a) {
      return new Decimal(a)
    },
    amount(amount1, amount2) {
      return `${this.source.fuhao} ${amount1} : ${this.target.fuhao} ${amount2}`
    },
    rate(amount1, amount2) {
      return this.decimal(amount1).dividedBy(amount2).toFixed(8)
    },
    async pagination() {
      this.loading = true
      try {
        const data = await getCurrencyRateLogs({ id: this.id, page: this.page, rows: this.limit, }).then(it => it.data)
        this.list = data.list
        this.total = data.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>
