<template>
    <div class="workbench">
        <div class="lg:flex">
            <el-card
                class="!border-none mb-4 md:mr-4"
                shadow="never"
                :body-style="{
                    width: '400px'
                }"
            >
                <template #header>
                    <span class="card-title">平台信息</span>
                </template>
                <div>
                    <div class="flex leading-9">
                        <div class="mr-3">平台名称</div>
                        <span> {{ workbenchData.version.name }}</span>
                    </div>
                    <div class="flex leading-9">
                        <div class="mr-3">当前版本</div>

                        <div class="flex">
                            <div>{{ workbenchData.version.version }}</div>
                            <div
                                class="ml-4 text-danger cursor-pointer"
                                v-if="workbenchData.isNewVersion"
                            >
                                有新的版本可用
                            </div>
                        </div>
                    </div>
                    <div class="flex leading-9">
                        <!-- <div>
                            <is-copyright />
                        </div> -->
                        <div>
                            <el-tag type="success" class="mr-2" effect="dark">
                                <a href="https://www.likeshop.cn/" target="_blank">官网 </a>
                            </el-tag>
                            <el-tag type="danger" class="mx-1" effect="dark">
                                <a href="https://www.likeshop.cn/doc" target="_blank"> 开发文档 </a>
                            </el-tag>
                        </div>
                    </div>
                </div>
            </el-card>

            <el-card class="!border-none mb-4 flex-1" shadow="never">
                <template #header>
                    <div>
                        <span class="card-title">数据统计</span>
                        <span class="ml-4 text-xs text-tx-secondary">
                            更新时间：{{ workbenchData.today.time }}
                        </span>
                    </div>
                </template>

                <div class="flex flex-wrap">
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">今日销量（笔）</div>
                        <div class="text-6xl">{{ workbenchData.today.todaySalesCount }}</div>
                        <div class="text-xs text-tx-secondary">
                            总销量：{{ workbenchData.today.totalSalesCount }}
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">今日销售金额（元）</div>
                        <div class="text-6xl">{{ workbenchData.today.todaySalesAmount }}</div>
                        <div class="text-xs text-tx-secondary">
                            总销售金额：{{ `￥${workbenchData.today.totalSalesAmount}` }}
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">新增会员（人）</div>
                        <div class="text-6xl">{{ workbenchData.today.todayNewUser }}</div>
                        <div class="text-xs text-tx-secondary">
                            总会员量：{{ workbenchData.today.totalNewUser }}
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">用户访问量（人）</div>
                        <div class="text-6xl">{{ workbenchData.today.todayVisitor }}</div>
                        <div class="text-xs text-tx-secondary">
                            总访问量：{{ workbenchData.today.totalVisitor }}
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="mb-4 function">
            <el-card class="flex-1 !border-none" shadow="never">
                <template #header>
                    <span>常用功能</span>
                </template>
                <div class="flex flex-wrap">
                    <div
                        v-for="item in workbenchData.menu"
                        class="md:w-[12.5%] w-1/4 flex flex-col items-center"
                        :key="item"
                    >
                        <router-link :to="item.url" class="flex flex-col items-center mb-3">
                            <img width="40" height="40" :src="item.image" />
                            <div class="mt-2">{{ item.name }}</div>
                        </router-link>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="lg:flex">
            <el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never">
                <template #header>
                    <span>销售额趋势图（近15天）</span>
                </template>
                <div>
                    <v-charts
                        style="height: 350px"
                        :option="workbenchData.businessOption"
                        :autoresize="true"
                    />
                </div>
            </el-card>

            <el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never">
                <template #header>
                    <span>用户访问量（近15天）</span>
                </template>
                <div>
                    <v-charts
                        style="height: 350px"
                        :option="workbenchData.visitorOption"
                        :autoresize="true"
                    />
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import goods_lists from './images/goods_lists.png'
import goods_category from './images/goods_category.png'
import order from './images/order.png'
import staff from './images/staff.png'
import ad from './images/ad.png'
import index_decorate from './images/index_decorate.png'
import news_notice from './images/news_notice.png'
import set_payment from './images/set_payment.png'
import { getWorkbench } from '@/api/app'
import vCharts from 'vue-echarts'
// 表单数据
const workbenchData: any = reactive({
    version: {
        version: '', // 系统版本
        website: '' // 平台名称
    },
    today: {}, // 今日数据
    menu: [
        {
            name: '服务列表',
            image: goods_lists,
            url: '/service/lists'
        },
        {
            name: '服务分类',
            image: goods_category,
            url: '/service/category'
        },
        {
            name: '订单列表',
            image: order,
            url: '/order/lists'
        },
        {
            name: '师傅列表',
            image: staff,
            url: '/master_worker/index'
        },
        {
            name: '广告列表',
            image: ad,
            url: '/decorate/index'
        },
        {
            name: '首页装修',
            image: index_decorate,
            url: '/material/index'
        },
        {
            name: '消息通知',
            image: news_notice,
            url: '/setting/message/notice'
        },
        {
            name: '支付配置',
            image: set_payment,
            url: '/setting/payment/payment_config'
        }
    ], // 常用功能
    visitor: [], // 访问量
    business: [], // 销售额

    businessOption: {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        tooltip: {
            trigger: 'axis'
        },
        series: [
            {
                name: '销售量',
                data: [],
                type: 'line'
            }
        ]
    },

    visitorOption: {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        tooltip: {
            trigger: 'axis'
        },
        series: [
            {
                name: '访问量',
                data: [],
                type: 'line'
            }
        ]
    }
})

// 获取工作台主页数据
const getData = async () => {
    const res = await getWorkbench()
    workbenchData.version = res.version
    workbenchData.today = res.today
    workbenchData.visitor = res.visitor
    workbenchData.business = res.business

    // 写入数据
    workbenchData.visitorOption.xAxis.data = workbenchData.visitor.date
    workbenchData.visitorOption.series[0].data = workbenchData.visitor.list.data

    workbenchData.businessOption.xAxis.data = workbenchData.business.date
    workbenchData.businessOption.series[0].data = workbenchData.business.list.data
}

onMounted(() => {
    getData()
})
</script>

<style lang="scss" scoped></style>
