<template>
    <div>
        <i-page-header :title="pageTitle"></i-page-header>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <div class="fx-r" style="padding: 20px 0;">
				<el-select v-model="detial.status" placeholder="请选择是否显示">
					<el-option label="选择是否显示" value=""></el-option>
				    <el-option label="显示" value="1"></el-option>
					<el-option label="隐藏" value="0"></el-option>
				</el-select>
                <el-button type="primary" style="margin-left: 6px;" @click="tapSeach">查询</el-button>
				<div class="fx-g1"></div>
                <el-button type="danger" style="margin-left: 6px;" @click="tapAdd">添加公告</el-button>
            </div>
            <el-table :data="detial.data" v-loading="detial.loading" :stripe="true" :border="true" >
                <el-table-column
                        prop="id"
                        label="ID"
						width="80"
                        align="center">
                </el-table-column>
				<el-table-column
				        prop="title"
				        label="标题">
				</el-table-column>
				<!-- <el-table-column
				        prop="content"
				        label="内容">
				</el-table-column> -->
				<el-table-column
				         prop="status"
				         label="是否显示"
						 width="80"
				         align="left">
				     <template slot-scope="scope">
						<el-tag type="success" size="mini" v-if="scope.row.status == 1">显示</el-tag>
						<el-tag type="danger" size="mini" v-else>隐藏</el-tag>
				     </template>
				 </el-table-column>
				<el-table-column
				         prop="time"
				         label="时间"
						 width="180"
				         align="center">
				 </el-table-column>
				<el-table-column  align="center" label="操作"   prop="handle" width="150">
				    <template slot-scope="scope">
						<div><el-button plain size="mini" @click="tapEdit(scope.row)">编辑</el-button></div>
				    </template>
				</el-table-column>
            </el-table>
            <div class="acea-row row-right page">
                <Page :total="detial.pageCount" show-elevator show-total @on-change="tapPage" :page-size="detial.pageSize"/>
            </div>
        </Card>
		
	<Modal v-model="dialogVisible" :title="title" @on-cancel="editClose" width="800">
		<el-form ref="form" :model="form" label-width="120px">
			<el-form-item label="公告标题" prop="title" :rules="[{ required: true, message: '请输入公告标题'}]">
				<el-input placeholder="请输入公告标题" autocomplete="off" v-model="form.title"></el-input>
			</el-form-item>
			<el-form-item label="公告内容" prop="content" :rules="[{ required: true, message: '请输入公告内容'}]">
				<vue-ueditor-wrap v-model="form.content"  :config="myConfig"  style="width: 95%;"></vue-ueditor-wrap>
				<!-- <el-input placeholder="请输入公告内容" autocomplete="off" v-model="form.content" type="textarea"></el-input> -->
			</el-form-item>
			<el-form-item label="是否显示" style="margin-bottom: 0;">
				<el-radio-group v-model="form.status">
					<el-radio :label="1">显示</el-radio>
					<el-radio :label="0">隐藏</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="subAdmin">确 定</el-button>
        </span>
    </Modal>
		
    </div>
</template>
<script>
    import {SystemNewsList,SystemNewsAdd,SystemNewsDel} from "../../../api/system/news";
	import VueUeditorWrap from 'vue-ueditor-wrap'
    import IPageHeader from "../../../layouts/system/page-header/index";
	import UiUpload from "@/ui/upload/index";
	import Setting from '@/setting';
    export default {
        name: "SystemNewsList",
        components: {UiUpload,IPageHeader,VueUeditorWrap},
        computed: {},
        data() {
            return {
				pageTitle:'公告列表',
				upHeaders:{},
				upUrl:"",
				labelsData:[],
                detial: {
					data      : [],
					status    : "",
                    page      : 1,
					loading   : true,
                    pageSize  : 0,
                    pageCount : 0,
                },
				
				options: {
				    shortcuts: [
				        {
				            text: '今天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
				                return [start, end];
				            }
				        },
				        {
				            text: '昨天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)));
				                end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())));
				                return [start, end];
				            }
				        },
				        {
				            text: '最近7天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 6)));
				                return [start, end];
				            }
				        },
				        {
				            text: '最近30天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)));
				                return [start, end];
				            }
				        },
				        {
				            text: '本月',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), 1)));
				                return [start, end];
				            }
				        },
				        {
				            text: '本年',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
				                return [start, end];
				            }
				        }
				    ]
				},
				
				dialogVisible:false,
				title:"",
				form:{
				    title          : "",
					content        : "",
				    status        : 1,
				},
				
				myConfig: {
					toolbars: [
					    ['fullscreen', 'source', 'undo', 'redo', 'bold','italic', 'underline','strikethrough','paragraph', 'justifyleft','justifyright',
						'justifycenter','touppercase', 'lineheight','rowspacingtop', 'indent','rowspacingbottom','tolowercase',]
					],
					fontsize:[12,14,16,18,20,22,24],
				    autoHeightEnabled: false, // 编辑器不自动被内容撑高
				    initialFrameHeight: 300, // 初始容器高度
				    initialFrameWidth: '100%', // 初始容器宽度
				    UEDITOR_HOME_URL: Setting.apiBaseURL + '/sadminx/UEditor/',
				    serverUrl: ''
				}
            }
        },

        created() {
			
            this.initView();
        },
        methods: {
			/**
			 * 添加
			 */
			tapAdd:function(sassid){
			    this.dialogVisible = true;
			    this.$refs['form'].resetFields();
			    this.form = this.$utils.resetFields(this.form, {status:1});
			},
            initView:function(){
				var upHeaders = {};
				this.upUrl = Setting.apiBaseURL + "/systemv1/upload/index";
				const token = this.$utils.util.cookies.get('system_token');
				if (token) {
				    upHeaders['SYSTEM-ACC-TOKEN'] = token;
				}
				this.upHeaders = upHeaders;
                this.getData();
            },
			/**
			 * 上传文件
			 * @param res
			 */
			onUpload:function (res) {
			    if(res.code == -1) {
			        Notice.error({ title : "系统提示", content:res.msg});
			    } else {
			        this.form.imgs.push(res.data.img);
			    }
			},
			tapEdit:function(row){
				this.form = JSON.parse(JSON.stringify(row));
				this.dialogVisible = true;
				this.title = "编辑公告";
			},
			//关闭
			editClose:function(){
			    this.dialogVisible = false;
			},

			/**
			 * 修改数据
			 */
			subAdmin:function(e){
			    this.$refs['form'].validate((valid) => {
			        if (valid) {
			            let loading = this.$loading("提交数据中...");
			            var data = {};
			            for(var i in this.form) {
			                data[i] = this.form[i];
			            }
			            SystemNewsAdd(data)
			                .then(res => {
			                    loading.close();
			                    if (res.code == 200) {
			                        this.dialogVisible = false;
			                        this.$Message.success("操作成功");
			                        this.getData();
			                    } else {
			                        this.$alert(res.msg, '系统提示');
			                    }
			                })
			                .catch(err => {
			                    loading.close();
			                    this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
			                });
			        }
			    });
			},
			
			
            //搜索栏目
            tapSeach:function () {
                this.detial.page = 1;
                this.getData();
            },
            //分页
            tapPage:function (page) {
                this.detial.page = page;
                this.getData();
            },
            getData: function () {
                var data = {};
                this.detial.loading = true;
				data.page      = this.detial.page;
				data.status    = this.detial.status;
                SystemNewsList(data)
                    .then(res => {
                        this.detial.loading   = false;
                        this.detial.data      = res.data.list;
                        this.detial.pageSize  = res.data.pageSize;
                        this.detial.pageCount = res.data.pageCount;
                    })
                    .catch(err => {
                        this.detial.loading = false;
                        this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示');
                    });
            },
        }
    }
</script>
<style scoped>
iframe.videoIframe{border: 0px;padding: 0px;}
.el-dialog__body{padding: 0px;}
.el-dialog__body iframe body{padding: 0px;}

	.muser-tab-continer{border:1px solid #EEEEEE}
    a.muser-tab-a{display: inline-block;padding: 0px 28px;height:42px;line-height: 42px;border-bottom:3px solid transparent;font-size: 17px;color:#595959;}
    a.muser-tab-a.active{border-bottom:3px solid #EA312B;color:#EA312B}
	
	.upimg-item{width: 82px;height: 82px;margin-right: 5px;overflow: hidden;float: left;margin-bottom: 5px;position: relative;}
	.upimg-item img{width: 82px;cursor: pointer;}
	.img-remove-btn{position: absolute;top: 0px;right: 0px;font-size: 24px;}
</style>
