<template>
    <div>
        <el-card class="box-card">
            <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
                <el-tab-pane v-for="(item, index) in arContentChilds" :key="index" :label="item.remark2" :name="String(index)">
                    <el-container>
                        <el-aside width="300px">
                            <el-form :model="item" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 300px;">
                                <el-form-item prop="remark1" label="顺序">（提示：默认增长）
                                    <el-input v-model="item.remark1"></el-input>
                                </el-form-item>
                                <el-form-item prop="remark2" label="标题">
                                    <el-input v-model="item.remark2"></el-input>
                                </el-form-item>
                                <el-form-item prop="remark3" label="内容">
                                    <el-input v-model="item.remark3"></el-input>
                                </el-form-item>
                                <el-form-item prop="remark4" label="语音">
                                    <el-input v-model="item.remark4"></el-input>
                                </el-form-item>
                                <el-form-item prop="remark5" label="按钮内容">
                                    <el-input v-model="item.remark5"></el-input>
                                </el-form-item>
                                <el-form-item prop="remark6" label="图片">
                                    <el-input v-model="item.remark6"></el-input>
                                </el-form-item>
                                <el-form-item prop="remark7" label="自动播放">
                                    <template>
                                        <el-select v-model="item.remark7" clearable placeholder="自动播放">
                                            <el-option label="是" value="0"></el-option>
                                            <el-option label="否" value="1"></el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="onSave(index)" :loading="$store.state.fetchingData" type="primary">保存</el-button>
                                    <el-button @click="onDelete(index)" type="danger">删除</el-button>
                                </el-form-item>
                            </el-form>
                        </el-aside>
                        <el-main>

                            <div class="boxmodle">
                                <div class="left">
                                    讲解员{{ArContentTemplateStep2.remark3}}
                                </div>
                                <div class="right">
                                    <div class="title">
                                        {{item.remark2}}
                                    </div>
                                    <div class="content">
                                        {{item.remark3}}
                                    </div>
                                    <div class="img">
                                        {{item.remark6}}
                                    </div>

                                    <div class="btn">
                                        <el-button type="primary" size="mini" plain>{{item.remark5||'无内容'}}</el-button>
                                    </div>
                                </div>

                            </div>

                        </el-main>
                    </el-container>

                </el-tab-pane>
            </el-tabs>

            <el-row>
                <el-button type="primary" @click="handleTabsEdit(0,'add')">继续添加讲解内容</el-button>
                <el-button type="success" @click=" submit(0,'finish');">完成添加，下一步</el-button>

            </el-row>
        </el-card>

    </div>
</template>
<script>
import formValidator from '../formValidator'

export default {
    name: 'ArContentTemplateStep3',
    props: {
        formData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },

    created() {


        this.$http.get({
            url: '/arContentChild/all',
            data: {
                type: 2,
                arContentId: this.$route.query.arContentId,
                orderByStr: 'remark1_,asc'
            }
        }).then(res => {
            if (res.success) {

                if (res.data.length > 0) {
                    this.arContentChilds = res.data;
                }
                else {
                    var jsonp = {
                        arContentId: this.$route.query.arContentId,
                        remark1: "1",
                        remark2: "标题1",
                        remark3: "",
                        remark4: "",
                        remark5: "",
                        remark6: "",
                        remark7: "0",
                        type: "2"
                    }
                    this.arContentChilds.push(jsonp)
                }
            }
        });
        if (this.$route.query.ArContentTemplateStep2Id) {
            this.$http.get({
                url: '/arContentChild/getOne',
                data: {
                    id: this.$route.query.ArContentTemplateStep2Id
                }
            }).then(res => {
                if (res.success) {
                    this.ArContentTemplateStep2 = res.data


                }
            })
        }

    },
    data() {
        return {
            saving: false,

            rules: {
            },
            arContentChilds: [],
            editableTabsValue: '0',
            ArContentTemplateStep2: {}
        }
    },
    methods: {
        onSave(index) {
            this.submit(index, 1);
            // this.$refs.form.validate((valid) => {
            //     if (valid) {
            //         this.submit();
            //     } else {
            //         return false;
            //     }
            // });
        },
        submit(index, style) {
            if (index >= this.arContentChilds.length && style == 'finish') {
                this.$message.success('成功');
                if (this.$route.query.arContentChild) {
                    this.$emit('next')
                }
                else {
                    this.$emit('saveInfo')
                }
                return
            }
            var data = JSON.parse(JSON.stringify(this.arContentChilds[index]));
            this.$http.post({
                url: this.arContentChilds[index].id ? '/arContentChild/update' : '/arContentChild/save',
                data: data
            }).then(res => {
                if (res.success) {
                    if (!this.arContentChilds[index].id) {
                        this.arContentChilds[index].id = res.data
                    }
                    if (style == 'finish') {
                        this.submit(index + 1, 'finish')
                    }
                    else {
                        this.$message.success('成功');
                    }

                } else {
                    this.$message.warning('失败')
                }
            });
        },
        onDelete(index) {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
                if (!this.arContentChilds[index].id) {
                    if (index == this.arContentChilds.length - 1) {
                        this.editableTabsValue = '0'
                    }
                    this.arContentChilds.splice(index, 1)
                }
                else {
                    this.$http.post({
                        url: '/arContentChild/del',
                        data: { id: this.arContentChilds[index].id }
                    }).then(() => {
                        this.$message.success('删除成功');
                        if (index == this.arContentChilds.length - 1) {
                            this.editableTabsValue = '0'
                        }
                        this.arContentChilds.splice(index, 1)

                    }).catch(action => {
                        this.$message.error('删除失败');
                    })
                }
            })

        },
        handleTabsEdit(targetName, action) {
            if (action === 'add') {
                this.arContentChilds.push({
                    arContentId: this.$route.query.arContentId,
                    remark1: (this.arContentChilds.length + 1).toString(),
                    remark2: '标题' + (this.arContentChilds.length + 1),
                    remark3: "",
                    remark4: "",
                    remark5: "",
                    remark6: "",
                    remark7: "0",
                    type: "2"
                });
                setTimeout(() => {
                    this.editableTabsValue = (this.arContentChilds.length - 1).toString()
                }, 100)
            }
            if (action === 'remove') {
                this.onDelete(parseInt(this.editableTabsValue))
            }
        }
    }
}
</script>
<style lang="less" scoped>
.box-card {
    margin-top: 20px;
}

.boxmodle {
    width: 700px;
    // height: 500px;
    border: 1px dashed #ccc;
    display: flex;
    padding: 20px 0;
    align-items: center;
    justify-content: center;
    .left {
        border: 1px dashed #ccc;
        width: 300px;
        height: 300px;
        margin-right: 20px;

        display: flex;
        justify-content: center;
        align-items: center;
    }
    .right {
        width: 350px;

        .title {
            text-align: center;
            line-height: 60px;
        }

        .content {
            height: 145px;
            border: 1px dashed #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .img {
            height: 145px;
            border: 1px dashed #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }

        .btn {
            height: 50px;
            margin-top: 10px;
            text-align: right;
        }
    }
}
</style>
