<template>
  <div class="common">
    <el-form label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="借贷部门">{{ debitData.debitDeptName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经办人">{{ debitData.operatorName }}</el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="出借部门">{{ debitData.lendDeptName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登记日期">{{ debitData.registerTime }}</el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="使用人">{{ debitData.useName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用说明">{{ debitData.useDescribe }}</el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="大写合计">{{ debitData.capitalTotal }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="小写合计">{{ debitData.littleTotal }}</el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="计息日">{{ debitData.sumInterestDate }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计还款日">{{ debitData.expectedRepaymentDate }}</el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="附件">
             <span
               style="padding-top: 10px;"
               class="dbtn"
               @click="download(debitData.attachmentUrl)"
               v-if="debitData.attachmentUrl != null && debitData.attachmentUrl!=''"
             >
                    <i class="el-icon el-icon-view"></i>查看/下载
             </span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应还金额">{{ payable() }}</el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注">{{ debitData.remark==null?"-":debitData.remark }}</el-form-item>
      <el-divider></el-divider>
    </el-form>

  </div>
</template>

<script>
  export default {
    name: "common-info",
    props:{
      debitData:{
        type: Object
      }
    },
    methods:{
      //附件下载
      download(url) {
        // url = url.replace(/\\/g, "/");
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
        xhr.onload = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            let blob = this.response;
            console.log(blob);
            // 转换一个blob链接
            // 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
            // 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
            let downLoadUrl = window.URL.createObjectURL(
              new Blob([blob], {
                type: blob.type,
              })
            );
            // 视频的type是video/mp4，图片是image/jpeg
            // 01.创建a标签
            let a = document.createElement("a");
            // 02.给a标签的属性download设定名称
            a.download = name;
            // 03.设置下载的文件名
            a.href = downLoadUrl;
            // 04.对a标签做一个隐藏处理
            a.style.display = "none";
            // 05.向文档中添加a标签
            document.body.appendChild(a);
            // 06.启动点击事件
            a.click();
            // 07.下载完毕删除此标签
            a.remove();
          }
        };

        xhr.send();
      },
      //应还金额
      payable(){
        let time = new Date(this.debitData.expectedRepaymentDate).getTime()/ 1000 - new Date(this.debitData.sumInterestDate).getTime()/ 1000;
        let day = Math.round(time / 60 / 60 / 24);
        return (this.debitData.littleTotal *(1 + 0.08 /360 * day)).toFixed(2);
      }
    }
  }
</script>
<style lang="scss">
  .common{
    .el-form-item {
      margin-bottom: 0px !important;
    }
    .el-divider--horizontal {
      margin: 5px 0 !important;
    }
  }
</style>
<style scoped lang="scss">
  /* 横线 */
  .line{
    float:right;
    width: 100%;
    height: 1px;
    margin-top: -0.5em;
    background:#d4c4c4;
    position: relative;
    text-align: center;
  }

  .dbtn {
    display: inline-block;
    line-height: normal;
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
    border-radius: 3px;
    border-style: solid;
    border-width: 0;
    color: rgb(48, 180, 107);
  }
</style>