<template>
  <div class="app-container" v-loading="loading">
    <template v-if="detail != null">
      <el-card class="box-card" header="转账详情">
        <el-descriptions>
          <el-descriptions-item label="转账单编号">{{ detail.batchNo | defaultValue}}</el-descriptions-item>
          <el-descriptions-item label="转账账户类型">
            <dict-tag :options="dict.type.account_type" :value="detail.accountType" size="mini"/>
          </el-descriptions-item>
          <el-descriptions-item label="业务类型">
            <dict-tag :options="dict.type.transfer_bst_type" :value="detail.bstType" size="mini"/>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <dict-tag :options="dict.type.transfer_status" :value="detail.status" size="mini"/>
          </el-descriptions-item>
          <el-descriptions-item label="名称">{{ detail.batchName | defaultValue}}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ detail.batchRemark | defaultValue}}</el-descriptions-item>
          <el-descriptions-item label="总金额">{{ detail.totalAmount | money | defaultValue}} 元</el-descriptions-item>
          <el-descriptions-item label="关闭原因">{{ detail.closeReason | defaultValue}}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ detail.createTime | defaultValue}}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card class="box-card">
        <el-tabs>
          <el-tab-pane label="转账明细" lazy>
            <transfer-detail v-if="detail.batchId != null" :query="{transferId: detail.batchId}" :view="views.transfer"/>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </template>
    <el-empty v-else description="转账单不存在或已被删除"/>
  </div>
</template>

<script>

import { getTransfer } from '@/api/ss/transfer'
import TransferDetail from '@/views/ss/transferDetail/index.vue'
import { views } from '@/utils/constants'

export default {
  name: "Transfer/:batchId",
  computed: {
    views() {
      return views
    }
  },
  components: { TransferDetail },
  dicts: ['transfer_status', 'transfer_bst_type', 'account_type'],
  data() {
    return {
      id: null,
      detail: {},
      loading: false,
    }
  },
  created() {
    this.id = this.$route.params.batchId;
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.loading = true;
      getTransfer(this.id).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.loading = false;
      })
    }
  }
}
</script>
