<template>
    <div class="workbench">
        <el-card shadow="never" class=" !border-none">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <span class="text-2xl mr-4">运营概况</span>
                    <el-select v-model="store_id" filterable remote reserve-keyword placeholder="输入门店名称搜索"
                        remote-show-suffix :remote-method="remoteMethod" :loading="storeloading" style="width: 240px"
                        @change="getData">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                    <span class="ml-4 text-info text-[12px]">点击左侧切换门店</span>
                </div>
                <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" />
                    <el-button type="primary" class="ml-4" @click="getData">查询</el-button>
                </div>
            </div>
        </el-card>
        <div class="flex flex-wrap box-border mt-4">
            <div class="box-border w-1/5" v-for="(item, index) in basicList" :key="index">
                <el-card class="!border-none ml-4 mb-4 flex" :class="{ '!ml-0': index % 5 === 0 }" shadow="never">
                    <div class="flex">
                        <div class="mr-2">
                            <div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 8] }">
                                <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>
                    </div>

                </el-card>
            </div>

        </div>
        <el-card shadow="never" class=" !border-none">
            <span class="text-2xl">营业趋势</span>
            <v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
        </el-card>
        <div class="mt-4 flex justify-center">
            <el-card shadow="never" class="flex-1 !border-none">
                <span class="text-2xl">交易数据</span>
                <el-table :data="formData.order_list" height="500px">
                    <el-table-column label="头像" prop="build_area_text" show-overflow-tooltip>
                        <template #default="{ row }">
                            <el-avatar style="width: 50px; height: 50px" :src="row.avatar" />
                        </template>
                    </el-table-column>
                    <el-table-column label="用户名称" prop="nickname" show-overflow-tooltip />
                    <el-table-column label="订单号" prop="order_id" show-overflow-tooltip />
                    <el-table-column label="交易金额" prop="pay_price" show-overflow-tooltip />
                    <el-table-column label="成交时间" prop="pay_time" show-overflow-tooltip />
                </el-table>
            </el-card>
            <el-card shadow="never" class="w-[500px] !border-none ml-4">
                <span class="text-2xl">交易类型</span>
                <v-charts style="height:500px" :option="tradTypeOption" :autoresize="true" />
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup name="statistics_store">
import { apiGetUserBasic, apiGetUserTrend } from '@/api/workbench'
import { apiSystemStoreStatisticsHeader, apiSystemStoreStatisticsOperate, apiSystemStoreStatisticsOrderChart, apiSystemStoreStatisticsStore, apiWorkbenchStoreIndex } from '@/api/system_store'
import moment from 'moment'
import vCharts from 'vue-echarts'
import { apiSystemStoreLists } from '@/api/system_store'

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.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}'
            }
        },
        {
            type: 'value',
            name: '金额',
            position: 'right',
            axisLabel: {
                formatter: '{value}'
            }
        },
    ],
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    legend: {
        data: ['访问量']
    },
    itemStyle: {
        // 点的颜色。
        color: 'red'
    },
    tooltip: {
        trigger: 'axis'
    },
    series: [
        {
            data: [],
            type: 'line',
            smooth: true,
            name: "门店收款"
        },
        {
            data: [],
            type: 'line',
            smooth: true,
            name: '新增用户'
        }
    ]
})
const circleOption: any = reactive({
    tooltip: {
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        data: []
    },
    series: [
        {
            name: "交易类型",
            type: "pie",
            radius: ["35%", "65%"],
            center: ["50%", "60%"],
            data: [],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                }
            }
        }
    ],

})

// 颜色
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
const basicList = reactive([
    {
        name: '门店收款金额',
        type: 'receipt_amount',
        icon: 'RectangleCopy',
        num: 0,

    },
    {
        name: '门店营业额',
        type: 'order_amount',
        icon: 'RectangleCopy49',
        num: 0,

    },
    {
        name: '门店收益金额',
        type: 'income_amount',
        icon: 'RectangleCopy53',
        num: 0,

    },
    {
        name: '核销订单金额',
        type: 'verify_amount',
        icon: 'RectangleCopy5',
        num: 0,

    },
    {
        name: '线下收银订单金额',
        type: 'cashier_amount',
        icon: 'RectangleCopy4',
        num: 0,

    },
    {
        name: '现金收银订单金额',
        type: 'cash_amount',
        icon: 'RectangleCopy7',
        num: 0,

    },
    {
        name: '余额消费金额',
        type: 'balance_amount',
        icon: 'RectangleCopy59',
        num: 0,

    },
    {
        name: '门店成交用户数',
        type: 'user_number',
        icon: 'RectangleCopy54',
        num: 0,

    },
    {
        name: '保证金',
        type: 'deposit_amount',
        icon: 'RectangleCopy32',
        num: 0,

    },
])
const startEndTime = ref([new Date(), new Date()]);
const store_id = ref('');
const formData = ref({});
const tradTypeOption = reactive(
    {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '线上收银订单' },
                    { value: 735, name: '现金收银订单' },
                    { value: 580, name: '核销订单' },
                    { value: 484, name: '充值订单' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
)

// 获取数据
const getData = () => {
    let date = '';
    let start_time, end_time;
    if (startEndTime.value[0] && startEndTime.value[1]) {
        date = moment(startEndTime.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime.value[1]).format('YYYY/MM/DD');
        start_time = moment(startEndTime.value[0]).format('YYYY/MM/DD') + ' 00:00:00';
        end_time = moment(startEndTime.value[1]).format('YYYY/MM/DD') + ' 23:59:59'
    }
    apiWorkbenchStoreIndex({
        start_time: start_time,
        end_time: end_time,
        store_id: store_id.value
    }).then(res => {
        basicList.forEach((item: any) => {
            item.num = res[item.type];
        })

        // 写入从后台拿来的数据
        visitorOption.xAxis.data = res.statistics.range
        visitorOption.series[0].data = res.statistics.data.order_amount
        visitorOption.series[1].data = res.statistics.data.user_number

        formData.value = res;
        tradTypeOption.series[0].data = res.pay_type;
    })

}


const storeloading = ref(false);
const storeList = ref([]);
const remoteMethod = (e: string = '') => {
    storeloading.value = true;
    apiSystemStoreLists({
        name: e,
        page_size: 50
    }).then(res => {
        storeList.value = res.lists;
        if (store_id.value === '') {
            const index = Math.floor(Math.random() * res.lists.length)
            store_id.value = res.lists[index].id;
            getData();
        }
        setTimeout(() => {
            storeloading.value = false;
        }, 300)
    }).catch(err => {
        setTimeout(() => {
            storeloading.value = false;
        }, 300)
    })
}

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

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