<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"
                    @click="getData2(item)"
                >
                    <div class="mr-2">
                        <div class="rounded-full p-2">
                            <el-image style="width: 50px; height: 50px" :src="item.image" />

                            <!-- <iconfont :iconName="item.icon" white className="text-6xl" /> -->
                        </div>
                    </div>
                    <div>
                        <div class="text-info">{{ item.store_name }}</div>
                        <div class="">
                            销量:{{ item.cart_num }}{{ item.unit_name }}|总价:{{ item.total_price }}
                        </div>
                        <div class="">规格:{{ item.store_info }}</div>
                        <!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
                            item.percent }}%</span></div> -->
                    </div>
                </div>
            </div>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                @change="changePage"
                v-if="total > 10"
                style="margin-right: 56px; margin-bottom: 11px; float: right"
            />
        </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>
                <span class="text-2xl" style="margin: 0 auto; padding-right: 67px" v-if="title"
                    >{{ title }} {{ queryParams.start_time }} - {{ queryParams.end_time }}</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>
    </div>
</template>

<script lang="ts" setup name="product">
import {
    store_order_cart_info_curve,
    apiGetProductRanking,
    product_month_order
} 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 now = new Date()
// 获取当前年份
const year = now.getFullYear()
// 获取当前月份（注意：月份是从0开始的，所以实际月份需要加1）
const month = now.getMonth() + 1

// 创建当前月第一天的日期对象
const firstDay = new Date(year, month - 1, 1)
// 创建当前月最后一天的日期对象
const lastDay = new Date(year, month, 0)
const startEndTime = ref([firstDay, lastDay])
const basicList = ref([])
const total = ref(0)
const title = ref('')
const queryParams = reactive({
    product_id: '',
    start_time: '',
    end_time: '',
    page_no: 1,
    page_size: 10
})

// 获取数据
const getData = () => {
    queryParams.start_time = moment(startEndTime.value[0]).format('YYYY-MM-DD')
    queryParams.end_time = moment(startEndTime.value[1]).format('YYYY-MM-DD')
    product_month_order(queryParams).then((res) => {
        basicList.value = res.lists
        total.value = res.count
    })
}
const changePage = (e) => {
    queryParams.page_no = e
    getData()
}

const getData2 = (item: any) => {
    queryParams.start_time = moment(startEndTime.value[0]).format('YYYY-MM-DD')
    queryParams.end_time = moment(startEndTime.value[1]).format('YYYY-MM-DD')
    queryParams.product_id = item.product_id
    title.value = item.store_name

    store_order_cart_info_curve(queryParams).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 {
                type: 'line',
                smooth: true,
                data: item.value,
                name: item.name
            }
        })
    })
}

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

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