<template>
    <div>
        <el-dialog title="选择培训公司" v-model="dialogForm" width="400px">
            <ul class="company-list">
                <li :class="{'active': active == item.id}" @click="active = item.id" class="company-item one_text_detail" v-for="item in companyList" :key="item.id">{{ item.name }}</li>
            </ul>
            <div class="flex just-center mt10">
                <el-button  type="primary" @click="dialogForm = false">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref ,defineExpose} from 'vue';
const dialogForm = ref(false);
const companyList = ref([
    { id: 1, name: '公司A' },
    { id: 2, name: '公司B' },
    { id: 3, name: '公司C' },
]);

const active = ref(null)

const init = (id) => {
    active.value = id;
    dialogForm.value = true;
}

defineExpose({
    init
})
</script>

<style scoped lang="scss">
.company-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 40vh;
    overflow: hidden;
    overflow-y: auto;
    .company-item {
        padding: 10px;
        cursor: pointer;
        line-height: 20px;
        text-align: center;
        border-bottom: 1px solid #eee;
    }
    .active{
        background: #00bfbf;
        color: #fff;
    }
}
</style>
