<template>
    <div class="reminder-drag">
        <div class="reminder-box" ref="drapBox">
            <div class="tip-title">
                <i class="icon el-icon-minus" @click="shrink" v-show="isShrink"></i>
                <i class="icon el-icon-plus" @click="shrink" v-show="!isShrink"></i>
                <p style="color: #fff;" v-if="isShrink">
                    <span>{{ title }}</span>
                </p>
            </div>
            <div class="tip-body-box" ref="dragBody">
                <div class="tip-body">
                    <!-- <el-scrollbar wrapClass="scrollbar-wrapper"> -->
                        <template v-if="isRoleSectionDisplay">
                            <template>
                                <el-tabs v-model="activeName" type="card">
                                    <el-tab-pane label="用户角色" name="first">
                                        <div class="tab-pane">
                                            <el-scrollbar wrapClass="scrollbar-wrapper">
                                                <role-section ref="roleSection" :group="group" @addBehavior="addBehavior" @getBehaviorList="getBehaviorList"></role-section>
                                            </el-scrollbar>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="目标条件" name="second">
                                        <div class="tab-pane">
                                            <el-scrollbar wrapClass="scrollbar-wrapper">
                                                <target-condition ref="targetCondition" :group="group"></target-condition>
                                            </el-scrollbar>   
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                        </template>
                        <template v-if="isBehaviorSectionDisplay">
                            <div class="tab-pane-big">
                                <el-scrollbar wrapClass="scrollbar-wrapper">
                                <add-behavior ref="addBehavior" :group="group" :memberId="memberId" @addBehaviorSuccess="addBehaviorSuccess" @backToMember="backToMember"></add-behavior>
                                </el-scrollbar>
                            </div>
                        </template>
                        <template v-if="isBehaviorListDisplay">
                            <div class="tab-pane-big">
                                <el-scrollbar wrapClass="scrollbar-wrapper">
                                <get-behavior ref="getBehavior" :group="group" :memberId="memberId" @backToMember="backToMember" @addAction="addAction" @getActions="getActions"></get-behavior>
                                </el-scrollbar>
                            </div>
                        </template>
                        <template v-if="isActionAddDisplay">
                            <div class="tab-pane-big">
                                <el-scrollbar wrapClass="scrollbar-wrapper">
                                <add-action ref="addAction" :group="group" :memberId="memberId" :behaviorId="behaviorId" @addActionSuccess="addActionSuccess" @backToBehavior="backToBehavior"></add-action>
                                </el-scrollbar>
                            </div>
                        </template>
                        <template v-if="isActionListDisplay">
                            <div class="tab-pane-big">
                                <el-scrollbar wrapClass="scrollbar-wrapper">
                                <get-action ref="getAction" :group="group" :memberId="memberId" :behaviorId="behaviorId" @backToBehavior="backToBehavior"></get-action>
                                </el-scrollbar>
                            </div>
                        </template>
                        <el-button-group class="button-group">
                            <el-button type="primary" @click="saveScenesStage">保存背景</el-button>
                            <el-button type="success" @click="saveScenesData">保存数据</el-button>
                            <!-- <el-button type="danger" @click="dumpScenesData">重置剧本</el-button> -->
                        </el-button-group>
                    <!-- </el-scrollbar> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import RoleSection from './scriptRecord/roleSection';
    import AddBehavior from './scriptRecord/addBehavior';
    import GetBehavior from './scriptRecord/getBehavior';
    import AddAction from './scriptRecord/addAction';
    import GetAction from './scriptRecord/getAction';
    import TargetCondition from './scriptRecord/targetCondition';
    
    
    
    
    import { launchFullscreen, exitFullscreen } from '@/utils/screen';
    import {getMembersByGroup,postMemberBehavior,saveScriptScenes, saveScriptData, dumpScriptData} from '@/api/simulation';

    export default {
        name: 'TipScriptRecord',
        props: {
            group: {
                type: String,
                required: true
            },
        },
        components: {
            RoleSection,
            AddBehavior,
            GetBehavior,
            AddAction,
            GetAction,
            TargetCondition
        },
        data() {
            return {
                title: '任务录制',
                isShrink: false,
                memberId:null,
                behaviorId:null,
                isRoleSectionDisplay:true,
                isBehaviorSectionDisplay:false,
                isBehaviorListDisplay:false,
                isActionAddDisplay:false,
                isActionListDisplay:false,
                activeName:"first",
                // isSaveStage: true,
            }
        },
        watch: {
        },
        mounted() {
            this.loadInitData(this.$route.query);
        },
        computed:{
        },
        methods: {
            loadInitData(obj) {
                this.shrink();
            },
            jump(obj) {
            },
            shrink() {
                let height = this.$refs.dragBody.offsetHeight + 40;
                let top = this.$refs.drapBox.style.top;
                if (this.isShrink) {
                    this.$refs.drapBox.style.height = '40px';
                    this.$refs.drapBox.style.top = '';
                    this.isShrink = false;
                } else {
                    this.$refs.drapBox.style.height = height + 'px';
                    this.$refs.drapBox.style.top = top;
                    this.isShrink = true;
                }
            },
            addBehavior(id){
                this.isBehaviorSectionDisplay=true;
                this.isRoleSectionDisplay=false;
                this.isBehaviorListDisplay=false;
                this.isActionAddDisplay=false;
                this.isActionListDisplay=false;
                this.memberId=id;
            },
            getBehaviorList(id){
                this.isRoleSectionDisplay=false;
                this.isBehaviorListDisplay=true;
                this.isBehaviorSectionDisplay=false;
                this.isActionAddDisplay=false;
                this.isActionListDisplay=false;
                this.memberId=id;
            },
            addBehaviorSuccess(){
                this.isRoleSectionDisplay=true;
                this.isBehaviorListDisplay=false;
                this.isBehaviorSectionDisplay=false;
                this.isActionAddDisplay=false;
                this.isActionListDisplay=false;
            },
            backToMember(){
                this.isRoleSectionDisplay=true;
                this.isBehaviorListDisplay=false;
                this.isBehaviorSectionDisplay=false;
                this.isActionAddDisplay=false;
                this.isActionListDisplay=false;
            },
            backToBehavior(){
                this.isRoleSectionDisplay=false;
                this.isBehaviorListDisplay=true;
                this.isBehaviorSectionDisplay=false;
                this.isActionAddDisplay=false;
                this.isActionListDisplay=false;
            },
            addActionSuccess(){
                this.isRoleSectionDisplay=false;
                this.isBehaviorListDisplay=true;
                this.isBehaviorSectionDisplay=false;
                this.isActionAddDisplay=false;
                this.isActionListDisplay=false;
            },
            addAction(id){
                this.isRoleSectionDisplay=false;
                this.isBehaviorListDisplay=false;
                this.isBehaviorSectionDisplay=false;
                this.isActionAddDisplay=true;
                this.isActionListDisplay=false;
                this.behaviorId=id;
            },
            getActions(id){
                this.isRoleSectionDisplay=false;
                this.isBehaviorListDisplay=false;
                this.isBehaviorSectionDisplay=false;
                this.isActionAddDisplay=false;
                this.isActionListDisplay=true;
                this.behaviorId=id;
            },
            saveScenesStage() {
                saveScriptScenes(this.group).then(resp => {
                    // this.isSaveStage = false;
                    this.$message.success('保存背景成功');
                }).catch(error => {
                    this.$messageBox('保存背景失败!');
                })
            },
            saveScenesData() {
                saveScriptData(this.group).then(resp => {
                    this.$message.success('保存数据成功');
                }).catch(error => {
                    this.$messageBox('保存数据失败!');
                })
            },
            dumpScenesData() {
                this.$confirm('此操作将会清除已保存的录制数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    dumpScriptData(this.scriptId).then(resp => {
                        // this.isSaveStage = true;
                        this.$message.success('清除数据成功');
                    }).catch(error => {
                        this.$messageBox('清除数据失败!');
                    })
                }).catch(error => { })
            },
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .tip-body-box {
        position: relative;
        // height: 540px;
    }
    .tab-pane{
        height:360px;
    }
    .tab-pane-big{
        height:420px;
    }

    .reminder-box {
        position: absolute;
        float: left;
        left: 15px;
        bottom: 15px;
        width: 695px;
        height: 540px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        z-index: 10;
        font-size: 18px;

        .tip-title {
            width: 100%;
            overflow: hidden;
            height: 40px;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            background-color: #409EFF;
            border-radius: 5px 5px 0 0;
            justify-content: space-between;
            padding: 0 10px;
        }

        .tip-body {
            height: 500px;
            padding: 10px;

            .list-label {
                width: 105px;
            }
            .button-group{
                margin-top:15px;
                margin-left: 20px;
                float:right;
            }
            
        }

        .icon {
            float: right;
            margin-right: 10px;
            cursor: pointer;
            background-color: #f3f3f3;
            border-radius: 50%;
        }

        /deep/ {
            .el-tree-node__content {
                margin-bottom: 4px;
            }

            .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
                background-color: #d6e5f7;
            }
        }
    }
</style>