<template>
  <el-card shadow="never" body-style="padding: 0;">
    <el-row>
      <el-col v-bind="styleResponsive ? { lg: 16, md: 16 } : { span: 16 }">
        <div class="demo-monitor-title">
          <div class="title-name">年度配料/用料比</div>
          <div class="title-unit">单位：吨</div>
        </div>
        <v-chart
          ref="dosingChart"
          style="height: 300px;margin: 10px auto;"
          :option="dosingChartOption"
        />
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 8, md: 8 } : { span: 8 }">
        <div class="demo-monitor-title">
          <div class="title-name">年度用料同比</div>
          <div class="title-unit">单位：吨</div>
        </div>
        <v-chart
          ref="materialChart"
          style="height: 300px;margin: 10px auto;"
          :option="materialOption"
        />
      </el-col>
    </el-row>
	<el-divider />
  </el-card>
</template>

<script>
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { BarChart } from 'echarts/charts';
  import { GridComponent, TooltipComponent , LegendComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { getSaleroomList } from '@/api/dashboard/analysis';
  import { echartsMixin } from '@/utils/echarts-mixin';

  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent,LegendComponent]);

  export default {
    components: { VChart },
    mixins: [echartsMixin(['dosingChart','materialChart'])],
    data() {
      return {
        // 销售量趋势数据
        saleroomData1: [],
        // 访问量趋势数据
        saleroomData2: [],
        // 柱状图配置
        dosingChartOption: {},
		materialOption:{}
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
      this.getSaleroomData();
    },
    methods: {
      /* 获取销售量数据 */
      getSaleroomData() {
        getSaleroomList()
          .then((data) => {
            this.saleroomData1 = data.list1;
            this.saleroomData2 = data.list2;
            this.onSaleTypeChange();
          })
          .catch((e) => {
            // this.$message.error(e.message);
          });
      },

      /* 销售量tab选择改变事件 */
      onSaleTypeChange() {
        const data = this.saleroomData1
        this.dosingChartOption = {
          tooltip: {
            trigger: 'axis'
          },
		  legend: {
		    data: ['配料', '用料'],
		    right: 20
		  },
          xAxis: [
            {
              type: 'category',
              data: data.map((d) => d.month)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            { 
			  name: '配料',
              type: 'bar',
              data: data.map((d) => d.value)
            },
			{
			  name: '用料',
			  type: 'bar',
			  data: data.map((d) => d.value+100)
			}
          ]
        };
		this.materialOption= {
		  color: ['#015478', '#8080FF'],
          tooltip: {
            trigger: 'axis'
          },
		  legend: {
		    data: ['本年用料', '上年用料'],
		    right: 20
		  },
          xAxis: [
            {
              type: 'category',
              data: data.map((d) => d.month)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            { 
			  name: '本年用料',
              type: 'bar',
              data: data.map((d) => d.value)
            },
			{
			  name: '上年用料',
			  type: 'bar',
			  data: data.map((d) => d.value+100)
			}
          ]
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
	.ele-page-header{
		border: none;
	}
  /* 小标题 */
  .demo-monitor-title {
    padding: 0 20px;
    margin: 15px 0 5px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.title-name{
		font-size: 16px;
		font-weight: bold;
		color: #000;
	}
  }

  /* 排名 item */
  .demo-monitor-rank-item {
    padding: 0 20px;
    line-height: 20px;
    margin-top: 18px;
  }
</style>
