<style>
.seb-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: white;
    border-bottom: 1px solid #f8fafb;
}
.seb-item .cp{
    opacity: 0;
    transition: all linear .3s;
}
.seb-item:hover .cp{
    opacity: 1;
}
.seb-item .cp:hover{
    color: #409eff !important;
}
.seb-item .cp{
    padding-left: 10px;
}
</style>
<template>
    <div class="sceneEditBox">
        <template v-for="(item, index) in sceneDataList" >
            <div class="seb-item" :key="index">
                <span>{{item.SceneName}}</span>
                <div>
                    <i class="el-icon-edit cp" @click="MsgBus.$emit('sceneBoxShow', LableType, 1, item)"></i>
                    <i class="el-icon-delete cp" @click="deleteRow(item.ID)"></i>
                </div>
            </div>
        </template>
        <div style="margin-top: 15px;text-align: right;">
            <span class="font-color-link cp" @click="MsgBus.$emit('sceneBoxShow', LableType, 1)">新建场景</span>
        </div>
    </div>
</template>
<script>
export default {
    props: ['LableType', 'sceneData'],
    data(){
        return {
            sceneDataList: [],
        }
    },
    watch: {
        LableType:{
            handler(val, oldVal){
                
            },
            deep:true
        },
        sceneData: {
            handler(val, oldVal){
                this.sceneDataList = this.sceneData.filter(x=>
                    x.WhereType === 0
                )
            }
        }
    },beforeCreate(){
        
    },beforeDestroy() {
        this.MsgBus.$off('editScene');
    },
    mounted () {
        this.sceneDataList = this.sceneData.filter(x=>
            x.WhereType === 0
        )
        let $this = this
        this.MsgBus.$on('editScene', function (){
            console.log(1)
            $this.GetSceneEmployeeList()
        })
    },
    methods: {
        GetSceneEmployeeList(){
            this.apipost('/api/Scene/GetSceneEmployeeList', {LableType: this.LableType}, res=>{
                if (res.data.resultCode == 1) {
                    this.sceneDataList = res.data.data.filter(x=>
                        x.WhereType === 0
                    )
                }
            })
        },
        deleteRow(ID){
            this.$confirm('您确定要删除这一条数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.apipost('/api/Scene/DelSceneEmployee', {ID: ID}, res=>{
                    this.MsgBus.$emit('editScene')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    }
}
</script>