<template>
  <div class="div_page_bg">
    <div class="div_content">
      <div class="div_content_key_value">
        <div class="div_key">
          <span class="span_key">供</span>
          <span class="span_key">方</span>
          <span class="span_key">名</span>
          <span class="span_key">称</span>
        </div>
        <span class="span_key">：</span>
        <span class="span_value">{{baseInfo.fbInfo.fbName}}</span>
      </div>
      <div class="div_content_key_value">
        <div class="div_key">
          <span class="span_key">供</span>
          <span class="span_key">方</span>
          <span class="span_key">状</span>
          <span class="span_key">态</span>
        </div>
        <span class="span_key">：</span>
        <span class="span_value">{{baseInfo.fbInfo.fbState}}</span>
      </div>
      <div class="div_content_key_value">
        <div class="div_key">
          <span class="span_key">注</span>
          <span class="span_key">册</span>
          <span class="span_key">地</span>
          <span class="span_key">址</span>
        </div>
        <span class="span_key">：</span>
        <span class="span_value">{{baseInfo.fbInfo.registeredAddress}}</span>
      </div>
      <div class="line-h"></div>
      <div class="div_content_key_value">
        <span class="span_key">纳税人类型：</span>
        <span class="span_value">{{baseInfo.fbInfo.taxpayerType}}</span>
      </div>
      <div class="div_content_key_value">
        <div class="div_key">
          <span class="span_key">注</span>
          <span class="span_key">册</span>
          <span class="span_key">资</span>
          <span class="span_key">金</span>
        </div>
        <span class="span_key">：</span>
        <span class="span_value">{{baseInfo.fbInfo.registeredCapital}}万</span>
      </div>
      <div class="div_content_key_value">
        <div class="div_key">
          <span class="span_key">分</span>
          <span class="span_key">类</span>
        </div>
        <span class="span_key">：</span>
        <div class="div_content_type">
          <span v-for="(data,index) in baseInfo.fbTypeInfo" :key="index" class="span_value" style="color: #78AEF9" @click="onClickClassify">{{data.fullName}}</span>
        </div>
      </div>
      <div class="line-h"></div>
      <div class="div_content_key_value">
        <div class="div_key">
          <span class="span_key">入</span>
          <span class="span_key">库</span>
          <span class="span_key">时</span>
          <span class="span_key">间</span>
        </div>
        <span class="span_key">：</span>
        <span class="span_value">{{baseInfo.fbInfo.warehousingTime}}</span>
      </div>
      <div class="div_content_key_value">
        <div class="div_key">
          <span class="span_key">入</span>
          <span class="span_key">库</span>
          <span class="span_key">年</span>
          <span class="span_key">份</span>
        </div>
        <span class="span_key">：</span>
        <span class="span_value">{{baseInfo.fbInfo.warehousingYeas}}年</span>
      </div>
      <div class="div_content_key_value">
        <div class="div_key">
          <span class="span_key">初</span>
          <span class="span_key">次</span>
          <span class="span_key">合</span>
          <span class="span_key">作</span>
        </div>
        <span class="span_key">：</span>
        <span class="span_value">{{baseInfo.fbInfo.firstCooperateTime}}</span>
      </div>
      <div class="div_content_key_value">
        <div class="div_key">
          <span class="span_key">备</span>
          <span class="span_key">注</span>
        </div>
        <span class="span_key">：</span>
        <div class="div_content_type">
          <span class="span_value">{{baseInfo.fbInfo.remark}}</span>
        </div>
      </div>
    </div>

    <loading v-model="loading" text="加载中"></loading>
  </div>
</template>

<script>

  import {getDetail} from "../../service/getData";

  export default {
    name: "providerDocumentBaseInfo",
    data(){
      return{
        loading:false,
        fbId:'',
        baseInfo:{
          fbInfo:{},
          fbTypeInfo:[],
        },
      }
    },
    created(){
      try {
        EbeiPlugins.setNavigationItemTitle("基本信息");
      }
      catch (e) {

      }
      this.fbId = this.$route.query.fbId;
      this.getDetailJs();
    },
    methods:{
      getDetailJs(){
        let that = this;
        let params = {
          fbId:this.fbId
        }
        that.loading = true;
        getDetail(params).then(res => {
          that.loading = false;
          if (res.status === 200) {
            that.baseInfo = res.data;
          } else {
            that.showTips(res.message)
          }
        }).catch(error => {
          that.loading = false;
        })
      },
      onClickClassify(){
        this.$router.push({
          path:"providerDocumentClassifyInfo",
          query:{
            fbId:this.fbId
          }
        })
      },
      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_content{
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 5px;
    padding: 15px;
  }
  .div_content_key_value{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 10px;
  }
  .div_content_type{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .div_key{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 60px;
  }
  .span_key{
    color: #999999;
    font-size: 12px;
  }
  .span_value{
    color: #333333;
    font-size: 12px;
    margin-left: 20px;
  }
  .line-h{
    width: calc(100%);
    height: 1px;
    background-color: #D9D9D9;
    margin: 20px 0 10px;
  }
</style>
