<template>
    <div class="box">
        <div class="headers">
            <div class="logo">
            </div>
            <div class="tab">
                <img v-if="show[0]" @click="show[0] = false" class="tab-li" :src="u('SYXZ')" alt="">
                <img v-else class="tab-li" @click="show[0] = true" :src="u('SY')" alt="">

                <img v-if="show[1]" @click="show[1] = false" class="tab-li" src="/static/index/SP.png" alt="">
                <img v-else="show[1]" @click="show[1] = true" class="tab-li" src="/static/index/SPXZ.png" alt="">

                <img v-if="show[2]" @click="show[2] = false" class="tab-li" src="/static/index/SH.png" alt="">
                <img v-else class="tab-li" @click="show[2] = true" src="/static/index/SHXZ.png" alt="">

                <img class="tab-li" @click="show[3] = false" v-if="show[3]" src="/static/index/DD.png" alt="">
                <img class="tab-li" @click="show[3] = true" v-else src="/static/index/DDxz.png" alt="">


                <img class="tab-li" @click="show[4] = false" v-if="show[4]" src="/static/index/CW.png" alt="">
                <img class="tab-li" @click="show[4] = true" v-else src="/static/index/CWXZ.png" alt="">

            </div>
            <div class="right">
                <div class="rigth-li">泸县</div>
                <div class="rigth-li">15:39:25</div>
                <div class="rigth-li">2023.01.20</div>
                <div class="rigth-li">关机</div>
            </div>
        </div>
        <div class="body">

            <div class="l">
                <div class="user" id="user"></div>
                <div class="storeNum">
                    <div class="tit"></div>
                    <div class="townList">
                        <div class="storebox" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1]">
                            <div class="store" :id="'store' + index"></div>
                            <div class="toenName">
                                <div>同谈镇</div>
                                <div>123个</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="c" id="">


                <div class="product-list">
                    <div class="product" style="display: flex;justify-content: space-around;">
                        <img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
                        <img src="/static/index/SPTB.png" class="product-icon" alt="">
                    </div>
                    <div class="product" style="display: flex;justify-content: space-around;">
                        <img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
                        <img src="/static/index/SPTB.png" class="product-icon" alt="">
                    </div>
                    <div class="product" style="display: flex;justify-content: space-around;">
                        <img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
                        <img src="/static/index/SPTB.png" class="product-icon" alt="">
                    </div>
                </div>

                <div class="Views">
                    <img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
                    <div class="view-content">
                        <div>昨日数据：3333</div>
                        <div style="display: flex;align-items: center;">当前浏览量： <Header></Header> 人正在浏览
                        </div>
                        <div>周环比：32%</div>
                    </div>
                </div>
            </div>


            <div class="r">
                <!-- <div>
                    店铺销量排行
                </div> -->
                <div class="user">
                    <div class="btns">

                        <span class="btn">店铺销量排行</span>
                        <span class="btn">店铺销量排行</span>

                    </div>
                    <dv-scroll-board :config="config3" style="width:95%;height:20vh" />
                </div>
                <div class="storeNum">
                    <div class="tit">
                    </div>
                    <div class="townList">
                        <div class="storebox" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1]">
                            <div class="store" :id="'store' + (index + 8)"></div>
                            <div class="toenName">
                                <div>同谈镇</div>
                                <div>123个</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">


            <div class="foot-l">
                <div style="height: 5vh;"></div>
                <div>
                    <dv-scroll-board :config="configs" style="width:25vw;height:40vh" />
                </div>
            </div>
            <div class="c">
                <div style="height:5vh;"></div>
                <div class="towns">
                    <div class="town-li" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">泸县</div>
                    <div id="transactionUsers" style="width: 100%;height: 30vh;"></div>
                </div>
            </div>
            <div class="r">

                <div style="height: 5vh;"></div>
                <div>
                    <dv-scroll-board :config="configs2" style="width:25vw;height:40vh" />
                </div>

            </div>
        </div>
    </div>
</template> 
<script setup>

import { onMounted } from 'vue';
import * as echarts from 'echarts';
import option from "./option"
import Header from "@/components/header.vue"
import { ref, reactive } from "vue"

const i = 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231123//20231123190555159fa2259.jpg'
const configs = reactive(
    {
        header: ['所属地区', '日订单数', '日订单金额', '月订单数', '月订单金额'],
        headerBGC: '#223B7E',
        data: [
            ['行1列1', '行1列2', '行1列3', 'sad', 'asdsa'],
            ['行2列1', '行2列2', '行2列3', 'sad', 'asdsa'],
            ['行3列1', '行3列2', '行3列3', 'sad', 'asdsa'],
            ['行4列1', '行4列2', '行4列3', 'sad', 'asdsa'],
            ['行5列1', '行5列2', '行5列3', 'sad', 'asdsa'],
            ['行6列1', '行6列2', '行6列3', 'sad', 'asdsa'],
            ['行7列1', '行7列2', '行7列3', 'sad', 'asdsa'],
            ['行8列1', '行8列2', '行8列3', 'sad', 'asdsa'],
            ['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
            ['行10列1', '行10列2', '行10列3']
        ]
    }

)
const configs2 = reactive(
    {
        header: ['所属片区', '当日订单金额', '昨日订单金额'],
        headerBGC: '#223B7E',
        align: ['center'],
        data: [
            ['行1列1', '行1列2', '行1列3'],
            ['行2列1', '行2列2', '行2列3'],
            ['行3列1', '行3列2', '行3列3'],
            ['行4列1', '行4列2', '行4列3'],
            ['行5列1', '行5列2', '行5列3'],
            ['行6列1', '行6列2', '行6列3'],
            ['行7列1', '行7列2', '行7列3'],
            ['行8列1', '行8列2', '行8列3'],
            ['行9列1', '行9列2', '行9列3'],
            ['行10列1', '行10列2', '行10列3']
        ]
    }

)
const config3 = reactive({
    oddRowBGC: "#001C2E",
    evenRowBGC: "#001C2E",
    columnWidth: [
        50, 60, 70, 220, 100
    ],
    data: [


        [
            `<div style="  text-align: center;background-image: url('/static/index/PM1.png');width: 30px;height: 30px;background-size: cover;">1</div> `,
            `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
            `<div>商品名称</div>`,
            `<div class="progress-bar"> <div class="progress"></div> </div>`,
            `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,

        ],
        [` <div style="  text-align: center;background-image: url('/static/index/PM2.png');width: 30px;height: 30px;background-size: cover;"> 2</div> `,
            `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
            `<div>商品名称</div>`,
            `<div class="progress-bar"> <div class="progress"></div> </div>`,
            `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,


        ],
        [`  <div style="  text-align: center;background-image: url('/static/index/PM3.png');width: 30px;height: 30px;background-size: cover;">3</div> `,
            `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
            `<div>商品名称</div>`,
            `<div class="progress-bar"> <div class="progress"></div> </div>`,
            `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,

        ],
        [`  <div style="  text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">4</div> `,
            `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
            `<div>商品名称</div>`,
            `<div class="progress-bar"> <div class="progress"></div> </div>`,
            `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,

        ],
        [`  <div style="  text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">5</div> `,
            `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
            `<div>商品名称</div>`,
            `<div class="progress-bar"> <div class="progress"></div> </div>`,
            `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,

        ],
        [`  <div style="  text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">6</div> `,
            `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
            `<div>商品名称</div>`,
            `<div class="progress-bar"> <div class="progress"></div> </div>`,
            `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,

        ],

    ]
}

)


const show = reactive([true, true, true, true, true])

const u = (name) => {
    return `/static/index/${name}.png`
}

// 图表
const initCharts = (tag, option) => {
    var chartDom = document.getElementById(tag);
    var myChart = echarts.init(chartDom);
    myChart.setOption(option);
}


onMounted(() => {
    initCharts('user', option.userChartOption)

    for (let i = 0; i < 16; i++) {
        initCharts('store' + i, option.storeNum)

    }
    initCharts('transactionUsers', option.transactionUsers)


    // initCharts('user', option.userChartOption)
})
</script>
<style lang="scss">
@keyframes jump {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.box {
    width: 100vw;
    height: 100vh;
    background-color: #000C14;

    .headers {
        display: flex;
        color: #B0C7D1;
        height: 6vh;
        align-items: center;
        justify-content: space-between;
        background-image: url('/static/index/TIT.png');

        background-size: cover;

        .logo {
            width: 20vw;
            margin-right: 30px;
            height: 40px;
            align-items: center;
        }

        .tab {
            display: flex;
            align-items: center;
            margin-left: 120px;
            // background-color: #fff;

            .tab-li {
                width: 13%;
                margin-right: 10px;
            }

            // .tab-li {
            //     width: 120px;
            //     background-color: #002641;
            //     text-align: center;
            //     height: 25px;
            //     line-height: 25px;
            //     margin: 0 10px;
            //     color: white;
            //     text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 10px white; //设置发光效果
            // }
        }

        .right {
            display: flex;
            font-size: 15px;
            margin-right: 30px;
            align-items: center;

            .rigth-li {
                margin-right: 30px;
            }
        }
    }
}

.body {
    // margin-top: 30px;
    height: 50vh;
    display: flex;

    .l {
        flex: 1;
        height: 100%;
        background: url('/static/index/PTYHL.png');
        // background-size: cover;
        background-size: 25vw 50vh;

        .user {
            box-sizing: border-box;
            padding-top: 5vh;
            width: 100%;
            height: 57%;

            .btn {
                color: white;
            }
        }

        .storeNum {
            width: 100%;
            height: 43%;

            .tit {
                height: 15%;
                // background-color: red;
            }

            .townList {
                height: 75%;
                display: flex;
                flex-wrap: wrap;
                box-sizing: border-box;
                padding: 10px;


                .storebox {
                    width: 22%;
                    height: 40%;
                    position: relative;
                    display: flex;
                    margin-left: 10px;

                    .store {
                        flex: 1;
                        height: 100%;

                    }

                    .toenName {
                        flex: 1;
                        height: 100%;
                        background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
                        border-radius: 0 15px 15px 0;
                        font-size: 12px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        color: white;
                        box-sizing: border-box;
                        padding: 7px 2px;

                    }
                }
            }
        }
    }

    .c {
        box-sizing: border-box;
        padding: 15px;
        flex: 2;
        height: 100%;
        // background-color: pink;

        .product-list {
            height: 75%;
            // background-color: red;
            display: flex;
            justify-content: space-between;
            position: relative;

            .product {
                height: 100%;
                width: 32%;
                // background-color: #fff;
            }

            .product-icon {
                width: 2vw;
                height: 2vw;
                position: absolute;
                animation: jump 1s infinite;
                top: 2vh;
            }
        }

        .Views {
            height: 25%;
            width: 100%;
            box-sizing: border-box;
            padding: 0 15px;
            position: relative;
            color: white;
            font-size: 12px;

            .view-content {
                display: flex;
                height: 100%;
                width: 100%;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;
            }
        }

    }

    .r {
        flex: 1;
        height: 100%;
        background: url('/static/index/PTSP.png');
        // background-size: cover;
        background-size: 25vw 49vh;
        background-repeat: no-repeat;

        .user {
            box-sizing: border-box;
            padding-top: 5vh;
            width: 100%;
            height: 57%;

            .btns {
                color: white;
                display: flex;
                justify-content: flex-end;

                .btn {
                    margin-right: 1vw;
                    font-size: 12px;
                    padding: 3px 10px;
                    border: 1px solid #2A538D;
                    border-radius: 20px;
                }
            }
        }

        .storeNum {
            width: 100%;
            height: 43%;

            .tit {
                height: 15%;
                // background-color: red;
            }

            .townList {
                height: 75%;
                display: flex;
                flex-wrap: wrap;
                box-sizing: border-box;
                padding: 10px;


                .storebox {
                    width: 22%;
                    height: 40%;
                    position: relative;
                    display: flex;
                    margin-left: 10px;

                    .store {
                        flex: 1;
                        height: 100%;

                    }

                    .toenName {
                        flex: 1;
                        height: 100%;
                        background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
                        border-radius: 0 15px 15px 0;
                        font-size: 12px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        color: white;
                        box-sizing: border-box;
                        padding: 7px 2px;

                    }
                }
            }
        }
    }
}

.foot {
    // margin-top: 30px;
    height: 45vh;
    display: flex;

    .foot-l {
        flex: 1;
        height: 100%;
        background: url('/static/index/DDSJ.png');
        background-size: 25vw 45vh;
        background-repeat: no-repeat;



    }

    .c {
        flex: 2;
        height: 100%;
        background: url('/static/index/CJYHTJ.png');
        background-size: 50vw 45vh;
        background-repeat: no-repeat;

        .towns {
            width: 50vw;
            display: flex;
            box-sizing: border-box;
            padding: 1vh 1vw;
            flex-wrap: wrap;

            .town-li {
                margin-top: 10px;
                color: #A0C7D5;
                padding: 5px 10px;
                border-radius: 7px 10px;
                font-size: 12px;
                border: 1px solid #3A91A5;
                background-color: #072C3E;
                // margin-left: 2vw;
                justify-content: fl;
                margin-left: 2vw;
            }
        }

    }

    .r {
        flex: 1;
        height: 100%;
        background: url('/static/index/DRDD.png');
        background-size: 25vw 45vh;
        background-repeat: no-repeat;
    }
}



.producta {
    width: 200px;
    height: 200px;
    background-color: black;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.producta::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, #ffffff 20%, rgba(255, 255, 255, 0) 70%);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
        transform: rotate(45deg) translate(-150%, -150%);
    }

    100% {
        transform: rotate(45deg) translate(150%, 150%);
    }
}

.progress-bar {
    transform: translateY(12px);
    width: 100%;
    height: 10px;
    background-color: #122E3F;
    // border-radius: 10px;
    overflow: hidden;
}

.progress {
    width: 70%;
    height: 100%;
    background: linear-gradient(to right, #455CCC, #51C2E0);
    transition: width 0.5s ease-in-out;
}
</style>