<template>
    <div class="workbench">
        <el-card shadow="never" class="!border-none">
            <div class="flex">
                <div class="flex-1 h-[270px]">
                    <div class="text-2xl">今日订单金额</div>
                    <div>
                        <span class="text-[12px]">¥</span>
                        <span class="text-2xl">{{ leftInfo.money || '0.00' }}</span>
                    </div>
                    <v-charts
                        style="height: 200px"
                        :option="leftOption"
                        :autoresize="true"
                    ></v-charts>
                </div>
                <div class="w-[1px] bg-[#ccc] mr-4"></div>
                <div class="flex-1 flex">
                    <div class="flex-1">
                        <div class="text-1xl">
                            {{ rightInfo1[0]?.name
                            }}<span class="ml-2 text-[18px]">{{ rightInfo1[0]?.now_money }}</span>
                        </div>
                        <div class="text-[12px]">
                            <span class="text-info">昨日: {{ rightInfo1[0]?.last_money }}</span>
                            <span class="text-info ml-2">日环比: </span>
                            <span class="text-success">{{ rightInfo1[0]?.rate }}%</span>
                        </div>
                        <v-charts
                            style="height: 160px; margin-bottom: 20px"
                            :option="rightOption1"
                            :autoresize="true"
                        ></v-charts>
                        <div class="text-1xl">
                            {{ rightInfo2[0]?.name
                            }}<span class="ml-2 text-[18px]">{{ rightInfo2[0]?.now_money }}</span>
                        </div>
                        <div class="text-[12px]">
                            <span class="text-info">上月: {{ rightInfo2[0]?.last_money }}</span>
                            <span class="text-info ml-2">月环比: </span>
                            <span class="text-success">{{ rightInfo2[0]?.rate }}%</span>
                        </div>
                    </div>
                    <div class="flex-1">
                        <div class="text-1xl">
                            {{ rightInfo1[1]?.name
                            }}<span class="ml-2 text-[18px]">{{ rightInfo1[1]?.now_money }}</span>
                        </div>
                        <div class="text-[12px]">
                            <span class="text-info">昨日: {{ rightInfo1[1]?.last_money }}</span>
                            <span class="text-info ml-2">日环比: </span>
                            <span class="text-success">{{ rightInfo1[1]?.rate }}%</span>
                        </div>
                        <v-charts
                            style="height: 160px; margin-bottom: 20px"
                            :option="rightOption2"
                            :autoresize="true"
                        ></v-charts>
                        <div class="text-1xl">
                            {{ rightInfo2[1]?.name
                            }}<span class="ml-2 text-[18px]">{{ rightInfo2[1]?.now_money }}</span>
                        </div>
                        <div class="text-[12px]">
                            <span class="text-info">上月: {{ rightInfo2[1]?.last_money }}</span>
                            <span class="text-info ml-2">月环比: </span>
                            <span class="text-success">{{ rightInfo2[1]?.rate }}%</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" class="mt-4 !border-none">
            <div class="mb-6 flex justify-between items-center">
                <span class="text-2xl">交易概况</span>
                <div class="flex items-center text-sm">
                    <span class="mr-4">时间筛选: </span>
                    <el-date-picker
                        v-model="startEndTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        unlink-panels
                        :shortcuts="shortcuts"
                        @change="getData"
                    />
                    <el-button type="primary" class="ml-4" @click="getData">查询</el-button>
                </div>
            </div>
            <div class="flex flex-wrap">
                <div
                    class="w-1/5 flex mb-6"
                    v-for="(item, index) in visitorOption.series"
                    :key="index"
                >
                    <div class="mr-2">
                        <div
                            class="rounded-full p-2"
                            :style="{ 'background-color': colorList[index % 4] }"
                        >
                            <iconfont :iconName="iconList[index]" white className="text-6xl" />
                        </div>
                    </div>
                    <div>
                        <div class="text-info">
                            {{ item.name }}
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                :content="item.desc"
                                placement="top-start"
                            >
                                <el-icon><Warning /></el-icon>
                            </el-tooltip>
                        </div>
                        <div>
                            <span class="text-6xl mr-2">{{ item.money }}</span
                            ><span v-if="item.money > 0">{{ item.cash_title }}</span>
                        </div>

                        <div class="text-info">
                            环比增长:
                            <span :class="item.rate > 0 ? 'text-success' : 'text-danger'"
                                >{{ item.rate }}%</span
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="statistics_user">
import {
    apiGetUserBasic,
    apiGetUserTrend,
    apiGetBottomTrade,
    apiGetTopTrade
} from '@/api/workbench'
import moment from 'moment'
import vCharts from 'vue-echarts'

const shortcuts = [
    {
        text: '近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 7)
            return [start, end]
        }
    },
    {
        text: '本月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(1)
            end.setMonth(end.getMonth() + 1)
            end.setDate(0)
            return [start, end]
        }
    },
    {
        text: '近一月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            return [start, end]
        }
    },
    {
        text: '近三月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            return [start, end]
        }
    }
]

// 表单数据
const visitorOption: any = reactive({
    xAxis: {
        type: 'category',
        data: [0],
        axisLabel: {
            rotate: 45,
            color: '#333'
        }
    },
    yAxis: {
        type: 'value',
        name: '金额',
        position: 'left',
        axisLabel: {
            formatter: '{value}'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    legend: {
        data: ['访问量']
    },
    itemStyle: {
        // 点的颜色。
        color: 'red'
    },
    tooltip: {
        trigger: 'axis'
    },
    series: [
        {
            name: '访问量',
            data: [0],
            type: 'line',
            smooth: true
        }
    ]
})
// 左表
const optionModel = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
        formatter: (params) => {
            let str = `<p><b>${params[0].name}点</b></p>`
            params.forEach((item) => {
                str += `<p><span style="display:inline-block;width:8px;height:4px;background-color:${item.color};"></span> ${item.seriesName}: <strong>${item.value}</strong></p>`
            })
            return str
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    legend: {
        data: ['昨天', '今天'],
        left: '3%',
        top: '3%'
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            // data: ['03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '00', '01', '02'],
            axisLabel: {
                show: false // 不显示 x 轴标签
            },
            axisTick: {
                show: false // 不显示 x 轴刻度线
            },
            axisLine: {
                show: false // 不显示 x 轴线
            },
            grid: {
                show: false
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            show: false,
            spliteLine: {
                show: false
            },
            axisLabel: {
                show: false // 不显示 x 轴标签
            },
            axisTick: {
                show: false // 不显示 x 轴刻度线
            },
            axisLine: {
                show: false // 不显示 x 轴线
            },
            grid: {
                show: false
            }
        }
    ],
    series: [
        {
            name: '昨天',
            type: 'line',
            // data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0],
            smooth: true,
            symbol: 'none', // 不显示数据点
            itemStyle: {
                color: '#ccc'
            },
            areaStyle: {
                color: {
                    //线性渐变
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#ccc' // 0% 处的颜色
                        },
                        {
                            offset: 0.6,
                            color: '#fff' // 100% 处的颜色
                        }
                    ],
                    global: false // 缺省为 false
                }
            }
        },
        {
            name: '今天',
            type: 'line',
            // data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            smooth: true,
            symbol: 'none', // 不显示数据点
            areaStyle: {
                color: {
                    //线性渐变
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#5B8FF9' // 0% 处的颜色
                        },
                        {
                            offset: 0.6,
                            color: '#fff' // 100% 处的颜色
                        }
                    ],
                    global: false // 缺省为 false
                }
            }
        }
    ]
}
const leftInfo = ref({
    money: 0,
    series: []
})
const leftOption: any = reactive(JSON.parse(JSON.stringify(optionModel)))

const rightInfo1 = ref([])
const rightOption1: any = reactive(JSON.parse(JSON.stringify(optionModel)))
const rightInfo2 = ref([])
const rightOption2: any = reactive(JSON.parse(JSON.stringify(optionModel)))

// 颜色
const colorList = [
    '#5DB1FF',
    '#4CD384',
    '#FFC46A',
    '#CAA5F1',
    '#FFC46A',
    '#4CD384',
    '#5DB1FF',
    '#CAA5F1'
]
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
const iconList = ref([
    'RectangleCopy58',
    'RectangleCopy48',
    'RectangleCopy65',
    'RectangleCopy62',
    'RectangleCopy56',
    'RectangleCopy55',
    'RectangleCopy57',
    'RectangleCopy65',
    'RectangleCopy61',
    'RectangleCopy52',
    'RectangleCopy14',
    'RectangleCopy32'
])

const startEndTime = ref([new Date(), new Date()])
// 获取数据
const getData = () => {
    let date = ''
    if (startEndTime.value[0] && startEndTime.value[1])
        date =
            moment(startEndTime.value[0]).format('YYYY/MM/DD') +
            '-' +
            moment(startEndTime.value[1]).format('YYYY/MM/DD')

    apiGetTopTrade({}).then((res) => {
        leftInfo.value = {
            money: res.left.series[0].money,
            name: res.left.name
        }
        leftOption.series[0].data = res.left.series[1].value
        leftOption.series[1].data = res.left.series[0].value

        rightInfo1.value = res.right.today.series
        rightInfo2.value = res.right.month

        rightOption1.xAxis.data = res.right.today.x.map((item: any) => item)
        rightOption1.series[0].name = res.right.today.series[0].name
        rightOption1.series[0].data = res.right.today.series[0].value
        rightOption1.series[1].name = res.right.today.series[1].name
        rightOption1.series[1].data = res.right.today.series[1].value

        rightOption2.xAxis.data = Object.keys(res.right.month[0].value).map((item: any) => item)
        rightOption2.series[0].name = res.right.month[0].name
        rightOption2.series[0].data = Object.values(res.right.month[0].value).map(
            (item: any) => item
        )
        rightOption2.series[1].name = res.right.month[1].name
        rightOption2.series[1].data = Object.values(res.right.month[1].value).map(
            (item: any) => item
        )
    })
    apiGetBottomTrade({
        date: date
    }).then((res) => {
        // 清空echarts 数据
        visitorOption.xAxis.data = []
        visitorOption.series = []
        console.log(res)

        visitorOption.legend.data = Object.values(res.series).map((item: any) => item.name)

        // 写入从后台拿来的数据
        visitorOption.xAxis.data = res.x
        visitorOption.series = Object.values(res.series).map((item: any) => {
            return {
                type: 'line',
                smooth: true,
                data: item.value,
                name: item.name,
                money: item.money,
                rate: item.rate,
                desc: item.desc,
                cash_title: item.cash_title
            }
        })
    })
}

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

<style lang="scss" scoped>
.workbench {
    color: #444;
}
</style>
