<template>
  <el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="详情" append-to-body @close="cancel">
    <el-scrollbar :native="false">
      <div class="info-block">
        <el-row type="flex" justify="center">
          <el-col :span="4">
            <div class="block-left">
              <svg-icon icon-class="failure" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="block-right">
              <div class="right-title">{{ flgUploadName }}</div>
              <div class="right-detail">{{ resUpload }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
import { getRecordsDetail } from '@/api/system/dataupload'
export default {
  name: 'UploadDetail',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      irId: null, // 采集记录id
      flgUpload: '', // 上传状态(0未采集，1采集成功，2采集失败允许继续上传,3采集失败不允许继续上传)
      resUpload: '' // 采集失败原因
    }
  },
  computed: {
    flgUploadName() {
      if (this.flgUpload === '0') {
        return '未上传'
      } else if (this.flgUpload === '1') {
        return '上传成功'
      } else {
        return '上传失败'
      }
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function(irId) {
      this.dialogFormVisible = true
      this.irId = irId
      this.fetchUploadDetail()
    },
    // 获取上传记录详情
    fetchUploadDetail() {
      const params = {
        irId: this.irId
      }
      getRecordsDetail(params).then(response => {
        if (response === 200) {
          this.flgUpload = response.data.flgUpload
          this.resUpload = response.data.resUpload
        }
      })
      this.flgUpload = '2'
      this.resUpload = '证件已存在，虹膜不一致'
    },
    // 点击关闭
    cancel() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .hide .el-upload--picture-card {
    display: none;
  }

  .editDialog {
    .el-dialog {
      width: 900px;
      .el-scrollbar {
        height: 180px;
        width: 100%;
      }
      .el-scrollbar__wrap {
        /*overflow: scroll;*/
        overflow-x: auto;
        overflow-y: auto;
      }
      .el-scrollbar__view {
        width: 98%;
      }
      .info-block{
        margin-top:20px;
        width:100%;
        .block-left{
          text-align: right;
          width:100px;
          float:left;
          font-size:50px;
        }
        .block-right{
          width:400px;
          float:left;
          .right-title{
            font-size:22px;
            line-height: 30px;
            margin-bottom:10px;
            font-weight: bold;
          }
          .right-detail{
            font-size:16px;
            line-height: 25px;
          }
        }
      }
    }
  }
</style>