<template>
    <div>
        <a-row :gutter="24" style="margin-bottom: 20px;">
            <a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
                <a-card class="card-content echarts-card">
                    <div slot="title">
                        数据总览 更新时间：{{updateAccountEchart | formatDate}}
                    </div>
                    <div class="person-content-title" slot="extra">

                        <div class="content-title-acount"></div>
                        <div class="content-title-checkout">
                            <span class="title-checkout-select" style="margin-right:10px;">
                                <a-select v-model="selectValue" style="width:100px;" @change="selectValueChange">
                                    <a-select-option value="1">汇总</a-select-option>
                                    <a-select-option value="2">运营个人</a-select-option>
                                </a-select>
                            </span>
                            <span class="title-checkout-time">
                                <a-range-picker v-model="dateEchart" format="YYYY-MM-DD" :range="dateRanges" @change="dateEchartChange" />
                            </span>
                        </div>
                    </div>

                    <div v-if="yestadyNum == 1" id="accountIndexEchart" ref="accountIndexEchart"
                    style="width: 90%;height: 315px;margin: 0 auto;">
                    <a-empty />
                    </div>

                    <div v-else id="acctowecharts" ref="acctowecharts"
                    style="width: 90%;height: 315px;margin: 0 auto;">
                    <a-empty />
                    </div>

                </a-card>
            </a-col>

            <a-col :sm="6" :md="6" :xl="6"  class="keep-manage-col">
                
                    <a-card title="运营组数据" class="card-content">
                        
                            <div style="width: 100%;height: 315px;">
                                <ul class="group-keep-ul">
                                    <li>
                                        今日消耗: <span style="font-weight: bold;">{{todayCost}}</span> 
                                    </li>
                                    <li>
                                        <span  style="margin-left:20%;" v-if="compare.indexOf('-') == -1">
                                            <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/up.png" alt="">
                                            <span style="color: green;">{{compare}}</span>
                                        </span>
                                        <span style="margin-left:20%;" v-else-if="compare.indexOf('-') == 0">
                                            <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/down.png" alt="">
                                            <span style="color: red;">{{compare}}</span>
                                        </span>
                                        <a-tooltip placement="top">
                                            <template slot="title">
                                              <span>截止此时今日与昨日的消耗同比</span>
                                            </template>
                                            <a-icon style="margin-left: 10px;" type="question-circle" />
                                          </a-tooltip>
                                         
                                    </li>
                                    <li>
                                        消耗:{{sectionCost}}
                                    </li>
                                    <li>
                                        人均带户:{{userAverageAccount}}
                                    </li>
                                    <li>
                                        人均消耗:{{userAveragecost}}
                                    </li>
                                </ul>
                                
                              
                            </div>
                    </a-card>
            </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-bottom: 20px;">
            <a-col>
            <a-card title="运营数据详情" >
                <div class="person-content-title" slot="extra">
                    <div class="content-title-acount"></div>
                    <div class="content-title-checkout">
                        <span style="margin-right: 20px;">
                            <a-range-picker
                            v-model="dateMiddle"
                            format="YYYY-MM-DD"
                            :ranges="dateRanges"
                            @change="dateMiddleChange"
                            />
                        </span>
                        <span>
                            <a-button @click="exportClick">导 出</a-button>
                        </span>
                    </div>
                </div>
                <a-table
                size="middle"
                :dataSource="echartsDataoperate"
                :columns="columnsprojectoperate"
                bordered
                id="outTable"
                :pagination="echartsIpagination"
                :loading="echartsLoadingYun"
                @change="sortDataoperate"
                ref="accountTable"
                ></a-table>
                
               
            </a-card>
            </a-col>
        </a-row>
        <a-row :gutter="24">
            <a-col>
                <a-card title="项目列表" >
                    <div class="person-content-title" slot="extra">
                        <div class="content-title-acount"></div>
                        <div class="content-title-checkout">
                            <span style="margin-right: 20px;">
                                <a-button type="link" @click="customColumn">
                                    自定义列
                                  </a-button>
                            </span>
                            <span style="margin-right: 20px;">
                                <a-range-picker
                                v-model="dateMiddleProject"
                                :ranges="dateRanges"
                                @change="dateMiddleProjectChange"
                                />
                            </span>
                            <span>
                                <a-radio-group v-model="projectAccount" @change="projectAccountChange">
                                    <a-radio-button value="a">
                                      项目
                                    </a-radio-button>
                                    <a-radio-button value="b">
                                      账户
                                    </a-radio-button>
                                  </a-radio-group>
                            </span>
                        </div>
                    </div>
                    <a-table
                    size="middle"
                    :dataSource="echartsDataProject"
                    :columns="columnsProject"
                    bordered
                    id="outTable"
                    :pagination="echartsIpaginationProject"
                    :loading="echartsLoading"
                    @change="sort"
                    ref="accountTable"
                    >
                    <a slot="projectName" slot-scope="text,record" @click="projectNameClick(record)">{{ text }}</a>
                    <a slot="accountName" slot-scope="text,record" @click="accountNameClick(record)">{{ text }}</a>
                    
                </a-table>
                </a-card>
            </a-col>
        </a-row>

        <customColumnProject
        :visible="visible"
        :listNum="listNum"
        :fiexColumn="columnsFixd"
        :mediaType="2"
        @closeCustomColumn="closeCustomColumn"
        @changeColumn="changeColumn"
    />
    </div>
</template>


<script>
    import customColumnProject from './customColumnProject.vue'
    import keepPersonData from './new-keep-data.js';
    import moment from 'moment';
    import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
    // 引入基本模板
    var echarts = require('echarts');
    // 引入折线图组件
    require('echarts/lib/chart/line');
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    require('echarts/lib/component/graphic');
    require('echarts/lib/component/toolbox');
    require('echarts/lib/component/legend');
    import { mapGetters } from 'vuex'
    export default {
        components:{customColumnProject},
        data() {
            return {
                visible:false,
                listNum:[],
                columnsFixd:keepPersonData.setNoDeleteColumns(),
                selectValue: '1',
                dateEchart: [moment(), moment()],
                updateAccountEchart: '',
                clientWidth: 0,
                personData:-2,
                dateMiddle:[moment(), moment()],
                dateRanges: keepPersonData.setTimeRange(),
                echartsDataoperate:[{}],
                echartsLoadingYun:true,
                echartsLoading: false,
                echartsDataProject:[{}],
                projectAccount:'a',
                dateMiddleProject:[moment(), moment()],
                echartsIpagination: {
                current: 1,
                pageSize: 5,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger: true,
                // pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.echartsIpagination.current = current
                    this.echartsIpagination.pageSize = pageSize
                },
                },
                echartsIpaginationProject:{
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger: true,
                // pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.echartsIpaginationProject.current = current
                    this.echartsIpaginationProject.pageSize = pageSize
                },
                },
                columnsprojectoperate:[
                    {
                    title: '运营人员',
                    align: "center",
                    dataIndex: 'userName'
                    }, {
                    title: '账户数量',
                    align: "center",
                    dataIndex: 'accountNum'
                    }, {
                    title: '花费',
                    align: "center",
                    dataIndex: 'totalCost',
                    sorter: true,
                    sorter: (a, b) => a.totalCost - b.totalCost,
                    }, {
                    title: '花费环比',
                    align: "center",
                    dataIndex: 'rate'
                    }, {
                    title: '有效素材数',
                    align: "center",
                    dataIndex: 'newEffectNum',
                    sorter: true,
                    sorter: (a, b) => a.newEffectNum - b.newEffectNum,
                    }, {
                    title: '新上计划数',
                    align: "center",
                    dataIndex: 'newCampaignNum',
                    sorter: true,
                    sorter: (a, b) => a.newCampaignNum - b.newCampaignNum,
                    }, {
                    title: '新上组数',
                    align: "center",
                    dataIndex: 'newUnitNum',
                    sorter: true,
                    sorter: (a, b) => a.newUnitNum - b.newUnitNum,
                    },
                ],
                columnsProject:[
                {
                    title: '项目名称',
                    align: "center",
                    dataIndex: 'projectName',
                    scopedSlots: { customRender: 'projectName' },
                    }, {
                    title: '账户数量',
                    align: "center",
                    dataIndex: 'accountNum'
                    }, {
                    title: '运营人员数量',
                    align: "center",
                    dataIndex: 'userNum',
                    }, {
                    title: '花费',
                    align: "center",
                    dataIndex: 'totalCost'
                    }, {
                    title: '花费环比',
                    align: "center",
                    dataIndex: 'yearOnYear',
                    }, {
                    title: '花费同比',
                    align: "center",
                    dataIndex: 'equallyRate',
                    }, {
                    title: '上新素材数',
                    align: "center",
                    dataIndex: 'newVideoNum',
                    },{
                    title: '爆款素材数',
                    align: "center",
                    dataIndex: 'newHotNum',
                    },{
                    title: '有效素材数',
                    align: "center",
                    dataIndex: 'newEffectNum',
                    },{
                    title: '激活数',
                    align: "center",
                    dataIndex: 'activation',
                    },
                    {
                    title: '激活单价',
                    align: "center",
                    dataIndex: 'activationPrice',
                    },
                ],
                echartsData:[],
                timeData:[],
                lengthData:[],
                todayList:[],
                yesterdayList:[],
                yestadyNum:1,
                dataName:'',
                todayCost:'',
                compare:'',
                sectionCost:'',
                userAverageAccount:'',
                userAveragecost:'',
                projectId:'',
            }
        },
        filters: {
      formatDate: function (value) {
        if (value) {
            let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
        }else{
            return '-'
        }
        
      }
    },
        mounted() {
            this.getQueryNewlyData();
            // this.showColumn();
            this.getOperationGroupData();
            this.getOperateDetails();
            this.getItemList();
        },
        methods: {
            ...mapGetters([ 'userInfo']),
            // 项目列表
            getItemList(){
                let params = {
                    startTime: this.dateMiddleProject[0].format('YYYY-MM-DD'),
                    endTime: this.dateMiddleProject[1].format('YYYY-MM-DD'),
                    userId:this.userInfo().id,
                    pageNum:this.echartsIpaginationProject.current,
                    pageSize:this.echartsIpaginationProject.pageSize,
                }
                this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouOperateProjectInfo',params).then(res=>{
                    if (res.code == 0) {
                        this.echartsDataProject = res.result.list;
                        this.echartsIpaginationProject.total = res.result.total;
                        this.echartsLoading = false;
                    }
                })
            },
            dateMiddleProjectChange(){
                this.echartsLoading = true;
                this.echartsIpagination.current = 1;
                this.getItemList()
            },
            sort(pagination, filters, sorter, { currentDataSource }){
                this.echartsLoading = true;
            // console.log(pagination, filters, sorter)          
            this.echartsIpaginationProject.current=pagination.current
            this.echartsIpaginationProject.pageSize=pagination.pageSize
            if (this.projectAccount == 'a') {
                this.getItemList()
            }else{
                this.getAccountData();
            }
            
            
        },
            getAccountData(){
                let params = {
                    startTime: this.dateMiddleProject[0].format('YYYY-MM-DD'),
                    endTime: this.dateMiddleProject[1].format('YYYY-MM-DD'),
                    userId:this.userInfo().id,
                    pageNum:this.echartsIpaginationProject.current,
                    pageSize:this.echartsIpaginationProject.pageSize,
                    projectId:this.projectId
                }
                this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouOperateAccountInfo',params).then(res=>{
                    if (res.code == 0) {
                        this.echartsDataProject = res.result.list;
                        this.echartsIpaginationProject.total = res.result.total;
                        this.echartsLoading = false;
                    }
                })
            },
            projectNameClick(row){
                this.echartsLoading = true;
                this.columnsFixd = keepPersonData.setNoDeleteProjectColumns();
                this.listNum = keepPersonData.setNoDeleteProjectColumns();
                this.columnsProject=[
                {
                    title: '账户名称',
                    align: "center",
                    dataIndex: 'accountName',
                    scopedSlots: { customRender: 'accountName' },
                    }, {
                    title: '运营人员名称',
                    align: "center",
                    dataIndex: 'userName'
                    }, {
                    title: '花费',
                    align: "center",
                    dataIndex: 'totalCost'
                    }, {
                    title: '花费环比',
                    align: "center",
                    dataIndex: 'yearOnYear',
                    }, {
                    title: '花费同比',
                    align: "center",
                    dataIndex: 'equallyRate',
                    },{
                    title: '激活数',
                    align: "center",
                    dataIndex: 'activation',
                    },
                    {
                    title: '激活单价',
                    align: "center",
                    dataIndex: 'activationPrice',
                    },{
                    title: '关键行为数',
                    align: "center",
                    dataIndex: 'keyAction',
                    },{
                    title: '封面曝光数',
                    align: "center",
                    dataIndex: 'photoShow',
                    },{
                    title: '封面点击数',
                    align: "center",
                    dataIndex: 'photoClick',
                    },
                ],
                this.projectId = row.projectId;
                this.echartsIpaginationProject.current = 1;
                this.getAccountData();
                this.projectAccount = 'b';
            },
            projectAccountChange(ent){
                this.echartsLoading = true;
                if (ent.target.value == 'a') {
                    this.columnsFixd = keepPersonData.setNoDeleteColumns();
                    this.listNum = keepPersonData.setNoDeleteColumns();
                    this.projectId = '';
                    this.columnsProject = [
                {
                    title: '项目名称',
                    align: "center",
                    dataIndex: 'projectName',
                    scopedSlots: { customRender: 'projectName' },
                    }, {
                    title: '账户数量',
                    align: "center",
                    dataIndex: 'accountNum'
                    }, {
                    title: '运营人员数量',
                    align: "center",
                    dataIndex: 'userNum',
                    }, {
                    title: '花费',
                    align: "center",
                    dataIndex: 'totalCost'
                    }, {
                    title: '花费环比',
                    align: "center",
                    dataIndex: 'yearOnYear',
                    }, {
                    title: '花费同比',
                    align: "center",
                    dataIndex: 'equallyRate',
                    }, {
                    title: '上新素材数',
                    align: "center",
                    dataIndex: 'newVideoNum',
                    },{
                    title: '爆款素材数',
                    align: "center",
                    dataIndex: 'newHotNum',
                    },{
                    title: '有效素材数',
                    align: "center",
                    dataIndex: 'newEffectNum',
                    },{
                    title: '激活数',
                    align: "center",
                    dataIndex: 'activation',
                    },
                    {
                    title: '激活单价',
                    align: "center",
                    dataIndex: 'activationPrice',
                    },
                ],
                this.echartsIpaginationProject.current = 1;
                    this.getItemList()
                }else{
                    this.columnsFixd = keepPersonData.setNoDeleteProjectColumns();
                    this.listNum = keepPersonData.setNoDeleteProjectColumns();
                    console.log(this.columnsFixd);
                    this.columnsProject=[
                {
                    title: '账户名称',
                    align: "center",
                    dataIndex: 'accountName',
                    scopedSlots: { customRender: 'accountName' },
                    }, {
                    title: '运营人员名称',
                    align: "center",
                    dataIndex: 'userName'
                    }, {
                    title: '花费',
                    align: "center",
                    dataIndex: 'totalCost'
                    }, {
                    title: '花费环比',
                    align: "center",
                    dataIndex: 'yearOnYear',
                    }, {
                    title: '花费同比',
                    align: "center",
                    dataIndex: 'equallyRate',
                    },{
                    title: '激活数',
                    align: "center",
                    dataIndex: 'activation',
                    },
                    {
                    title: '激活单价',
                    align: "center",
                    dataIndex: 'activationPrice',
                    },{
                    title: '关键行为数',
                    align: "center",
                    dataIndex: 'keyAction',
                    },{
                    title: '封面曝光数',
                    align: "center",
                    dataIndex: 'photoShow',
                    },{
                    title: '封面点击数',
                    align: "center",
                    dataIndex: 'photoClick',
                    },
                ],
                this.echartsIpaginationProject.current = 1;
                    this.getAccountData();
                }
            },
            accountNameClick(row){
                this.$router.push({path:'/modules/stockWatch/modules/new-keepManage/account-newkeepManage',query:{accountId:row.accountId}})
            },
            // 运营组数据
            getOperationGroupData(){
                let params = {
                    startTime: this.dateEchart[0].format('YYYY-MM-DD'),
                    endTime: this.dateEchart[1].format('YYYY-MM-DD'),
                    mediaType:2,
                    userId:this.userInfo().id
                }
                this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/kuaiShouOperateDateTotal',params).then(res=>{
                    if (res.code == 0) {
                        this.todayCost = res.result.todayCost;
                        this.compare = res.result.compare;
                        this.sectionCost = res.result.sectionCost;
                        this.userAverageAccount = res.result.userAverageAccount;
                        this.userAveragecost = res.result.userAveragecost;
                    }
                })
            },
            // 运营数据详情
            getOperateDetails(){
                let params = {
                    startTime: this.dateMiddle[0].format('YYYY-MM-DD'),
                    endTime: this.dateMiddle[1].format('YYYY-MM-DD'),
                    userId:this.userInfo().id,
                    pageNum:this.echartsIpagination.current,
                    pageSize:this.echartsIpagination.pageSize,
                }
                this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouOperateInfo',params).then(res=>{
                    if (res.code == 0) {
                        this.echartsDataoperate = res.result.list;
                        this.echartsIpagination.total = res.result.total;
                        this.echartsLoadingYun = false;
                    }
                })
            },

            sortDataoperate(pagination, filters, sorter, { currentDataSource }){
                this.echartsLoadingYun = true;
            // console.log(pagination, filters, sorter)          
            this.echartsIpagination.current=pagination.current
            this.echartsIpagination.pageSize=pagination.pageSize
            this.getOperateDetails()
        },
            dateMiddleChange(){
                this.echartsLoadingYun = true;
                this.echartsIpagination.current = 1;
                this.getOperateDetails();
            },
            // 导出
            exportClick(){
                let params = {
                    startTime: this.dateMiddle[0].format('YYYY-MM-DD'),
                    endTime: this.dateMiddle[1].format('YYYY-MM-DD'),
                    userId:this.userInfo().id,
                    pageNum:this.echartsIpagination.current,
                    pageSize:this.echartsIpagination.pageSize,
                }
                window.location.href = `${process.env.VUE_APP_BASE_STARE_URL}${'/kuaiShouOpreate/kuaiShouMaterialStareController/exportKuaiShouOperateInfo'}?startTime=${params.startTime}&endTime=${params.endTime}&userId=${params.userId}&pageNum=${params.pageNum}&pageSize=${params.pageSize}`;
            },
            getQueryNewlyData(){
                let params = {
                    startTime: this.dateEchart[0].format('YYYY-MM-DD'),
                    endTime: this.dateEchart[1].format('YYYY-MM-DD'),
                    mediaType:2,
                    type:this.selectValue,
                    userId:this.userInfo().id
                }
                this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/kuaiShousumData',params).then(res=>{
                   if (res.code == 0) {
                    this.updateAccountEchart = res.timestamp;
                      if (res.message == '查询-时报-汇总。') {
                          this.todayList = res.result.todayList.map((item)=>{
                           return item.totalCost
                          })
                          this.yesterdayList = res.result.yesterdayList.map((item)=>{
                           return item.totalCost
                          })
                         
                          this.timeData = ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00','14:00','16:00','18:00','20:00','22:00'];
                          this.timeData = res.result.yesterdayList.map((itemdate)=>{
                            return itemdate.hour
                        })
                          this.lengthData = ['today','yesterday'];
                         let consumptionSummary = [];
                          this.initEchart('accountIndexEchart',this.initAccountIndexEchart(this.todayList,this.yesterdayList,consumptionSummary,this.timeData,this.lengthData,this.yestadyNum))
                      }else if(res.message == '查询-日报-汇总成功。'){
                        let consumptionSummary = [];
                        consumptionSummary = res.result.map((itemday)=>{
                            return itemday.totalCost
                        })
                        this.todayList = [];
                        this.yesterdayList = [];
                        this.timeData = res.result.map((itemdate)=>{
                            return itemdate.dateTime
                        })
                        this.lengthData = ['消耗汇总'];
                        this.initEchart('accountIndexEchart',this.initAccountIndexEchart(this.todayList,this.yesterdayList,consumptionSummary,this.timeData,this.lengthData,this.yestadyNum,))
                      }else if(res.message == '查询-时报-运营个人消耗top5成功。'){

                         
                        this.lengthData = res.result.map((i)=>{
                            return i.userName
                        })
                        this.timeData = ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00','14:00','16:00','18:00','20:00','22:00'];
                        let series = [];
                        let array = [];
                        this.timeData = res.result[0].data.map(element=>{                        
                                    return element.hour

                        })
                      console.log(this.timeData);
                        series =  res.result.map(item=>{
                            return {
                                name:item.userName,
                                type: 'line',
                                smooth: true,
                                symbol: 'circle',
                                data:item.data.map(i=>{
                                    return i.totalCost
                                })
                            }
                        })
                        this.initEchart('acctowecharts',this.acctowecharts(this.lengthData,this.timeData,series))
                        
                      }else{
                        this.lengthData = res.result.map((i)=>{
                            return i.userName
                        })
                        res.result.map(o=>{
                            this.timeData =  o.data.map(tt=>{
                                return tt.dateTime
                            })
                        })
                        console.log(this.timeData);
                        let series = [];
                        let array = [];
                        series =  res.result.map(item=>{
                            return {
                                name:item.userName,
                                type: 'line',
                                smooth: true,
                                symbol: 'circle',
                                data:item.data.map(i=>{
                                    return i.totalCost
                                })
                            }
                        })
                        // res.result.forEach(element => {
                        //     element.data.forEach(item => {
                                
                        //         array.push(item.totalCost)
                        //         series.push({
                        //             name: element.userName,
                        //             type: 'line',
                        //             smooth: true,
                        //             symbol: 'circle',
                        //             data: array,
                        //             lineStyle: {                               
                        //             color: '#00BFFF',   
                        //             width: 2,
                        //             },
                        //             itemStyle:{
                        //             color:'#00BFFF',
                        //             borderWidth:2,
                        //             borderColor:'#00BFFF'
                        //             },
                        //         })
                        //     });
                        // });
                        
                    //     for(var i=0; i<series.length; i++){
                    //     for(var j=i+1; j<series.length; j++){
                    //         if(series[i].name==series[j].name){         //第一个等同于第二个，splice方法删除第二个
                    //             series.splice(j,1);
                    //             j--;
                    //         }
                    //     }
                    // }
                        this.initEchart('acctowecharts',this.acctowecharts(this.lengthData,this.timeData,series))
                      }
                     
                   }
                })
                
                
            },
            selectValueChange(){
                if (this.selectValue == 1) {
                    this.yestadyNum = 1;
                }else{
                    this.yestadyNum = 2;
                }
                this.getQueryNewlyData();
            },
            dateEchartChange(){
                this.getQueryNewlyData();
                this.getOperationGroupData();
            },
            //获取echart的值
        initEchart(idName, optionName) {
            let that = this;
            const chart = this.$refs[idName]
            //   // console.log(res);(chart)
            if (chart) {
                console.log(chart);
                const myChart = echarts.init(document.getElementById(idName))
                // myChart.showLoading({
                //     text: "图表数据正在努力加载..."
                // });
                myChart.clear()
                myChart.setOption(optionName)
                window.addEventListener('resize', function() {
                    that.clientWidth = document.documentElement.clientWidth - 224
                    myChart.resize()
                })
            }
        },
            //趋势图echarts配置
            initAccountIndexEchart(todayList,yesterdayList,consumptionSummary,timeData,lengthData) {

                // this.clientWidth  =  document.documentElement.clientWidth - 224
                // var myChart = echarts.init(document.getElementById('accountIndexEchart'))
                let option = {
                  
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: lengthData
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true

                    },
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:timeData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series:[
                        {
                            name: 'today',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data: todayList,
                            lineStyle: {                               
                            color: '#00BFFF',   
                            width: 2,
                            },
                            itemStyle:{
                            color:'#00BFFF',
                            borderWidth:2,
                            borderColor:'#00BFFF'
                            },
                        },
                        {
                            name: 'yesterday',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data: yesterdayList,
                            lineStyle: {                               
                            color: '#00FF7F',   
                            width: 2,
                            },
                            itemStyle:{
                            color:'#00FF7F',
                            borderWidth:2,
                            borderColor:'#00FF00'
                            },
                        }, {
                            name: '消耗汇总',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data: consumptionSummary,
                            lineStyle: {                               
                            color: '#00BFFF',   
                            width: 2,
                            },
                            itemStyle:{
                            color:'#00BFFF',
                            borderWidth:2,
                            borderColor:'#00BFFF'
                            },
                        },
                       
                    ]
                };
                return option
            },
            acctowecharts(lengthData,timeData,series){
                // this.clientWidth  =  document.documentElement.clientWidth - 224
                // var myChart = echarts.init(document.getElementById('accountIndexEchart'))
                let option = {
                  
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: lengthData
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true

                    },
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:timeData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series:series
                };
                return option
            },

            // 自定义列
            customColumn(){
                this.visible = true;
                console.log(this.columns);
                this.listNum = [...this.columnsProject]
            },
            //自定义列相关
            closeCustomColumn() {
            this.visible = false
            },
            showColumn() {
            this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
                columnType: 13,
            }).then((res) => {
                // console.log(res)
                if (res.success) {
                // console.log(JSON.parse(res.result))
                if (res.result) {
                    let columns = JSON.parse(res.result)
                    console.log(columns);
                    if (columns.length) {
                    if (columns.length >= this.columnsFixd.length) {
                        columns.map((item, index) => {
                        if (index > this.columnsFixd.length - 1) {
                            item.sorter = function (a, b) {}
                        }
                        })
                        columns = columns.slice(this.columnsFixd.length)
                        this.columnsProject = [...this.columnsFixd, ...columns]
                        console.log(this.columnsProject);
                    }

                    // console.log(this.columns)
                    }
                }

                this.changeColumn(this.columnsProject)
                }
            })
        },

            changeColumn(val) {
            this.columnsProject = [...val]
            if (this.columnsProject.length > this.columnsFixd.length && this.columns.length < 8) {
                this.columnsProject.forEach((element, index) => {
                if (index < this.columnsProject.length - 1) {
                   
                    element.width = 'auto'
                    element.fixed = false
                    
                }
                })

                this.scrollX = 0
            } 
            else if (this.columnsProject.length >= 8) {
                this.columnsProject.forEach((element, index) => {
                    if (index < this.columnsFixd.length) {
                        element.width = 150
                        element.fixed = 'left'
                    }
                })

                this.scrollX = 1000 + 150 * (this.columnsProject.length - this.columnsFixd.length)
            } 
            else {
                this.scrollX = 0
                this.columnsProject.forEach((element) => {

                    element.width = 'auto'
                    element.fixed = false
                    
                })
            }

            let arr = JSON.stringify(this.columnsProject)
            this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
                json: arr,
                columnType: 13,
            }).then((res) => {
                // console.log(res)
            })
        },
        },
    }

</script>
<style lang="less" scoped>
    @import "../keep-manage/keep-manage.less";
    .group-keep-ul li{
    margin-bottom: 20px;
    font-size: 16px;
}
</style>

