<template>
    <div class="workbench">
        <el-card shadow="never" class=" !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 basicList" :key="index">
                    <div class="mr-2">
                        <div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 4] }">
                            <iconfont :iconName="item.icon" white className="text-6xl" />
                        </div>
                    </div>
                    <div>
                        <div class="text-info">{{ item.name }}</div>
                        <div class="text-6xl">{{ item.num }}</div>
                        <!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
                            item.percent }}%</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="startEndTime2" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" @change="getData2" />
                    <el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
                </div>
            </div>
            <div>
                <v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
            </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="startEndTime3" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts"  @change="getList" />
                    <el-button type="primary" class="ml-4" @click="getList">查询</el-button>
                </div>
            </div>
            <div>
                <el-table :data="sotreList">
                    <el-table-column label="商品图片">
                        <template #default="{ row }">
                            <el-image :src="row.image" fit="cover" style="width: 50px; height: 50px"  :preview-teleported="true"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" prop="store_name" min-width="250" />
                    <el-table-column label="游览量" prop="visit" min-width="120" />
                    <el-table-column label="访客数" prop="user" min-width="120" />
                    <el-table-column label="加购件数" prop="cart" min-width="120" />
                    <el-table-column label="下单件数" prop="orders" min-width="120" />
                    <el-table-column label="支付件数" prop="pay" min-width="120" />
                    <el-table-column label="支付金额" prop="price" min-width="120" />
                    <el-table-column label="收藏数" prop="collect" min-width="120" />
                    <el-table-column label="毛利率(%)" prop="profit" min-width="120">
                        <template #default="{ row }">
                            <span>{{ row.profit }}%</span>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="product">
import { apiGetBasic, apiGetTrend, apiGetProductRanking } 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: 'right',
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            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 colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1']
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
const basicList = reactive([
    {
        name: '商品浏览量',
        type: 'browse',
        icon: 'RectangleCopy21',
        num: 0,
        percent: 0
    },
    {
        name: '商品访客数',
        type: 'user',
        icon: 'RectangleCopy5',
        num: 0,
        percent: 0
    },
    {
        name: '加购件数',
        type: 'cart',
        icon: 'RectangleCopy13',
        num: 0,
        percent: 0
    },
    {
        name: '下单件数',
        type: 'order',
        icon: 'RectangleCopy12',
        num: 0,
        percent: 0
    },
    {
        name: '支付件数',
        type: 'pay',
        icon: 'RectangleCopy15',
        num: 0,
        percent: 0
    },
    {
        name: '支付金额',
        type: 'payPrice',
        icon: 'RectangleCopy14',
        num: 0,
        percent: 0
    },
    {
        name: '成本金额',
        type: 'cost',
        icon: 'RectangleCopy24',
        num: 0,
        percent: 0
    },
    {
        name: '退款金额',
        type: 'refundPrice',
        icon: 'RectangleCopy32',
        num: 0,
        percent: 0
    },
    {
        name: '退款件数',
        type: 'refund',
        icon: 'RectangleCopy19',
        num: 0,
        percent: 0
    },
    {
        name: '访客-支付转化率',
        type: 'payPercent',
        icon: 'RectangleCopy4',
        num: 0,
        percent: 0
    }
])
const startEndTime = ref([new Date(), new Date()]);
const startEndTime2 = ref([]);
const startEndTime3 = ref([]);
// 获取数据
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');
    apiGetBasic({
        date: date
    }).then(res => {
        basicList.forEach((item: any) => {
            item.num = res[item.type].num;
            item.percent = res[item.type].percent;
        })
    })
}

const getData2 = () => {
    let date = '';
    if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
    apiGetTrend({
        date: date
    }).then(res => {
        // 清空echarts 数据
        visitorOption.xAxis.data = []
        visitorOption.series = []

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

        // 写入从后台拿来的数据
        res.xAxis.forEach((item: any) => {
            visitorOption.xAxis.data.push(item)
        })
        visitorOption.series = res.series.map((item: any) => {
            return {
                ...item,
                yAxis: item.type == 'line' ? 0 : 1
            }
        });

    })
}

const sotreList = ref([]);
const getList = () => {
    let date = '';
    if (startEndTime3.value[0] && startEndTime3.value[1]) date = moment(startEndTime3.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime3.value[1]).format('YYYY/MM/DD');
    apiGetProductRanking({
        date: date
    }).then(res => {
        sotreList.value = res;
    })
}

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

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