<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;">
				<Input placeholder="用户昵称"  style="width:200px" class="mr10" v-model="detial.nickname"/>
				<Input placeholder="用户UID"  style="width:200px" class="mr10" v-model="detial.uid"/>
				<Input placeholder="推广UIP"  style="width:200px" class="mr10" v-model="detial.uip"/>
				<Input placeholder="绑定手机号码"  style="width:200px" class="mr10" v-model="detial.mobile"/>
				<!-- <Input placeholder="请输入动态标题"  style="width:200px" class="mr10" v-model="detial.title"/> -->
				<DatePicker style="width: 250px" format="yyyy-MM-dd HH:mm:ss" v-model="detial.time" type="datetimerange" placement="bottom-start" placeholder="发布时间范围"
					                :options="options"></DatePicker>
                <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="tapAd">添加学校</el-button>
				<el-button type="success" style="margin-left: 6px;" @click="tapAddTask">发布任务</el-button> -->
            </div>
			
			<div class="muser-tab-continer">
			    <a class="muser-tab-a" :class="detial.status==''   ? 'active':''" @click="statusChange('')">全部</a>
			    <a class="muser-tab-a" :class="detial.status=='0'  ? 'active':''" @click="statusChange('0')">待审核({{detial.waitCount }})</a>
			    <a class="muser-tab-a" :class="detial.status=='1'  ? 'active':''" @click="statusChange('1')">已发布</a>
			    <a class="muser-tab-a" :class="detial.status=='-1' ? 'active':''" @click="statusChange('-1')">已禁用</a>
			</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="nickname"
						width="150"
				        label="用户">
						<template slot-scope="scope">
							<div>{{scope.row.nickname}}[UID:{{scope.row.uid}}]</div>
						</template>
				</el-table-column>
				<!-- <el-table-column
						width="200"
				        prop="title"
				        label="标题">
				</el-table-column> -->
				<el-table-column
				         prop="imgs"
				         label="主图"
						 width="160"
				         align="center">
				     <template slot-scope="scope">
						 <img v-for="(item,index) in scope.row.imgs" v-lazy="item" :src="item" v-image-preview style="width: 60px;cursor: pointer;"/>
				     </template>
				 </el-table-column>
				 
				 <el-table-column
				          prop="video"
				          label="视频"
						  width="360"
				          align="center">
				      <template slot-scope="scope">
						  <video v-if="scope.row.video" class="video-item"
						         :poster="scope.row.video_img"
						         width="320"
						         height="160"
						         controls=""
						         preload="">
						      <source :src="scope.row.video">
						  </video>
				      </template>
				  </el-table-column>
				<el-table-column
				        prop="content"
						min-width="320"
				        label="内容">
				</el-table-column>
				<el-table-column
				         prop="total"
				         label="状态"
						 width="200"
				         align="left">
				     <template slot-scope="scope">
						<div>审核状态:
						<el-tag type="success" size="mini" v-if="scope.row.status == 1">发布</el-tag>
						<el-tag type="danger" size="mini" v-else-if="scope.row.status == -1">禁用</el-tag>
						<el-tag type="warning" size="mini" v-else>待审核</el-tag></div>
						<div>发布时间:{{scope.row.time}}</div>
						<div>点赞数量:{{scope.row.love_count}}</div>
						<div>浏览数量:{{scope.row.look_count}}</div>
				     </template>
				 </el-table-column>
				 <el-table-column
				        prop="pro_id"
				 		width="100"
						align="center"
				        label="绑定商品">
						<template slot-scope="scope">
							<img v-if="scope.row.pro_id>0" v-lazy="scope.row.pro_img" :src="scope.row.pro_img" v-image-preview style="width: 60px;cursor: pointer;"/>
						</template>
				 </el-table-column>
				 
				<el-table-column  align="center" label="操作"     prop="handle" width="80" fixed="right">
				    <template slot-scope="scope">
						<div style="margin-bottom: 10px;" v-if="scope.row.status!=1"><el-button type="primary" plain size="mini" @click="tapEditStatus(scope.row.id,1)">发布</el-button></div>
						<div style="margin-bottom: 10px;" v-if="scope.row.status!=-1"><el-button type="danger" plain size="mini" @click="tapEditStatus(scope.row.id,-1)">禁用</el-button></div>
						<div><el-button type="danger" plain size="mini" @click="tapEditStatus(scope.row.id,-10)">删除</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>
		

		
    </div>
</template>
<script>
    import {SystemCircleList,SystemCircleEditStatus} from "../../../api/system/circle";
    import IPageHeader from "../../../layouts/system/page-header/index";
	import Setting from '@/setting';
    export default {
        name: "SystemCircleList",
        components: {IPageHeader},
        computed: {},
        data() {
            return {
				pageTitle:'动态列表',
                detial: {
					data      : [],
					time      : "",
					title     : "",
					nickname  : "",
					uid       : "",
					uip       : "",
					mobile    : "",
					status    : "",
                    page      : 1,
					loading   : true,
                    pageSize  : 0,
                    pageCount : 0,
					waitCount : 0,
                },
				dialogVisible:false,
				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];
				            }
				        }
				    ]
				},
            }
        },

        created() {
			if(this.$route.query.title){
				this.pageTitle = this.$route.query.title;
			}
			if(this.$route.query.uid){
				this.detial.uid = parseInt(this.$route.query.uid);
			}
            this.initView();
        },
        methods: {
            initView:function(){
                this.getData();
            },
			statusChange:function(status){
				this.detial.status = status;
				this.detial.page = 1
				this.getData()
			},
            //搜索栏目
            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;
				data.title     = this.detial.title;
				data.nickname  = this.detial.nickname;
				data.time      = this.detial.time;
				data.uid       = this.detial.uid;
				data.uip       = this.detial.uip;
				data.mobile    = this.detial.mobile;
                SystemCircleList(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;
						this.detial.waitCount = res.data.waitCount;
                    })
                    .catch(err => {
                        this.detial.loading = false;
                        this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示');
                    });
            },
			tapEditStatus (id,status) {
				var title="";
				if(status==-1){
					title="禁用";
				}
				if(status==-10){
					title="删除";
				}
				if(status==1){
					title="发布";
				}
				if(title==""){
					return;
				}
			    this.$confirm('此操作将'+title+'动态, 是否继续?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        type: 'warning'
			    }).then(() => {
			        this.$utils.loading(this, title+"数据中...");
			        SystemCircleEditStatus({id: id,status:status})
			            .then(res => {
			                this.$utils.loadingClose();
			                this.loading = true;
			                if (res.code == 200) {
			                    this.getData();
			                } else {
			                    this.$alert(res.msg);
			                }
			            })
			            .catch(err => {
			                this.$utils.loadingClose();
			                this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
			            });
			    }).catch((e)=>{});
			},

        }
    }
</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}
</style>
