<template>
    <div class="common">
      <el-form label-width="100px">
        <el-divider></el-divider>
        <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="checkFile(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-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}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="5">
              <el-row>
                <el-col :span="6">单价</el-col>
                <el-col :span="18">{{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');
      },
    }
  }
</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>
