<template>
  <div class="div_provider_info" @click="onClickProvider">
    <div class="div_provider_info_title">
      <span class="span_provider_info_title">{{info.fb_name}}</span>
      <span :class="classes">{{info.fbStateName}}</span>
    </div>
    <div class="div_provider_info_content" style="margin-top: 10px">
      <span class="span_provider_info_key">履约月份</span>
      <span class="span_provider_info_value" @click.stop="onClickPerformance">{{info.achievement}}</span>
    </div>
    <div class="div_provider_info_content" style="margin-top: 5px">
      <span class="span_provider_info_key">业务占比</span>
      <span class="span_provider_info_value">{{info.totalAmount}}%</span>
    </div>

    <div class="line-h"></div>
  </div>
</template>

<script>
  export default {
    name: "providerInfoItem",
    props:{
      info:{
        type:Object
      }
    },
    computed:{
      //供方状态(1:正常、2:暂停、3:黑名单、4:休眠、5:除名、6:罚款)
      classes(){
        let classes = {};
        if (this.info.fb_state === 1){
          classes[this.span_status_normal] = true;
        }
        if (this.info.fb_state === 2){
          classes[this.span_status_pause] = true;
        }
        if (this.info.fb_state === 3){
          classes[this.span_status_black] = true;
        }
        if (this.info.fb_state === 4){
          classes[this.span_status_sleep] = true;
        }
        if (this.info.fb_state === 5){
          classes[this.span_status_except] = true;
        }
        if (this.info.fb_state === 6){
          classes[this.span_status_penalty] = true;
        }

        return classes;

      }
    },
    data() {
      return{
        span_status_normal:"span_status_normal",
        span_status_pause:"span_status_pause",
        span_status_black:"span_status_black",
        span_status_except:"span_status_except",
        span_status_sleep:"span_status_sleep",
        span_status_penalty:"span_status_penalty"
      }
    },
    methods:{
      onClickPerformance(){
        this.$router.push({
          path:'performanceDetail',
          query:{
            companyId:this.info.company_id,
            fbId:this.info.fb_id,
            fbName:this.info.fb_name,
            month:this.info.month,
            achievement:this.info.achievement,
          }
        })
      },
      onClickProvider(e){
        this.$router.push({
          path:'providerDocument',
          query:{
            companyId:this.info.company_id,
            fbId:this.info.fb_id,
          }
        })
        e.stopPropagation();
      }
    }
  }
</script>

<style scoped>
  .div_provider_info{
    display: flex;
    flex-direction: column;
    margin: 20px 0 0;
  }
  .div_provider_info_title{
    display: flex;
    flex-direction: row;
  }
  .span_provider_info_title{
    display: flex;
    flex: 1;
    width: 100%;
    font-size: 15px;
    font-weight: bold;
    color: #333333;
  }
  .div_provider_info_content{
    display: flex;
    flex-direction: row;
  }
  .span_provider_info_key{
    display: flex;
    flex: 1;
    width: 100%;
    font-size: 12px;
    color: #333333;
  }
  .span_provider_info_value{
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: #333333;
    width: 53px;
  }
  .span_status_normal{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21px;
    width: 53px;
    border-radius: 10px;
    background-color: #78AEF9;
    color: white;

  }
  .span_status_pause{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21px;
    width: 53px;
    border-radius: 10px;
    background-color: #47BCC8;
    color: white;

  }
  .span_status_black{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21px;
    width: 53px;
    border-radius: 10px;
    background-color: #EE4444;
    color: white;

  }
  .span_status_except{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21px;
    width: 53px;
    border-radius: 10px;
    background-color: #BCA170;
    color: white;

  }
  .span_status_sleep{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21px;
    width: 53px;
    border-radius: 10px;
    background-color: #BDC2C6;
    color: white;

  }
  .span_status_penalty{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21px;
    width: 53px;
    border-radius: 10px;
    background-color: #E60013;
    color: white;

  }

  .line-h{
    width: 100%;
    height: 1px;
    background-color: #D9D9D9;
    margin-top: 20px;

  }
</style>
