<template>
    <div class="aside">
        <div class="aside-box">
            <div class="left-item">
                <div class="logo">
                    <img src="@/assets/images/logo.png" alt="">
                </div>
                <!-- 右边小图标样式 -->
                <ul class="icons">
                    <li class="icon-item" v-for="(s, i) in asideList" :key="i" @click="updateImg(i)">
                        <img :src="i == index ? s.select : s.pic" alt="">
                        <span :style="i == index ? 'color:#2620b1' : ''">{{ s.name }}</span>
                    </li>
                </ul>
            </div>
            <!-- <transition name="slide-fade"> -->
                <div class="right-item" v-if="index == 0">
                    <!-- 仓库使用率 -->
                    <div class="storeUse" ref="storeUse">

                    </div>
                    <!-- 每月周转率 -->
                    <div class="monthlyTurnover">
                        <div class="title">
                            每日周转率
                        </div>
                        <div class="turnoverChart" ref="turnoverChart">

                        </div>
                    </div>
                    <!-- 当月出库金额 -->
                    <div class="outboundAmount">
                        <div class="title">
                            当月出库金额
                        </div>
                        <div class="outboundChart" ref="outboundChart">

                        </div>
                    </div>
                    <!-- 积压物资 -->
                    <div class="overStock" ref="overStock">
                        <div class="title">
                            积压物资
                        </div>
                        <div class="overChart" ref="oveChart">

                        </div>
                    </div>
                </div>
            <!-- </transition> -->
            <!-- <transition name="move"> -->
                <Stock v-if="index == 1" class="right-item" />
            <!-- </transition> -->

        </div>

    </div>
</template>
<script>
import Stock from '@/component/Stock.vue'
export default {
    name: 'index',
    components: {
        Stock,
    },
    data() {
        return {
            index: 0,
            asideList: [
                { name: '总览', select: require("@/assets/images/overview-select.png"), pic: require('@/assets/images/overview-default.png') },
                { name: '库存', select: require("@/assets/images/stock-select.png"), pic: require('@/assets/images/stock-default.png') },
                { name: '入库', select: require("@/assets/images/enter-select.png"), pic: require('@/assets/images/enter-default.png') },
                { name: '出库', select: require("@/assets/images/out-select.png"), pic: require('@/assets/images/out-default.png') },
                { name: '管理', select: require("@/assets/images/manage-select.png"), pic: require('@/assets/images/manage-default.png') }
            ],
            storemyChart: '',//仓库使用率echarts
            myChart2: '',//每月周转率echarts
            myChart3: '',//当月出库金额echarts
            myChart4: '',//积压物资
        }
    },
    mounted() {
        // 总览界面echarts
        this.drawStore()
        this.drawTurnoverChart()
        this.drawOutbound()
        this.drawOverStock()
    },
    watch: {
        index: {
            handler(newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        
                        // console.log(1);
                        // console.log(this.myChart2.resize());
                        this.storemyChart.resize()
                        // this.myChart2.resize
                        // this.myChart3.resize
                        // this.myChart4.resize
                    })
                }
            }
        }
    },
    computed: {

    },
    methods: {
        // 切图
        updateImg(i) {
            this.index = i
            if (this.index == 0) {
                this.$nextTick(() => {
                    // 总览界面echarts
                    this.drawStore()
                    this.drawTurnoverChart()
                    this.drawOutbound()
                    this.drawOverStock()
                })
            }

        },
        // 仓库使用率的ecahrt图
        drawStore() {
            this.storemyChart = this.$echarts.init(this.$refs.storeUse)
            const chartData = [
                {
                    value: 24,
                    name: "使用率",
                },
                {
                    value: 76,
                    name: "空闲率",
                },

            ];
            const colorList = ['#88D9FF', '#0092FF', '#81EDD2', '#B0FA93', '#63F2FF', '#9999FE'];
            const pieData1 = [];
            // const pieData2 = [];
            // 图型条间距
            const gapData = {
                name: "",
                value: 5,
                itemStyle: {
                    color: "transparent",
                },
            };
            let lefts = ["20%", "20%", "center", "center", "center", "center"];
            let tops = ["48%", "60%", "55%", "24%", "37%", "55%"];
            let legendData = [];
            let total = 0;
            chartData.forEach((item) => {
                total += item.value;
            });

            for (let i = 0; i < chartData.length; i++) {
                // 第一圈数据
                pieData1.push({
                    ...chartData[i],
                    itemStyle: {
                        borderRadius: 10,
                    },
                });
                pieData1.push(gapData);
                legendData.push({
                    show: true,
                    icon: "circle",
                    itemHeight: 6,
                    itemWidth: 4, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                    left: lefts[i],
                    top: tops[i],
                    itemStyle: {
                        color: colorList[i],
                    },
                    formatter:
                        `{aa| ` + chartData[i].name + ` } `, // 也可以是个函数return
                    x: "left",
                    textStyle: {
                        // color: "#BAFF7F",
                        rich: {
                            aa: {
                                color: "#000",
                                fontSize: 14,
                            },

                        },
                    },
                    data: [chartData[i].name],
                },
                    {
                        show: true,
                        icon: "circle",
                        itemWidth: 4,
                        itemHeight: 6, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                        left: '65%',
                        top: tops[i],
                        itemStyle: {
                            color: colorList[i],
                        },
                        formatter:
                            `{aa| ` + chartData[i].name + ` }{val| ` + parseInt(chartData[i].value / total * 100) + `% }`, // 也可以是个函数return
                        x: "left",
                        textStyle: {
                            // color: "#BAFF7F",
                            rich: {
                                aa: {

                                    color: "#ffffff",
                                },
                                val: {
                                    color: "#fff",
                                    fontWeight: 'bold'
                                }
                            },
                        },
                        data: [chartData[i].name],
                    },
                );
            }

            // console.log("pieData2---------", pieData2);

            let option = {

                title: {
                    text: "仓库使用率",
                    x: '5%',
                    y: '10%',
                    textStyle: {
                        color: '#000',
                        fontSize: 16,
                        fontWeight: 'normal'
                    }
                },
                legend: legendData,
                // backgroundColor: "#0F141B",
                tooltip: {
                    show: true,
                    backgroundColor: "rgba(0, 0, 0,.8)",
                    textStyle: {
                        color: "#fff",
                    },
                },
                color: colorList,
                series: [
                    {
                        name: '',
                        type: 'pie',
                        roundCap: true,
                        radius: ['52%', '60%'],
                        center: ['30%', '60%'],
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        data: pieData1
                    },

                    {
                        type: 'gauge',
                        zlevel: 2,
                        splitNumber: 90,
                        radius: '67%',
                        center: ['30%', '60%'],
                        startAngle: 90,
                        endAngle: -269.9999,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            length: 1,
                            lineStyle: {
                                width: 1,
                                color: 'rgb(33,85,130)',
                            },
                        },
                        pointer: {
                            show: 0,
                        },
                        detail: {
                            show: 0,
                        },
                    },

                ],
            };

            this.storemyChart.setOption(option)
            window.addEventListener('resize', () => {
                this.storemyChart.resize();
            });
        },
        // 每日周转率
        drawTurnoverChart() {
            this.myChart2 = this.$echarts.init(this.$refs.turnoverChart)
            var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月']
            var yDataArr = [0, 182, 191, 150, 0, 0, 0]
            var colors = ['#4587E7', '#55c3f6', '#4351fd', '#f49a58', '#da70d6', '#32cd32'];
            let option = {

                xAxis: {
                    boundaryGap: true,
                    type: 'category',
                    data: xDataArr,
                    axisLabel: {
                        //坐标轴刻度标签的相关设置。
                        show: true,
                        textStyle: {
                            color: "rgb(0,0,0)",
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#57b7e8",
                        },
                    },
                },
                yAxis: {
                    axisLabel: {
                        //坐标轴刻度标签的相关设置。
                        show: true,
                        textStyle: {
                            color: "rgb(0,0,0)",
                        },
                    },
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: "#ebecec",
                            type: "dashed",
                        },
                    },
                },
                grid: { // 让图表占满容器
                    top: "20%",
                    left: "15%",
                    right: "7%",
                    bottom: "15%"
                },
                series: [{
                    itemStyle: {
                        color: function (params) {
                            for (let i = 0; i < xDataArr.length; i++) {
                                if (xDataArr[i].indexOf(params.name) != -1) {
                                    return colors[i]
                                }
                            }
                        },
                    },
                    name: '星期',
                    type: 'bar',
                    barWidth: 20,
                    data: yDataArr
                }]
            }

            this.myChart2.setOption(option)
            window.addEventListener('resize', () => {
                this.myChart2.resize();
            });
        },
        // 当月出库金额
        drawOutbound() {
            this.myChart3 = this.$echarts.init(this.$refs.outboundChart)
            let option = {

                legend: {
                    data: ['入库', '出库'],
                    textStyle: {
                        align: 'right',
                    },
                    top: '2%',
                    right: '2%',
                },

                tooltip: {
                    trigger: 'axis',
                },

                grid: { // 让图表占满容器
                    top: "20%",
                    left: "15%",
                    right: "7%",
                    bottom: "15%"
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: "#57b7e8",
                            },
                        },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置。
                            show: true,
                            textStyle: {
                                color: "rgb(0,0,0)",
                            },
                        },
                        splitArea: {
                            // show: true,
                            color: '#f00',
                            lineStyle: {
                                color: '#f00',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },

                        boundaryGap: true,
                        data: [0, 5, 10, 15, 20, 25, 30],
                    },
                ],

                yAxis: [
                    {
                        type: 'value',
                        name: '单位:万元',
                        min: 0,
                        // max: 140,
                        splitNumber: 4,
                        splitLine: {
                            lineStyle: {
                                color: "#ebecec",
                                type: "dashed",
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置。
                            show: true,
                            textStyle: {
                                color: "rgb(0,0,0)",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '入库',
                        type: 'line',
                        smooth: true, //是否平滑
                        // showAllSymbol: true,
                        symbol: 'none',
                        // symbolSize: 12,
                        lineStyle: {
                            normal: {
                                color: '#7AA1FF',
                            },
                        },
                        // itemStyle: {
                        //     color: '#7AA1FF',
                        //     borderWidth: 3,
                        //     borderColor: '#f3f3f3',
                        // },
                        data: [42.8, 14.7, 13.2, 32.1, 10.4],
                    },
                    {
                        name: '出库',
                        type: 'line',
                        smooth: true, //是否平滑
                        symbol: 'none',
                        symbolSize: 12,
                        lineStyle: {
                            normal: {
                                color: '#00ca95',
                            },
                        },
                        itemStyle: {
                            color: '#00ca95',
                            borderColor: '#fff',
                            borderWidth: 3,
                        },
                        data: [0, 0, 38.6, 26.4, 34.4],
                    },

                ],
            };
            this.myChart3.setOption(option)
            window.addEventListener('resize', () => {
                this.myChart3.resize();
            });
        },
        // 积压物质
        drawOverStock() {
            this.myChart4 = this.$echarts.init(this.$refs.oveChart)
            var data = [
                {
                    name: "积压物资",
                    value: 54,
                },
                {
                    name: "非积压物质",
                    value: 44,
                },

            ];

            var titleArr = [],
                seriesArr = [];
            var colors = [
                ["#389af4", "#dfeaff"],
                ["#ff8c37", "#ffdcc3"],
                ["#ffc257", "#ffedcc"],
                ["#fd6f97", "#fed4e0"],
                ["#a181fc", "#e3d9fe"],
            ];
            var legendData = []
            data.forEach(function (item, index) {
                legendData.push({
                    data: [index == 0 ? item.name : ""],
                    show: true,
                    icon: "circle",
                    itemHeight: 0,
                    itemWidth: 0, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                    left: "18%",
                    bottom: '10%',
                    itemStyle: {
                        color: colors[index],
                    },
                    formatter:
                        `{aa|20000万  }\n {bb| 总物资    }`, // 也可以是个函数return
                    x: "left",
                    textStyle: {
                        // color: "#BAFF7F",
                        rich: {
                            aa: {
                                color: colors[index][0],
                                fontSize: 14,
                                fontWeight: 'blod',
                                padding: [0, 0, 8, 0],
                            },
                            bb: {
                                color: '#000'
                            }
                        },
                    },
                }, {
                    data: [index == 1 ? item.name : ""],
                    show: true,
                    icon: "circle",
                    itemHeight: 0,
                    itemWidth: 0, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                    left: "55%",
                    bottom: '10%',
                    itemStyle: {
                        color: colors[index],
                    },
                    formatter:
                        `{aa|${(item.value / 100 * 100).toFixed(2)}%  }\n {bb| ${item.name}占比    }`, // 也可以是个函数return
                    x: "left",
                    textStyle: {
                        // color: "#BAFF7F",
                        rich: {
                            aa: {
                                color: colors[index][0],
                                fontSize: 14,
                                fontWeight: 'blod',
                                padding: [0, 0, 8, 20]
                            },
                            bb: {
                                color: '#000'
                            }
                        },
                    }
                })
                titleArr.push({
                    text: item.name,
                    left: index * 40 + 30 + "%",
                    top: "55%",
                    textAlign: "center",
                    textStyle: {
                        fontWeight: "normal",
                        fontSize: "14",
                        color: '#000',
                        textAlign: "center",
                    },
                });
                seriesArr.push({
                    name: item.name,
                    type: "pie",
                    clockWise: false,
                    radius: ['40%', '46%'],
                    itemStyle: {
                        normal: {
                            color: colors[index][0],
                            shadowColor: colors[index][0],
                            borderRadius: 10,
                            shadowBlur: 0,
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                        },
                    },
                    hoverAnimation: false,
                    center: [index * 40 + 30 + "%", "30%"],
                    data: [
                        {
                            value: item.value,
                            label: {
                                normal: {
                                    formatter: function (params) {
                                        return params.value + '万';
                                    },
                                    position: "center",
                                    show: true,
                                    textStyle: {
                                        fontSize: "14",
                                        fontWeight: "bold",
                                        color: colors[index][0],
                                    },
                                },
                            },
                        },
                        {
                            value: 100 - item.value,
                            name: "invisible",
                            itemStyle: {
                                normal: {
                                    color: colors[index][1],
                                },
                                emphasis: {
                                    color: colors[index][1],
                                },
                            },
                        },
                    ],
                }, {

                    type: 'pie',
                    zlevel: -1, // 层级
                    radius: ['32%', '0'],
                    center: [index * 40 + 30 + "%", "30%"],
                    itemStyle: {
                        normal: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0,161,163,0.25)',
                            color: '#fff',
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [100]

                });
            });

            let option = {
                title: titleArr,
                legend: legendData,
                series: seriesArr,
            };
            this.myChart4.setOption(option)
            window.addEventListener('resize', () => {
                this.myChart4.resize();
            });
        }
    },
}
</script>
<style scoped lang="less">
.aside {
    width: 21.4%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 3%;
    position: relative;
    z-index: 99;

    .aside-box {
        width: 100%;
        height: 92.6%;
        // background-color: rgba(229, 237, 242, .5);
        border-radius: 20px;
        display: flex;

        .left-item {
            width: 18.8%;
            height: 100%;
            background-color: #f7f8f9;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;

            .logo {
                margin-top: 15px;
                display: flex;
                justify-content: center;
                margin-bottom: 32px;
            }

            .icons {
                width: 100%;
                height: 10%;

                .icon-item {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: center;
                    align-content: center;

                    img {
                        display: block;
                    }

                    span {
                        display: inline-block;
                        width: 100%;
                        text-align: center;
                        color: #888888;
                    }
                }
            }
        }

        .right-item {
            width: 81.2%;
            height: 100%;
            background-color: rgba(229, 237, 242, .5);
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;

            .title {
                font-size: 16px;
                margin-left: 7%;
                margin-bottom: 4%;
            }

            .storeUse {
                width: 100%;
                height: 21.5%;
            }

            .monthlyTurnover,
            .outboundAmount {
                width: 100%;
                height: 25%;

                .turnoverChart,
                .outboundChart {
                    width: 90%;
                    height: 80%;
                    background-color: #fff;
                    margin: 0 auto;
                    border-radius: 10px;
                }
            }

            .overStock {
                height: calc(100% - 71.5%);
                width: 100%;

                .overChart {
                    width: 100%;
                    height: 80%;
                }
            }


        }
    }
}
</style>
