<template>
  <el-dialog
    :title="$t('pages.userBankAccounts.dialog.accountTransactions')"
    :visible="true"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :modal-append-to-body="true"
    :append-to-body="true"
    width="80%"
    top="20px"
  >
    <div class="content">
      <el-table
        v-loading="listLoading"
        :data="list"
        :before-close="handleClose"
        :element-loading-text="$t('pages.userBankAccounts.loading')"
        fit
        highlight-current-row
        max-height="350px"
      >
        <el-table-column prop="sysOrigin" :label="$t('pages.userBankRunningWater.table.system')" align="center">
          <template slot-scope="scope">
            <sys-origin-icon :icon="scope.row.sysOrigin" :desc="scope.row.sysOrigin" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('pages.userBankRunningWater.table.user')" align="center" min-width="80">
          <template slot-scope="scope">
            <div><user-table-exhibit :size="scope.row.userProfile ? 'mini' : 'small'" :user-profile="scope.row.userProfile" :query-details="true" /></div>
            <div v-if="scope.row.tmpUserProfile" class="attached">
              <user-table-exhibit size="mini" :user-profile="scope.row.tmpUserProfile" :query-details="true" :tag-name="getTransferDescriptionName(scope.row.event)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('pages.userBankRunningWater.table.type')" align="center" width="80">
          <template slot-scope="scope">
            {{ getTypeName(scope.row.type, scope.row.typeName) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('pages.userBankRunningWater.table.amount')" align="center" min-width="80">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.type === 0" class="font-danger">+{{ scope.row.amount }}</span>
              <span v-if="scope.row.type === 1">-{{ scope.row.amount }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="balance" :label="$t('pages.userBankRunningWater.table.balance')" align="center" />
        <el-table-column :label="$t('pages.userBankRunningWater.table.event')" align="center">
          <template slot-scope="scope">
            <div>{{ getEventDesc(scope.row.event) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" :label="$t('pages.userBankRunningWater.table.remark')" align="center" min-width="200" />
        <el-table-column prop="createTime" :label="$t('pages.userBankRunningWater.table.createTime')" align="center" width="160">
          <template slot-scope="scope">
            {{ scope.row.createTime | dateFormat }}
          </template>
        </el-table-column>
      </el-table>

      <div v-if="listQuery.lastId" class="load-more">
        <span v-if="notData">{{ $t('pages.userBankRunningWater.action.allLoaded') }}</span>
        <el-button v-else size="mini" :disabled="loadMoreLoading" :loading="loadMoreLoading" @click="clickLoadMore">{{ $t('pages.userBankRunningWater.action.loadMore') }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { pageRunningWater } from '@/api/app-user-bank-balance'
import { userBankWaterEvent } from '@/constant/user'
export default {
  name: 'GoldRunningWaterDrawer',
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      userBankWaterEvent,
      listQuery: {
        limit: 20,
        userId: '',
        sysOrigin: '',
        lastId: ''
      },
      listLoading: false,
      list: [],
      notData: false,
      loadMoreLoading: false
    }
  },
  watch: {
    row: {
      handler(newVal) {
        this.listQuery.userId = newVal.id
        this.listQuery.sysOrigin = newVal.sysOrigin
        this.renderData()
      },
      immediate: true
    }
  },
  methods: {
    renderData(isReset) {
      const that = this
      if (!that.listQuery.sysOrigin) {
        return
      }
      if (isReset === true) {
        that.list = []
        that.notData = false
        that.listQuery.lastId = ''
      }
      that.listLoading = true
      pageRunningWater(that.listQuery).then(res => {
        that.listLoading = false
        that.loadMoreLoading = false
        const { body } = res
        const list = body || []
        that.notData = list.length <= 0
        if (!that.notData) {
          that.list = that.list.concat(list)
          that.listQuery.lastId = that.list[that.list.length - 1].id
        }
      }).catch(er => {
        that.listLoading = false
        that.loadMoreLoading = false
      })
    },
    getTransferDescriptionName(event) {
      if (event === 'TRANSFER') {
        return this.$t('pages.userBankRunningWater.transfer.payee')
      }
      if (event === 'RECEIVE_TRANSFER') {
        return this.$t('pages.userBankRunningWater.transfer.payer')
      }
      return ''
    },
    handleClose() {
      this.$emit('close')
    },
    clickLoadMore() {
      const that = this
      that.loadMoreLoading = true
      that.renderData()
    },
    getTypeName(type, fallback) {
      if (type === 0) {
        return this.$t('pages.userBankRunningWater.type.income')
      }
      if (type === 1) {
        return this.$t('pages.userBankRunningWater.type.expense')
      }
      return fallback || type
    },
    getEventDesc(_key) {
      const translated = this.$t(`pages.userBankRunningWater.events.${_key}`)
      if (translated !== `pages.userBankRunningWater.events.${_key}`) {
        return translated
      }
      const result = this.userBankWaterEvent.find(_event => _event.value === _key)
      return result ? result.name : _key
    }
  }
}
</script>
<style scoped lang="scss">
  .load-more {
    padding: 20px;
    text-align: center;
  }
</style>
