@{
    ViewBag.Title = "Main";
    Layout = "~/Views/Shared/_LayoutVue.cshtml";
}

<script src="~/Content/js/echarts/echarts.min.js"></script>
<script src="~/Content/js/linq.js_ver2.2.0.2/linq.js"></script>

<style>
    .chart {
        float: left;
    }

    .chuku, .ruku {
        width: 25%;
        position: relative;
    }

        .chuku:after, .ruku:after {
            content: "";
            display: block;
            position: absolute;
            right: 0;
            top: 10%;
            width: 1px;
            height: 80%;
            background: #ccc;
            background: -webkit-gradient(linear,0% 0%,100% 100%,color-stop(0,#eee),color-stop(0.5,#bbb),color-stop(1,#eee));
        }

    .churuku {
        width: 50%;
    }

    .el-card__header {
        padding: 5px 20px;
        font-size: 15px;
        font-weight: bold;
    }

    ol {
        list-style: none;
        counter-reset: ordered;
    }

    li:before {
        counter-increment: ordered;
        /*content: counters(ordered,".")" ";*/
    }
</style>
<script type="text/javascript">
    function LoadWaitQty() {
        $.ajax({
            type: "GET",
            url: "/Home/GetWaitExecuteTask",
            dataType: "json",
            async: false,
            success: function (result) {
                $.each(result, function (i, n) {
                    $("#id" + (i + 1)).html(n.Qty);

                });
            },
            error: function (msg) {
                alert("error3" + msg);
            }
        });
    }

    function OpenIndex(index) {
        switch (index) {
            //case 1:
            //    parent.addTab('到货单审核', '/InStock/Arrival/Audit?className=ARRIVAL_MST&funcType=到货单审核', 'F747545D-7234-487F-9E60-8CC4FF866F88');
            //    break;
            //case 2:
            //    parent.addTab('到货单检验', '/Inspect/ArrivalInspect/Index?className=INSPECT_MST&funcType=标准', '4fed9013-09fd-4239-bdb6-e3f02f63454d');
            //    break;
            //case 3:
            //    parent.addTab('缺货查询', 'OutStock/Wave/OutOfStock', '1b55f051-4dc0-41c3-bd68-4ac152c481fc');
            //    break;
            //case 4:
            //    parent.addTab('入库单审核', '/InStock/InOrder/Audit?className=INCREASE_INVENTORY_MST&funcType=审核', '97ac4e4d-7d66-47c4-979d-bf7ed82e8856');
            //    break;
            //case 5:
            //    parent.addTab('发货单审核', '/OutStock/Out/Audit?className=OUT_MST&funcType=审核', '9bd9ca18-35d3-4bc6-8434-a0a4a1a4d04f');
            //    break;
            //case 6:
            //    parent.addTab('待发货', '/OutStock/OutOrder/Index?className=REDUCE_INVENTORY_MST&funcType=标准&menuid=2d099c1d-8efa-4073-8c72-2b9ca87acbe0');
            //    break;
        }
    }

    function getFormatDate(arg) {
        if (arg == undefined || arg == '') {
            return '';
        }
        var re = arg + '';
        if (re.length < 2) {
            re = '0' + re;
        }
        return re;
    }
</script>

<div id="div" v-cloak>
    <el-row>
        <el-col v-bind:span="12">
            <el-card class="box-card" shadow="hover" v-bind:style="'height:'+topHeight+'px;'">
                <div slot="header" class="clearfix">
                    <span>仓储货位情况</span>
                </div>
                <el-table v-bind:data="stockState" 
                          style="width: 100%"
                          size="mini">
                    <el-table-column prop="AreaCode" width="200px"
                                     label="库区">
                    </el-table-column>
                    <el-table-column prop="LocationCount"  
                                     label="总货位数">
                    </el-table-column>
                    <el-table-column prop="EmptyCount"
                                     label="空货位数">
                    </el-table-column>
                    <el-table-column prop="OddSpec"
                                     label="剩余比重">
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col v-bind:span="12">
            <el-card class="box-card" shadow="hover" v-bind:body-style="{overflow:'auto',height:(topHeight-35)+'px'}" v-bind:style="'height:'+topHeight+'px'">
                <div slot="header" class="clearfix">
                    <span>更新日志</span>
                </div>
                <div>
                    <el-table v-for="n in updateContent" v-bind:data="n.update"
                              style="width: 100%"
                              size="mini">
                        <el-table-column prop="content"
                                         v-bind:label="n.title">
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-card class="box-card" v-bind:style="'height:'+bottomHeight+'px;' + 'display:none;'">
        <div slot="header" class="clearfix">
            出入库业务
            <hh-select-url v-model="formData.dtRange"
                           v-bind:options="dtRangeOptions">
            </hh-select-url>
        </div>
        <el-row v-bind:gutter="24" style="">
            <el-col v-bind:span="10" style="padding:15px 12px;">
                <div id="divBussLine" class="chart churuku" style="width:100%;height:200px"></div>
            </el-col>
            <el-col v-bind:span="7" style="padding:15px 12px;">
                <div id="divOutPie" class="chart ruku" style="width:100%;height:200px"></div>
            </el-col>
            <el-col v-bind:span="7" style="padding:15px 12px;">
                <div id="divInPie" class="chart chuku" style="width:100%;height:200px"></div>
            </el-col>
        </el-row>
    </el-card>
</div>

@section scripts{
    <script>
        var outList = new Vue({
            mixins: [useAutoHeight],
            data: {
                stockState: [],
                updateContent: [],
                areaStoreInfo: {},
                formData: {
                    dtRange: "7"
                },
                dtRangeOptions: [{
                    value: '7',
                    label: '7天内'
                }, {
                    value: '15',
                    label: '半个月内'
                }, {
                    value: '30',
                    label: '1个月内'
                }],
                where: {},
                outCols: [
                    { f: "CN_S_ITEM_CODE", n: "物料编码", w: 180 },
                    { f: "CN_S_ITEM_NAME", n: "物料名称", w: 180 },
                    { f: "CN_S_PRODUCTION_BATCH", n: "生产批次", w: 180 },
                    { f: "CN_S_ITEM_STATE", n: "物料状态", w: 80 },
                    { f: "CN_S_OWNER", n: "货主", w: 100 },
                    { f: "CN_F_QUANTITY", n: "库存数量", w: 80 },
                    { f: "CN_F_PLANNED_QTY", n: "在单量", w: 80 },
                    { f: "CN_F_ALLOC_QTY", n: "分配量", w: 80 },
                    { f: "STOCKQTY", n: "安全库存", w: 80 },
                    {
                        f: "STOCKQTY", n: "可用库存", w: 80, format: function (row, column) {
                            return (parseInt(row.CN_F_QUANTITY) + parseInt(row.CN_F_PLANNED_QTY)) - parseInt(row.CN_F_ALLOC_QTY);
                        }
                    }
                ]
            },
            methods: {
                fixed: function (num) {
                    num = num * 100;
                    return num.toFixed(2) + "%";
                },
                Selected: function () {
                    var vue = $("#idDay option:selected").val();
                    if (vue == "7天内") {
                        InitBuss(7);
                    }
                    else if (vue == "半个月内") {
                        InitBuss(15);
                    }
                    else if (vue == "1个月内") {
                        InitBuss(30);
                    }
                },
                InitLocation: function () {
                    var $this = this;
                    ajaxManage({
                        url: '/Home/GetLocationState',
                        success: function (result) {
                            if (result.Status) {
                                $this.areaStoreInfo = result.Data;
                                //stockState
                                console.log($this.areaStoreInfo);
                                $this.areaStoreInfo.forEach(function (n) {
                                    $this.stockState.push({
                                        AreaCode: n.CN_S_AREA_CODE,
                                        LocationCount: n.不满 + n.空 + n.满,
                                        EmptyCount: n.空,
                                        OddSpec: $this.fixed(n.空 / (n.不满 + n.空 + n.满))
                                    });
                                });
                            }
                            else {
                                wms.error(result.Msg);
                            }
                        }
                    });
                },
                InitPie: function (inDataPie, outDataPie) {
                    var myChart = echarts.init(document.getElementById('divInPie'));
                    var option = {
                        title: {
                            text: '入库',
                            //subtext: '虚构数据',
                            left: 'center',
                            textStyle: {
                                fontWeight: 'bold',
                                //字体大小
                                fontSize: 12
                            }
                        },
                        color: ['#37a2da', '#e062ae', '#ff9f7f', '#67e0e3', '#9fe6b8', '#fb7293', '#e690d1', '#8378ea', '#ffdb5c', '#96bfff'],
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            //data: ['初始化入库', '采购入库', '调拨入库', '领料入库', '其他入库']
                        },
                        series: [
                            {
                                name: '业务类型',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '20',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data:
                                    inDataPie
                                //    [
                                //    { value: 335, name: '初始化入库' },
                                //    { value: 310, name: '采购入库' },
                                //    { value: 234, name: '联盟广告' },
                                //    { value: 135, name: '视频广告' },
                                //    { value: 1548, name: '搜索引擎' }
                                //]
                            }
                        ],
                        graphic: {
                            type: 'text',
                            left: 'center',
                            top: 'center',
                            style: {
                                //text: '入库',
                                textAlign: 'center',
                                fill: '#000',
                                width: 30,
                                height: 30
                            }
                        }
                    };
                    myChart.setOption(option);

                    var myChart2 = echarts.init(document.getElementById('divOutPie'));
                    option2 = {
                        title: {
                            text: '出库',
                            //subtext: '虚构数据',
                            left: 'center',
                            textStyle: {
                                fontWeight: 'bold',
                                //字体大小
                                fontSize: 12
                            }
                        },
                        color: ['#37a2da', '#e062ae', '#ff9f7f', '#67e0e3', '#9fe6b8', '#fb7293', '#e690d1', '#8378ea', '#ffdb5c', '#96bfff'],
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            //data: ['简易出库', '销售出库', '其他出库', '领料出库', '调拨出库']
                        },
                        series: [
                            {
                                name: '业务类型',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '20',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data:
                                    outDataPie
                            }
                        ],
                        graphic: {
                            type: 'text',
                            left: 'center',
                            top: 'center',
                            style: {
                                //text: '出库',
                                textAlign: 'center',
                                fill: '#000',
                                width: 30,
                                height: 30
                            }
                        }
                    };
                    myChart2.setOption(option2);
                },
                InitBuss: function (day) {
                    $this = this;
                    var dayTitle = new Array()
                    var inData = new Array();
                    var outData = new Array();

                    var inDataPie;
                    var outDataPie;

                    ajaxManage({
                        url: '/Home/GetBussLine?day=' + day,
                        success: function (data) {
                            result = data.Data;
                            var inQty = Enumerable.From(result).Where("x=>x.type=='IN'").GroupBy("$.CN_T_CREATE", null,
                                        function (key, g) {
                                            var result = {
                                                CN_T_CREATE: key,
                                                QTY: parseInt(g.Sum("x=>x.qty"))
                                            }
                                            return result;
                                        });
                            var outQty = Enumerable.From(result).Where("x=>x.type=='OUT'").GroupBy("x=>x.CN_T_CREATE", null,
                                        function (key, g) {
                                            var result = {
                                                CN_T_CREATE: key,
                                                QTY: parseInt(g.Sum("x=>x.qty"))
                                            }
                                            return result;
                                        });
                            var date = new Date();
                            date.setDate(date.getDate() - day)
                            for (var i = day; i > 0; i--) {
                                date.setDate(date.getDate() + 1);
                                dayTitle[day - i] = (date.getDate());

                                var fullDate = date.getFullYear() + "-" + getFormatDate(date.getMonth() + 1) + "-" + getFormatDate(date.getDate());
                                var inobj = inQty.Where("x=>x.CN_T_CREATE=='" + fullDate + "'").ToArray();
                                if (inobj == null || inobj.length == 0)
                                    inData[day - i] = 0;
                                else
                                    inData[day - i] = inobj[0].QTY;

                                var outobj = outQty.Where("x=>x.CN_T_CREATE=='" + fullDate + "'").ToArray();
                                if (outobj == null || outobj.length == 0)
                                    outData[day - i] = 0;
                                else
                                    outData[day - i] = outobj[0].QTY;
                            }

                            inDataPie = Enumerable.From(result).Where("x=>x.type=='IN'").GroupBy("$.CN_S_OP_TYPE", null,
                                       function (key, g) {
                                           var result = {
                                               name: key,
                                               value: parseInt(g.Sum("x=>x.qty"))
                                           }
                                           return result;
                                       }).ToArray();
                            outDataPie = Enumerable.From(result).Where("x=>x.type=='OUT'").GroupBy("$.CN_S_OP_TYPE", null,
                                       function (key, g) {
                                           var result = {
                                               name: key,
                                               value: parseInt(g.Sum("x=>x.qty"))
                                           }
                                           return result;
                                       }).ToArray();
                        }
                    });
                    var myChart = echarts.init(document.getElementById('divBussLine'));
                    var option = {
                        title: {
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['入库', '出库']
                        },
                        color: ['#37a2da', '#e062ae', '#ff9f7f', '#67e0e3', '#9fe6b8', '#fb7293', '#e690d1', '#8378ea', '#ffdb5c', '#96bfff'],
                        grid: {
                            top: '10%',
                            left: '3%',
                            right: '4%',
                            bottom: '11%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: dayTitle//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '出库',
                                type: 'line',
                                data: outData
                            },
                            {
                                name: '入库',
                                type: 'line',
                                data: inData
                            }
                        ]
                    };
                    myChart.setOption(option);
                    $this.InitPie(inDataPie, outDataPie);
                },
                initVersionLog: function () {
                    var $this = this;
                    ajaxManage({
                        url: '/Home/GetVersionLog',
                        success: function (result) {
                            if (result.Success) {
                                $this.updateContent = result.Data;
                            }
                            else {
                                wms.error(result.Msg);
                            }
                        }
                    });
                }
            },
            mounted: function () {
                var $this = this;
                this.InitBuss(7);
                this.InitLocation();
                this.initVersionLog();
            },
            watch: {
                deep: true,
                "formData.dtRange": function () {
                    var $this = this;
                    $this.InitBuss($this.formData.dtRange);
                }
            },
            computed: {
                areaUrl: function () {
                    var $this = this;
                    return '/Basic/Common/AreaList?stockCode=' + $this.formData.stockCode + "&include=1";
                },
                topHeight: function () {
                    return (this.autoHeight) - 10;
                },
                bottomHeight: function () {
                    return (this.autoHeight / 2);
                }
            },
            el: '#div'
        });
    </script>
}