<template>
  <d2-container class="business">
    <headerLayout active="2"></headerLayout>
    <div class="section">
      <div class="leftBlock">
        <div class="boxHeight-3">
          <div class="title">商机统计</div>
          <div class="businessStatistics d-flex">
            <div class="circle">商机统计</div>
            <div class="circle circleOut"></div>
            <div class="flex-1">
              <div class="box">
                <div class="boxTitle">商机总数<span>（个）</span></div>
                <div class="boxValue">{{totalObj.opportunitiesNumber|| 0}}</div>
              </div>
              <div class="box">
                <div class="boxTitle">整体预算<span>（百万）</span></div>
                <div class="boxValue">{{totalObj.budget| numFilter}}</div>
              </div>
            </div>
            <div class="horizontal"></div>
            <div class="flex-1">
              <div class="box">
                <div class="boxTitle">本月新增<span>（个）</span></div>
                <div class="boxValue">{{(totalObj.newOpportunities|| 0)}}</div>
              </div>
              <div class="box">
                <div class="boxTitle">预计毛利<span>（百万）</span></div>
                <div class="boxValue">{{totalObj.budgetGrossProfit | numFilter }}</div>
              </div>
            </div>
            <div class="horizontal"></div>
            <div class="flex-1">
              <div class="box">
                <div class="boxTitle">售前参与<span>（个）</span></div>
                <div class="boxValue">{{totalObj.saler || 0}}</div>
              </div>
              <div class="box">
                <div class="boxTitle">预计成本<span>（百万）</span></div>
                <div class="boxValue">{{totalObj.budgetCost | numFilter }}</div>
              </div>
            </div>
            <div class="horizontal horizontal1 "></div>
            <div class="horizontal horizontal1 horizontal2"></div>
            <div class="vertical"></div>
          </div>
        </div>
        <div class="boxHeight-3 mt-2">
          <div class="title">行业分布</div>
          <pieChart @downData="downDistributeData" :message="typeDistribute" idstr="typeDistribute" class="heightCut44"></pieChart>
        </div>
        <div class="boxHeight-3 mt-2">
          <div class="title">商机分布</div>
          <barChart :message="bussionDistribute" idstr="bussionDistribute" class="heightCut44 mt-2"></barChart>
        </div>
      </div>
      <div class="centerBlock">
        <div class="centerBoxHeight-32 d-flex flex-column">
          <div class="select-box mt-2">
              <div class="tab-chart">
                  <span class="tab-button" @click="changeType('number')" :class="{'is-active':chartActive=== 'number' }">数量</span>
                  <span class="tab-button" @click="changeType('money')" :class="{'is-active':chartActive=== 'money' }">金额</span>
              </div>
          </div>
          <div class="flex-1 d-flex">
            <div class="flex-1">
              <div class="title">商机阶段分析</div>
              <funnel :message="bussionStep" @refreshPie="refreshPie" :idstr="'bussionStep'" class="heightCut44"></funnel>
            </div>
            <div class="flex-1">
              <div class="title">商机类型</div>
              <pieChart :message="bussionType" :noDrill="true" idstr="bussionType" class="heightCut44"></pieChart>
            </div>
          </div>
          <div class="flex-1">
            <doubleYBarChart @downData="downData" :message="bussionAnalysis" idstr="bussionAnalysis" class="heightCut44 mt-1"></doubleYBarChart>
          </div>
        </div>
        <div class="centerBoxHeight-3 mt-2">
          <div class="title">合同税率分布</div>
          <doubleYBarChart :message="taxRateDistribute" idstr="taxRateDistribute" class="heightCut44 mt-1"></doubleYBarChart>
        </div>
      </div>
      <div class="rightBlock">
        <div class="boxHeight-3">
          <div class="title">商机预算及赢单率</div>
          <doubleYBarChart :message="successRatio" idstr="successRatio" class="heightCut44 mt-1"></doubleYBarChart>
        </div>
        <div class="boxHeight-3 mt-2">
          <div class="title">新商机分析</div>
          <doubleYBarChart :message="newBussAnalysis" idstr="newBussAnalysis" class="heightCut44 mt-1"></doubleYBarChart>
        </div>
        <div class="boxHeight-3 mt-2">
          <div class="title">产品类型分析</div>
          <pieChart @downData="downTypeData" :message="typeAnalysis" idstr="typeAnalysis" class="heightCut44"></pieChart>
        </div>
      </div>
    </div>
  </d2-container>
</template>

<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import pieChart from '@/components/echarts/pieChart' // 行业分布-饼图
import barChart from '@/components/echarts/barChart' // 商机分布-柱图
import doubleYBarChart from '@/components/echarts/doubleYBarChart' // 新商机分析-柱加折线图
import funnel from '@/components/echarts/funnel' // 梯形图
import * as API_BUSSINESS from '@/api/con.business.js'
export default {
  components: { headerLayout, pieChart, barChart, doubleYBarChart, funnel },
  data () {
    return {
      chartActive: 'number',
      stepActive: '',
      totalObj: {}, // 商机统计
      industry: '',
      // 行业分布
      typeDistribute: {},
      productType: '',
      // 产品类型分析
      typeAnalysis: {},
      // 商机分布
      bussionDistribute: {},
      // 新商机分析
      newBussAnalysis: {},
      // 合同税率分布
      taxRateDistribute: {},
      // 商机预算及硬蛋率
      successRatio: {},
      // 商机分析-中间图
      bussionAnalysis: {},
      // 商机类型
      bussionType: {},
      // 商机阶段分析
      bussionStep: {}
    }
  },
  mounted () {
    this.getOpportunitiesStatistics()
    this.getDistribution()
    this.getOpportunitiesDistribution()
    this.getTaxRate()
    this.getProductType()
    this.getNewOpportunities()
    this.getBillRate()
    this.getOpportunitiesByDept('', false)
    this.getOpportunitiesByStep()
    this.getOpportunitiesByNumberOrMoney()
  },
  filters: {
    numFilter (value) {
      value = value / 1000000
      // 截取当前数据到小数点后两位(以百万元为单位)
      const realVal = parseFloat(value).toFixed(2)
      return realVal
    }
  },
  methods: {
    // 商机统计
    async  getOpportunitiesStatistics () {
      const _data = await API_BUSSINESS.getOpportunitiesStatistics()
      if (!_data.data) { return false }
      this.totalObj = _data.data[0]
    },
    // 行业分布
    async getDistribution () {
      const _data = await API_BUSSINESS.getDistribution({ industry: this.industry || null, deptId: this.clickDistributeId })
      if (!_data.data) { return false }
      let isLeaf = false
      if (!_data.data.data.length) {
        // 下级无数据 即为叶子节点
        isLeaf = true
        this.typeDistribute.isLeaf = isLeaf
      } else {
        this.typeDistribute = {
          isLeaf: isLeaf,
          legend: _data.data.legend,
          data: _data.data.data.map(item => {
            return {
              name: item.industry || item.name,
              value: Number(item.value),
              id: item.id || null
            }
          })
        }
      }
    },
    // 商机分布
    async getOpportunitiesDistribution () {
      const _data = await API_BUSSINESS.getOpportunitiesDistribution()
      if (!_data.data) { return false }
      this.bussionDistribute = _data.data
      this.bussionDistribute.yAxis = '单位 ：个'
    },
    // 合同税率
    async getTaxRate () {
      const _data = await API_BUSSINESS.getTaxRate()
      if (!_data.data) { return false }
      this.taxRateDistribute = _data.data
      this.taxRateDistribute.data = this.taxRateDistribute.data.map(item => {
        item.barWidth = '25%'
        return item
      })
    },
    // 产品类型分析
    async getProductType () {
      const _data = await API_BUSSINESS.getProductType({ industry: this.productType || null, deptId: this.clickTypeId || null })
      if (!_data.data) { return false }
      let isLeaf = false
      if (!_data.data.data.length) {
        // 下级无数据 即为叶子节点
        isLeaf = true
        this.typeAnalysis.isLeaf = isLeaf
      } else {
        this.typeAnalysis = {
          isLeaf: isLeaf,
          legend: _data.data.legend,
          data: _data.data.data.map(item => {
            return {
              name: item.name,
              value: Number(item.number) || Number(item.value),
              id: item.id || null
            }
          })
        }
      }
    },
    // 新商机分析
    async getNewOpportunities () {
      const _data = await API_BUSSINESS.getNewOpportunities()
      if (!_data.data) { return false }
      this.newBussAnalysis = _data.data
      this.newBussAnalysis.data = this.newBussAnalysis.data.map(item => {
        item.barWidth = '25%'
        return item
      })
    },
    // 商机成功率
    async getBillRate () {
      const _data = await API_BUSSINESS.getBillRate()
      if (!_data.data) { return false }
      this.successRatio = _data.data
    },
    // q切换数量和金额
    changeType (item) {
      this.chartActive = item
      this.getOpportunitiesByNumberOrMoney()
      this.getOpportunitiesByStep()
      this.getOpportunitiesByDept()
    },
    // 点击漏斗图 切换饼图数据
    refreshPie (item) {
      this.stepActive = item
      this.getOpportunitiesByNumberOrMoney()
    },
    // 商机阶段分析-中间饼图
    async getOpportunitiesByNumberOrMoney () {
      const _data = await API_BUSSINESS.getOpportunitiesByNumberOrMoney({ name: this.chartActive, step: this.stepActive || null })
      if (!_data.data) { return false }
      this.bussionType = {
        unit: this.chartActive === 'money' ? '万元' : '',
        legend: _data.data.legend,
        data: _data.data.data.map(item => {
          return {
            name: item.type,
            value: item.value
          }
        })
      }
    },
    // 商机阶段分析-中间漏斗图
    async getOpportunitiesByStep () {
      const _data = await API_BUSSINESS.getOpportunitiesByStep({ name: this.chartActive })
      if (!_data.data) { return false }
      this.bussionStep = {
        legend: _data.data.legend,
        data: _data.data.data.map(item => {
          return {
            name: item.step,
            value: item.opportunitiesNumber
          }
        })
      }
    },
    // 商机阶段分析-中间柱状图
    async getOpportunitiesByDept (param) {
      this.parentId = param || null
      const _data = await API_BUSSINESS.getOpportunitiesByDept({ parentId: this.parentId || null, type: this.chartActive })
      if (!_data.data) { return false }
      let isLeaf = false
      if (!_data.data.idxs.length) {
        // 下级无数据 即为叶子节点
        isLeaf = true
        this.bussionAnalysis.isLeaf = isLeaf
      } else {
        this.bussionAnalysis = {
          isLegend: true,
          parentId: param || '',
          isLeaf: isLeaf,
          xAxis: _data.data.xAxis,
          yAxis: _data.data.yAxis,
          idxs: _data.data.idxs,
          data: _data.data.data
        }
      }
    },
    // 商机阶段分许下钻数据
    downData (item) {
      // console.log('传来的值:', item)
      this.getOpportunitiesByDept(item)
    },
    // 行业分布下钻数据
    downDistributeData (item) {
      // console.log('传来的值:', item)
      this.industry = item.type || null
      this.clickDistributeId = item.id || null
      this.getDistribution()
    },
    // 产品类型分析下钻数据
    downTypeData (item) {
      // console.log('pie传来的值:', item)
      this.productType = item.type || null
      this.clickTypeId = item.id || null
      this.getProductType()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/assets/style/business.scss';
</style>
