<template>
    <div class="chart-wrap">
        <div class="banner">
            <div>
                <p>가공도구 마모</p>
                <p>데이터 시각화</p>
            </div>
        </div>
        <div class="chart-zone">
            <div class="content-box">
                <div class="chart-title">
                    <div class="flex">
                        <p>월별 평균 길이 Z축 마모</p>
                        <select name="" id="">
                            <option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
                        </select>
                    </div>
                </div>
                <VerticalBarChart :chartData="emptyData" xField="month" yField="value" />
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div class="flex">
                        <p>시간대별 평균 길이 Z축 마모</p>
                        <select name="" id="">
                            <option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
                        </select>
                    </div>
                </div>
                <VerticalBarChart :chartData="emptyTimeData" :xField="'time'" :yField="'value'" :color="['#1c7ed6','#74c0fc','#1864ab']" />
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div>
                        <p>가동시간에 따른 각 툴별(도구) 길이 Z축 마모</p>
                    </div>
                </div>
                <LineChart :chartData="emptyLineData" :keyMapping="lineDataKeyMapping" :xField="lineDataKeyMapping.date" />
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div>
                        <p>가동시간에 따른 각 툴별(도구) 길이 X축 형상마모</p>
                    </div>
                </div>
                <LineChart :chartData="emptyLineData" :keyMapping="lineDataKeyMapping" :xField="lineDataKeyMapping.date" />
            </div>
        </div>
    </div>
</template>

<script>
import VerticalBarChart from '../../components/VerticalBarChart.vue';
import LineChart from '../../components/LineChart.vue';

export default {
    data() {
        return {
            tools: ["T1", "T2", "T3", "T4", "T5"],
            // 월별 데이터
            emptyData: [],
            monthToolData: [
                { month: "2023.11", value: 300 }

            ],
            // 시간대별
            emptyTimeData: [],
            timeData: [
                { time: "01", value: 300 },
                { time: "02", value: 300 },
                { time: "03", value: 300 },
                { time: "04", value: 300 },
                { time: "05", value: 300 },
                { time: "06", value: 300 },
                { time: "07", value: 300 },
            ],
            // z축 마모 라인 데이터,
            lineDataKeyMapping: {
                date: "날짜",
                value1: "T1",
                value2: "T2",
                value3: "T3",
            },
            emptyLineData: [],
            lineData: [
                { date: "2023-01-01", value1: 10, value2: 20, value3: 50 },
                { date: "2023-01-02", value1: 15, value2: 25, value3: 50 },
                { date: "2023-01-03", value1: 20, value2: 30, value3: 50 },
            ]
        }
    },
    methods: {
        dataSet: function () {
            this.emptyData = this.monthToolData;
            this.emptyTimeData = this.timeData;
            this.emptyNetData = this.netData;
            this.emptyLineData = this.lineData;
        }
    },
    watch: {

    },
    computed: {},
    components: {
        'VerticalBarChart': VerticalBarChart,
        'LineChart': LineChart
    },
    mounted() {
        this.dataSet();
    }
}
</script>
