<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||'-'}}
                    </div>
                    <div class="person-content-title" slot="extra">

                        <div class="content-title-acount"></div>
                        <div class="content-title-checkout">
                            <span class="title-checkout-time">
                                <a-range-picker v-model="dateEchart" :range="dateRanges" />
                            </span>
                        </div>
                    </div>

                    <div id="accountIndexEchart" ref="accountIndexEchart"
                    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;">21,233.958</span> 
                            </li>
                            <li>
                                <span  style="margin-left:20%;" v-if="personData  < 0">
                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/up.png" alt="">
                                    <span style="color: green;">10%</span>
                                </span>
                                <span style="margin-left:20%;" v-else-if="personData>= 0">
                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/down.png" alt="">
                                    <span style="color: red;">10%</span>
                                </span>
                            </li>
                            <li>
                                消耗:118,2335.112
                            </li>
                            <li>
                                <span>环比:</span>
                                <span style="margin-left: 10%;" v-if="personData  < 0">
                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/up.png" alt="">
                                    <span style="color: green;">10%</span>
                                </span>
                                <span style="margin-left: 10%;" v-else-if="personData>= 0">
                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/down.png" alt="">
                                    <span style="color: red;">10%</span>
                                </span>
                            </li>
                            <li>
                                月消耗:12,520.525
                            </li>
                            <li>
                                月激励:12,520.525
                            </li>
                            <li>
                                月框返:12,520.525
                            </li>
                            <li>
                                团队内排名:1/86
                            </li>
                        </ul>
                        
                      
                    </div>
                </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">
                                    自定义列
                                  </a-button>
                            </span>
                            <span style="margin-right: 20px;">
                                <a-range-picker
                                v-model="dateMiddleProject"
                                :ranges="dateRanges"
                                />
                            </span>
                            <span>
                                <a-radio-group v-model="projectAccount" >
                                    <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"
                    ref="accountTable"
                    ></a-table>

                </a-card>
            </a-col>
        </a-row>
    </div>
</template>


<script>
    import keepPersonData from '../keep-manage/keep-manage-data.js';
    import moment from 'moment';
    // 引入基本模板
    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');
    export default{
        data() {
            return {
                updateAccountEchart:'2021-12-22 8:00:00',
                dateEchart:[moment(), moment()],
                dateRanges: keepPersonData.setTimeRange(),
                personData:0,
                dateMiddleProject:[moment(), moment()],
                echartsDataProject:[],
                echartsLoading: false,
                projectAccount:'a',
                echartsIpaginationProject:{
                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.echartsIpaginationProject.current = current
                    this.echartsIpaginationProject.pageSize = pageSize
                },
                },
                columnsProject:[
                    {
                    title: '项目名称',
                    align: "center",
                    dataIndex: ''
                    },{
                    title: '账户数量',
                    align: "center",
                    dataIndex: ''
                    },{
                    title: '运营人员',
                    align: "center",
                    dataIndex: ''
                    },{
                    title: '花费',
                    align: "center",
                    dataIndex: '',
                    sorter: true,
                    },{
                    title: '花费环比',
                    align: "center",
                    dataIndex: ''
                    },{
                    title: '花费同比',
                    align: "center",
                    dataIndex: ''
                    },{
                    title: '上新素材数',
                    align: "center",
                    dataIndex: ''
                    },{
                    title: '有效素材数',
                    align: "center",
                    dataIndex: ''
                    },{
                    title: '爆款素材数',
                    align: "center",
                    dataIndex: ''
                    },{
                    title: '激活数',
                    align: "center",
                    dataIndex: ''
                    },{
                    title: '激活单价',
                    align: "center",
                    dataIndex: ''
                    },{
                    title: '行为数',
                    align: "center",
                    dataIndex: ''
                    },
                ]
            }
        },
        mounted() {
            this.getQueryNewlyData();
        },
        methods: {
            getQueryNewlyData(){
                this.initEchart('accountIndexEchart',this.initAccountIndexEchart())
            },
               //获取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() {
                // this.clientWidth  =  document.documentElement.clientWidth - 224
                // var myChart = echarts.init(document.getElementById('accountIndexEchart'))
                let option = {
                  
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['today','yesterday']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true

                    },
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: 'today',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data: [120, 132, 101, 134, 90, 230, 210],
                            lineStyle: {                               
                            color: '#00BFFF',   
                            width: 2,
                            },
                            itemStyle:{
                            color:'#00BFFF',
                            borderWidth:2,
                            borderColor:'#00BFFF'
                            },
                        },
                        {
                            name: 'yesterday',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data: [220, 182, 191, 234, 290, 330, 310],
                            lineStyle: {                               
                            color: '#00FF7F',   
                            width: 2,
                            },
                            itemStyle:{
                            color:'#00FF7F',
                            borderWidth:2,
                            borderColor:'#00FF00'
                            },
                        },
                       
                    ]
                };
                return option
            },
        },
    }
</script>
<style lang="less" scoped>
     @import "../keep-manage/keep-manage.less";
    .group-keep-ul li{
    margin-bottom: 15px;
    font-size: 16px;
}
</style>