<template>
	<view>
		<u-toast ref="uToast" />
		<common :tips='commonTips'></common>
		<u-form class="info-form">

			<u-form-item v-if="showAvatarUpload" label-width="180" label="头　　像">
				<view>
					<u-upload ref="uUpload" @on-remove="avatarOnRemove" @on-change="avatarOnChange" :size-type="['compressed']"
					name="file" width="160" height="160" :form-data="uploadFormData" :action="uploadAction" :max-count="avatarFileNumber"
					:file-list="avatarFileList"></u-upload>
				</view>
			</u-form-item>

			<block v-for="(item, index) in detail" :key="index">
				<u-form-item v-if="item.type == 'input' || item.type == 'textarea'" label-width="180"
					:label="item.title">
					<u-input :type="item.type" v-model="item.value" :placeholder="'请输入' + (item.placeholderTitle ? item.placeholderTitle:item.title)" />
				</u-form-item>
				<u-form-item v-if="item.type == 'select'" label-width="180" :label="item.title">
					<u-select :default-value="item.value" v-model="item.show" mode="single-column" :list="item.data"
						@confirm="confirmSelect"></u-select>
					<view @click="openSelect(index)">{{item.data[item.value[0]].label}}</view>
				</u-form-item>
				<u-form-item v-if="item.type == 'date'" label-width="180" :label="item.title">
					<u-picker :default-time="item.value[0] + '-' + item.value[1] + '-' + item.value[2]"
						v-model="item.show" mode="time" @confirm="confirmData"></u-picker>
					<view @click="openSelect(index, index)">
						{{item.value[0] + '-' + item.value[1] + '-' + item.value[2]}}
					</view>
				</u-form-item>
			</block>
			<u-button v-if="detail.length" :loading="submitButtonStatus" :disabled="submitButtonStatus"
				class="submit-button" type="primary" @click="submit">{{submitButtonText}}</u-button>
		</u-form>
	</view>
</template>

<script>
	var userIdsStr = ''
	export default {
		data() {
			return {
				id: 0,
				type: '',
				detail: [],
				openSelectName: false,
				showAvatarUpload: false,
				uploadAction: '',
				uploadFormData: new Object(),
				avatarFileList: [],
				userToken: '',
				avatarFileNumber: 2,
				newAvatar: false,
				submitButtonStatus: false,
				submitButtonText: '保存',
				commonTips: ''
			}
		},
		onLoad: function(query) {
			this.id = query.id ? query.id : 0
			this.type = query.type ? query.type : 'user'
			userIdsStr = query.ids ? query.ids : ''
			let userinfo = uni.getStorageSync('userinfo');
			this.userToken = userinfo.token
		},
		onShow() {
			this.ws.checkNetwork(this)
		},
		onReady: function(query) {
			var that = this
			that.uploadAction = that.ws.buildUrl('upload', that.userToken)
			
			if (this.type == 'create-group') {
				uni.setNavigationBarTitle({
					title: '创建群聊'
				});
				that.showAvatarUpload = true
				that.detail = [{
					title: '群　　名',
					placeholderTitle: '群名',
					type: 'input',
					name: 'nickname',
					value: ''
				},
				{
					title: '群聊简介',
					type: 'textarea',
					name: 'bio',
					value: ''
				},
				{
					title: '加群模式',
					type: 'select',
					name: 'add_mode',
					data: [{
							value: '0',
							label: '需管理员审核',
							extra: '2'
						},
						{
							value: '1',
							label: '无需审核',
							extra: '2'
						}
					],
					value: [0],
					show: false
				},
				{
					title: '邀请免审',
					type: 'select',
					name: 'invite_join_group',
					data: [{
							value: '0',
							label: '成员邀请好友需审核',
							extra: '3'
						},
						{
							value: '1',
							label: '成员邀请好友免审核',
							extra: '3'
						},
					],
					value: [0],
					show: false
				},
				{
					title: '历史消息',
					type: 'select',
					name: 'history_message',
					data: [{
							value: '0',
							label: '不允许新入群用户查看',
							extra: '4'
						},
						{
							value: '1',
							label: '允许新入群用户查看',
							extra: '4'
						},
					],
					value: [0],
					show: false
				},
				{
					title: '成员发言',
					type: 'select',
					name: 'speak',
					data: [{
							value: '0',
							label: '允许发言',
							extra: '5'
						},
						{
							value: '1',
							label: '禁止发言',
							extra: '5'
						},
					],
					value: [0],
					show: false
				},
				{
					title: '检索设置',
					type: 'select',
					name: 'retrieval_settings',
					data: [{
						value: '0',
						label: '禁用搜素加群',
						extra: '6'
					},
					{
						value: '1',
						label: '允许被搜素到',
						extra: '6'
					}],
					value: [0],
					show: false
				}]
				
				that.submitButtonText = '创建群聊'
				
				this.ws.pageFun(() => {
					this.ws.send({
						c: 'ImBase',
						a: 'getUploadMultipart'
					});
				}, this)
			} else {
				// time需要在ready赋值
				this.ws.pageFun(this.pageDataLoad, this);
			}
		},
		methods: {
			openSelect: function(index, name = false) {
				this.detail[index].show = true
				this.openSelectName = name ? name : false
			},
			confirmData: function(value) {
				this.detail[this.openSelectName].value = [
					value.year,
					value.month,
					value.day
				]
			},
			confirmSelect: function(value) {
				var valueIndex = 0,
					data = this.detail[value[0].extra].data;
				for (var i = 0; i < data.length; i++) {
					if (data[i].value == value[0].value) {
						valueIndex = i
					}
				}
				this.detail[value[0].extra].value = [valueIndex]
			},
			pageDataLoad: function() {
				var that = this
				let message = {
					c: 'User',
					a: 'infoDetail',
					data: {
						id: that.id,
						type: that.type,
						method: that.type + '-edit'
					}
				}
				that.ws.send(message);
				
				that.ws.send({
					c: 'ImBase',
					a: 'getUploadMultipart'
				});
			},
			avatarOnSuccess: function(data) {
				this.newAvatar = this.ws.imgUrl(data.data.fullurl)
				if (this.avatarFileNumber >= 2) {
					this.$refs.uUpload.clear();
					this.avatarFileList = [{
						url: this.newAvatar
					}]
					this.avatarFileNumber = 1
				}
			},
			avatarOnChange: function(res, index, lists) {
				res = JSON.parse(res.data);
				if (res.code == 1) {
					this.avatarOnSuccess(res)
				} else {
					this.ws.pageFun(() => {
						this.ws.send({
							c: 'ImBase',
							a: 'getUploadMultipart'
						})
					}, this)
					
					this.$refs.uUpload.remove(index);
					
					uni.showModal({
						title: '温馨提示',
						content: res.msg,
						showCancel: false
					})
				}
			},
			avatarOnRemove: function() {
				this.avatarFileNumber = 1
			},
			submit: function() {
				var that = this
				that.submitButtonStatus = true
				var values = {};
				for (var i = 0; i < that.detail.length; i++) {
					if (that.detail[i].type == 'date') {
						values[that.detail[i].name] = that.detail[i].value[0] + '-' + that.detail[i].value[1] + '-' +
							that.detail[i].value[2]
					} else if (that.detail[i].type == 'select') {
						values[that.detail[i].name] = that.detail[i].data[that.detail[i].value[0]].value
					} else {
						values[that.detail[i].name] = that.detail[i].value
					}
				}

				if (that.newAvatar) {
					values.avatar = that.newAvatar
				}

				var nicknameErrorTip = '', message = {}
				if (that.type == 'user') {
					nicknameErrorTip = '请输入正确的昵称~'
					values.method = 'post-user-edit'
					values.type = 'user'
					values.id = that.id
					message = {
						c: 'User',
						a: 'infoDetail',
						data: values
					}
				} else if (that.type == 'group') {
					nicknameErrorTip = '请输入正确的群聊名称~'
					values.method = 'post-group-edit'
					values.type = 'group'
					values.id = that.id
					message = {
						c: 'User',
						a: 'infoDetail',
						data: values
					}
				} else if (that.type == 'create-group') {
					nicknameErrorTip = '请输入正确的群聊名称~'
					message = {
						c: 'Message',
						a: 'createGroup',
						data: {
							pickuser: userIdsStr,
							data: values
						}
					}
				}

				if (!values['nickname']) {
					that.$refs.uToast.show({
						title: nicknameErrorTip,
						type: 'error'
					})
					return;
				}

				that.ws.pageFun(function() {
					that.ws.send(message);
					that.ws.showMsgCallback = function() {
						if (that.type != 'create-group') {
							setTimeout(function() {
								that.submitButtonStatus = false
								that.ws.pageRefresh.centerInfo = true
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						}
					}
				}, that)
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
	.info-form {
		display: block;
		width: 92vw;
		margin: 0 auto;
	}

	.submit-button {
		width: 60vw;
		display: block;
		margin: 40rpx auto;
	}
</style>
