<template>
    <div class="itemNation">
      <div class="title">全国</div>
      <div class="content d-flex">
        <div class="flex-1">
          <pieChart :message="itemNationWide" idstr="itemNationWide" class="heightCut44"></pieChart>
          <p v-if="type=='4'">共计客户 <strong>{{message.allCustomerNumber}}个</strong></p>
          <p v-if="type=='3'">共计商机 <strong>{{message.allOpportunitiesNumber}}个</strong></p>
          <p v-if="type=='1'">共计项目 <strong>{{message.allProjectNumber}}个</strong></p>
        </div>
        <template>
          <div v-if="type=='4'" class="flex-1 sum-box">
            <div class="d-flex flex-column">
              <div class="text-box">
                <label>本年度签署合同</label>
                <span>{{message.contactMoney|moneyFormat(8)|numFormat}} 亿</span>
              </div>
              <div class="text-box">
                <label>相关产品</label>
                <span>{{message.contactNumber}} 个</span>
              </div>
              <div class="text-box">
                <label>累计服务次数</label>
                <span>{{message.serviceNumber}} 次</span>
              </div>
            </div>
          </div>
          <div v-if="type=='3'" class="flex-1 sum-box">
            <div class="d-flex flex-column">
              <div class="text-box">
                <label>预计总收入</label>
                <span>{{message.allRevenueMoney|moneyFormat(8)|numFormat}} 亿</span>
              </div>
              <div class="text-box">
                <label>预计总成本</label>
                <span>{{message.allCostMoney|moneyFormat(8)|numFormat}} 亿</span>
              </div>
              <div class="text-box">
                <label>参与售前</label>
                <span>{{message.allSalerNumber}} 人</span>
              </div>
            </div>
          </div>
          <div v-if="type=='1'" class="flex-1 sum-box">
            <div class="d-flex flex-column">
              <div class="text-box">
                <label>服务次数累计</label>
                <span>{{message.serviceNumber}} 次</span>
              </div>
              <div class="text-box">
                <label>当前参与技术人员</label>
                <span>{{message.technologyEmployee}} 人</span>
              </div>
              <div class="text-box">
                <label>当前参与销售人员</label>
                <span>{{message.saleEmployee}} 人</span>
              </div>
            </div>
          </div>
        </template>

      </div>
    </div>
</template>

<script>
// import * as API_BASIC from '@/api/sys.basic.js'
import pieChart from '@/components/echarts/pieChart' // 行业分布-饼图
export default {
  props: ['message', 'type'],
  components: { pieChart },
  data () {
    return {
      itemNationWide: {}
    }
  },
  watch: {
    message: {
      handler () {
        const vm = this
        setTimeout(function () {
          vm.getList()
        }, 0)
      },
      deep: true
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 查询概况页面数据
    getList () {
      this.itemNationWide = {
        legend: this.message.legend,
        data: this.message.data
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.itemNation {
  .content {
    width: 100%;
    height: calc(100% - .44rem);
    box-sizing: border-box;
    padding: .24rem;
    p {
      font-size: .16rem;
      color: #fff;
      text-align: center;
    }
    .sum-box {
      border-left: 1px solid #30DDF4;
      padding-top: .24rem;
    }
    .text-box {
      text-align: center;
      flex: 1;
      font-family: PingFang-SC-Medium;
      font-size: .16rem;
      line-height: 2;
      color: #FFFFFF;
      span {
        padding-left: .24rem;
        font-family: ZhenyanGB-Regular;
        font-size: .24rem;
        color: #30DDF4;
      }

    }
  }
}
</style>
