<!--
  @description:采购人-保证金管理-线下收取的查看
  @Modifier:gmy
  @routerPath:
  @date:2020/5/12-17:49
-->
<template>
  <div v-loading="loading" style="padding: 0 10px;">
    <el-form
      ref="form"
      :model="formData"
      :inline-message="true"
      :rules="rules"
    >
      <p class="title">
        保证金缴纳信息
      </p>
      <table class="from_table">
        <tr>
          <td>
            <el-form-item label="供应商名称" />
          </td>
          <td colspan="3">
            <p>{{ formData.companyName }}</p>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="保证金金额(元)" />
          </td>
          <td>
            <p>{{ formData.companyName }}</p>
          </td>
          <td>
            <el-form-item label="提交时间" />
          </td>
          <td>
            <p>{{ formData.companyName }}</p>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="缴费凭证" />
          </td>
          <td colspan="3">
            <downloadFile :data="principalData" :down-load="true" />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="备注" />
          </td>
          <td colspan="3">
            <p>{{ formData.companyName }}</p>
          </td>
        </tr>
      </table>
    </el-form>
    <!--审核信息-->
    <ReviewCom
      v-if="procurementSignUpAuditList.length > 0"
      :review-list="procurementSignUpAuditList"
    />
    <!--关闭按钮-->
    <div class="but_footer">
      <div class="but_footer-h but_botton">
        <!--关闭 -->
        <el-button :loading="confirmLoading" @click="back">
          关闭
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* 接口*/
import { queryProcurementProjectBuysersInfo } from '@/api/procurement/procurementProject' // 暂存获取
/* 公用方法*/
import { linkerName, email, phone } from '@/assets/js/validate'// 校验输入内容
import downloadFile from '@comp/common/updownload/upload' // 文件下载组件
// vuex
import { mapGetters } from 'vuex'
/* 公共审核组件*/
import ReviewCom from './components/reviewInfoList'
export default {
  components: {
    downloadFile,
    ReviewCom // 审核信息组件
  },
  data() {
    return {
      loading: true,
      confirmLoading: false,
      formData: {
        companyName: '', // 单位名称
        buyersLinkerName: '', // 联系人
        buyersLinkerTel: '', // 联系电话
        buyersLinkerEmail: '' // 邮箱
      },
      pathData: {
        packId: '' // 标段Id
      },
      errorMsg: '',
      // 校验输入内容
      rules: {
        buyersLinkerName: [{ required: true, validator: linkerName, trigger: 'blur' }], // 联系人
        buyersLinkerTel: [{ required: true, validator: phone, trigger: 'blur' }], // 联系电话
        buyersLinkerEmail: [{ required: true, validator: email, trigger: 'blur' }] // 邮箱
      },
      procurementSignUpAuditList: [], // 审核信息数据
      // 文件下载信息
      principalData: {
        bizId: '', // 业务主键Id
        fileType: 'pro_procurement_signUp_attachment_base'// 文件类型 pro_procurement_project_material_requirements_base
      }
    }
  },
  computed: {
    /* language 国际化*/
    ...mapGetters(['language'])
  },
  watch: {
  },
  created() {
    this.initUser() // 获取采购人信息
  },
  methods: {
    // 获取采购人信息
    initUser() {
      queryProcurementProjectBuysersInfo().then(res => {
        this.loading = false
        this.formData.companyName = res.data.projectBuyersName // 单位名称
        this.formData.buyersLinkerName = res.data.buyersLinkerName // 联系人
        this.formData.buyersLinkerTel = res.data.buyersLinkerTel // 联系人手机号
        this.formData.buyersLinkerEmail = res.data.buyersLinkerEmail // 联系人邮箱
      })
    },
    // 返回
    back() {
    }
  }
}
</script>

<style lang="less" scoped>

  /deep/.show-word-limit-padding{
    .el-input__inner{
      padding-right: 70px;
    }
  }
  .title{
    font-weight: 600;
  }
  .but_botton{
    line-height: 70px;
    text-align: center;
  }
  .NoAudit{
    margin: 0 15px;
  }
</style>
