<template>
    <div>
        <el-container>
            <el-main>
                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
                    <el-form-item label="类型名称" prop="typeName">
                        <el-input style="width: 300px" v-model="form.typeName"/>
                    </el-form-item>
                    <el-form-item label="类型标识" prop="tagName">
                        <el-input style="width: 300px" v-model="form.tagName"/>
                    </el-form-item>
                    <el-form-item label="类型描述" prop="content">
                        <el-input type="textarea"
                                  :autosize="{ minRows: 2, maxRows: 4}"
                                  v-model="form.content"
                        style="width: 50%"/>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch style="width: 300px" v-model="form.state"
                                   active-text="生效"
                                   :active-value=1
                                   inactive-text="无效"
                                   :inactive-value=0 />
                    </el-form-item>
                </el-form>
            </el-main>
            <el-footer style="z-index: 9999">
                <div class="bodyBox">
                    <div style="display: flex;">
                        <el-button type="primary" @click="onSubmit('ruleForm')">
                            {{btn}}
                        </el-button>
                        <el-button @click="close">
                            取消
                        </el-button>
                    </div>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    import {post, get} from '@/api/common'
    export default {
        name: 'ABclassEdit',
        data() {
            return {
                //策略表单
                form: {
                    state: 1
                },
                oldform: {},
                btn: '立即创建',

                rules: {
                    strategyName: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                    ],
                    strategyType: [
                        {required: true, message: '请选择策略类型', trigger: 'change'},
                    ],
                    templateId: [
                        {required: true, message: '请选择模版', trigger: 'change'},
                    ]
                }
            }
        },
        created() {
            document.title = '编辑测试类型'
        },
        mounted() {
            if (this.$route.query.id) {
                get('/abtest/typedict/list', {'id': this.$route.query.id}).then(res => {
                    res = res.data.list[0];
                    console.log(res)
                    this.oldform = JSON.parse(JSON.stringify(res))
                    this.form = res;

                });
                this.btn = '编辑保存'
            }
        },
        methods: {
            // 提交按钮
            onSubmit: function (formName) {
                this.$confirm('您确定编辑该类型？当前操作会影响所有相关测试', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (this.$route.query.id) {
                                post('/abtest/typedict/update/' + this.$route.query.id, this.form).then(res => {
                                    this.$message({
                                        message: res.message,
                                        type: 'success',
                                        duration: 3000,
                                        offset: 360
                                    })
                                })
                            } else {
                                post('/abtest/typedict/create', this.form).then(res => {
                                    this.$message({
                                        message: res.message,
                                        type: 'success',
                                        duration: 3000,
                                        offset: 360
                                    })
                                })
                            }
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },

            // 取消按钮
            close() {
                this.$confirm('此操作不会保存已编辑数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.location.href = 'about:blank'
                    window.close()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }
        }

    }
</script>

<style lang="scss">
    .avatar {
        width: 100%;
        max-width: 500px;
    }
</style>
