<template>
    <div class="Crop">
        <header class="header">出栏预测：</header>

        <section class="section">
            <el-select v-model="value" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
            <div class="container">
                <article class="left">
                    <crop-chart-a />
                </article>
                <article class="right">
                    <crop-chart-b />
                </article>
            </div>
        </section>
        <section class="section">
            <el-select v-model="value2" placeholder="请选择">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
            <div class="container">
                <article class="left">
                    <crop-chart-c />
                </article>
                <article class="right">
                    <crop-chart-d />
                </article>
            </div>
        </section>
    </div>
</template>

<script>
import crop_chart_a from "./charts/crop_chart_a";
import crop_chart_b from "./charts/crop_chart_b";
import crop_chart_c from "./charts/crop_chart_c";
import crop_chart_d from "./charts/crop_chart_d";
export default {
    name: "Crop",
    components: {
        "crop-chart-a": crop_chart_a,
        "crop-chart-b": crop_chart_b,
        "crop-chart-c": crop_chart_c,
        "crop-chart-d": crop_chart_d
    },
    data() {
        return {
            options: [
                {
                    value: "选项1",
                    label: "一牧场"
                },
                {
                    value: "选项2",
                    label: "二牧场"
                }
            ],
            options2: [
                {
                    value: "选项1",
                    label: "一舍"
                },
                {
                    value: "选项2",
                    label: "二舍"
                },
                {
                    value: "选项3",
                    label: "三舍"
                },
                {
                    value: "选项4",
                    label: "四舍"
                },
                {
                    value: "选项5",
                    label: "五舍"
                }
            ],
            value: "选项1",
            value2: "选项1"
        };
    },
    created() {},
    methods: {}
};
</script>

<style lang="scss" scoped>
.Crop {
    .header {
        margin-bottom: 15px;
        font-size: 18px;
        font-weight: 600;
        color: #444;
    }
    .section {
        .container {
            display: flex;
            .left {
                width: 40%;
                // border: 1px solid #066;
                overflow: visible;
            }
            .right {
                width: 40%;
                // border: 1px solid rgb(39, 37, 160);
            }
        }
    }
}
</style>
