<template>
  <div v-loading="loading"
       class="main-container">
    <filtrate-handle-view class="filtrate-bar"
                          moduleType="business"
                          :showBusinessSelect="true"
                          @load="loading=true"
                          @change="getDataList">
    </filtrate-handle-view>
    <div class="content">
      <div class="axis-content">
        <div id="axismain"></div>
      </div>
      <div class="table-content">
        <el-table :data="list"
                  height="400"
                  stripe
                  border
                  highlight-current-row>
          <el-table-column v-for="(item, index) in fieldList"
                           :key="index"
                           align="center"
                           header-align="center"
                           show-overflow-tooltip
                           :prop="item.field"
                           :label="item.name">
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>
import base from '../mixins/base'
import echarts from 'echarts'
import { biBusinessFunnel } from '@/api/businessIntelligence/business'

export default {
  /** 销售漏斗 */
  name: 'funnel-statistics',
  components: {},
  data() {
    return {
      loading: false,

      list: [],
      fieldList: [
        { field: 'status_name', name: '阶段' },
        { field: 'money', name: '金额' },
        { field: 'count', name: '商机数' }
      ],

      funnelChart: null, // 漏斗图
      funnelOption: null
    }
  },
  mixins: [base],
  computed: {},
  mounted() {
    this.initAxis()
  },
  methods: {
    /**
     * 图表数据
     */
    getDataList(params) {
      this.loading = true
      biBusinessFunnel(params)
        .then(res => {
          this.loading = false
          this.list = res.data.list
          var data = []
          for (let index = 0; index < res.data.list.length; index++) {
            const element = res.data.list[index]
            data.push({
              name: element.status_name + '(' + element.count + ')',
              value: element.money
            })
          }

          this.funnelOption.series[0].data = data
          this.funnelOption.series[0].max =
            res.data.sum_money < 1 ? 1 : res.data.sum_money
          this.funnelChart.setOption(this.funnelOption, true)
        })
        .catch(() => {
          this.loading = false
        })
    },
    /** 销售漏斗 */
    initAxis() {
      var funnelChart = echarts.init(document.getElementById('axismain'))
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/> 预测金额: {c}元'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        calculable: true,
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0
        },
        color: this.chartColors,
        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            left: '20%',
            width: '56%',
            /** 数据排序 */
            sort: 'none',
            /** 数据图形间距。 */
            gap: 2,

            label: {
              normal: {
                show: true,
                position: 'right'
              },
              emphasis: {
                textStyle: {
                  fontSize: 20
                }
              }
            },
            labelLine: {
              normal: {
                length: 20,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              }
            },
            data: []
          }
        ]
      }

      funnelChart.setOption(option, true)
      this.funnelOption = option
      this.funnelChart = funnelChart
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../styles/detail.scss';
</style>
