<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="" v-model="month_tl_no" @change="monthChange()">
                            <option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
                        </select>
                    </div>
                </div>
                <VerticalBarChart :chartData="monthData" xField="ormpm_month" yField="avg_ofs5" />
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div class="flex">
                        <p>시간대별 평균 길이 Z축 마모</p>
                        <select name="" id="" v-model="time_tl_no" @change="timeChange()">
                            <option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
                        </select>
                    </div>
                </div>
                <VerticalBarChart :chartData="timeData" :xField="'ormpm_hour'" :yField="'avg_ofs5'" :color="['#1c7ed6','#74c0fc','#1864ab']" />
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div>
                        <p>가동시간에 따른 각 툴별(도구) 길이 Z축 마모</p>
                    </div>
                </div>
                <LineChart :chartData="toolZWearData" :xField="'search_date'" />
            </div>
            <div class="content-box">
                <div class="chart-title">
                    <div>
                        <p>가동시간에 따른 각 툴별(도구) 길이 X축 형상마모</p>
                    </div>
                </div>
                <LineChart :chartData="toolXWearData" :xField="'search_date'" />
            </div>
        </div>
    </div>
</template>

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

export default {
    data() {
        return {
            tools: ["T1", "T2", "T3", "T4", "T5", "T6", "T7", "T8"],
            month_tl_no: "T4",
            time_tl_no: "T4",
            // 월별 데이터
            emptyData: [],
            monthData: [],
            // 시간대별
            timeData: [],

            toolZWearData: [],

            toolXWearData: [],
        }
    },
    methods: {
        timeZWear: function(){
            const vm = this;
            axios({
                url: '/hwaSin/timeZWear.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: {tl_no : vm.time_tl_no}
            }).then(function(response) {
                vm.timeData = response.data;
            }).catch(function() {
                alert("시간대별 평균 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
            })
        },

        timeChange: function() {
            this.timeZWear();
        },

        monthZWear: function(){
            const vm = this;
            axios({
                url: '/hwaSin/monthZWear.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: {tl_no : vm.month_tl_no}
            }).then(function(response) {
                vm.monthData = response.data;
            }).catch(function() {
                alert("월별 평균 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
            })
        },
        
        monthChange: function() {
            this.monthZWear();
        },

        toolWear: function() {
            const vm = this;

            axios({
                url: '/hwaSin/toolWear.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
            }).then(function(response) {
                vm.toolZWearData = response.data.toolZWear;
                vm.toolXWearData = response.data.toolXWear;
            }).catch(function() {
                alert("가동시간에 따른 각 툴별(도구) 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
            })
        },



        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();
        this.timeZWear();
        this.monthZWear();
        this.toolWear();
    }
}
</script>
