<template>
    <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="分类中文名" prop="abstract" style="width: 40%;">
                <el-input 
                v-model.trim="ruleForm.abstract"   
                placeholder="展示在后台，不会出现在前台页面中"></el-input>
            </el-form-item>
            <el-form-item label="分类名称" prop="title" style="width: 40%;">
                <el-input v-model.trim="ruleForm.title" placeholder="请填写本地化文字，会展示在前台页面中" ></el-input>
            </el-form-item>
            <el-form-item label="页面关键字" style="width: 40%;">
                <el-input v-model="ruleForm.keywords" placeholder="SEO属性"></el-input>
            </el-form-item>
            <el-form-item label="页面描述" style="width: 40%;">
                <el-input v-model="ruleForm.description" placeholder="SEO属性"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
import {mapState, mapGetters, mapMutations} from 'vuex';
import axios from '../../../common/axios';
export default {
    name: "basic-information",
    data() {
        return {
            ruleForm: {
                abstract: '',
                title: '',
                keywords: '',
                description: ''
            },
            rules: {
                abstract: [
                    {required: true, message: '请输入分类中文名', trigger: 'blur'}
                ],
                title: [
                    {required: true, message: '请输入分类名称', trigger: 'blur'}
                ]
            }
        };
    },
    methods: {
        submitForm() {
            this.ruleForm.category = 1;
            console.log(this.ruleForm);
            this.ruleForm.parent_id = this.ruleForm.parentId;
         
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    axios({
                        method: 'post',
                        url: '//api-ces-test.oasgames.com/api/item/edit',
                        params: this.ruleForm
                    }).then((response) => {
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        });
                        window.location.reload();
                    }).catch((error) => {
                        console.log(error);
                        this.$message({
                            type: 'info',
                            message: '提交失败!'
                        });
                    });
                }
            });
        },
        ...mapMutations('article', {
            isArticleDataChange: 'isArticleDataChange',
        })
    },
    computed: {
        ...mapGetters('article', { // 用mapGetters来获取article.js里面的getters
            articleTypeDetail: 'articleTypeDetail',
        })
    },
    watch: {
        articleTypeDetail(newData) {
            this.ruleForm = newData;
        }
    },
    mounted: function () {
        this.ruleForm = Object.assign(this.ruleForm, this.articleTypeDetail);
    }
};
</script>

<style scoped>
</style>
