<!-- 暂无数据 -->

<template>
  <div class="modelBlock">
    <div class="model-title">
      <div class="model-title-text">商机来源</div>
      <div class="model-title-right">
        <el-date-picker
          value-format="yyyy-MM"
          v-model="date"
          type="month"
          placeholder="选择月"
          class="saveColumn-select"
          @change="changeTime"
          :clearable="false"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="model-content">
      <zz-echart
        :option="clientOptions"
        class="chart"
      ></zz-echart>
      <div class="totals">
        <span class="fonst-color">{{ total }}</span>
        <span class="numbers fonst-color">总人数</span>
      </div>
    </div>
  </div>
</template>
<script>
import { ringType } from './indexOptionChart';
import index from './allcommunit';
export default {
  mixins: [index],
  data () {
    return {
      mixins_query: {
        companyOrgId: '',
        startDate: ''
      },
      date: '',
      total: 0,
      clientOptions: ringType(
        [],
        [
          { value: 0, name: '线上预约' },
          { value: 0, name: '线上电话' },
          { value: 0, name: '线下访问' },
        ]
      )
    };
  },
  methods: {
    getData () {
      this.$http.get('/sc-community-web/business/statistics/source', this.mixins_query).then(({ data, msg, status }) => {

        if (status == 0) {
          let newData = [];
          this.total = 0;
          for (let i in data) {
            this.total += data[i].total;
            newData.push({
              name: data[i].businessSource == 1 ? '线上预约' : data[i].businessSource == 2 ? '线上电话' : '线下预约',
              value: data[i].total
            })
          }
          this.clientOptions = ringType([], newData);
        }
      });
    },
    changeTime (v) {
      this.mixins_query.startDate = v;
      this.getData();
    },
  },
  created () {
    this.mixins_query.startDate = this.$moment().format('YYYY-MM');
    this.date = this.$moment().format('YYYY-MM');
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
@import '../style.scss';
.model-title {
    .model-title-right {
        .saveColumn-select {
            &:not(:first-child) {
                margin-left: rem(20);
            }
        }
    }
}
.fonst-color {
    color: #fff;
}
</style>