<template>
    <div class="container ">
        <div class="box">
            <div class="bg">
                <div class="bt">
                    <h2 style="margin-top: -5px;">“我心目中的三基标杆”</h2>
                    <p>
                        为深化落实油田党委“分专业打造一批三基标杆
                        样板，培育精细精益文化，促进基层基础管理水平持续提升”部署安排，在直属单位有序打造、自主申报，标杆打造项目组统筹推进、精准指导，油田相关部门综合评议、择优推荐的基础上，
                        对照“党建过得硬、文化底蕴深、底板夯得实、管理水平高、经营绩效好”三基标杆标准，突出板块代表性、区域辐射性和重点工作导向性，优选了一批油田三基标杆备选基层单位。请您为“我
                        心目中的三基标杆”投票，作为三基标杆评选的参考依据。
                    </p>
                </div>
                <div class="content">
                    <p>
                        一、活动目的 推动油田三基标杆打造走深走实，扩大标杆影响力，增加全 员参与度，全面营造创标杆、当标杆的热度和声势。
                    </p>
                    <p>
                        二、活动形式 在“奋进胜利”开设“我心目中的三基标杆”专栏，展示三 基标杆备选单位风采，员工自发投票。
                    </p>
                    <p>
                        三、活动时间 10 月 14 日 - 10 月 20 日，为期一周。
                    </p>
                    <p>
                        四、投票规则 每人只投一次，每次投 10-12 个单位，各板块至少选 1 家。
                    </p>
                </div>
                <div class="tpxx">
                    <h2 style="margin-left: 20px;">三基标杆备选单位</h2>
                    <el-row class="row">
                        <el-col :span="3" class="text">油气生产单位</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="98px">
                                <el-col :span="5" v-for="(unit, index) in oilGasProduction" :key="index">
                                    <el-form-item label-position="top">
                                        <el-checkbox-group v-model="form.yqsc" class="checkbox-group-inline">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col :span="3" class="text">科研</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="98px">
                                <el-col :span="5" v-for="(unit, index) in research" :key="index">
                                    <el-form-item>
                                        <el-checkbox-group v-model="form.ky">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col :span="3" class="text">专业化</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="108px">
                                <el-form-item>
                                    <el-col :span="5" v-for="(unit, index) in specialization" :key="index">
                                        <el-checkbox-group v-model="form.zyh">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-col>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col :span="3" class="text">服务</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="98px">
                                <el-col :span="5" v-for="(unit, index) in serviceCoordination" :key="index">
                                    <el-form-item>
                                        <el-checkbox-group v-model="form.fw">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-col>

                    </el-row>
                </div>
                <div class="tpxx">
                    <h2 style="margin-left: 20px;">三基标杆备选单位</h2>
                    <el-row class="row">
                        <el-col :span="3" class="text">油气生产单位</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="98px">
                                <el-col :span="5" v-for="(unit, index) in oilGasProduction" :key="index">
                                    <el-form-item label-position="top">
                                        <el-checkbox-group v-model="form.yqsc" class="checkbox-group-inline">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col :span="3" class="text">科研</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="98px">
                                <el-col :span="5" v-for="(unit, index) in research" :key="index">
                                    <el-form-item>
                                        <el-checkbox-group v-model="form.ky">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col :span="3" class="text">专业化</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="108px">
                                <el-form-item>
                                    <el-col :span="5" v-for="(unit, index) in specialization" :key="index">
                                        <el-checkbox-group v-model="form.zyh">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-col>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col :span="3" class="text">服务</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="98px">
                                <el-col :span="5" v-for="(unit, index) in serviceCoordination" :key="index">
                                    <el-form-item>
                                        <el-checkbox-group v-model="form.fw">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-col>

                    </el-row>
                </div>
                <div class="tpxx">
                    <h2 style="margin-left: 20px;">三基标杆备选单位</h2>
                    <el-row class="row">
                        <el-col :span="3" class="text">油气生产单位</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="98px">
                                <el-col :span="5" v-for="(unit, index) in oilGasProduction" :key="index">
                                    <el-form-item label-position="top">
                                        <el-checkbox-group v-model="form.yqsc" class="checkbox-group-inline">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col :span="3" class="text">科研</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="98px">
                                <el-col :span="5" v-for="(unit, index) in research" :key="index">
                                    <el-form-item>
                                        <el-checkbox-group v-model="form.ky">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col :span="3" class="text">专业化</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="108px">
                                <el-form-item>
                                    <el-col :span="5" v-for="(unit, index) in specialization" :key="index">
                                        <el-checkbox-group v-model="form.zyh">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-col>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col :span="3" class="text">服务</el-col>
                        <el-col :span="21">
                            <el-form :model="form" ref="checkList" size="small" :inline="true" label-width="98px">
                                <el-col :span="5" v-for="(unit, index) in serviceCoordination" :key="index">
                                    <el-form-item>
                                        <el-checkbox-group v-model="form.fw">
                                            <el-checkbox :label="unit.name">
                                                {{ unit.name }}♦{{ unit.management }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-col>

                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ThreeBaseBenchmark",
    data() {
        return {
            form: {
                yqsc: [],// 用于存储选中的单位
                ky: [],
                zyh: [],
                fw: [],

            },
            selectedUnits: {
                oilGasProduction: [],
                research: [],
                specialization: [],
                serviceCoordination: []
            },
            oilGasProduction: [
                { name: '海洋采油厂', management: '海二采油管理区' },
                { name: '纯梁采油厂', management: '梁南采油管理区' },
                { name: '孤岛采油厂', management: '采油管理五区' },
                { name: '东辛采油厂', management: '营二采油管理区' },
                { name: '桩西采油厂', management: '采油管理三区' },
                { name: '鲁明公司', management: '青南采油管理区' },
                { name: '胜利采油厂', management: '采油管理三区' },
                { name: '油气集输总厂', management: '东营原油库' },
                { name: '现河采油厂', management: '郝现采油管理区' },
                { name: '东胜公司', management: '牛庄采油管理区' }
            ],
            research: [
                { name: '勘探开发研究院', management: '采收率试验室' },
                { name: '石油工程技术研究院', management: '稠油开采研究所' }
            ],
            specialization: [
                { name: '油气井下作业中心', management: '东辛作业区' },
                { name: '运输分公司', management: '危化品运输二公司' },
                { name: '电力分公司', management: '胜东供电管理区' },
                { name: '注汽技术服务中心', management: '现河注汽项目部' },
                { name: '胜利发电厂', management: '发电运行部' },
                { name: '油藏动态监测中心', management: '工程测井项目部' },
                { name: '矿区物业服务中心', management: '物华矿区物业服务部' }
            ],
            serviceCoordination: [
                { name: '西城服务协调中心', management: '员工服务部' }
            ]
        };
    },
    computed: {
        isValidSelection() {
            // 至少选择1家来自每个板块，最多选择12个单位
            const oilAndGasSelected = this.selectedUnits.filter(unit => this.oilAndGasUnits.some(o => o.label === unit)).length > 0;
            const researchSelected = this.selectedUnits.filter(unit => this.researchUnits.some(r => r.label === unit)).length > 0;
            const specializedSelected = this.selectedUnits.filter(unit => this.specializedUnits.some(s => s.label === unit)).length > 0;
            const serviceSelected = this.selectedUnits.filter(unit => this.serviceUnits.some(s => s.label === unit)).length > 0;

            return oilAndGasSelected && researchSelected && specializedSelected && serviceSelected &&
                this.selectedUnits.length >= 10 && this.selectedUnits.length <= 12;
        },
    },
    methods: {
        validateSelection() {
            if (!this.isValidSelection) {
                this.$message.warning('请确保每个板块至少选择一项，并且总数在 10-12 个之间。');
            }
        },
        submitVote() {
            this.submitted = true;
            console.log('Submitted vote:', this.selectedUnits);
        },
    },
};
</script>

<style scoped>
.text {
    text-align: right;
}

.row {
    margin-left: -60px;
}

.checkbox-group-inline {
    display: flex;
    flex-wrap: wrap;
    /* 如果复选框数量较多，可以换行 */
}

.checkbox-group-inline .el-checkbox {
    margin-right: 10px;
    /* 给复选框之间增加一些间距 */
}

.box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    background-image: url(../../assets/images/beijing.png) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #F55202;

}

.container {
    max-width: 100vw;
    overflow-y: hidden;
}


.bg {
    padding-bottom: 20px;
    height: 100vh;
    position: fixed;
    width: 100%;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.65) 100%);
}

h1 {
    text-align: center;
    color: #333;
}

.toptit {
    background-color: transparent;
    border-radius: 8px 8px 0 0;
}

.content {
    margin: 20px auto;
    max-width: 70%;
    padding: 20px;
    background-color: #f0f8ff;
    /* 设置背景色 */
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

.bt {
    margin: 20px auto;
    max-width: 70%;
    padding: 20px;
    background-color: #f0f8ff;
    /* 设置背景色 */
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    line-height: 40px;
    text-align: center;
    overflow-y: auto;
    /* 允许垂直滚动 */
}

.tpxx {
    margin: 20px auto;
    max-width: 70%;
    padding: 10px;
    background-color: #f0f8ff;
    /* 设置背景色 */
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}


h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
    /* 增加标题与段落的间距 */
}

p {
    font-size: 16px;
    color: #555;
    /* 设置段落文字颜色 */
    line-height: 1.6;
    /* 增加段落行间距 */
}
</style>
