<template>
    <div class="app-container">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="机型">
                <el-select v-model="formInline.aircraftType" placeholder="机型">
                    <el-option v-for="(item, index) in aircraftTypes" :key="index" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="飞机号">
                <el-select v-model="formInline.aircraftNo" placeholder="飞机号">
                    <el-option v-for="(item, index) in aircraftNos" :key="index" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="专业">
                <el-select v-model="formInline.specialty" placeholder="专业">
                    <el-option v-for="(item, index) in specialties" :key="index" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item> -->
            
            <el-form-item label="时间范围">
                <el-date-picker v-model="selectDate" type="daterange" align="right" unlink-panels range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="12" v-if="false">
            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="card-title">故障数量</div>
                    <div class="card-content">12</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="card-title">严重数量</div>
                    <div class="card-content">12</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="card-title"> 高发专业</div>
                    <div class="card-content">机械</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="card-title"> 高发时机</div>
                    <div class="card-content">飞行中</div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="32" style="margin-top: 20px;">
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="chart-wrapper">
                    <bar-chart :chartData="systemChart" />
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="chart-wrapper">
                    <bar-chart :chartData="modChart" />
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="chart-wrapper">
                    <bar-chart :chartData="levelChart" />
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="chart-wrapper">
                    <bar-chart :chartData="timeChart" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import BarChart from './barChart'
import { getSingleChart, getAircraftTypes, getAircraftNos, getSpecialties } from '@/api/chart/index'

export default {
    name: "singleCharts",
    components: {
        BarChart
    },
    data() {
        return {
            formInline: {
                aircraftType: '',
                aircraftNo: '',
                // specialty: '',
                startDate:'',
                endDate: '',
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            selectDate: '',
            aircraftTypes: [], // Array to store aircraft types
            aircraftNos: [],   // Array to store aircraft numbers
            specialties: [],
            systemChart: {
            },
            modChart: {
            },
            levelChart: {
            },
            timeChart: {
            }
        };
    },
    mounted() {
        // Call the APIs to fetch aircraft types and numbers on component mount
        this.fetchAircraftTypes();
        this.fetchAircraftNos();
        // this.fetchGetSpecialties();
        this.getSingChart()
    },
    methods: {
        async fetchAircraftTypes() {
            try {
                const response = await getAircraftTypes();
                if (response && response.data) {
                    this.aircraftTypes = response.data;
                }
            } catch (error) {
                console.error('Failed to fetch aircraft types', error);
            }
        },
        async fetchAircraftNos() {
            try {
                const response = await getAircraftNos();
                if (response && response.data) {
                    this.aircraftNos = response.data;
                }
            } catch (error) {
                console.error('Failed to fetch aircraft numbers', error);
            }
        },
        async fetchGetSpecialties() {
            try {
                const response = await getSpecialties();
                if (response && response.data) {
                    this.specialties = response.data;
                }
            } catch (error) {
                console.error('Failed to fetch aircraft numbers', error);
            }
        },
        getSingChart() {
            getSingleChart(this.formInline).then((res)=> {
                console.log(res)
                this.updateCharts(res.data)
            })
        },
        onSubmit() {
            this.formInline.startDate = this.selectDate[0]
            this.formInline.endDate = this.selectDate[1]
            console.log(this.formInline)
            console.log(this.selectDate)
            this.getSingChart()
        },
        updateCharts(data) {
            this.systemChart = {
                title: {
                    text: '系统故障统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                xAxis: {
                    type: 'category',
                    data: data.systemFaultStatsByStandAlone.xAxis || []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '系统故障统计',
                        type: 'bar',
                        data: data.systemFaultStatsByStandAlone.yAxis || [],
                        itemStyle: {
                            color: '#34c38f' // 绿色
                        }
                    }
                ]
            };

            this.modChart = {
                title: {
                    text: '机件故障统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                xAxis: {
                    type: 'category',
                    data: data.partFaultStatsByStandAlone.xAxis || []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '机件故障统计',
                        type: 'bar',
                        data: data.partFaultStatsByStandAlone.yAxis || [],
                        itemStyle: {
                            color: '#34c38f' // 绿色
                        }
                    }
                ]
            };

            this.levelChart = {
                title: {
                    text: '专业故障统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                xAxis: {
                    type: 'category',
                    data: data.specialtyFaultStatsByStandAlone.xAxis || []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '专业故障统计',
                        type: 'bar',
                        data: data.specialtyFaultStatsByStandAlone.yAxis || [],
                        itemStyle: {
                            color: '#34c38f' // 绿色
                        }
                    }
                ]
            };

            this.timeChart = {
                title: {
                    text: '故障地点统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                xAxis: {
                    type: 'category',
                    data: data.locationFaultStatsByStandAlone.xAxis || []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '故障地点统计',
                        type: 'bar',
                        data: data.locationFaultStatsByStandAlone.yAxis || [150, 200, 220],
                        itemStyle: {
                            color: '#34c38f' // 绿色
                        }
                    }
                ]
            };
        },
    }
};
</script>

<style lang="scss" scoped>
.card-content {
    font-size: 12px;
    margin-top: 12px;
    color: #1890ff;
}
</style>
