<template>
    <div class="chart-wrap">
        <div class="banner2">
            <div>
                <p style="color:#1c7ed6">물류운송</p>
                <p style="color:#0d426d">데이터 시각화</p>
            </div>
        </div>
        <div class="chart-zone">
            <div class="content-box">
                <div class="chart-title">
                    <div class="flex">
                        <p>각 시도별 평균, 최소, 최대 이동거리</p>
                        <select name="" id="" v-model="distanceMonth" @change="distanceMonthChange()">
                            <option :value=null disabled>전체</option>
                            <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}월</option>
                        </select>
                    </div>
                </div>
                <MultiBarChart :setData="distanceList" :mapping="keyMapping" columnX="city" :color="['#e67700', '#339af0']" />
                <table v-if="distanceList.length != 0">
                    <tr>
                        <th></th>
                        <th v-for="(item, index) in distanceList" :key="index">{{ item.city }}</th>
                    </tr>
                    <tr>
                        <th class="max-title">최대</th>
                        <td v-for="(item, index) in distanceList" :key="index">{{ item.maximum }}</td>
                    </tr>
                    <tr>
                        <th class="avg-title">평균</th>
                        <td v-for="(item, index) in distanceList" :key="index">{{ item.average }}</td>
                    </tr>
                    <tr>
                        <th class="min-title">최소</th>
                        <td v-for="(item, index) in distanceList" :key="index">{{ item.minimum }}</td>
                    </tr>
                </table>
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div class="flex">
                        <p>각 시도별 평균, 최소, 최대 소요시간</p>
                        <select name="" id="" v-model="timeMonth" @change="useTimeMonthChange()">
                            <option :value=null disabled>전체</option>
                            <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}월</option>
                        </select>
                    </div>
                </div>
                <MultiBarChart :setData="useTimeList" :mapping="keyMapping" columnX="city" :color="['#e67700', '#339af0']" />
                <table v-if="useTimeList.length != 0">
                    <tr>
                        <th></th>
                        <th v-for="(item, index) in useTimeList" :key="index">{{ item.city }}</th>
                    </tr>
                    <tr>
                        <th class="max-title">최대</th>
                        <td v-for="(item, index) in useTimeList" :key="index">{{ item.maximum }}</td>
                    </tr>
                    <tr>
                        <th class="avg-title">평균</th>
                        <td v-for="(item, index) in useTimeList" :key="index">{{ item.average }}</td>
                    </tr>
                    <tr>
                        <th class="min-title">최소</th>
                        <td v-for="(item, index) in useTimeList" :key="index">{{ item.minimum }}</td>
                    </tr>
                </table>
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div>
                        <p>지역별 배송 건수</p>
                    </div>
                </div>
                <PieChart :setData="deliveriesCountList" />
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div>
                        <p>지역별 평균 이동 시간</p>
                    </div>
                </div>
                <NetworkingChart :setData="travelTimeList" />
            </div>
        </div>
    </div>
</template>

<script>

import MultiBarChart from '../../components/MultiBarChart.vue';
import PieChart from '../../components/PeiChart.vue';
import NetworkingChart from '../../components/NetworkingChart.vue';
import axios from 'axios';

export default {
    data() {
        return {
            months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],

            keyMapping : {
                maximum: '최대',
                minimum: '최소',
                average: '평균'
            },

            distanceMonth: null,
            timeMonth: null,

            distanceList: [],
            useTimeList: [],
            deliveriesCountList: [],
            travelTimeList: {},
        }
    },
    methods: {
        travelDistance: function(){
            const vm = this;
            axios({
                url: '/meatKorea/travelDistance.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: {distanceMonth : vm.distanceMonth}
            }).then(function(response) {
                vm.distanceList = response.data;
                console.log('distanceList', vm.distanceList.length)
            }).catch(function() {
                alert("각 시도별 평균, 최소, 최대 이동거리 조회 오류, 관리자에게 문의 바랍니다.")
            })
        },
        
        distanceMonthChange: function() {
            this.travelDistance();
        },

        useTime: function(){
            const vm = this;
            axios({
                url: '/meatKorea/useTime.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: {timeMonth : vm.timeMonth}
            }).then(function(response) {

                vm.useTimeList = response.data;
            }).catch(function() {
                alert("각 시도별 평균, 최소, 최대 소요시간 조회 오류, 관리자에게 문의 바랍니다.")
            })
        },

        useTimeMonthChange: function() {
            this.useTime();
        },

        deliveriesCount: function(){
            const vm = this;
            axios({
                url: '/meatKorea/deliveriesCount.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
            }).then(function(response) {
                vm.deliveriesCountList = response.data;
            }).catch(function() {
                alert("지역별 배송 건수 조회 오류, 관리자에게 문의 바랍니다.")
            })
        },

        travelTime: function(){
            const vm = this;
            axios({
                url: '/meatKorea/travelTime.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
            }).then(function(response) {
                const travelTime = {};
                travelTime.city = '경북영천시고경면삼포리';
                travelTime.children = response.data;
                vm.travelTimeList = travelTime;
            }).catch(function() {
                alert("지역별 평균 이동 시간 조회 오류, 관리자에게 문의 바랍니다.")
            })
        },
    },
    watch: {

    },
    computed: {},
    components: {
        'MultiBarChart': MultiBarChart,
        'PieChart': PieChart,
        'NetworkingChart':NetworkingChart
    },
    mounted() {
        this.travelDistance();
        this.useTime();
        this.deliveriesCount();
        this.travelTime();
    }
}
</script>
