<template>
    <div>
    <el-dialog  :visible.sync="visible"  class="dialog-scene"  @close="$emit('update:show', false)">
        <div class="message-box message-box-scene">
            <div class="message-box-header">
                <div class="message-box-title">
                    <span>请选择场景</span>
                </div>
                <i class="icon icon-close" @click="handleClose"></i>
            </div>
            <div class="message-box-content">
               <div class="scene-content">
                   <el-radio-group v-model="checked">
                       <div class="panel-box" v-for="(item,index) in sceneList" :key="index">
                           <span>{{item.label}}</span>
                           <el-radio class="pull-right" :label="item.value"></el-radio>
                           <p class="info">{{item.info}}</p>
                           <div class="scenePanel"></div>
                       </div>
                   </el-radio-group>
               </div>
            </div>
            <div class="message-box-footer" slot="footer">
                <div class="message-box-btn btn-group">
                    <button class="vpnButton primary" @click="handleSure">确定</button>
                    <button class="vpnButton cancel" @click="handleClose">取消</button>
                </div>
            </div>
        </div>
    </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "sceneDialog",
        data(){
            return{
                visible: this.show,
                sceneList:[
                    // {label:'interface',value:'1',info:'场景说明场景说明场景说明场景说明场景说明...'},
                    // {label:'sub-interface',value:'2',info:'场景说明场景说明场景说明场景说明场景说明...'},
                    // {label:'vlan',value:'3',info:'场景说明场景说明场景说明场景说明场景说明...'},
                    {label:'interface',value:'1',info:''},
                    {label:'sub-interface',value:'2',info:''},
                    {label:'vlan',value:'3',info:''},
                ],
                checked:"",
            }
        },
        methods:{
            handleClose(){
                this.$emit('update:show', false)
            },
            handleSure(){
                if(!this.checked){
                    _toast('请选择场景')
                    return false
                }else {
                    this.$emit('update:show', false)
                    this.$emit('checkVal',this.checked)
                }
            }
        },
        props: {
            show: {
                type: Boolean,
                default: false
            },
            scene:{
                type: String,
                default: "",
            }
        },
        watch: {
            show () {
                this.visible = this.show;
                this.checked = this.scene
            },
            scene(){
               this.checked = this.scene
            },
        }
    }
</script>

<style lang="scss">
    .dialog-scene{
        .panel-box{
            display: inline-block;width:283px;height:220px;border: 1px solid #C6C6C6;padding:10px;
            &:nth-child(2){margin-left: 20px;}
            &:nth-child(3){margin-top: 20px;}
            .el-radio.pull-right{
                .el-radio__input{
                    &.is-checked{
                        .el-radio__inner:after {transform: translate(0,0) rotate(45deg)  scale(1);}
                    }
                    .el-radio__inner{
                        border-radius:0;
                        &:after{
                            border-radius:0;
                            box-sizing: content-box;
                            background-color: inherit;
                            content: "";
                            border: 1px solid #fff;
                            border-left: 0;
                            border-top: 0;
                            height: 7px;
                            left: 4px;
                            position: absolute;
                            top: 1px;
                            transform:translate(0,0) rotate(45deg) scaleY(0);
                            width: 3px;
                            transition: transform .15s ease-in .05s;
                            transform-origin: center;
                        }
                    }
                }
                .el-radio__label{display: none}
            }
            .info{color:#666;font-size: 12px;padding:10px 0 10px 0}
            .scenePanel{
                width: 263px;height:140px;margin:0 auto;
                background:url("../../assets/vpn/scenePanel.png") no-repeat center;background-size:100% 100%;
            }
        }
    }
</style>