<template>
  <div class="app-container" v-loading="loading">
    <el-descriptions title="导入详情" :column="4">
      <el-descriptions-item label="日志ID">{{detail.logId | dv}}</el-descriptions-item>
      <el-descriptions-item label="日志类型">
        <dict-tag :options="dict.type.log_import_type" :value="detail.type" size="small"/>
      </el-descriptions-item>
      <el-descriptions-item label="业务类型">
        <dict-tag :options="dict.type.log_import_biz_type" :value="detail.bizType" size="small"/>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <dict-tag :options="dict.type.log_import_status" :value="detail.status" size="small"/>
      </el-descriptions-item>
      <el-descriptions-item label="创建人">
        {{detail.createBy | dv}}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{detail.createTime | dv}}
      </el-descriptions-item>
      <el-descriptions-item label="结束时间">
        {{detail.finishedTime | dv}}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="4">
      <el-descriptions-item label="耗时">
        {{calcSecond(detail.createTime, detail.finishedTime)}} 秒
      </el-descriptions-item>
      <template v-if="detail.statistics != null">
        <el-descriptions-item label="新增">
          <el-link type="success">{{detail.statistics.addCount | dv}} 条</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="修改">
          <el-link type="warning">{{detail.statistics.updateCount | dv}} 条</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="失败">
          <el-link type="danger">{{detail.statistics.failCount | dv}} 条</el-link>
        </el-descriptions-item>
      </template>
    </el-descriptions>

    <el-tabs>
      <el-tab-pane label="明细列表" lazy>
        <log-import-detail v-if="detail.logId != null" :query="{logId: detail.logId}"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import LogImportDetail from '@/views/bst/logImportDetail/index.vue'
import { getLogImport } from '@/api/bst/logImport'
import { calcSecond } from '@/utils/date'

export default {
  name: "LogImportView",
  components: {LogImportDetail},
  dicts: ['log_import_status', 'log_import_biz_type', 'log_import_type'],
  props: {
    logId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      detail: {}
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    calcSecond,
    getDetail() {
      this.loading = true;
      getLogImport(this.logId).then(res => {
        this.detail = res.data;
      }).finally(() =>{
        this.loading = false;
      })
    }
  }
}
</script>
