<template>
	<div>
		<common ref="common" @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-fqhd">
			<div class="mui-content-padded">
				<h5>标题和封面</h5>
			</div>
			<div class="vongi-cashier margin10">
				<div class="mui-col-xs-7">
					<textarea v-if="titleEditShow" v-model="setForm.title" placeholder="请输入标题"></textarea>
					<div v-else>
						<span class="color999" v-text="setForm.title"></span>
						<a @click="titleEditShow=true" class="iconfont icon-bianji1"></a>
					</div>
				</div>
				<div class="flew mui-col-xs-5" style="min-height:35px;">
					<img v-if="setForm.frontCover" :src="setForm.frontCover">
					<a @click="chooseImage">更换封面</a>
				</div>
			</div>
			<div class="vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label style="width:40%"><i class="colorfe616c">*</i>活动起止日期</label>
						<button class="mui-btn mui-btn-block mui-ellipsis" type='button' style="width:60%">
							<font @click="selectStartTime">{{setForm.startTime?setForm.startTime:'开始时间'}}</font> 至 <font @click="selectEndTime">{{setForm.endTime?setForm.endTime:'结束时间'}}</font>
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="fyy-footer vongi-footer">
			<!-- <form class="mui-input-group vongi-xieyi">
				<div class="mui-input-row mui-radio mui-left">
					<label class="mui-h6">我已阅读并同意<span class="color4fc5f7">《小鹏管家用户责任承诺书》</span></label>
					<input name="radio1" type="radio">
				</div>
			</form> -->
			<div class="bindfyy-btn"><button @click="save" type="button" class="mui-btn mui-btn-primary ">提交审核</button></div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_Activity from '@/apis/Master/activity'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as types from '$project/store/mutation-types'
	import * as WxJsApi from '$project/utils/wxJsApi'
	import {
		currentTimeStamp,
		parseUnixTime,
		unixTimeStamp
	} from '$project/utils'
	export default {
		name: 'MasterActivityAddSet',
		components: {
			Common,
			Loading,
			TopHeader,
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '活动设置',

				subForm: {
					title: '',
					content: '',
					contentList: [],
				},

				setForm: {
					id: '',
					title: '',
					frontCover: '',
					startTime: '',
					endTime: ''
				},

				titleEditShow: false,
			}
		},
		created() {
			if (this.activity_form_data) {
				this.subForm = this.activity_form_data;
				this.setForm.title = this.subForm.title;
				if (this.subForm.contentList.length > 0 && this.subForm.contentList[0]['picture']) {
					this.setForm.frontCover = this.subForm.contentList[0]['picture'];
				}
			}
		},
		methods: {
			//微信选择图片
			chooseImage() {
				WxJsApi.chooseImage().then(res => {
					var localData = res.localData;

					if (localData.indexOf('data:image') != 0) {
						//判断是否有这样的头部
						localData = 'data:image/jpeg;base64,' + localData
					}
					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
					this.imgBase64 = localData;
					//显示裁剪图片
					//this.showCropper('faceImageUrl');
					this.uploadpic();
				}).catch(error => {
					mui.toast(error);
				})
			},
			//上传图片
			uploadpic() {
				this.isLoading = true;
				WxJsApi.uploadPic(this.imgBase64).then(response => {
					this.isLoading = false;

					this.setForm.frontCover = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//下一步
			doRightLink() {
				this.$router.push({
					name: 'MasterActivityAddSet'
				})
			},
			selectStartTime() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "date",
					"beginYear": 2020,
					"endYear": 2040,
					"beginDate": new Date(),
					"value": _this.setForm.startTime
				});
				picker.show(function(rs) {
					_this.setForm.startTime = rs.text;
					if (unixTimeStamp(_this.setForm.startTime) > unixTimeStamp(_this.setForm.endTime)) {
						_this.setForm.endTime = _this.setForm.startTime;
					}
					picker.dispose();
				});
			},
			selectEndTime() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "date",
					"beginYear": 2020,
					"endYear": 2040,
					"beginDate": new Date(_this.setForm.startTime),
					"value": _this.setForm.endTime
				});
				picker.show(function(rs) {
					_this.setForm.endTime = rs.text;
					picker.dispose();
				});
			},
			//检测
			checkForm() {
				if (!this.setForm.title) {
					mui.toast('请输入标题');
					return false;
				} else if (!this.setForm.frontCover) {
					mui.toast('请上传封面图片');
					return false;
				} else if (!this.setForm.startTime) {
					mui.toast('请选择活动开始时间');
					return false;
				} else if (!this.setForm.endTime) {
					mui.toast('请选择活动结束时间');
					return false;
				} else {
					return true;
				}
			},
			//保存
			save() {
				if (this.checkForm()) {
					this.isLoading = true;
					this.subForm.content = JSON.stringify(this.subForm.contentList);
					API_Activity.addActivity(this.subForm).then(response => {
						this.isLoading = false;

						this.setForm.id = response.id;
						this.submit();
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//提交
			submit() {
				this.isLoading = true;
				API_Activity.setActivity(this.setForm).then(response => {
					this.isLoading = false;

					mui.toast('提交成功，等待审核');
					//清空数据
					this.set_activity_form_data(null);
					this.$router.push({
						name: 'MasterActivityMyList'
					})
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			asynCallBack() {

			},
			...mapMutations({
				set_activity_form_data: types.SET_ACTIVITY_FORM_DATA,
			})
		},
		mounted() {
			//获取微信配置
			WxJsApi.getWxConfig();
		},
		destroyed() {},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				activity_form_data: 'activity_form_data',
			})
		}
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>
<style>
</style>
