<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">
                    <el-icon size="60" color="#40c9c6">
                        <Printer />
                    </el-icon>
                    <div class="desc">
                        <div class="name">算算数</div>
                        <div class="count">{{ topData.question_count }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">
                    <el-icon size="60" color="#36a3f7">
                        <User />
                    </el-icon>
                    <div class="desc">
                        <div class="name">用户数</div>
                        <div class="count">{{ topData.user_count }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple" style="color:#f7ba1e">
                    <span class="iconfont icon-huiyuan"></span>
                    <!-- <el-icon size="60" color="#36a3f7">
                        <User />
                    </el-icon> -->
                    <div class="desc">
                        <div class="name">会员数</div>
                        <div class="count">{{ topData.valid_member_count }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">
                    <span class="iconfont icon-calculator" style="color:#f7a647"></span>
                    <div class="desc">
                        <div class="name">算算次数</div>
                        <div class="count">{{ topData.question_submit_count }}</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">
                    <span class="iconfont icon-daizhifudingdan" style="color:#62a8fc;font-size: 70px;"></span>
                    <!-- <el-icon size="60" color="#40c9c6">
                        <Printer />
                    </el-icon> -->
                    <div class="desc">
                        <div class="name">单项支付次数</div>
                        <div class="count">{{ topData.question_pay_count }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">
                    <span class="iconfont icon-wshoufeijiabiao" style="color:#52b852;font-size: 50px;"></span>
                    <!-- <el-icon size="60" color="#36a3f7">
                        <User />
                    </el-icon> -->
                    <div class="desc">
                        <div class="name">VIP购买次数</div>
                        <div class="count">{{ topData.member_buy_count }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">
                    <span class="iconfont icon-jine" style="color: #f4516c;"></span>
                    <!-- <el-icon size="60" color="#36a3f7">
                        <User />
                    </el-icon> -->
                    <div class="desc">
                        <div class="name">总金额</div>
                        <div class="count">{{topData.amount_total}}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">
                    <span class="iconfont icon-member-card" style="color:#ff7d00;font-size:50px;"></span>
                    <div class="desc">
                        <div class="name">VIP购买金额</div>
                        <div class="count">{{topData.member_amount_total}}</div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="24">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="新增用户数" name="1"></el-tab-pane>
                    <el-tab-pane label="新增算算次数" name="2"></el-tab-pane>
                    <el-tab-pane label="新增单次支付数" name="3"></el-tab-pane>
                    <el-tab-pane label="新增VIP购买数" name="4"></el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24">
                <!-- <el-segmented v-model="value" :options="options" size="default" /> -->

                <div class="block">
                    <el-button-group class="btnGroup">
                        <el-button :type="activeDay==index?'primary':''" v-for="(item,index) in quickDate" :key="index" @click="switchDay(index,item)">{{ item }}天</el-button>
                    </el-button-group>
                    <el-date-picker :disabled-date="disabledDateFn" v-model="dateRange" type="datetimerange" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD" @change="confirmDate" />
                    <el-button type="primary" @click="getChartData" style="margin-left: 10px;">查询</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24">
                <smoothChart ref="chart" v-if="chartData.length>0"></smoothChart>
                <div class="chartbox" v-else>暂无数据</div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>

import { onMounted, reactive, ref,nextTick} from 'vue'
import userApi from "../api/user";
import { dayjs } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus';

const activeName = ref('1');
const chart = ref(null);
const activeDay=ref(0);
const dateRange = ref([]);
const topData=reactive({});
const chartData=ref([])
const quickDate = ref([7, 15, 30])
const switchDay=(index,dayNum)=>{
    const startTime= dayjs().subtract(dayNum, 'day').format("YYYY-MM-DD");
    const endTime= dayjs().format("YYYY-MM-DD");
    activeDay.value=index;
    dateRange.value=[startTime,endTime];
    getChartData();
}
const handleClick = (tab) => {
   activeName.value = tab.props.name;
   getChartData();
}
const disabledDateFn = (time) => {
    return time.getTime() > Date.now();
}

const confirmDate = () => {
    const endTime= dayjs().format("YYYY-MM-DD");
    if(dateRange.value[1]!=endTime){
        activeDay.value=-1;
    }else{
        const startTime_7= dayjs().subtract(7, 'day').format("YYYY-MM-DD");
        const startTime_15= dayjs().subtract(15, 'day').format("YYYY-MM-DD");
        const startTime_30= dayjs().subtract(30, 'day').format("YYYY-MM-DD");
        if(dateRange.value[1]==startTime_7){
            activeDay.value=0
        }else if(dateRange.value[1]==startTime_15){
            activeDay.value=1
        }else if(dateRange.value[1]==startTime_30){
            activeDay.value=2
        }else{
            activeDay.value=-1
        }
    }
}
const getChartData = async () => {
    if(!(dateRange.value[0] && dateRange.value[1])){
        ElMessage.error("请选择开始和结束日期");
        return false;
    }
   const res = await userApi.getHomeChartData({
    type:activeName.value,
    start_time:dateRange.value[0],
    end_time:dateRange.value[1]
   });
   if (res.code == 200) {
        chartData.value=res.data;
        console.log(res.data);
       let xData=[];
       let yData=[];
       res.data.forEach(item => {
          xData.push(item.date);
          yData.push(item.count);
       });
        nextTick(() => {
            chart.value && chart.value.init(xData,yData);
        });
    }
}
const getData = async () => {
   const res = await userApi.getHomeData();
   Object.assign(topData,res.data)
}
onMounted(() => {
    getData();
    switchDay(0,7);
    
})
</script>

<style scoped>
.iconfont {
    font-size: 60px;
}
.chartbox{
    width: 100%;
    flex:1;
    height: 400px;
    display: flex;
    color:#999;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: #fff;
}
.btnGroup{
    display: flex;
    margin-right: 10px;
}
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.block {
    width: 500px;
    display: flex;
    align-items: center;
}

.green {
    color: #40c9c6;
    font-size: 40px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.ep-bg-purple {
    background: #fff;
}

.desc {
    width:150px;
    margin-left: 20px;
}

.desc .name {
    text-align: center;
    font-size: 16px;
    color: rgba(0, 0, 0, .45);
}

.desc .count {
    text-align: center;
    margin-top: 10px;
    font-size: 20px;
    color: #666;
    font-weight: 700;
}

.grid-content {
    display: flex;
    border-radius:10px;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;

    min-height: 100px;
}

.grid-content:hover {
    box-shadow: #ccc 0 0 5px;
}

</style>
