<template>
    <div class="common">
      <el-form label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称">{{transactionProjectInfo.transactionProjectName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卖方部门">{{tradeData.applyDeptName}}</el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="内容说明">{{transactionProjectInfo.context}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="买方部门">{{tradeData.tradeDeptName}}</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(tradeData.attachmentUrl)"
                v-if="tradeData.attachmentUrl != null && tradeData.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="卖方经办人">{{tradeData.applyName}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">{{tradeData.remark}}</el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-form-item label="细项名称">
          <div>{{transactionProjectInfo.transactionItemName}}</div>
          <el-row>
            <el-col :span="5">
              <el-row>
                <el-col :span="6">数量</el-col>
                <el-col :span="18">{{tradeData.tradeCount===null?"-":tradeData.tradeCount}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="5">
              <el-row>
                <el-col :span="6">单价</el-col>
                <el-col :span="18">{{tradeData.tradePrice===null?"-":tradeData.tradePrice}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="5">
              <el-row>
                <el-col :span="6">总计</el-col>
                <el-col :span="18">{{tradeData.tradeTotal}}</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form-item>
        <el-divider></el-divider>
      </el-form>
    </div>
</template>

<script>
  import { getProject } from "@/api/transaction/project";
  export default {
    name: "common-info",
    props:{
      tradeData: {
        type: Object
      }
    },
    data(){
      return{
        transactionProjectInfo: {}
      }
    },
    created(){
      this.getTransactionProjecInfo();
    },
    methods:{
      getTransactionProjecInfo(){
        getProject(this.tradeData.relationTransactionProjectId).then(res =>{
          if(res.code == 200){
          this.transactionProjectInfo = res.data;
          }
        })
      },
      checkFile(url) {
        window.open(url,'_blank');
      },
      //附件下载
      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();
      },

    }
  }
</script>

<style>
  .common{
    .el-form-item {
      margin-bottom: 0px;
    }
    .el-divider--horizontal {
      margin: 5px 0;
    }
  }
</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>
