<template>
    <div>
        <div class="addAction">
            <i class="el-icon-back" @click="backToMember"></i>
            <span>添加动作</span>
        </div>
        <el-form :model="action" ref="action" :rules="rules" label-width="80px" class="actionInfo" label-position="right" style="margin-top:15px">
            <el-form-item label="动作类型" class="conditionVO" prop="type">
                <el-select v-model="action.type " placeholder="请选择动作类型">
                    <el-option v-for="actionType in actionTypeList" :key="actionType.label" :label="actionType.label" :value="actionType.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="完成时间" class="conditionVO">
                <el-input-number v-model="action.time " class="inputStyle" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="回复消息" class="conditionVO" prop="reply">
                <el-input v-model="action.reply" class="inputStyle"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addQuestAction('action')">添加动作</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import Vue from 'vue';
    import {postMemberBehaviorAction} from '@/api/simulation';
    export default {
        name: 'addAction',
        props: {
            group: {
                type: String,
                required: true
            },
            memberId:{
                type:String,
                required: true
            },
            behaviorId:{
                type:String,
                required: true
            }
        },
        data() {
            return {
                action:{
                    reply:"",
                    time:0,
                    type:"Conversation"
                },
                actionTypeList:[
                    {"label":"对话","value":"Conversation"}
                ],
                rules:{
                    reply: [
                        { required: true, message: '请输入回复消息', trigger: 'blur' }
                    ],
                    type:[
                        { required: true, message: '请选择角色类型', trigger: 'change' }
                    ]
                }
            }
        },
        methods:{
            addQuestAction(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let group=this.$props.group;
                        let memberId=this.$props.memberId;
                        let behaviorId=this.$props.behaviorId;
                        let data=this.action;
                        postMemberBehaviorAction(group,memberId,behaviorId,data).then(response=>{
                                this.$message.success('添加动作成功');
                                this.$emit('addActionSuccess');
                            }).catch(error => {
                                this.$messageBox(`添加动作失败: ${error.message}`);
                            })
                    }
                    else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            backToMember:function(){
                this.$emit('backToBehavior');
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .addAction{
        margin-top: 20px;
        margin-left: 5px;
        font-size: 15px;
    }
    .actionInfo{
        margin-top: 30px;
        margin-left: 5px;
        font-size: 15px;
        width:98%;
    }
    .inputStyle{
        width:150px;
        height:30px;
    }
</style>
