<template>
    <div class="chart-container">
      <div class="chart-header">
        <!--标题  -->
        <span class="title">商机统计</span>
        <el-select v-model="value" placeholder="请选择" size="mini">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="chart-content" :style="{ 'height': '300px', 'width': '500px' }">
        <!-- echarts内容 -->
        <MixChart :seriesData="seriesData" :legend="legend" :xAxisData="xAxisData" :yAxisData="yAxisData"/>
      </div>
    </div>
  </template>
    
    <script>
 import MixChart from '@/components/echart/barChart/MixChart.vue'
 import { getOpportunityStatistics } from '@/api/cockpit/cockpit'
  export default {
    name: "commonSelectChart",
    components: {
        MixChart,
    },
    props: {
      name: {
        type: String,
        default: "",
      },
      width: {
        type: String,
        default: "500px",
      },
      height: {
        type: String,
        default: "300px",
      },
    },
    data() {
      return {
        value: "year",
        options: [
          {
            value: "year",
            label: "近一年",
          },
          {
            value: "month",
            label: "近一月",
          },
        ],
        xAxisData: [],
        yAxisData: [],
        seriesData: [],
        legend: [],
      };
    },
    mounted() {
      // this.fetchData();
      setTimeout(() => {
      this.seriesData = [
        {
          type:'bar',
          name:'商机个数',
          data:[19,22,24,29,14,36,35]
        },
        {
          type:'bar',
          name:'商机转订单个数',
          data:[11,32,29,29,44,31,15]
        }
      ]
      this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月']
      this.legend = ['商机个数','商机转订单个数']
      this.yAxisData = [
      {
              type: "value",
              show: true,
              axisLabel: {
                formatter: "{value}",
                fontSize: 12,
                color: "#000",
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                //多条横线
                show: true,
              },
              interval: 20,
            },
      ]
    }, 2000);
    },
    methods: {
      fetchData() {
        getOpportunityStatistics(this.value).then(res => {
            console.log(res.data, '商机统计')
        })
      },
    },
    watch:{
        value(newVal) {
            this.fetchData()
        }
    }
  };
  </script>
    
    <style lang="scss" scoped>
  .chart-container {
    .chart-header {
      width: 500px;
      align-items: center;
      display: flex;
      justify-content: space-between;
    }
  }
  </style>