<style lang="less" scoped>
    #chartMmcolorsale{
        font-size:12px;

        h2{
            text-align: center;
        }
        .center{
            text-align: center;
        }
        /deep/ .weui-cells{
            margin-top:0;
        }
        /deep/ .vux-datetime{
            div>p{
                margin-bottom: 0;
            }
        }
        /deep/ .weui-cell_access{
            padding-right: 10px;
        }
        /deep/ .weui-cell_access .weui-cell__ft:after{
            height: 10px;
            width: 10px;
            margin-top: -4px;
            right: 0;
        }
        /deep/ .weui-dialog{
            max-width:60px;
        }
        img{
            width:100%;
        }
    }
</style>

<template>
  <div id="chartMmcolorsale">
    <searchComponent :search="search" />
    <h2 >产品颜色销售排行</h2>
    <div id="myChart1" :style="{width: '100vw', height: '300%',display:mmcolorsaletop.length > 0 ? 'block' : 'none'}"></div>
    <img v-if="mmcolorsaletop.length <= 0" src="@/assets/noData.jpg" class="_img" alt="">

    <h2>产品销售排行</h2>
    <div id="myChart2" :style="{width: '100vw', height: '300%',display:mmsaletop.length > 0 ? 'block' : 'none'}"></div>
    <img v-if="mmcolorsaletop.length <= 0" src="@/assets/noData.jpg" class="_img" alt="">

  </div>
</template>

<script>
import Util from '@/libs/util.js'
import searchComponent from '@/components/search'
import { Confirm } from 'vux'

export default {
  name: 'chartMmcolorsale',
  data () {
    return {
        mmcolorsaletop:[],
        mmsaletop:[],
        search:{
            dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
            dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
        },
        timer:null,
        iProjectId:5599,
        i:0,
        myChart1:null,
        myChart2:null
    }
  },
  async mounted(){
    this.myChart1 = this.$echarts.init(document.getElementById('myChart1'))
    this.myChart2 = this.$echarts.init(document.getElementById('myChart2'))
    this.initChart(this.myChart1,'myChart1');
    this.initChart(this.myChart2,'myChart2');
    
    this.iProjectId = this.$route.params.iProjectId;
    this.$store.dispatch('setIproject',this.iProjectId);

    await this.getMmcolorsaletop();
    await this.getMmsaletop();
    this.global.$on('searchData',async ()=>{
        await this.getMmcolorsaletop();
        await this.getMmsaletop();
    });
    
  },
  components:{
      searchComponent,
      Confirm
  },
  
  methods:{
    async getMmcolorsaletop(){
        let result = await this.request('getMmcolorsaletop',{
            params:this.search
        },true,{iProjectId:this.iProjectId})
        this.mmcolorsaletop = result;
        this.setChart(this.myChart1,'myChart1')
    },
    async getMmsaletop(){
        let result= await this.request('getMmsaletop',{
            params:this.search
        },true,{iProjectId:this.iProjectId})
        this.mmsaletop = result;
        this.setChart(this.myChart2,'myChart2')
    },
    setChart(myChart,id){
        var that = this;
       let options = {
           color:['#5cadff','#1c2438'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#111'
                    }
                }
            },
            toolbox: {
                feature: {
                    // dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    // saveAsImage: {show: true}
                },

            },
            grid: {
                left: '2%',   // 与容器左侧的距离
                right: '2%', // 与容器右侧的距离
                containLabel: true
            },
            legend: {
                data:['金额','数量'],
                x: 'left'
            },
            xAxis: [
                {
                    type: 'category',
                    data: id == 'myChart1' ? this.mmcolorsaletop.map(x => `${x.sMaterialNo}\n${x.sColorNo || ''}\n${x.sUnit || ''}`) : this.mmsaletop.map(x => `${x.sMaterialNo}\n${x.sUnit || ''}`),
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        interval:0 
                    }
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '金额',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    scale:true
                },
                {
                    type: 'value',
                    name: '数量',
                    scale:true,
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name:'金额',
                    type:'bar',
                    data:id == 'myChart1' ? this.mmcolorsaletop.map(x => `${x.nAmount}`) : this.mmsaletop.map(x => `${x.nAmount}`),
                    barMaxWidth:40
                },
                {
                    name:'数量',
                    type:'line',
                    yAxisIndex: 1,
                    data:'myChart1' ? this.mmcolorsaletop.map(x => `${x.nQty}`) : this.mmsaletop.map(x => `${x.nQty}`),
                    barMaxWidth:40
                }
            ],
            dataZoom: [{
                type: 'inside',
                show: true, //flase直接隐藏图形
                xAxisIndex: [0],
                left: '9%', //滚动条靠左侧的百分比
                start: 0,//滚动条的起始位置
                end: 15 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
            }],
            
        };
        myChart.setOption(options);
        window.addEventListener("resize",function(){
            myChart.resize()
            if(id == 'myChart1'){
                options.dataZoom[0].end = document.documentElement.clientWidth > document.documentElement.clientHeight ? 20 : 10
            }else{
                options.dataZoom[0].end = document.documentElement.clientWidth > document.documentElement.clientHeight ? 70 : 50
            }
            myChart.setOption(options);
        });
    },
    initChart(myChart,id){
        myChart.on('mousedown', (param)=> {
            // this.switch = false;
            this.timer = setTimeout(()=>{
                // this.i = 0;
                // options.tooltip.show = false;
                // myChart.setOption(options);
                // if(!this.switch){
                    longPress(param)
                // }
            },2000);
        });
        myChart.on('mousemove',  (param)=> {
            window.clearTimeout(this.timer);
        });
        
        myChart.on('mouseup', (param)=> {
            window.clearTimeout(this.timer);
        });
        

        var that = this;
        function longPress(param){
            that.$vux.confirm.show({
                title: '提示',
                content: '是否查看详情',
                // 组件除show外的属性
                onCancel : () => {
                    // options.tooltip.show = true;
                    // myChart.setOption(options);
                },
                onConfirm : () => {
                    let index = param.dataIndex;
                    let data = {};
                    if(id == 'myChart1'){
                        data = Object.assign(that.mmcolorsaletop[index],{type:'pbcustomer'})
                    }else{
                        data = Object.assign(that.mmsaletop[index],{type:'pbsales'});
                    }
                    that.$store.dispatch('setChartHearData',data).then(()=>{
                        that.$router.push({name:'chartCustomDetail'});
                    });
                    // options.tooltip.show = true;
                    // myChart.setOption(options);
                }
            })
        }
    }
  }
}
</script>