@extends('layouts.base')
@section('title', "商品数据统计")
@section('content')
{{--<link rel="stylesheet" href="{{resource_get('plugins/wechat-notice/views/admin/index.css')}}">--}}
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<link rel="stylesheet" href="{{resource_get('plugins/shop-statistics/assets/css/common.css')}}">
<link rel="stylesheet" href="{{resource_get('plugins/shop-statistics/assets/css/statistics.css')}}">
<style>
    /* 导航 */
    .el-radio-button .el-radio-button__inner,
    .el-radio-button:first-child .el-radio-button__inner {
        border-radius: 20px 20px 20px 20px;
        border-left: 0px;
    }

    .el-radio-button__inner {
        border: 0;
    }

    .el-radio-button:last-child .el-radio-button__inner {
        border-radius: 20px 20px 20px 20px;
    }

    .edit-i {
        display: none;
    }

    .el-table_1_column_2:hover .edit-i {
        font-weight: 900;
        padding: 0;
        margin: 0;
        display: inline-block;
    }

    .el-tabs__item,
    .is-top {
        font-size: 16px
    }

    .el-tabs__active-bar {
        height: 3px;
    }
</style>
<div class="all">
    <div id="app" v-cloak>
        <div class="vue-main" style="padding:20px;">
            <div class="vue-main-form" style="margin-top:0px;">
                <statistics-card-title >
                    {{$type == 'goods_sales_amount'?'商品销售金额排名':($type == 'goods_sales'?'商品销量排名':'分类销量排名')}}
                    <div class="block" v-if="page_type=='goods_sales' || page_type == 'goods_sales_amount'">
                        <el-select v-model="time_type" placeholder="周期" >
                            <el-option
                                    v-for="item in types"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <el-date-picker
                                v-model="goods_month_sales"
                                type="month"
                                placeholder="选择月"
                                @change="getData(1)"
                                value-format="timestamp"
                                v-if="time_type=='month'"
                        >
                        </el-date-picker>

                        <el-date-picker
                                v-model="goods_month_sales"
                                type="date"
                                placeholder="选择日"
                                @change="getData(1)"
                                value-format="timestamp"
                                v-if="time_type=='day'"
                        >
                        </el-date-picker>
                    </div>
                </statistics-card-title>

                <el-table :data="list" style="width: 100%" v-if="page_type == 'goods_sales_amount' || page_type == 'goods_sales'">
                    <el-table-column label="排名" align="center" prop="rank_no">
                        <template slot-scope="scope">
                            <div class="member-rank" :data-rank="scope.row.rank_no">[[ scope.row.rank_no ]]</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" align="center" prop="title"> </el-table-column>
                    <el-table-column label="商品类型" align="center" prop="goods_type"></el-table-column>
                    <el-table-column label="销售金额" align="center" prop="goods_price_total" v-if="page_type == 'goods_sales_amount'"></el-table-column>
                    <el-table-column label="销量" align="center" prop="real_sales" v-if="page_type == 'goods_sales'"></el-table-column>
                </el-table>
                <el-table :data="list" style="width: 100%" v-if="page_type == 'category_sales'">
                    <el-table-column label="排名" align="center" prop="rank_no">
                        <template slot-scope="scope">
                            <div class="member-rank" :data-rank="scope.row.rank_no">[[ scope.row.rank_no ]]</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="分类名称" align="center" prop="name"> </el-table-column>
                    <el-table-column label="销量" align="center" prop="sales"></el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 分页 -->
        <div class="vue-page">
            <el-row>
                <el-col align="right">
                    <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total" :page-size="per_page" :current-page="current_page" background></el-pagination>
                </el-col>
            </el-row>
        </div>
    </div>
</div>

<script src="{{resource_get('plugins/shop-statistics/assets/js/components.js')}}"></script>
<script>
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        name: 'test',
        mixins: [componentMixins],
        data() {
            return {
                time_type:'',
                types:[
                    {id:'day',name:'日'},
                    {id:'month',name:'月'},
                ],
                street: 0,
                list: [],
                page_type: "{!! $type !!}",
                change_sort: '',
                times: [],
                category_list: [],
                rules: {},
                current_page: 1,
                total: 1,
                per_page: 1,
                goods_month_sales:''
            }
        },
        created() {

        },
        mounted() {
            this.getData(1);
        },
        methods: {
            getData(page) {
                let json = {
                    page: page,
                    goods_month_sales:this.goods_month_sales/1000
                };
                let url = '';
                if (this.page_type == 'goods_sales_amount') {
                    url = "{!! yzWebFullUrl('plugin.shop-statistics.backend.goods.search-goods-sales-amount') !!}";
                    json.time_type = this.time_type;
                } else if (this.page_type == 'goods_sales') {
                    url = "{!! yzWebFullUrl('plugin.shop-statistics.backend.goods.search-goods-sales') !!}";
                    json.time_type = this.time_type;
                } else {
                    url = "{!! yzWebFullUrl('plugin.shop-statistics.backend.goods.search-category-goods-sales') !!}";
                }
                let loading = this.$loading({
                    target: document.querySelector(".content"),
                    background: 'rgba(0, 0, 0, 0)'
                });
                this.$http.post(url, json).then(function(response) {
                    if (response.data.result) {
                        this.list = response.data.data.data;
                        this.current_page = response.data.data.current_page;
                        this.total = response.data.data.total;
                        this.per_page = response.data.data.per_page;
                        loading.close();

                    } else {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                    loading.close();

                }, function(response) {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                    loading.close();
                });
            },
            search(val) {
                this.getData(val);
            },
        },
    })
</script>
@endsection