<template>
    <div class="w-full h-full">
        <div class="grid grid-cols-12 h-full text-sm">
            <el-card class="box-card col-span-3">
                <h1 slot="header" class="clearfix text-xl">
                    动态排序柱状图生成器
                </h1>
                <div id="el-config" class="align-middle">
                    <!-- <div class="my-3">
                        <el-button onclick="run()" size="medium">运行</el-button>
                        <el-button size="medium">导出</el-button>
                    </div> -->
                    <el-form ref="form">
                        <div class="grid grid-cols-3 form-row">
                            <label class="col-span-1">标题</label>
                            <el-input
                                id="input-title"
                                value="汽车产量动态排名"
                                size="medium"
                                class="col-span-2"
                                v-model="title"
                            >
                            </el-input>
                        </div>
                        <div class="grid grid-cols-3 form-row">
                            <label class="col-span-1">显示排名上限</label>
                            <el-input
                                id="input-max"
                                type="number"
                                value=""
                                size="medium"
                                class="col-span-2"
                                v-model="maxDataCnt"
                            >
                            </el-input>
                        </div>
                        <div class="grid grid-cols-3 form-row">
                            <label class="col-span-1">显示排名上限</label>
                            <el-input
                                id="input-animation-duration"
                                type="number"
                                value="5000"
                                size="medium"
                                class="col-span-2"
                                v-model="animationDuration"
                            >
                            </el-input>
                        </div>
                    </el-form>
                </div>
            </el-card>
            <el-card
                class="box-card col-span-4 relative"
                body-style="height: 100%"
            >
                <BTable
                    @after-change="tableAfterChange"
                />
            </el-card>
            <el-card
                class="box-card col-span-5 relative"
                body-style="height: 100%"
            >
                <BChart
                    :title="title"
                    :chartData="chartData"
                    :maxDataCnt="maxDataCnt"
                    :animationDuration="animationDuration"
                />
            </el-card>
        </div>
    </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import BTable, {ChartData} from './BTable.vue';
import BChart from './BChart.vue';

export default defineComponent({
    name: 'BBody',
    data() {
        return {
            title: '汽车销量',
            maxDataCnt: null,
            chartData: null,
            animationDuration: 5000
        }
    },
    components: {
        BTable,
        BChart
    },
    mounted: () => {
    },
    methods: {
        tableAfterChange(data: ChartData) {
            this.chartData = data;
        }
    }
})
</script>

<style scoped>
@layer utilities {
    .form-row {
        @apply my-3;

        label {
            @apply py-1;
        }
    }

    .box-card {
        @apply m-1;
    }
}
</style>