<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="">
                            <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option>
                        </select>
                    </div>
                </div>
                <MultiBarChart :setData="emptyData" :color="['#339af0','#e67700']" />
                <table>
                    <tr>
                        <th></th>
                        <th>경기</th>
                        <th>경남</th>
                        <th>경북</th>
                        <th>광주</th>
                        <th>대구</th>
                        <th>대전</th>
                        <th>부산</th>
                        <th>서울</th>
                        <th>울산</th>
                        <th>인천</th>
                        <th>전남</th>
                        <th>전북</th>
                        <th>제주</th>
                        <th>충남</th>
                        <th>충북</th>
                    </tr>
                    <tr>
                        <th class="min-title">최소</th>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <th class="avg-title">평균</th>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <th class="max-title">최대</th>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                </table>
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div class="flex">
                        <p>각 시도별 평균, 최소, 최대 소요시간</p>
                        <select name="" id="">
                            <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option>
                        </select>
                    </div>
                </div>
                <MultiBarChart :setData="emptyData" :color="['#339af0','#e67700']" />
                <table>
                    <tr>
                        <th></th>
                        <th>경기</th>
                        <th>경남</th>
                        <th>경북</th>
                        <th>광주</th>
                        <th>대구</th>
                        <th>대전</th>
                        <th>부산</th>
                        <th>서울</th>
                        <th>울산</th>
                        <th>인천</th>
                        <th>전남</th>
                        <th>전북</th>
                        <th>제주</th>
                        <th>충남</th>
                        <th>충북</th>
                    </tr>
                    <tr>
                        <th class="min-title">최소</th>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <th class="avg-title">평균</th>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <th class="max-title">최대</th>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                </table>
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div>
                        <p>지역별 배송 건수</p>
                    </div>
                </div>
                <PieChart :setData="emptyPieData" />
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div>
                        <p>지역별 평균 이동 시간</p>
                    </div>
                </div>
                <NetworkingChart :setData="emptyNetData"  />
            </div>
        </div>
    </div>
</template>

<script>

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

export default {
    data() {
        return {
            months: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
            // 이동 거리 및 소요시간 더미 데이터
            emptyData: {},
            distanceData: {
                경기: {
                    min: 10,
                    max: 35,
                    quantity: 430
                },
                경남: {
                    min: 15,
                    max: 21,
                    quantity: 210
                },
                경북: {
                    min: 25,
                    max: 11,
                    quantity: 265
                },
                광주: {
                    min: 12,
                    max: 15,
                    quantity: 98
                },
                대구: {
                    min: 12,
                    max: 15,
                    quantity: 98
                },
                대전: {
                    min: 12,
                    max: 15,
                    quantity: 98
                },
                부산: {
                    min: 12,
                    max: 15,
                    quantity: 98
                },
                서울: {
                    min: 12,
                    max: 15,
                    quantity: 98
                },
                울산: {
                    min: 12,
                    max: 15,
                    quantity: 98
                },
                인천: {
                    min: 12,
                    max: 15,
                    quantity: 98
                },
                전남: {
                    min: 12,
                    max: 15,
                    quantity: 98
                },
                전북: {
                    min: 12,
                    max: 15,
                    quantity: 98
                },
                제주: {
                    min: 12,
                    max: 15,
                    quantity: 98
                },
                충남: {
                    min: 12,
                    max: 15,
                    quantity: 98
                },
                충북: {
                    min: 12,
                    max: 15,
                    quantity: 98
                }
            },
            // 파이차트 데이터
            emptyPieData: [],
            pieData: [
                { value: 10, category: "One" },
                { value: 9, category: "Two" },
                { value: 6, category: "Three" },
                { value: 5, category: "Four" },
                { value: 4, category: "Five" },
                { value: 3, category: "Six" },
                { value: 1, category: "Seven" }
            ],
            // 네트워크 데이터
            emptyNetData: [],
            netData: {
                name: "경북영천시고경면삼포리",
                children: [
                    { name: "경기", value: 320 },
                    { name: "경남", value: 160 },
                    { name: "경북", value: 40 },
                    { name: "광주", value: 350 },
                    { name: "대구", value: 90 },
                    { name: "대전", value: 250 },
                    { name: "부산", value: 120 },
                    { name: "서울", value: 360 },
                    { name: "울산", value: 85 },
                    { name: "인천", value: 370 },
                    { name: "전남", value: 400 },
                    { name: "전북", value: 300 },
                    { name: "제주", value: 600 },
                    { name: "충남", value: 280 },
                    { name: "충북", value: 230 }
                ]
            }
        }
    },
    methods: {
        dataSet: function () {
            this.emptyData = this.distanceData;
            this.emptyPieData = this.pieData;
           this.emptyNetData=this.netData;
        }
    },
    watch: {

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