<template>
	<view style="padding-bottom: 100upx; margin-top: 20rpx;">
		<view class="padding bg radius margin">

			<u-form :model="form" ref="uForm" label-position="top" :label-style='lableStyle'>
				<u-form-item label="" :border-bottom='false' style="border-bottom: 1px #f7f7f7 solid;">
					<view class="skleft">
						店铺名称
					</view>
					<u-input  placeholder="请填写（必填）" v-model="form.consortiaName" type="text"
						style="color: #999999;" />
				</u-form-item>
				<u-form-item label="" :border-bottom='false'>
					<view class="skleft">
						联系方式
					</view>
					<u-input  placeholder="请填写（必填）" v-model="form.phone" type="number"
						maxlength="11" style="color: #999999;" />
				</u-form-item>
				<u-form-item label="" :border-bottom='false'>
					<view class="skleft">
						店铺标签
					</view>
					<u-input placeholder="请填写店铺标签(以逗号分隔)" v-model="form.labels" type="text"
						 style="color: #999999;" />
				</u-form-item>
				<u-form-item class="jiashao" label="" :border-bottom='false'>
					<view class="skleft">
						店铺介绍
					</view>
					<view class="bg">
						<u-input  v-model="form.consortiaContent" style="border-radius: 20rpx;"
							type="textarea" height="200" placeholde="请填写店铺介绍" maxlengt="200" :clearable="false" />
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class=" padding bg radius margin"
			style="padding-top: 20rpx; margin-top: 20rpx;">
			<view class="margin-top-sm">头像上传</view>
			<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
				<view class="margin-top flex margin-right-sm flex-wrap" v-if="form.headImg && form.headImg.length">
					<view class="flex" style="width: 200rpx;height: 200rpx;margin-right: 5rpx;position: relative;">
						<image :src="form.headImg" style="width: 100%;height: 100%;"></image>
						<view v-if="renzheng == 0 || renzheng == 3"
							style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
							@click="headImgremove(index)">
							<u-icon name="close-circle-fill" color="#d81e06" size="50rpx"></u-icon>
						</view>
						<!-- <image :src="form.headImg" style="width: 100%;height: 100%;"></image>
						<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
							@click="headImgremove(index)">
							<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
						</view> -->
					</view>
				</view>
				<view class="margin-top" @click="addImage(4)" v-if="form.headImg.length<=0">
					<view style="width: 200rpx;height: 200rpx;background: #f7f8fa;"
						class="flex justify-center align-center">
						<view>
							<view class="text-center">
								<image src="../../static/images/my/avatar.png" style="width: 80rpx;height: 80rpx;">
								</image>
							</view>
							<view class="text-center add-word">添加头像</view>
						</view>
					</view>
				</view>
			</view>
		
			
		</view>
		
		
		<view class="tabbar" style="background: linear-gradient(to right, #019c88, #2dbe93); border-radius: 50rpx;"
			@click="submit()" v-if="renzheng == 0||renzheng==3">提交</view>
	</view>
</template>

<script>
	import * as websocketUtils from 'utils/websocketUtils.js';

	export default {
		data() {
			return {
				showAgree: false,
				form: {
					consortiaName: '',
					consortiaContent:'',
					phone: '',
					labels:'',
					consortiaId:'',
					//头像上传
					headImg: '',
				},
				
				// disabled: false,
				lableStyle: {
					color: '#000000',
					fontSize: '30upx'
				},
				customStyle: {
					backgroundColor: '#005DFF',
					color: '#ffffff',
					border: 0
				},
				customStyle1: {
					backgroundColor: '#ccc',
					color: '#000000',
					border: 0
				},
				renzheng: '',

				show: false,
				
				showData: false,
				
				//头像上传
				headImg: [],
				showpay: false,
				openLists: [],
				openWay: 1,
				typeId: '',
				closeable: true,
				XCXIsSelect: '否',
				renzhengStatus: false,
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData(){
				var that=this;
				
				that.$Request.get('/app/consortia/selectConsortiaUserId').then(res => {
					if (res.code == 0) {
						that.form.consortiaName = res.data.consortiaName ? res.data.consortiaName : ''
						that.form.consortiaContent = res.data.consortiaContent ? res.data.consortiaContent : ''
						that.form.phone = res.data.phone ? res.data.phone : ''
						that.form.labels=res.data.tags ? res.data.tags : ''
						that.form.headImg=res.data.logo ? res.data.logo : ''
						that.form.consortiaId=res.data.consortiaId ? res.data.consortiaId : ''
						console.log("that.form",that.form)
					}
				})
			},
			headImgremove(index) {
				this.form.headImg = ''
			},
			submit() {
				if (!this.form.consortiaName) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.headImg) {
					uni.showToast({
						title: '请上传头像',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				let data = {
					consortiaId:this.form.consortiaId,
					consortiaName: this.form.consortiaName,
					phone: this.form.phone,
					tags:this.form.labels,
					logo: this.form.headImg,
					consortiaContent:this.form.consortiaContent,
				}
				this.$Request.postJson("/app/consortia/updateConsortia", data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '修改成功！',
							icon: 'none'
						})
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/my/index'
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			addImage(e) {
				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								url: websocketUtils.uploadFileUrl(), //真实的接口地址
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										that.form.front = JSON.parse(uploadFileRes.data).data
									} else if (e == 2) {
										that.form.back = JSON.parse(uploadFileRes.data).data
									} else if (e == 4) {
										that.form.headImg = JSON.parse(uploadFileRes.data).data
										console.log(that.form.headImg)
									}
									uni.hideLoading();

								}
							});
						}
					}
				})
			},
		}
	}
</script>

<style>
	.jiashao /deep/.u-form-item--right__content__slot{
		align-items: end;
	}
	page {
		background-color: #F7F7F7;
	}

	.bg {
		width: 94%;
		background-color: #FFFFFF;		
		border-radius: 26rpx;
		
	}
	.add-word{
		font-size: 26rpx;
		color: #afb5c1;
	}
	.skbox {}

	.skleft {
		width: 160rpx;
		font-size: 28rpx;
	}

	.u-form-item {
		padding: 10rpx !important;
	}

	.u-form-item--right__content__slot {
		flex: 200rpx 1 !important;
	}

	.footer {
		padding-left: 30upx;
		font-size: 24upx;
		color: #666666;
		text-align: center;
		display: flex;
		margin-bottom: 20rpx;
	}

	.u-input__input {
		color: balck !important;
	}

	.title_btn {
		height: 78upx;
		line-height: 78upx;
		/* background: #f7f7f7; */
	}

	.tabbar {
		width: 690upx;
		height: 86upx;
		background: #019c88;
		border-radius: 8upx;
		margin: 0 auto;
		text-align: center;
		line-height: 86upx;
		color: #FFFFFF;
		margin-top: 20rpx;
	}

	.popup_pay {

		width: 100%;
		position: relative;
		padding-bottom: 45rpx;
		/* height: 160px; */
		/* #ifndef MP-WEIXIN */
		/* height: 130px; */
		/* #endif */

	}

	.pay_btn {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		background: #1777FF;
		height: 80rpx;
		border-radius: 16rpx;
		color: #ffffff;
		line-height: 80rpx;

	}

	.hb {
		/* #ifdef H5 */
		padding-bottom: 180rpx;
		/* #endif */
	}

	.bgCol2 {
		color: #557EFD;
	}
</style>