<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-center">
            <div class="JNPF-common-layout-main">
                <div class="search-button">
                    <el-button type="primary" @click="search()">查询</el-button>
                </div>
                <div class="form">
                    <div class="form-item">
                        <div class="item-title">数据时间</div>
                        <div class="item-content">
                            <div class="content-item"
                                :class="timeNum == item.value ? 'active-content-item' : ''"
                                v-for="(item,index) in timeList" :key="index"
                                @click="timeNum = item.value">
                                {{ item.label }}</div>

                            <el-date-picker style="margin-left: 20px;" v-if="timeNum == 1"
                                v-model="query.timeRange" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                            <el-date-picker style="margin-left: 20px;" v-if="timeNum == 2"
                                v-model="query.timeRange" type="monthrange" range-separator="至"
                                start-placeholder="开始月份" end-placeholder="结束月份"
                                value-format="yyyy-MM-dd" @change="(value) => changeMonth(value)">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="item-title">用户选择</div>
                        <div class="item-content">
                            <div class="content-item"
                                :class="peopleNum == item.value ? 'active-content-item' : ''"
                                v-for="(item,index) in peopleList" :key="index"
                                @click="peopleNum = item.value">
                                {{ item.label }}</div>
                            <JnpfUserSelect style="margin-left: 20px;" v-if="peopleNum == 1"
                                v-model="query.user" placeholder="请选择用户"
                                :filterIds="hasIssuedUsersList" :filterType="'2'" />
                        </div>
                    </div>
                </div>
                <div class="chart" v-loading="loading" element-loading-text="加载中">
                    <div v-if="chartData" id="echarts1" style="width: 100%;height: 100%;"></div>
                    <el-empty style="height: 100%;" v-else description="暂无数据"></el-empty>
                </div>
            </div>
        </div>
    </div>
</template>



<script>

import {
    activity, getUserList
} from "@/api/governmentCloud/officialAccount/userActivityLevel/userActivityLevel";
export default {
    data() {
        return {
            timeNum: '1',
            timeList: [
                {
                    value: '1',
                    label: '按日查询',
                },
                {
                    value: '2',
                    label: '按月查询',
                }
            ],
            peopleNum: 0,
            peopleList: [
                {
                    value: 0,
                    label: '全部用户',
                },
                {
                    value: 1,
                    label: '单个用户',
                }
            ],
            query: {
                user: '',
                timeRange: ''
            },
            chartData: null,
            loading: false,
            hasIssuedUsersList: []
        }
    },
    watch: {
        timeNum() {
            this.query.timeRange = ''
        },
        chartData(newValue, oldValue) {
            if (newValue) {
                this.$nextTick(() => {
                    this.initEchart1()
                })
            }
        }
    },
    mounted() {
        getUserList().then(res => {
            console.log(res)
            if (res.code == 200) {
                res.data.forEach(item => {
                    this.hasIssuedUsersList.push(item.id)
                })
                console.log(this.hasIssuedUsersList)
            } else { }
        })
    },
    methods: {
        changeMonth(value) {
            //查询当前月份月初到月末
            let myDate = new Date(value[1]);
            let month = myDate.getMonth() + 1;
            month = month < 10 ? "0" + month : month;   //格式化月份，补0
            let dayEnd = new Date(myDate.getFullYear(), month, 0).getDate(); //获取当月一共有多少天
            value[1] = value[1].split('-')[0] + '-' + value[1].split('-')[1] + '-' + dayEnd
            this.query.timeRange = [value[0], value[1]]
        },
        search() {
            let str = null
            if (!this.query.timeRange) {
                str = '请选择时间'
            } else if (this.peopleNum == 1 && !this.query.user) {
                str = '请选择用户'
            }
            if (!str) {
                let params = {
                    type: this.timeNum,
                    startDate: this.query.timeRange[0],
                    endDate: this.query.timeRange[1],
                    userId: this.peopleNum == 0 ? '' : this.query.user
                }
                this.chartData = null
                this.loading = true
                activity(params).then(res => {
                    if (res.code == 200) {
                        this.chartData = res.data
                        this.loading = false
                    } else {
                        this.$message({ message: res.msg, type: 'error', duration: 1000 })
                        this.chartData = null
                        this.loading = false
                    }

                })
            } else {
                this.$message({ message: str, type: 'error', duration: 1000 })

            }
        },
        initEchart1() {
            var chartDom = document.getElementById('echarts1');
            var myChart = this.$echarts.init(chartDom);


            let xData = this.chartData.xlist
            let data = this.chartData.ylist
            var option = {
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                series: [
                    {
                        data: data,
                        type: 'line',
                        name: '活跃指数'
                    }
                ]
            };
            myChart.setOption(option);
        }
    },

}
</script>

<style lang="scss" scoped>
.JNPF-common-layout-main {
    display: flex;
    flex-direction: column;
    .search-button {
        position: absolute;
        right: 20px;
        top: 10px;
    }
    .form {
        width: 100%;
        padding: 10px 20px;
        .form-item {
            font-size: 16px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .item-title {
                color: #b1b2b3;
            }
            .item-content {
                margin-left: 30px;
                display: flex;
                align-items: center;
                .content-item {
                    padding: 10px 30px;
                    cursor: pointer;
                    border-radius: 20px;
                    margin-right: 10px;
                    text-wrap: nowrap;
                }
                .active-content-item {
                    background-color: #d4e8fb;
                    color: #409eff;
                }
            }
        }
    }
    .chart {
        height: auto;
        flex: 1;
    }
}
</style>