<template>
    <el-drawer :title="titleMap[mode]" :append-to-body="true" v-model="visible" :size="1000" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')" :with-header="false">
        <el-container class="flex-column" v-loading="loading">
            <div class="drawer-detail-main">
                <div class="drawer-detail-header">
                    <div class="drawer-detail-header-body">
                        <div class="drawer-detail-header-left">{{ titleMap[mode] }}</div>
                        <div class="drawer-detail-header-left">
                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-main>
                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                    <el-form-item label="文档标题" prop="title">
                        <el-input v-model="formData.title" clearable placeholder="文档标题"></el-input>
                        <div class="el-form-item-msg"></div>
                    </el-form-item>
                    <el-form-item label="副标题" prop="sub_title">
                        <el-input v-model="formData.sub_title" clearable placeholder="副标题"></el-input>
                        <div class="el-form-item-msg"></div>
                    </el-form-item>
                    <el-form-item label="栏目分类" prop="category_path">
                        <el-cascader v-model="formData.category_path" :options="categoryData" :props="deptsProps" clearable style="width: 50%;" />
                        <div class="el-form-item-msg"></div>
                    </el-form-item>
                    <el-form-item label="封面图片" prop="cover">
                        <sc-upload v-model="formData.cover"></sc-upload>
                        <div class="el-form-item-msg"></div>
                    </el-form-item>
                    <el-form-item label="文档属性" prop="attribute" v-loading="channelState">
                        <el-checkbox-group v-model="formData.attribute">
                            <el-checkbox border :value="item.code" :label="item.code" v-for="(item,indx) in channelData" :key="indx">{{ item.name }}</el-checkbox>
                        </el-checkbox-group>
                        <div class="el-form-item-msg"></div>
                    </el-form-item>
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <el-form-item label="浏览数" prop="view">
                                <el-input v-model="formData.view" clearable placeholder="浏览数">
                                    <template #append>次</template>
                                </el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="作者" prop="author">
                                <el-input v-model="formData.author" clearable placeholder="作者"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="来源" prop="source">
                                <el-input v-model="formData.source" clearable placeholder="来源"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="内容" prop="content" class="label-item">
                        <sc-editor v-model="formData.content" placeholder="请输入" :height="600" style="width: 100%;"></sc-editor>
                        <div class="el-form-item-msg"></div>
                    </el-form-item>
                    
                </el-form>
            </el-main>
            <el-footer style="text-align: right;">
                <el-button @click="visible=false" >取 消</el-button>
                <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
</template>

<script>
import { defineAsyncComponent } from 'vue';
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
export default {
    components: {
        scEditor
    },
    data() {
        return {
            categoryData:[],
            channelState:false,
            deptsProps:{
                value: "id",
                label: "name"
            },
            channelData:[{key:1,name:"头条"},{key:2,name:"推荐"},{key:3,name:"加推"},{key:4,name:"标粗"},{key:5,name:"有图"}],
            loading: false,
            mode:"add",
            visible: false,
            isSaveing: false,
            titleMap:{
                add:"新增文章",
                edit:"编辑文章"
            },
            rules:{
                title: [
                    {required: true, message: '请输入'}
                ],
                category_path: [
                    {required: true, message: '请选择'}
                ],
                content: [
                    {required: true, message: '请输入'}
                ],
            },
            formData:{}
        }
    },
    methods: {
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            this.getCategory()
            this.getChannel()
            if (mode == 'add') {
                this.formData = {
                    view:0,
                    author:"小编",
                    source:"网络"
                };
            }
            return this
        },
        //表单注入数据
        setData(data){
            this.formData = JSON.parse(JSON.stringify(data));
        },
        async getChannel(){
            this.channelState = true;
            var resp = await this.$API.service.dic.get({"type":"article"});
            this.channelState = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.channelData = resp.data;
        },
        async getCategory(){
            var resp = await this.$API.category.list.get({"type":2});
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.categoryData = resp.data;
        },
        async submit(){
            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
            if(!validate){ return false }
            this.isSaveing = true;
            var resp = await this.$API.article.save.post(this.formData);
            this.isSaveing = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg);
            }
            this.$message.success(resp.msg);
            this.visible = false;
            this.formData = {};
            this.$emit("success");
        }
    }
}
</script>