<template>
    <div>
        <el-select v-model="formData[searchBox.id]" :multiple="searchBox.multiple == '1'"
                   :style="{'width':searchBox.searchBoxWidth?searchBox.searchBoxWidth+'px':'100%'}"
                   v-if="searchBox.showStyle == 'select'" collapse-tags :popper-class="skinType === 'dark' ? 'listview-dark' : ''">
            <el-option v-for="(item,index) in searchBox.extend" :key="index" :value="item.id" :label="item.name">

            </el-option>
        </el-select>
        <div v-if="searchBox.showStyle == 'tiling'" style="height:33px;border: 1px solid #DCDFE6;border-radius: 4px;box-sizing: border-box;padding: 0 15px">
            <el-radio-group v-model="formData[searchBox.id]" v-if="searchBox.multiple == '0'">
                <el-radio v-for="(item,index) in searchBox.extend" :key="index" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
            <el-checkbox-group v-model="formData[searchBox.id]" v-if="searchBox.multiple == '1'">
                <el-checkbox v-for="(item,index) in searchBox.extend" :key="index" :label="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </div>
    </div>
</template>

<script>
    export default {
        name: "pl-group-search",
        props:["searchBox","formData","skinType"],
        created() {

        }
    }
</script>

<style scoped>

</style>
