@extends('layouts.base')
@section('title', '编辑专题')
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/pc-terminal-two/views/backend/index.css')}}">
    <link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
    <style>
        th {border-bottom: 1px solid #EBEEF5 !important;}
        .dialog-cover{z-index:2001}
        .dialog-content{z-index:2002}
    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-crumbs">
                <a @click="goParent(1)">PC端模板2</a>
                >
                <a @click="goParent(2)">专题页</a>
                >
                <a @click="goParent(3)">[[form.name]]</a> > 编辑
            </div>
            <el-form ref="form" :model="form" label-width="15%">
                <div class="vue-head">
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">专题编辑</div>
                    </div>
                    <div class="vue-main-form">
                        <el-form-item label="专题ID">
                            <div style="width:70%;">[[form.id]]</div>
                        </el-form-item>
                        <el-form-item label="专题名称">
                            <div style="width:70%;">[[form.name]]</div>
                        </el-form-item>
                        <el-form-item label="移动端跳转" prop="url">
                            <el-input v-model="form.url" placeholder="以https://开头，用户移动端访问该专题页，自动跳转到设置的链接页面" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="form.title" placeholder="浏览器地址栏标题" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="关键词" prop="keyword">
                            <el-input v-model="form.keyword" placeholder="页面关键词，请以英文逗号间隔" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="描述" prop="description">
                            <el-input v-model="form.description" placeholder="页面描述" type="textarea" rows="7" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="页面内容" prop="features_content">
                            <el-input v-model="form.page_content" type="textarea" rows="20" style="width:70%"></el-input>
                        </el-form-item>
                    </div>
                </div>

            </el-form>
            <!-- 分页 -->
            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="submitForm('form')" >提交</el-button>
                    <el-button @click="goBack">返回</el-button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                let features = {!!json_encode($features?:'{}') !!};
                    return{
                        form:{
                            name:features?features.name:"",
                            id:features?features.id:0,
                            url:features?features.url:"",
                            copy_h5_url:features?features.copy_h5_url:"",
                            title:features?features.title:"",
                            keyword:features?features.keyword:"",
                            description:features?features.description:"",
                            page_content:features?features.page_content:"",
                        },
                        loading: false,
                }
            },
            created() {
            },
            mounted() {
            },
            methods: {
                goParent(level) {
                    if(level==1) {
                        window.location.href = `{!! yzWebFullUrl('plugin.pc-terminal-two.backend.set.basic') !!}`;
                    }
                    else if(level==2) {
                        window.location.href = `{!! yzWebFullUrl('plugin.pc-terminal-two.backend.features.features') !!}`;
                    }
                    else if(level==3) {
                        window.location.href = `{!! yzWebFullUrl('plugin.pc-terminal-two.backend.features.features') !!}`;
                    }
                },
                submitForm(formName) {
                    /*let that = this;
                    let json = {
                        name:this.form.name,
                        url:this.form.url,
                        title:this.form.title,
                        keyword:this.form.keyword,
                        description:this.form.description,
                        page_content:this.form.page_content,
                    };*/
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                            this.$http.post('{!! yzWebFullUrl('plugin.pc-terminal-two.backend.features.features-edit') !!}',{id:this.form.id,features:this.form}).then(response => {
                                if (response.data.result) {
                                    //console.log(response.data.data);
                                    this.$message({type: 'success',message: '提交成功!'});
                                    // this.goBack();
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                            },response => {
                                loading.close();
                            });
                        }
                        else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },

                goBack() {
                    history.go(-1)
                },
            },
        })

    </script>
@endsection