<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-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="职责项明细说明">
              {{transactionProjectInfo.dutyDetailDescribe?transactionProjectInfo.dutyDetailDescribe:"-"}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作结果的形式">
              {{transactionProjectInfo.workResultStyle?transactionProjectInfo.workResultStyle:"-"}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工作结果的时量/数量标准与交付方式/地址">
              {{transactionProjectInfo.workResultDetail?transactionProjectInfo.workResultDetail:"-"}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作结果的质量验收标准与方式">
              {{transactionProjectInfo.workResultMethod?transactionProjectInfo.workResultMethod:"-"}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="职责定价与支付时间和方式">
              {{transactionProjectInfo.dutyMethod?transactionProjectInfo.dutyMethod:"-"}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="卖方部门">{{tradeData.applyDeptName}}</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>{{tradeData.transactionDetailName ? tradeData.transactionDetailName : "-"}}</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="10">计量单位</el-col>
                <el-col :span="14">
                  <span style="margin-left: 10px">{{transactionProjectInfo.unit===null?"-":transactionProjectInfo.unit}}</span>
                </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, "/");
        let urls = JSON.parse(url);
        urls.forEach(item =>{
          const xhr = new XMLHttpRequest();
          xhr.open("GET", item.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>
