<template>
    <el-card>
        FILTER BY YEAR :
        <el-select placeholder="Year" v-model="year" multiple filterable default-first-option>
            <el-option :value="y" :label="y" v-for="y in filterYear.start" :key="y"></el-option>
        </el-select>
        <br>
        <br>
        <table class="table text-white">
            <thead>
                <tr>
                    <th class="text-center bg-secondary" style="width:20%">DRAFT</th>
                    <th class="text-center bg-success" style="width:20%">FINAL</th>
                    <th class="text-center bg-danger" style="width:20%">VOID</th>
                    <th class="text-center bg-primary" style="width:20%">FINISH</th>
                    <th class="text-center bg-dark" style="width:20%">TOTAL</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="big-info bg-secondary">{{contractAll.draft}}</td>
                    <td class="big-info bg-success">{{contractAll.final}}</td>
                    <td class="big-info bg-danger">{{contractAll.void}}</td>
                    <td class="big-info bg-primary">{{contractAll.finish}}</td>
                    <td class="big-info bg-dark">{{contractAll.total}}</td>
                </tr>
            </tbody>
        </table>
        <h4>Top 10 Contract Based On Unit</h4>
        <br>
        <div class="row">
            <div class="col-md-7">
                <v-chart :options="chartByUnit" class="echarts"></v-chart>
            </div>
            <div class="col-md-5">
                <table class="table table-bordered table-sm bg-secondary text-white table-sm">
                    <thead>
                        <tr>
                            <th>UNIT</th>
                            <th class="text-center">DRAFT</th>
                            <th class="text-center">FINAL</th>
                            <th class="text-center">VOID</th>
                            <th class="text-center">FINISH</th>
                            <th class="text-center bg-success">TOTAL</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(c,i) in contractByUnit" :key="i">
                            <td>{{c.unit}}</td>
                            <td class="text-center">{{c.draft}}</td>
                            <td class="text-center">{{c.final}}</td>
                            <td class="text-center">{{c.void}}</td>
                            <td class="text-center">{{c.finish}}</td>
                            <td class="text-center bg-success">{{c.total}}</td>
                        </tr>
                    </tbody>
                    <!-- <tfoot class="bg-success">
                        <tr>
                            <td>TOTAL</td>
                            <td class="text-center">{{totalByUnit.draft}}</td>
                            <td class="text-center">{{totalByUnit.final}}</td>
                            <td class="text-center">{{totalByUnit.void}}</td>
                            <td class="text-center">{{totalByUnit.finish}}</td>
                            <td class="text-center bg-success">{{totalByUnit.total}}</td>
                        </tr>
                    </tfoot> -->
                </table>
            </div>
        </div>

        <h4>Top 10 Contract Based On Partner </h4>
        <br>
        <div class="row">
            <div class="col-md-7">
                <v-chart :options="chartByPartner" class="echarts"></v-chart>
            </div>
            <div class="col-md-5">
                <table class="table table-bordered table-sm bg-secondary text-white">
                    <thead>
                        <tr>
                            <th>PARTNER</th>
                            <th class="text-center">DRAFT</th>
                            <th class="text-center">FINAL</th>
                            <th class="text-center">VOID</th>
                            <th class="text-center">FINISH</th>
                            <th class="text-center bg-success">TOTAL</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(c, i) in contractByPartner" :key="i">
                            <td>{{c.partner}}</td>
                            <td class="text-center">{{c.draft}}</td>
                            <td class="text-center">{{c.final}}</td>
                            <td class="text-center">{{c.void}}</td>
                            <td class="text-center">{{c.finish}}</td>
                            <td class="text-center bg-success">{{c.total}}</td>
                        </tr>
                    </tbody>
                    <!-- <tfoot class="bg-success">
                        <tr>
                            <td>TOTAL</td>
                            <td class="text-center">{{totalByPartner.draft}}</td>
                            <td class="text-center">{{totalByPartner.final}}</td>
                            <td class="text-center">{{totalByPartner.void}}</td>
                            <td class="text-center">{{totalByPartner.finish}}</td>
                            <td class="text-center">{{totalByPartner.total}}</td>
                        </tr>
                    </tfoot> -->
                </table>
            </div>
        </div>

        <h4> Contract Based On User </h4>
        <br>
        <div class="row">
            <div class="col-md-7">
                <v-chart :options="chartByUser" class="echarts"></v-chart>
            </div>
            <div class="col-md-5">
                <table class="table table-bordered table-sm bg-secondary text-white">
                    <thead>
                        <tr>
                            <th>USER</th>
                            <th class="text-center">DRAFT</th>
                            <th class="text-center">FINAL</th>
                            <th class="text-center">VOID</th>
                            <th class="text-center">FINISH</th>
                            <th class="text-center bg-success">TOTAL</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(c, i) in contractByUser" :key="i">
                            <td>{{c.user}}</td>
                            <td class="text-center">{{c.draft}}</td>
                            <td class="text-center">{{c.final}}</td>
                            <td class="text-center">{{c.void}}</td>
                            <td class="text-center">{{c.finish}}</td>
                            <td class="text-center bg-success">{{c.total}}</td>
                        </tr>
                    </tbody>
                    <!-- <tfoot class="bg-success">
                        <tr>
                            <td>TOTAL</td>
                            <td class="text-center">{{totalByUser.draft}}</td>
                            <td class="text-center">{{totalByUser.final}}</td>
                            <td class="text-center">{{totalByUser.void}}</td>
                            <td class="text-center">{{totalByUser.finish}}</td>
                            <td class="text-center bg-success">{{totalByUser.total}}</td>
                        </tr>
                    </tfoot> -->
                </table>
            </div>
        </div>
    </el-card>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'

export default {
    watch: {
        year: function(v, o) {
            if (v) {
                this.requestData()
            }
        }
    },
    components: { 'v-chart': ECharts },
    computed: {
        loading() {
            return this.$store.state.loading
        },
        filterYear() {
            return this.$store.state.filterYear
        }
    },
    data: function() {
        return {
            year: '',
            chartByUnit: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: {
                    x: 'right',
                    orient: 'vertical'
                },
                grid: {
                    right: '200px',
                    left: '3%',
                    bottom: '0px',
                    top: '15px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data:['Draft', 'Final', 'Void', 'Finish'],
                },
                yAxis: { type: 'value' },
                series: []
            },
            chartByPartner: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: {
                    x: 'right',
                    orient: 'vertical'
                },
                grid: {
                    right: '200px',
                    left: '3%',
                    bottom: '0px',
                    top: '15px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data:['Draft', 'Final', 'Void', 'Finish'],
                },
                yAxis: { type: 'value' },
                series: []
            },
            chartByUser: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: {
                    x: 'right',
                    orient: 'vertical'
                },
                grid: {
                    right: '200px',
                    left: '3%',
                    bottom: '0px',
                    top: '15px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data:['Draft', 'Final', 'Void', 'Finish'],
                },
                yAxis: { type: 'value' },
                series: []
            },
            contractByPartner: [],
            contractByUnit: [],
            contractByUser: [],
            contractAll: [],
            totalByUnit: {
                draft: 0,
                final: 0,
                finish: 0,
                void: 0,
                total: 0
            },
            totalByPartner: {
                draft: 0,
                final: 0,
                finish: 0,
                void: 0,
                total: 0
            },
            totalByUser: {
                draft: 0,
                final: 0,
                finish: 0,
                void: 0,
                total: 0
            }
        }
    },
    methods: {
        requestData: function() {
            let _this = this
            _this.totalByUnit = {
                draft: 0,
                final: 0,
                finish: 0,
                void: 0,
                total: 0
            }

            _this.totalByPartner = {
                draft: 0,
                final: 0,
                finish: 0,
                void: 0,
                total: 0
            }

            _this.totalByUser = {
                draft: 0,
                final: 0,
                finish: 0,
                void: 0,
                total: 0
            }

            axios.get(API_URL + '/contract/summary', {
                params : {
                    year: _this.year,
                    api_token: USER.api_token
                }
            }).then(function(r) {
                _this.contractByPartner = r.data.contractByPartner
                _this.contractByUnit = r.data.contractByUnit
                _this.contractByUser = r.data.contractByUser
                _this.contractAll = r.data.contractAll[0]
                _this.chartByPartner.series = []
                _this.chartByUser.series = []
                _this.chartByUnit.series = []

                _this.contractByPartner.forEach(function(c) {
                    _this.totalByPartner.draft += parseInt(c.draft)
                    _this.totalByPartner.final += parseInt(c.final)
                    _this.totalByPartner.finish += parseInt(c.finish)
                    _this.totalByPartner.void += parseInt(c.void)
                    _this.chartByPartner.series.push({
                        name: c.partner,
                        type: 'bar',
                        barGap: 0,
                        data: [parseInt(c.draft), parseInt(c.final), parseInt(c.void), parseInt(c.finish)],
                        label: { show: true, position: 'top', }
                    })
                })
                _this.totalByPartner.total = _this.totalByPartner.draft + _this.totalByPartner.final + _this.totalByPartner.finish + _this.totalByPartner.void

                _this.contractByUnit.forEach(function(c) {
                    _this.totalByUnit.draft += parseInt(c.draft)
                    _this.totalByUnit.final += parseInt(c.final)
                    _this.totalByUnit.finish += parseInt(c.finish)
                    _this.totalByUnit.void += parseInt(c.void)
                    _this.chartByUnit.series.push({
                        name: c.unit,
                        type: 'bar',
                        barGap: 0,
                        data: [parseInt(c.draft), parseInt(c.final), parseInt(c.void), parseInt(c.finish)],
                        label: { show: true, position: 'top', }
                    })
                })

                _this.totalByUnit.total = _this.totalByUnit.draft + _this.totalByUnit.final + _this.totalByUnit.finish + _this.totalByUnit.void

                _this.contractByUser.forEach(function(c) {
                    _this.totalByUser.draft += parseInt(c.draft)
                    _this.totalByUser.final += parseInt(c.final)
                    _this.totalByUser.finish += parseInt(c.finish)
                    _this.totalByUser.void += parseInt(c.void)
                    _this.chartByUser.series.push({
                        name: c.user,
                        type: 'bar',
                        barGap: 0,
                        data: [parseInt(c.draft), parseInt(c.final), parseInt(c.void), parseInt(c.finish)],
                        label: { show: true, position: 'top', }
                    })
                })

                _this.totalByUser.total = _this.totalByUser.draft + _this.totalByUser.final + _this.totalByUser.finish + _this.totalByUser.void

            })
        }
    },
    mounted: function() {
        this.requestData()
        this.$store.commit('getFilterYear')
    }
}
</script>

<style lang="css" scoped>
.echarts {
    width:100%;
    height:300px;
    margin:15px 0;
    padding-bottom:15px;
}

h4 {
    background-color: #396080;
    color: #fff;
    padding: 10px 10px 10px 20px;
}

td.big-info {
    font-size: 3em;
    text-align: center;
    font-weight: lighter;
}
</style>
