<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.is_show" placeholder="请选择是否显示">
					<el-option label="选择是否显示" value=""></el-option>
				    <el-option label="显示" value="1"></el-option>
					<el-option label="隐藏" value="0"></el-option>
				</el-select>
				
				<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="tapAdd">添加活动</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')">活动结束</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
						width="200"
				        prop="title"
				        label="标题">
				</el-table-column>
				<el-table-column
				         prop="imgs"
				         label="主图"
						 width="160"
				         align="left">
				     <template slot-scope="scope">
						 <img v-for="(item,index) in scope.row.imgs" :key="index" v-lazy="item" :src="item" v-image-preview style="width: 60px;cursor: pointer;margin-right: 5px;"/>
				     </template>
				 </el-table-column>
				 <el-table-column
				          prop="descs"
				          label="详情图"
				 		 width="160"
				          align="left">
				      <template slot-scope="scope">
				 		 <img v-for="(item,index) in scope.row.descs" :key="index" v-lazy="item" :src="item" v-image-preview style="width: 60px;cursor: pointer;margin-right: 5px;"/>
				      </template>
				  </el-table-column>
				  <el-table-column
				        prop="labels"
				        label="标签"
				  		width="80"
				        align="center">
				       <template slot-scope="scope">
						   <el-tag v-for="(item,index) in scope.row.labels" :key="index" style="margin-right: 5px;margin-bottom: 5px;">{{item}}</el-tag>
				       </template>
				   </el-table-column>
				<el-table-column
				        prop="mono"
				        label="详情">
				</el-table-column>
				
				<el-table-column
				        prop="order_count"
						align="center"
						width="100"
				        label="报名数">
						<template slot-scope="scope">
							<i-link  :to="'/system/order/activity?activity_id=' + scope.row.id + '&title=' +scope.row.title+ '的报名' ">{{ scope.row.order_count}}</i-link>
						</template>
				</el-table-column>
				
				
				<el-table-column
				         prop="is_main"
				         label="是否主推"
						 width="80"
				         align="left">
				     <template slot-scope="scope">
						<el-tag size="mini" v-if="scope.row.is_main == 1">主推</el-tag>
				     </template>
				 </el-table-column>
				<el-table-column
				         prop="is_show"
				         label="是否显示"
						 width="80"
				         align="left">
				     <template slot-scope="scope">
						<el-tag type="success" size="mini" v-if="scope.row.is_show == 1">显示</el-tag>
						<el-tag type="danger" size="mini" v-else>隐藏</el-tag>
				     </template>
				 </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-if="scope.row.status == 0">活动已经结束</el-tag>
						</div>
						<div>活动时间:{{scope.row.time}}</div>
						<div>活动时长:{{scope.row.time_str}}</div>
						<div>活动地址:{{scope.row.address}}</div>
				     </template>
				 </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-tabs v-model="formActiveName">
				<el-tab-pane label="活动信息" name="tab_base">
					<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="deposits_price" :rules="[{ required: true, message: '请输入活动订金'}]">
						<el-input placeholder="请输入活动订金" autocomplete="off" v-model="form.deposits_price"></el-input>
					</el-form-item>
					<el-form-item label="活动时间" prop="time" :rules="[{ required: true, message: '请选择活动时间'}]">
						<DatePicker style="width: 100%" format="yyyy-MM-dd HH:mm:ss" v-model="form.time" type="datetime" placement="bottom-start" placeholder="活动时间" :options="options"></DatePicker>
					</el-form-item>
					<el-form-item label="时长描述" prop="time_str">
						<el-input placeholder="请输入时长描述" autocomplete="off" v-model="form.time_str"></el-input>
					</el-form-item>
					<el-form-item label="活动地点" prop="address">
						<el-input placeholder="请输入活动地点" autocomplete="off" v-model="form.address"></el-input>
					</el-form-item>
					<el-form-item label="活动详情" prop="mono">
						<el-input placeholder="请输入活动详情" autocomplete="off" v-model="form.mono" type="textarea"></el-input>
					</el-form-item>
					<el-form-item label="活动标签" prop="labels">
						<el-select v-model="form.labels" multiple filterable allow-create default-first-option placeholder="请选择文章标签" style="width: 100%;">
						    <el-option
						      v-for="(item,index) in labelsData"
						      :key="item.name"
						      :label="item.name"
						      :value="item.name">
						    </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="主图" prop="imgs" :rules="[{ required: true, message: '请上传主图'}]">
						<div class="clearfix" style="width: 100%;">
							<div class="upimg-item fx-r fx-bc fx-ac" style="" v-for="(item,index) in form.imgs" :key="index">
								<img v-lazy="item" :src="item" v-image-preview/>
								<i class="el-icon-error img-remove-btn" @click="removeImgs(index)"></i>
							</div>
							<ui-upload style="float: left;" :upUrl="upUrl"  fileName="上传图片" :headers="upHeaders" :updata="{isz:0,code:'activity'}" @onUpload="onUpload" v-if="form.imgs.length<5"></ui-upload>
						</div>
					</el-form-item>
					<el-form-item label="详情图" prop="descs" :rules="[{ required: true, message: '请上传详情图'}]">
						<div class="clearfix" style="width: 100%;">
							<div class="upimg-item fx-r fx-bc fx-ac" style="" v-for="(item,index) in form.descs" :key="index">
								<img v-lazy="item" :src="item" v-image-preview/>
								<i class="el-icon-error img-remove-btn" @click="removeDescs(index)"></i>
							</div>
							<ui-upload style="float: left;" :upUrl="upUrl"  fileName="上传图片" :headers="upHeaders" :updata="{isz:0,code:'activity'}" @onUpload="onUploadDescs" v-if="form.descs.length<5"></ui-upload>
						</div>
					</el-form-item>
					<el-form-item label="是否主推" style="margin-bottom: 0;">
						<el-radio-group v-model="form.is_main">
							<el-radio :label="1">主推</el-radio>
							<el-radio :label="0">普通</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="是否显示" style="margin-bottom: 0;">
						<el-radio-group v-model="form.is_show">
							<el-radio :label="1">显示</el-radio>
							<el-radio :label="0">隐藏</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="报名信息" name="tab_parms">
					<el-table :data="form.data" border style="width: 100%">
					    <el-table-column
					      prop="title"
					      label="标题"
					      width="100">
					    </el-table-column>
					   <el-table-column
					     prop="type"
					     label="类型"
					     width="140">
						 <template slot-scope="scope">
							 <el-select v-model="form.data[scope.$index].type" placeholder="请选择类型">
							 	<el-option label="选择类型" value=""></el-option>
							    <el-option :label="item3.title" :value="item3.type" v-for="(item3,index3) in activityFromType" :key="index3"></el-option>
							 </el-select>
						</template>
					   </el-table-column>
					   <el-table-column prop="required" label="是否必填" width="120">
					   		<template slot-scope="scope">
					   			<el-select v-model="form.data[scope.$index].required" placeholder="是否必填">
					   				<el-option label="是否必填" value=""></el-option>
					   				<el-option label="必填" :value="1"></el-option>
									<el-option label="非必填" :value="0"></el-option>
					   			</el-select>
					   		</template>
					   </el-table-column>
					   <el-table-column
					     prop="parms"
					     label="参数选项">
						 <template slot-scope="scope">
							 <div v-if="form.data[scope.$index].type=='select'">
								 <el-tag :key="index2" v-for="(domain, index2) in scope.row.parms" closable :disable-transitions="false" @close="handleClose(scope.$index,index2)">
								 	{{domain}}
								 </el-tag>
								 <el-input class="input-new-tag" style="width: 120px;" placeholder="+添加参数选项" v-model="form.data[scope.$index].parms_value" size="small" @keyup.enter.native="handleInputConfirm(scope.$index)" @blur="handleInputConfirm(scope.$index)"></el-input>
							 </div>
						 </template>
					   </el-table-column>
					   <el-table-column
					   prop="handle"
					   label="操作"
					   width="100">
							<template slot-scope="scope">
								<el-button type="primary" icon="el-icon-delete" @click="parmsHandleClose(scope.$index)">移除</el-button>
						   </template>
					   </el-table-column>
					</el-table>
					<div style="margin-top: 10px;">
						<el-input class="input-new-tag" style="width: 120px;" placeholder="+添加参数" v-model="add_parms_name" size="small" @keyup.enter.native="handleInputNameConfirm" @blur="handleInputNameConfirm"></el-input>
					</div>
					
					
					
				</el-tab-pane>
			</el-tabs>
		</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 {SystemActivityList,SystemActivityAdd} from "../../../api/system/activity";
	import {SystemLabelList} from "../../../api/system/label";
	
    import IPageHeader from "../../../layouts/system/page-header/index";
	import UiUpload from "@/ui/upload/index";
	import Setting from '@/setting';
    export default {
        name: "SystemActivityList",
        components: {UiUpload,IPageHeader},
        computed: {},
        data() {
            return {
				pageTitle:'活动列表',
				upHeaders:{},
				upUrl:"",
				labelsData:[],
                detial: {
					data      : [],
					time      : "",
					title     : "",
					status    : "",
					is_show   : "",
                    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          : "",
					mono           : "",
				    imgs           : [],
					descs          : [],
					time           : "",
					time_str       : "",
					address        : "",
				    is_show        : 1,
					is_main        : 0,
					labels         : [],
					deposits_price : "",
					data           : [],
				},
				add_parms_name:"",
				formActiveName:"tab_base",
				defaultParms:[],
				inputVisible:false,
				activityFromType:[],
            }
        },

        created() {
			
            this.initView();
        },
        methods: {
			handleInputConfirm(index) {
			    let add_parms_value = this.form.data[index].parms_value;
			    if (add_parms_value) {
			        this.form.data[index].parms.push(add_parms_value);
			    }
				this.form.data[index].parms_value="";
			},
			handleInputNameConfirm(){
				let add_parms_name = this.add_parms_name;
				if (add_parms_name) {
				    this.form.data.push({
						title:add_parms_name,
						type:"input",
						content:"",
						required:1,
						parms:[],
					});
				}
				this.add_parms_name="";
			},
			handleClose:function(index,index2){
				this.$delete(this.form.data[index].parms,index2);
			},
			parmsHandleClose:function(index){
				this.$delete(this.form.data,index);
			},
			/**
			 * 添加
			 */
			tapAdd:function(sassid){
				var that = this;
				this.formActiveName="tab_base";
			    this.dialogVisible = true;
			    this.$refs['form'].resetFields();
			    this.form = this.$utils.resetFields(this.form, {
					is_show:1,
					is_main:0,
					imgs:[],
					descs:[],
					labels:[],
					data: JSON.parse(JSON.stringify(that.defaultParms)),
				});
			},
            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();
				this.getLabelData();
            },
			statusChange:function(status){
				this.detial.status = status;
				this.detial.page = 1
				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);
			    }
			},
			onUploadDescs:function(res){
				if(res.code == -1) {
				    Notice.error({ title : "系统提示", content:res.msg});
				} else {
				    this.form.descs.push(res.data.img);
				}
			},
			tapEdit:function(row){
				this.formActiveName="tab_base";
				this.form = JSON.parse(JSON.stringify(row));
				this.dialogVisible = true;
				this.title = "编辑活动";
			},
			//关闭
			editClose:function(){
			    this.dialogVisible = false;
			},
			removeImgs:function(index){
				this.$delete(this.form.imgs,index);
			},
			removeDescs:function(index){
				this.$delete(this.form.descs,index);
			},
			removeLabels:function(index){
				this.$delete(this.form.labels,index);
			},
			/**
			 * 修改数据
			 */
			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];
			            }
			            SystemActivityAdd(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 that = this;
                var data = {};
                this.detial.loading = true;
				data.page      = this.detial.page;
				data.status    = this.detial.status;
				data.title     = this.detial.title;
				data.time      = this.detial.time;
				data.is_show   = this.detial.is_show;
                SystemActivityList(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;
						if(that.defaultParms.length<=0 && res.data.defaultParms){
							that.defaultParms = res.data.defaultParms;
						}
						if(that.activityFromType.length<=0 && res.data.activityFromType){
							that.activityFromType = res.data.activityFromType;
						}
						
                    })
                    .catch(err => {
                        this.detial.loading = false;
                        this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示');
                    });
            },
			getLabelData: function () {
			    var that = this,data = {};
				data.pageSize = 100;
			    SystemLabelList(data)
			        .then(res => {
						if(res.code == 200 && res.data && res.data.list.length>0) {
						    that.labelsData = res.data.list;
						}
			        })
			        .catch(err => {
			           
			        });
			},
        }
    }
</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: 12px;overflow: hidden;float: left;margin-bottom: 12px;position: relative;border:1px solid #595959;}
	.upimg-item img{width: 82px;cursor: pointer;}
	.img-remove-btn{position: absolute;top: 0px;right: 0px;font-size: 24px;}
	
	
	.el-tag + .el-tag {
	    margin-left: 10px;
		margin-bottom: 10px;
	  }
	  .button-new-tag {
	    margin-left: 10px;
	    height: 32px;
	    line-height: 30px;
	    padding-top: 0;
	    padding-bottom: 0;
	  }
	  .input-new-tag {
	    width: 90px;
	    margin-left: 10px;
	    vertical-align: bottom;
	  }
</style>
