@extends('admin.master')

@section('style')
    <link href="{{ asset('data/assets/css/element-ui.css') }}" rel="stylesheet">
@endsection

@section('top')
    <div class="top-breadcrumb">
        <h5>海关数据 <a :href="homeUrl + '/admin/train-news/10'" target="_blank" style="margin-left:20px;">消费说明</a></h5>
    </div>
@endsection

@section('content')
    <div class="customs-box" v-loading="loading">
        <div class="customs-records_top">
            <p>总点数：<span v-text="tableData.count.total_customs_data_number"></span></p>
            <p>已消费点数：<span v-text="consumptionPoints"></span></p>
            <p>剩余点数：<span v-text="tableData.count.customs_data_number"></span></p>
        </div>

        <div class="customs-records_table">
            <el-table :data="tableData.data.data" border style="width: 100%">
                <el-table-column prop="id"  label="ID" width="80"></el-table-column>
                <el-table-column prop="points"  label="消耗点数" width="120"></el-table-column>
                <el-table-column prop="remaining_points"  label="剩余点数" width="120"></el-table-column>
                <el-table-column prop="url"  label="访问地址"></el-table-column>
                <el-table-column prop="parameter_str"  label="查询参数"></el-table-column>
                {{--<el-table-column label="查询参数" >--}}
                    {{--<template slot-scope="{row}">--}}
                        {{--<p v-text="JSON.stringify(row.parameter)"></p>--}}
                    {{--</template>--}}
                {{--</el-table-column>--}}
                <el-table-column prop="created_at"  label="查询日期" width="200"></el-table-column>
            </el-table>
        </div>

        <div class="customs-records_page">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="params.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.data.total">
            </el-pagination>
        </div>
    </div>
@endsection

@section('foot')
    <script src="{{ asset('data/assets/js/customs.js') }}"></script>
    <script src="{{ asset('data/assets/js/element-ui.js') }}"></script>
    <script>
        var apiUrl  = "{{ config('setting.api_url') }}";
        const recordsVue = new Vue({
            el: '#main-view',
            data () {
                return {
                    loading: false,
                    tableData: null,
                    homeUrl: HOME_URL,
                    params: {
                        page: 1,
                        limit: 10
                    }
                }
            },
            mounted () {
                this.fetchData();
            },
            computed: {
                consumptionPoints () {
                    return this.tableData.count.total_customs_data_number - this.tableData.count.customs_data_number;
                }
            },
            methods: {
                handleSizeChange (v) {
                    this.params.limit = v;
                    this.fetchData();
                },
                handleCurrentChange (v) {
                    this.params.page = v;
                    this.fetchData();
                },
                fetchData () {
                    this.loading = true;
                    axios.get(apiUrl + '/customs/expense', {
                        params: this.params
                    }).then(res => {
                        this.tableData = res.data;
                        this.loading = false;
                    }).catch(err => {
                        this.loading = false;
                    })
                }
            }
        })
    </script>
@endsection