<template>
  <div class="div_page_bg">
    <div class="div_item">
      <div class="div_type">
        <img src="../../assets/images/icon_provider_document_jbxx.png" width="16px" height="16px"/>
        <span class="span_type">基本信息</span>
      </div>

      <div class="div_item_content">
        <span class="span_content">供方名称：{{record.fbName}}</span>
        <span class="span_content" style="margin-top: 5px">注册资金：{{record.registeredCapital}}万</span>
      </div>
      <div class="div_item_detail">
        <span class="span_detail" @click="clickBase">查看详情</span>
      </div>
    </div>

    <div class="div_item" style="margin-top: 15px">
      <div class="div_type">
        <img src="../../assets/images/icon_provider_document_htxx.png" width="16px" height="16px"/>
        <span class="span_type">合同信息</span>
      </div>
      <div class="div_item_content">
        <span class="span_content">合同总计：{{record.contractNum}}份</span>
      </div>
      <div class="div_item_detail">
        <span class="span_detail" @click="clickAgreement">查看详情</span>
      </div>
    </div>

    <div class="div_item" style="margin-top: 15px">
      <div class="div_type">
        <img src="../../assets/images/icon_provider_document_tbjl.png" width="16px" height="16px"/>
        <span class="span_type">投标记录</span>
      </div>
      <div class="div_item_content">
        <span class="span_content">投标总次数：{{record.tenderNum}}次</span>
      </div>
      <div class="div_item_detail">
        <span class="span_detail" @click="clickTender">查看详情</span>
      </div>
    </div>

    <div class="div_item" style="margin-top: 15px">
      <div class="div_type">
        <img src="../../assets/images/icon_provider_document_jfjl.png" width="16px" height="16px"/>
        <span class="span_type">奖罚记录</span>
      </div>
      <div class="div_item_content">
        <span class="span_content">处罚总次数：{{record.rpNum}}次</span>
      </div>
      <div class="div_item_detail">
        <span class="span_detail" @click="clickResult">查看详情</span>
      </div>
    </div>
    <loading v-model="loading" text="加载中"></loading>
  </div>
</template>

<script>
  import {getAppFbInfoById, getTree} from "../../service/getData";

  export default {
    name: "providerDocument",
    data(){
      return{
        companyId:'',
        fbId:'',
        loading: false,
        record:''
      }
    },
    created(){
      try {
        EbeiPlugins.setNavigationItemTitle("供方档案");
      }
      catch (e) {

      }
      this.companyId = this.$route.query.companyId;
      this.fbId = this.$route.query.fbId;
      // this.getTypes();
      this.getAppFbInfoByIdJs();
    },
    methods:{

      clickBase(){
        this.$router.push({
          path:'providerDocumentBaseInfo',
          query:{
            companyId:this.companyId,
            fbId:this.fbId
          }
        })
      },
      clickAgreement(){
        this.$router.push({
          path:'providerDocumentAgreement',
          query:{
            companyId:this.companyId,
            fbId:this.fbId
          }
        })
      },
      clickTender(){
        this.$router.push({
          path:'providerDocumentTender',
          query:{
            companyId:this.companyId,
            fbId:this.fbId
          }
        })
      },
      clickResult(){
        this.$router.push({
          path:'providerDocumentResult',
          query:{
            companyId:this.companyId,
            fbId:this.fbId
          }
        })
      },
      getAppFbInfoByIdJs(){
        let that = this;
        let params = {
          fbId:this.fbId
        }
        that.loading = true;
        getAppFbInfoById(params).then(res => {
          that.loading = false;
          if (res.status === 200) {
            that.record = res.data;
          }
        }).catch(error => {
          that.loading = false;
        })

      },
      showTips (tip) {
        this.$vux.toast.show({
          type: 'text',
          text: tip,
          position: 'bottom'
        })
      },
    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100vh;
    padding: 15px;
    background-color: #F7F7F7;
  }
  .div_item{
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: white;
    border-radius: 5px;
  }
  .div_type{
    display: flex;
    align-items: center;
  }
  .span_type{
    display: flex;
    justify-content: center;
    font-size: 16px;
    color: black;
    border-style: dashed;
    border-width: 1px;
    border-color: #999999;
    width: 80px;
    margin-left: 8px;
  }
  .div_item_content{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }
  .span_content{
    color: #999999;
    font-size: 14px;
  }
  .div_item_detail{
    display: flex;
    flex-direction: row-reverse;
  }
  .span_detail{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #57A2FF;
    font-size: 14px;
  }
  .span_detail::after{
    content: " ";
    display: block;
    height: 12px;
    width: 12px;
    margin-left: 2px;
    background: url("../../assets/images/icon_right_case.png") no-repeat;
    background-size: 100%;
  }
</style>
