<template>
    <div class="contentManagementContainer">
        <div class="obviousBox">
            <searchArea :searchData="searchData" @submit="searchByForm"></searchArea>
            <functional-area @add="addInfo" :leftBtn="leftBtn" :rightBtn="rightBtn"></functional-area>
        </div>
        <div class="contentManagement" v-loading="loading">
            <el-table :data="tableData" style="width: 100%" max-height="600" border fit>
                <el-table-column prop="contentTitle" label="内容标题" align="center"></el-table-column>
                <el-table-column label="所属栏目" align="center">
                    <template slot-scope="scope">
                        <div>{{ contentTypeOption[parseInt(scope.row.contentType)] }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <div>{{ statusOption[parseInt(scope.row.status)] }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="创建人" align="center"></el-table-column>
                <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime, "{yy}-{mm}-{dd} {hh}:{ii}:{ss}") }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" align="center">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.publishTime, "{yy}-{mm}-{dd} {hh}:{ii}:{ss}") }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="300">
                    <template slot-scope="scope">
                        <el-button @click="tableDetailClick(scope.row.id)" type="text"  v-if="scope.row.status && (scope.row.status === '1')">详情</el-button>
                        <el-button @click="tableEditClick(scope.row.id)" type="text"  v-if="scope.row.status && (scope.row.status === '0')">编辑</el-button>
                        <el-popconfirm title="是否删除该内容？删除后无法恢复，请谨慎操作。" @confirm="tableDeleteClick(scope.row.id)">
                            <el-button type="text" slot="reference">删除</el-button>
                        </el-popconfirm>
                        <el-button @click="tablePublishClick(scope.row.id)" type="text" v-if="scope.row.status && (scope.row.status === '0')">发布</el-button>
                        <el-button @click="tableBackClick(scope.row.id)" type="text" v-if="scope.row.status && (scope.row.status === '1')">撤回</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pageSize">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="selectForm.currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="selectForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import searchArea from '@/components/searchArea/index';
import FunctionalArea from '@/components/FunctionalArea/index';
import {parseTime } from "@/utils/index";
import contentManagementAPI from "@/api/contentManagement";

export default {
    name: 'list',
    mixins: [], //表格列表相关属性和方法在mixin中
    components: {
        searchArea,
        FunctionalArea,
    },
    data() {
        return {
            contentTypeOption: ["医保服务指南","医保政策解读","医院医保动态","医院动态","通知公告","健康园地","名医有约","人才招聘","就医指南"],
            statusOption: ['待发布', '已发布'],
            loading: false,
            leftBtn: [
                {
                    label: '新增内容',
                    eventName: 'add',
                },
            ],
            rightBtn: [],
            searchData: [
                {
                    label: '内容标题',
                    key: 'contentTitle',
                    type: 'input',
                    value: '',
                    clearable: true
                },
                {
                    label: '所属栏目',
                    key: 'contentType',
                    type: 'select',
                    value: '',
                    optionsData: [ //（0：医保服务指南，1：医保政策解读，2、医院医保动态，3、医院动态，4、通知公告，5、健康园地，6、名医有约，7、人才招聘，8、就医指南）
                        {
                            label: '医疗护理 > 医保之窗 > 医保服务指南',
                            value: '0',
                        },
                        {
                            label: '医疗护理 > 医保之窗 > 医保政策解读',
                            value: '1',
                        },
                        {
                            label: '医疗护理 > 医保之窗 > 医院医保动态',
                            value: '2',
                        },
                        {
                            label: '医务动态 > 医院动态',
                            value: '3',
                        },
                        {
                            label: '医务动态 > 通知公告',
                            value: '4',
                        },
                        {
                            label: '医务动态 > 健康园地',
                            value: '5',
                        },
                        {
                            label: '医务动态 > 名医有约',
                            value: '6',
                        },
                        {
                            label: '人才招聘',
                            value: '7',
                        },
                        {
                            label: '就医指南',
                            value: '8',
                        },
                    ],
                },
            ],
            tableData: [],
            total: 0,
            selectForm: {
                currentPage: 1,
                pageSize: 10,
            },
        };
    },
    mounted() {
        this.init();
    },
    activated() {
        // 在首次挂载、
        // 以及每次从缓存中被重新插入的时候调用
        this.init();
    },
    methods: {
        parseTime,
        tableEditClick(id) {
            this.$router.push({
                name: 'editContent',
                query: {id},
            });
        },
        tableDetailClick(id) {
            this.$router.push({
                name: 'contentDetail',
                query: {id, isDetail: true},
            });
        },
        tableDeleteClick(id) {
            contentManagementAPI.deleteContentManagementById({id: id}).then(res => {
                if (res.code === 1000) {
                    this.$message.success("删除成功！")
                    this.init()
                }
            }).catch(err => {
                this.$message.error("删除失败，请重试")
            })
        },
        tablePublishClick(id) {
            contentManagementAPI.addOrUpdateContentManagement({id: id,status:"1",publishTime:new Date().getTime()}).then(res => {
                if (res.code === 1000) {
                    this.$message.success("发布成功！")
                    this.init()
                }
            }).catch(err => {
                this.$message.error("发布失败，请重试")
            })
        },
        tableBackClick(id) {
            contentManagementAPI.addOrUpdateContentManagement({id: id,status:"0",publishTime:""}).then(res => {
                if (res.code === 1000) {
                    this.$message.success("撤回成功！")
                    this.init()
                }
            }).catch(err => {
                this.$message.error("撤回失败，请重试")
            })
        },
        addInfo() {
            this.$router.push({
                name: 'addContent',
            });
        },
        searchByForm(form) {
            this.selectForm = {currentPage: 1, pageSize: 10, ...form};
            this.init();
        },
        handleSizeChange(val) {
            this.selectForm.pageSize = val;
            this.selectForm.currentPage = 1;
            this.init();
        },
        handleCurrentChange(val) {
            this.selectForm.currentPage = val;
            this.init();
        },
        init() {
            let param = {...this.selectForm}
            contentManagementAPI.getContentManagementList(param).then(res => {
                if (res.code === 1000) {
                    this.tableData = res.data.list
                    this.total = res.data.total
                } else {
                    this.$message.error("获取数据失败，请重试")
                }
            }).catch(err => {
                this.$message.error("网络异常，请重试")
            })
        },
    },
};
</script>

<style scoped lang="scss">
.contentManagementContainer {
    height: 100%;

    .bottomButton {
        display: flex;
        justify-content: center;
        margin-top: 16px;
    }

    .contentManagement {
        box-sizing: border-box;
        padding: $main-inside-padding;

        .addNotice {
            margin-bottom: 10px;
        }

        .el-table {
            .enclosure {
                display: inline-block;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .el-button {
                margin: 0 15px;
            }
        }
    }

    .pageSize {
        display: flex;
        justify-content: center;
        text-align: right;
    }
}

.obviousBox {
    // background-color: #e6e8e7;
}
</style>
