<template>
    <el-dialog title="创建分类" :visible.sync="createForm.createDialogType">
          <el-form :model="createForm" :rules="rules" ref="typeForm">
            <el-form-item label="分类中文名" :label-width="formLabelWidth" prop="abstract"  style="width: 60%;">
              <el-input v-model.trim="createForm.abstract" 
              placeholder="展示在后台，不会出现在前台页面中"
              autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="分类名称" 
              v-if="createForm.type !== 4"
              :label-width="formLabelWidth" prop="title"  style="width: 60%;">
              <el-input v-model.trim="createForm.title" placeholder="请填写本地化文字，会展示在前台页面中" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="页面关键字" 
            v-if="createForm.type !== 4"
            :label-width="formLabelWidth" style="width: 60%;">
                <el-input v-model="createForm.keywords"  placeholder="SEO属性"></el-input>
            </el-form-item>
            <el-form-item label="页面描述" 
            v-if="createForm.type !== 4"
            :label-width="formLabelWidth" style="width: 60%;">
                <el-input v-model="createForm.description" placeholder="SEO属性"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="createForm.createDialogType = false">取 消</el-button>
            <el-button type="primary" @click="createFormFn">确 定</el-button>
          </div>
    </el-dialog>
</template>

<script>
import axios from '../../common/axios';

export default {
    props: {
        createForm: Object
    },
    name: "dialog-type-list",
    data() {
        return {
            formLabelWidth: '120px',
            rules: {
                abstract: [
                    {required: true, message: '请输入分类中文名', trigger: 'blur'}
                ],
                title: [
                    {required: true, message: '请输入分类名称', trigger: 'blur'}
                ],
            }
        };
    },
    methods: {
        createFormFn() {
            console.log(this.createForm);
            this.$nextTick(function () {
                this.$refs.typeForm.validate((valid) => {
                    if (valid) {
                        axios({
                            method: 'post',
                            url: '//api-ces-test.oasgames.com/api/item/create',
                            params: this.createForm
                        }).then((response) => {
                            window.location.reload();
                        });
                    }
                });
            });
        },
    }
};
</script>

<style scoped>

</style>
