<template>
    <div class="container">
        <header>
            <el-form :label-width="120">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="发布时间">
                            <date-time-range-picker-ext
                                v-model="query.releaseTime"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="动态类型">
                            <el-select v-model="query.hostLevel" clearable>
                                <el-option
                                    v-for="item in dict.newsWorkSource"
                                    :key="item.id"
                                    :label="item.dictLabel"
                                    :value="item.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="动态分类">
                            <el-select v-model="query.hostLevel" clearable>
                                <el-option
                                    v-for="item in dict.newsWorkType"
                                    :key="item.id"
                                    :label="item.dictLabel"
                                    :value="item.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="动态内容">
                            <el-input
                                placeholder="请输入"
                                v-model="query.contextTxt"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="flex between mt-20 mb-26">
                <el-button type="primary" @click="handleAdd">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    新增动态
                </el-button>
                <div>
                    <el-button type="primary" @click="getList">
                        <template #icon>
                            <icon name="el-icon-Search" />
                        </template>
                        查询
                    </el-button>
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </header>
        <div class="table-container">
            <el-table :data="list">
                <el-table-column label="发布时间" prop="releaseTime" width="160" />
                <el-table-column label="动态类型" prop="source" width="130" />
                <el-table-column label="动态分类" prop="workType" width="120" />
                <el-table-column label="动态内容" prop="contentTxt" />
                <el-table-column label="操作" width="160">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleEdit(row)"
                            >编辑</el-button
                        >
                        <el-button type="danger" link @click="handleDel(row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex end mt-8">
            <el-pagination
                @size-change="getList"
                @current-change="getList"
                :page-sizes="[10, 20, 50]"
                v-model:page-size="query.size"
                v-model:current-page="query.current"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>

    <el-dialog
        v-model="show"
        :title="mode === 'add' ? '新增工作动态' : '编辑工作动态'"
        width="900"
    >
        <el-form
            :label-width="140"
            :model="formData"
            ref="fomrRef"
            style="min-height: 40vh"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item
                        label="动态类型"
                        prop="source"
                        :rules="{
                            required: true,
                            message: '请选择',
                            trigger: ['blur'],
                        }"
                    >
                        <el-radio-group v-model="formData.source">
                            <el-radio
                                v-for="item in dict.newsWorkSource"
                                :key="item.dictCode"
                                :value="item.dictValue"
                                >{{ item.dictLabel
                                }}{{
                                    item.remark ? `(${item.remark})` : ""
                                }}</el-radio
                            >
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="发布时间"
                        prop="releaseTime"
                        :rules="{
                            required: true,
                            message: '请选择',
                            trigger: ['blur'],
                        }"
                    >
                        <el-date-picker
                            v-model="formData.releaseTime"
                            type="datetime"
                            placeholder="请选择"
                            value-format="YYYY-MM-DD HH:mm"
                            time-format="HH:mm"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item
                label="动态分类"
                prop="workType"
                :rules="{
                    required: true,
                    message: '请选择',
                    trigger: ['blur'],
                }"
            >
                <el-radio-group v-model="formData.workType">
                    <el-radio
                        v-for="item in dict.newsWorkType"
                        :key="item.dictCode"
                        :value="item.dictValue"
                        >{{ item.dictLabel
                        }}{{ item.remark ? `(${item.remark})` : "" }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
            <el-form-item
                label="动态内容"
                prop="contentTxt"
                :rules="{
                    required: true,
                    message: '请输入',
                    trigger: ['blur'],
                }"
            >
                <el-input
                    v-model="formData.contentTxt"
                    clearable
                    placeholder="请输入"
                    type="textarea"
                    :autosize="{ minRows: 6, maxRows: 10 }"
                />
            </el-form-item>
        </el-form>
        <footer class="flex end mt-40">
            <el-button @click="show = false" size="large">取消</el-button>
            <el-button type="primary" @click="submit" size="large"
                >保存</el-button
            >
        </footer>
    </el-dialog>
</template>
<script setup>
import { listNews, addNews, updateNews, delNews } from "@/api/work/news";
import feedback from "@/utils/feedback";
import useCatchStore from "@/stores/modules/catch";

const catchStore = useCatchStore();
const dict = catchStore.getDicts(["newsWorkType", "newsWorkSource"]);

const query = ref({
    current: 1,
    size: 10,
});

const list = ref([]);
const total = ref(0);
function getList() {
    listNews(query.value).then((data) => {
        list.value = data.records;
        total.value = data.total;
    });
}

function reset() {
    query.value = {
        current: 1,
        size: 10,
    };
    getList();
}

onMounted(() => {
    getList();
});

const show = ref(false);
const mode = ref("add");
const formData = ref({});
const fomrRef = ref();

function handleAdd() {
    formData.value = { internalId: "" };
    show.value = true;
    mode.value = "add";
}
function handleEdit(row) {
    formData.value = { ...row };
    show.value = true;
    mode.value = "edit";
}

async function handleDel(row) {
    await feedback.confirm("确定要删除该数据？");
    await delNews(row.id);
    getList();
    feedback.msgSuccess("删除成功");
}

async function submit() {
    await fomrRef.value.validate();
    if (mode.value === "add") {
        await addNews(formData.value);
    } else {
        await updateNews(formData.value);
    }
    show.value = false;
    formData.value = {};
    getList();
    feedback.msgSuccess("操作成功");
}
</script>
<style lang="scss" scoped>
</style>