<template>
   <!-- 活动开展 -->
         <div class="activity">
            <div class="activity-one">
                <div class="act">活动开展</div>
                <div class="mor"><span>查看更多</span><span></span></div>
            </div>
            <div class="activity-two">
                <div class="left">
                    <count-roll :count="4166" />
                    <p class="act-num">活动开展次数</p>
                </div>
                <div class="line"></div>
                <div class="right">
                    <line-bar
                        :layout="activeConfig.layout"
                        :option="activeConfig.option"
                    />
                </div>
            </div>
         </div>
</template>

<script>
import LineBar from '@/components/echarts/LineBar'
export default {
    components: {
        LineBar
    },
    data () {
        return {
            // 活动开展
            activeConfig: {},
            activeList: [
                {name: '*****活动', value: 381},
                {name: '组织活动', value: 1103},
                {name: '*****活动', value: 192}
            ]

        }
    },
    mounted () {
        this.getActive(this.activeList)
    },
    methods: {
        getActive (data) {
            let yData = data.map(v => v.name).reverse()
            let y2Data = data.map(v => v.value).reverse()
            let max = 4166
            let maxData = new Array(data.length).fill(max)
            console.log(maxData)
            let pointData = data.reverse().map((v, i) => {
                return {
                    xAxis: v.value,
                    yAxis: i
                }
            })
            this.activeConfig = {
                layout: {
                    width: '100%',
                    height: '100%'
                },
                option: {
                    base: {
                        xAxis: {
                            max: max
                        },
                        yAxis: [
                            {
                                axisLabel: {
                                    color: '#fff',
                                    align: 'left',
                                    padding: [0, 0, 0, -60]
                                },
                                data: yData
                            }, {
                                data: y2Data.map(v => v)
                            }
                        ]
                    },
                    seriesData: [
                        {
                            name: 'back',
                            barWidth: '5px',
                            data: maxData
                        },
                        {
                            name: 'show',
                            barWidth: '5px',
                            itemStyle: {
                                borderRadius: [0, 0, 0, 0],
                                color: 'rgba(64, 169, 248, .05)'
                            },
                            markPoint: {
                                symbolOffset: [0, 0.5],
                                data: pointData
                            },
                            data: y2Data
                        }
                    ]
                }
            }
        }
    }

}
</script>

<style lang="less" scoped>
   /* 活动开展 */
        .activity{
            width: 100%;
            height: 140px;
            .activity-one{
                display: flex;
                justify-content: space-between;
                .act{
                    width: 72px;
                    height: 19px;
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 28px;
                }
                .mor{
                    width: 100px;
                    height: 17px;
                    display: flex;
                    span:nth-child(1){
                        width: 65px;
                        height: 17px;
                        margin-top: 2px;
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #18D1C6;
                        line-height: 24px;
                    }
                    span:nth-child(2){
                        display: inline-block;
                        width: 28px;
                        height: 24px;
                        // margin-top: 5px!important;
                        background:url('../../../static/images/index/more.png') no-repeat;
                    }
                   
                }
            }
            .activity-two{
                margin-top: 12px;
                display: flex;
                .left{
                    margin-top:10px;
                    .act-num{
                        width: 108px;
                        height: 18px;
                        margin-top: 20px;
                        font-size: 18px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #6DCDFF;
                        line-height: 17px;
                    }
                }
                .line{
                    width: 3px;
                    height: 76px;
                    margin: 10px 10px 0 10px;
                    background:url('../../../static/images/index/3.png');
                }
                .right{
                    width: 300px;
                    height: 100%;
                }
            }
        }
</style>