<template>
    <div class="stockBox">
        <!-- 当月入库库存 -->
        <div class="outbound">
            <div class="title">
                当月出入库库存
            </div>
            <div class="outboundStock" ref="outboundStock">

            </div>
        </div>
        <!-- 安全库存 -->
        <div class="safeStock">
            <div class="title">
                安全库存
            </div>
            <ul class="ul">
                <li v-for="(s, i) in ulList" class="stockLi" :key="i">
                    <img :src="s.pic" alt="">
                    <span class="liName">{{ s.name }}:</span>
                    <span class="liNum" :class="'num' + i">{{ s.num }}&nbsp;<span style="font-size: 13px;">万元</span></span>
                </li>
            </ul>
        </div>
        <!-- 物资概况 -->
        <div class="material">
            <div class="title">
                物资概况
            </div>
            <div class="materialContent">
                <el-input type="textarea" :rows="2" placeholder="库存情况" v-model="textarea">
                </el-input>
                <el-input placeholder="任务查询" v-model="inputVal">
                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </div>
        </div>
        <!-- 库存记录 -->
        <div class="ISR">
            <div class="title">
                库存记录
            </div>
            <div class="ISR-meassage">
                <div class="ISR-item" v-for="(s, i) in ISRList" :key="i">
                    <p :class="'p' + i"><span>产品信息:</span><span>{{ s.productMsg }}</span></p>
                    <p :class="'p' + i"><span>库位:</span><span class="address">{{ s.address }}</span></p>
                    <p :class="'p' + i"><span>库存数量:</span>盘点数量共计&nbsp;<span class="num">{{ s.num }}</span></p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Stock',
    data() {
        return {
            ulList: [
                { name: '非限制', pic: require('@/assets/images/upstock.png'), num: '26285.91' },
                { name: '质检', pic: require('@/assets/images/testing.png'), num: '1338.31' },
                { name: '冻结', pic: require('@/assets/images/freeze.png'), num: '2066.08' },
            ],
            inputVal: '',
            ISRList: [
                { productMsg: '镇江扬中国电电力线缆', address: 'B01-050103', num: '26823' },
                { productMsg: '镇江扬中国电电力线缆', address: 'B01-050104', num: '17895' },
            ]
        }
    },
    mounted() {
        // 当月出库率
        this.drawOutboundStock()
    },
    computed: {

    },
    methods: {
        // 当月出库率
        drawOutboundStock() {
            let myChart = this.$echarts.init(this.$refs.outboundStock)
            var xDataArr = ['入库', '出库']
            var yDataArr = [10, 20]
            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",
                        },
                    },
                    axisTick: {
                        show: false
                    }
                },
                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
                }]
            }

            myChart.setOption(option)
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        },
    },
}
</script>
<style scoped lang="less">
.stockBox {
    width: 100%;
    height: 100%;

    // 当月出入库库存
    .outbound {
        width: 100%;
        height: 26%;
        padding-top: 6%;
        box-sizing: border-box;

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

    // 安全库存
    .safeStock {
        width: 100%;
        height: 27%;

        .ul {
            width: 90%;
            height: 85%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .stockLi {
                width: 100%;
                height: 30%;
                display: flex;
                align-items: center;
                background-color: rgba(255, 255, 255, .8);
                border-radius: 10px;

                img {
                    margin: 0 7%;
                }

                .liName {
                    width: 52px;
                    margin: 0 4%;
                }

                .liNum {
                    font-family: quare;

                }

                .num0 {
                    color: #e96a2b;
                }

                .num1 {
                    color: #4351fd;
                }

                .num2 {
                    color: #55c3f6;
                }

            }
        }
    }

    // 物资概况
    .material {
        padding-top: 2%;
        box-sizing: border-box;
        height: 20%;
        width: 100%;

        .materialContent {
            width: 100%;
            height: 80%;
            display: flex;
            // justify-content: center;
            flex-direction: column;
            justify-content: space-between;

            /deep/ .el-textarea {
                width: 90% !important;
                height: 60%;
                margin: 0 auto;
                border-radius: 10px !important;
            }

            /deep/ .el-textarea__inner {
                background-color: rgba(255, 255, 255, .8);
                color: #e3e3e3;
                border-radius: 10px;
                height: 100%;
            }

            /deep/ .el-input {
                width: 90%;
                margin: 0 auto;
                background-color: rgba(255, 255, 255, .8);
                box-shadow: none;
                border-radius: 10px;
            }
        }

    }

    // 库存记录
    .ISR {
        padding-top: 2%;
        box-sizing: border-box;
        width: 100%;
        height: 26%;

        .ISR-meassage {
            width: 100%;
            height: 80%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .ISR-item {
                width: 90%;
                height: 45%;
                margin: 0 auto;
                border-radius: 10px;
                background-color: rgba(255, 255, 255, .8);
                padding-left: 6%;
                box-sizing: border-box;
                font-size: 14px;
                display: flex;
                justify-content: space-evenly;
                flex-direction: column;
                p>span:nth-child(1){
                    display: inline-block;
                    width: 5em;
                }
                
                .address,.num{
                    font-family: quare;
                    color: #4c59fd;
                }
                .p1 {
                    width: 100%;

                }
            }
        }
    }

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