<template>
    <div>
        <h2>编辑文章</h2>
        <el-form ref="articleForm" :model="articleForm" :rules="rules" label-width="120px">
            <el-form-item label="标题" style="width: 60%;" prop="title">
                <el-input
                        v-model.trim="articleForm.title">
                </el-input>
            </el-form-item>
           
            <el-form-item label="SEO关键字" style="width: 60%;">
                <el-input
                        v-model="articleForm.keywords">
                </el-input>
            </el-form-item>
            <el-form-item label="SEO描述" style="width: 60%;">
                <el-input
                        type="textarea"
                        v-model="articleForm.description">
                </el-input>
            </el-form-item>
            <Category :data="isArticleData"></Category>
            <el-form-item label="置顶">
                <el-col :span="2">
                    <el-radio v-model="articleForm.top" @change="initTime(1)" label="1">是</el-radio>
                    <br>
                    <el-radio v-model="articleForm.top" @change="initTime(0)" label="0">否</el-radio>
                </el-col>
                <el-col :span="6">
                    <el-date-picker type="datetime" placeholder="选择置顶结束日期" v-model="articleForm.top_end_time"
                     format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                                    style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="文章图标">
                <el-upload
                        class="upload-demo"
                        drag
                        action="https://api-ces-test.oasgames.com/api/item/upload"
                        :on-success="imgUpload"
                        :beforeUpload="beforeAvatarUpload"
                        :before-remove="beforeRemove"
                        :limit="1"
                        :on-exceed="resetUpload"
                        :file-list="articleForm.fileList"
                        list-type="picture"
                        multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg、png、gif文件，且不超过50kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="外链" style="width: 60%;position: relative"  class="checked_url_box">
                <el-input
                        v-model="articleForm.link"  placeholder="请填写以http://或https://开头的链接地址">
                </el-input>
                <el-checkbox v-model="articleForm.link_enabled" class="cheack_url"></el-checkbox>
            </el-form-item>

            <el-form-item label="摘要" style="width: 60%;">
                <Uediter
                        :value="abstractUeditor.value"
                        :id="abstractUeditor.id"
                        :config="abstractUeditor.config"
                        ref="ued">
                </Uediter>
            </el-form-item>
            <el-form-item label="内容">
                <Uediter
                        :value="contentUeditor.value"
                        :id="contentUeditor.id"
                        :config="contentUeditor.config"
                        ref="ue">
                </Uediter>
            </el-form-item>
            <el-form-item label="发布状态" >
                <el-col>
                    <el-radio v-model="articleForm.release" label="1">发布</el-radio>
                    <el-radio v-model="articleForm.release" label="0">不发布</el-radio>
                </el-col>
            </el-form-item>
            <el-form-item label="发布时间" style="width: 60%;" v-if="articleForm.release === '1'">
                  <el-date-picker type="datetime" 
                  placeholder="可以通过设置指定时间，达到定时发布的效果" 
                  :clearable="false"
                  v-model="articleForm.release_time"
                       format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                                    style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain  @click.stop="openDialog">预览</el-button>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>
         <!--预览-->
        <previewDialog :previewData="articleForm"></previewDialog>
    </div>

</template>

<script>
import {mapGetters, mapMutations} from 'vuex';
import axios from '../../../common/axios';
import {categoryFn, getParents} from '../../../common/common';
import moment from 'moment';
import previewDialog from './Preview.vue'; 

export default {
    name: "edit",
    data() {
        return {
            articleForm: {
                release_time: 0
            },
            dialogVisible: false,
            abstractUeditor: {
                value: ' ',
                config: {
                    initialFrameWidth: 800,
                    initialFrameHeight: 200
                },
                id: 'abstractUeditor'
            },
            contentUeditor: {
                value: ' ',
                config: {
                    initialFrameWidth: 800,
                    initialFrameHeight: 400
                },
                id: 'contentUeditor'
            },
            rules: {
                title: [
                    {required: true, message: '请输入标题', trigger: 'blur'},
                ],
            }
        };
    },
    methods: {
        resetUpload(file) {
            if (file.length) {
                this.$message({
                    message: '请您先删除以上传图片',
                    type: 'warning'
                });
            }
        },
        openDialog() {
            this.returnContent();
            this.articleForm.releases = this.articleForm.release === '1' ? '发布' : '未发布';
            if (this.articleForm.release === '1') {
                this.articleForm.release_time = this.articleForm.release_time;
            }
            else {
                this.articleForm.release_time = '';
            }

            this.articleForm.tops = this.articleForm.top === '1' ? '置顶' : '未置顶';
            if (this.articleForm.top === '1') {
                this.articleForm.top_end_time = this.articleForm.top_end_time;
            }
            else {
                this.articleForm.top_end_time = '';
            }
            
            this.articleForm.dialogFormVisible = true;
        },
        initTime(type) {
            if (type) {
                let date = new Date(),
                    time = date.getTime() + 24 * 60 * 60 * 1000 * 3;
                this.articleForm.top_end_time = moment(time).format("YYYY-MM-DD HH:mm");
            }
            else {
                this.articleForm.top_end_time = 0;
            }
           
        },
        beforeAvatarUpload(file) {
            let isLt2M = file.size / 1024 < 50;
            if (!isLt2M) {
                this.$message({
                    message: '上传文件大小不能超过 50kb!',
                    type: 'warning'
                });
            }
            return isLt2M;
        },
        beforeRemove() {
            this.articleForm.img = '';
            this.articleForm.fileList[0] = [];
        },
        imgUpload(res) {
            this.articleForm.img = res.result;
        },
        onSubmit() {
            this.returnContent();
            if (this.iscategoryParentId) {
                this.articleForm.parent_id = this.iscategoryParentId;
            }
            if (this.articleForm.release_time === '' && this.articleForm.release === '1') {
                let date = new Date(),
                    time = Date.parse(date).formet;
                this.articleForm.release_time = moment(time).format("YYYY-MM-DD HH:mm"); 
            }
            if (this.articleForm.release === '0') {
                this.articleForm.release_time = 0;
            }
            this.articleForm.link_enabled = this.articleForm.link_enabled ? 1 : 0;
            axios({
                method: 'post',
                url: '//api-ces-test.oasgames.com/api/item/edit',
                params: this.articleForm
            }).then((response) => {
                this.$router.go(-1);
            });
        },
        returnContent() {
            this.articleForm.content = [];
            this.articleForm.abstract = this.$refs.ued.getUEContent();
            this.articleForm.content[0] = this.$refs.ue.getUEContent();
        },
        initDetail() {
            axios({
                method: 'post',
                url: '//api-ces-test.oasgames.com/api/item/detail',
                params: {
                    id: this.$route.query.id,
                    parent_id: this.$route.query.parent_id,
                }
            }).then((response) => {
                response.data.result.release = response.data.result.releaseTime ? '1' : '0';
                response.data.result.dialogFormVisible = false;
                if (response.data.result.linkEnabled) {
                    response.data.result.link_enabled = true;
                } 
                else {
                    response.data.result.link_enabled = false;
                }
               
                let date = new Date(),
                    time = Date.parse(date).formet;
                response.data.result.release_time = moment(time).format("YYYY-MM-DD HH:mm");
                response.data.result.top_end_time = '';
                this.articleForm = response.data.result;
                this.articleForm.parent_title = categoryFn(this.$route.query.breadcrumb, this.articleForm.parent_title);
                this.articleForm.url_key = response.data.result.urlKey;
                this.articleForm.top = response.data.result.top + '';
                if (response.data.result.releaseTime) {
                    let releaseTime = response.data.result.releaseTime ? response.data.result.releaseTime * 1000 : '';
                    this.articleForm.release_time = moment(releaseTime).format("YYYY-MM-DD HH:mm");
                }
                if (response.data.result.topEndTime) {
                    let topEndTime = response.data.result.topEndTime  ? response.data.result.topEndTime * 1000 : '';
                    this.articleForm.top_end_time = moment(topEndTime).format("YYYY-MM-DD HH:mm");
                }
                this.articleForm.fileList = [];
                if (response.data.result.img) {
                    this.articleForm.fileList[0] = {
                        url: response.data.result.img 
                    };
                }
               
                this.articleForm.parent_id = response.data.result.parentId;
                if (response.data.result.content[0] || response.data.result.abstract) {
                    this.contentUeditor.value = response.data.result.content[0];
                    this.abstractUeditor.value = response.data.result.abstract;
                }

            });
        },  
        ...mapMutations('utils', {
            iscategoryParentIdChange: 'iscategoryParentIdChange',
        })
    },
    computed: {
        ...mapGetters('article', {
            isArticleData: 'isArticleData'
        }),
        ...mapGetters('utils', {
            iscategoryParentId: 'iscategoryParentId'
        })
    },
    mounted() {
        this.iscategoryParentIdChange('');
        this.initDetail();
    },
    components: {
        previewDialog
    },
};
</script>

<style scoped>

</style>
