<template>
    <div class="app-container">
        <div class="background-color-fff padding-20 border-radius-8px margin-bottom-20">
            <el-form
                ref="articleContentRef"
                :model="form"
                :rules="rules"
                label-width="80px"
                label-position="top"
            >
                <el-form-item label="所属分类" prop="categoryId">
                    <el-select v-model="form.categoryId" placeholder="请选择所属分类">
                        <el-option
                            v-for="dict in categoryList"
                            :key="dict.categoryId"
                            :label="dict.categoryName"
                            :value="dict.categoryId"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="文章标题" prop="articleTitle">
                    <el-input v-model="form.articleTitle" placeholder="请输入文章标题" />
                </el-form-item>
                <el-form-item label="描述" prop="articleDescription">
                    <el-input v-model="form.articleDescription" placeholder="请输入描述" />
                </el-form-item>
                <el-form-item label="文章缩略图" prop="articleImg">
                    <image-upload v-model="form.articleImg" />
                </el-form-item>
                <el-form-item label="状态" prop="articleDisplay">
                    <el-select v-model="form.articleDisplay" placeholder="请选择">
                        <el-option
                            v-for="dict in sys_general_status"
                            :key="dict.value"
                            :label="dict.label"
                            :value="parseInt(dict.value)"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="自定义顺序" prop="sort">
                    <el-input v-model="form.sort" placeholder="请输入自定义顺序" />
                </el-form-item>
                <el-form-item label="发布日期" prop="addTime">
                    <el-date-picker
                        clearable
                        v-model="form.addTime"
                        type="date"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择发布日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="点击次数" prop="contentHit">
                    <el-input v-model="form.contentHit" placeholder="请输入点击次数" />
                </el-form-item>
                <el-form-item label="文章内容" prop="articleDetails">
                    <wangeditor v-model="form.articleDetails" :min-height="192" />
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="close">取 消</el-button>
            </div>
        </div>
    </div>
</template>

<script setup name="ArticleDetails">
import {
    listArticleContent,
    getArticleContent,
    delArticleContent,
    addArticleContent,
    updateArticleContent,
} from '@/api/service/articleContent';
import { listArticleCategory } from '@/api/service/articleCategory';

const { proxy } = getCurrentInstance();
const route = useRoute();
const { sys_general_status } = proxy.useDict('sys_general_status');

const categoryList = ref([]);
const data = reactive({
    form: {},
    rules: {
        categoryId: [{ required: true, message: '所属分类不能为空', trigger: 'blur' }],
        articleDetails: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }],
        articleTitle: [{ required: true, message: '文章标题不能为空', trigger: 'blur' }],
        articleDescription: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
    },
});

const { form, rules } = toRefs(data);

// 取消按钮
function cancel() {
    open.value = false;
    reset();
    close();
}

// 表单重置
function reset() {
    form.value = {
        articleId: null,
        categoryId: null,
        articleDetails: null,
        articleTitle: null,
        articleDescription: null,
        articleImg: null,
        articleDisplay: null,
        sort: null,
        contentHit: null,
        del: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
    };
    proxy.resetForm('articleContentRef');
}

/** 新增按钮操作 */
function handleAdd() {
    reset();
    open.value = true;
    title.value = '添加文章';
}

/** 修改按钮操作 */
function handleUpdate(_articleId) {
    reset();
    getArticleContent(_articleId).then(response => {
        form.value = response.data;
        open.value = true;
    });
}

/** 关闭按钮 */
function close() {
    proxy.$tab.closePage();
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs['articleContentRef'].validate(valid => {
        if (valid) {
            form.value.categoryType = getCategoryType(form.value.categoryId);
            if (form.value.articleId != null) {
                updateArticleContent(form.value).then(response => {
                    proxy.$modal.msgSuccess('修改成功');
                    open.value = false;
                    close();
                });
            } else {
                addArticleContent(form.value).then(response => {
                    proxy.$modal.msgSuccess('新增成功');
                    open.value = false;
                    close();
                });
            }
        }
    });
}

function getCategoryType(categoryId) {
    let category = categoryList.value.find(res => res.categoryId == categoryId);
    return category.categoryType;
}

/** 查询文章分类列表 */
function getCateList() {
    listArticleCategory({ pageNum: 1, pageSize: 100 }).then(response => {
        categoryList.value = response.rows;
    });
}
getCateList();
if (route.query.articleId) handleUpdate(route.query.articleId);
</script>
