<template>
	<view class="news-edit">
		<view class="m-cell">
			<view class="m-cell-hd">内容：</view>
			<view class="m-cell-bd">
				<textarea
					class="input" 
					name="text" 
					v-model="formData.category_content" 
					placeholder-class="placeholder" 
				></textarea>
			</view>
		</view>
		<view class="m-cell">
			<view class="m-cell-hd">关键字：</view>
			<view class="m-cell-bd">
				<input 
					class="input input-1" 
					placeholder-class="placeholder" 
					type="text" 
					v-model="formData.message_keywords" 
				/>
			</view>
		</view>
		<view class="m-cell">
			<view class="m-cell-hd">分类：</view>
			<view class="m-cell-bd">
				<select name="public-choice" class="input input-1" v-model="formData.category_id" @change="getCouponSelected">
					<option value="">请选择</option>
				    <option :value="item.category_id" v-for="item in category" >{{item.category_name}}</option>                                    
				</select>
			</view>
		</view>
		<view class="m-cell">
			<view class="m-cell-hd">区域：</view>
			<view class="m-cell-bd">
				<select name="public-choice" class="input input-1" v-model="formData.message_area" @change="getCouponSelected">
					<option value="">请选择</option>
				    <option :value="item.id" v-for="item in area" >{{item.category_name}}</option>                                    
				</select>
			</view>
		</view>
		<view class="m-cell m-cell-select-before" @click="showbox">
			<view class="m-cell-hd">省/市/区：</view>
			<view class="m-cell-bd">
				<label>{{seladstr}}</label>
			</view>
		</view>
		<view class="m-cell">
			<view class="m-cell-hd">详细地址：</view>
			<view class="m-cell-bd">
				<input 
					class="input input-1" 
					placeholder-class="placeholder" 
					type="text" 
					v-model="formData.message_address" 
				/>
			</view>
		</view>
		<view class="m-cell">
			<view class="m-cell-hd">联系人：</view>
			<view class="m-cell-bd">
				<input 
					class="input input-1" 
					placeholder-class="placeholder" 
					type="text" 
					v-model="formData.message_username" 
				/>
			</view>
		</view>
		<view class="m-cell">
			<view class="m-cell-hd">手机号：</view>
			<view class="m-cell-bd">
				<input 
					class="input input-1" 
					placeholder-class="placeholder" 
					type="number" 
					v-model="formData.message_mobile" 
				/>
			</view>
		</view>
		<view class="m-cell">
		    <view class='bk_box'>
		        <view class='m-cell-hd'>图片：</view>
		        <view class='pic_box'>
		            <view class='pic_box_img'>
		                <!-- 视频 -->
		                <view  v-if="story_video" class="hjs-select-img" >
		                    <view class="uni-icon uni-icon-clear mp-clean-icon icon-cuo" @tap="delectVideo" v-if="false"></view>
		                    <video :src="story_video" class="pic_box_image" ></video>
		                    <cover-view  class='shanchu'>
		                        <label  @tap="delectVideo" class="iconfont icon-delete" style='color:#fff'></label>
		                    </cover-view>
		                </view>
		        
		                <block v-for="(item, index) in ImgList" :key="index">
		                    <view class="hjs-select-img">
		                        <image class='pic_box_image' :src='item.Url' :data-src="item.Url" @click="previewImage" mode="scaleToFill"></image>
		                        <view class='shanchu' style=''><label @tap='delImg' class="iconfont icon-delete"
		                                                              :data-id="item.SkuId" :data-index="index"
		                                                              style='color:#fff'></label>
		                        </view>
		                    </view>
		                </block>
		                <view @click='chooseVideoImage' class="hjs-select-img">
		                    <image class='pic_box_image' src='https://static.lancerdt.com/xcxfile/appicon/img/pic_11.png'></image>
		                </view>
		            </view>
		        </view>
		    </view>
		</view>
		<button class="u-btn u-btn-default" @click="submitInfo">提交</button>
		<mpvue-city-picker 
			:themeColor="themeColor" 
			ref="mpvueCityPicker" 
			:pickerValueDefault="cityPickerValueDefault"
		  @onCancel="onCancel" 
			@onConfirm="onConfirm"
		></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import {mapMutations, mapState} from 'vuex'
	var picPath = []; 
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				formData: {
					category_content: '',
					message_keywords: '',
					category_id: '',
					message_area: '',
					message_full_area: '',
					message_address: '',
					message_username: '',
					message_mobile: '',
				},
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 0],
				form: {},
				story_video:"",
				ImgList: [],
				Pindex: 0,
				selectedProId: 0,
				selectedCityId: 0,
				selectedCountyId: 0,
				selectedPro: '',
				selectedCity: '',
				selectedCounty: '',
				seladstr: "请选择所属地区",
				'category' : [],
				'area' :[],
				isShow: false,
			}
		},
		computed: mapState(['Config']),
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title:this.__('发布信息')
			});
		
			this.GetAddressList();
		
		},
		methods: {
			onUnload() {
				if (this.$refs.mpvueCityPicker.showPicker) {
					this.$refs.mpvueCityPicker.pickerCancel()
				}
			},
			onBackPress() {
				if (this.$refs.mpvueCityPicker.showPicker) {
					this.$refs.mpvueCityPicker.pickerCancel();
					return true;
				}
			},
			onConfirm(e) {
				let that = this;
				console.info(e);
				console.info(JSON.stringify(e));
				this.pickerText = JSON.stringify(e)
				this.setData({
						Pindex: this.cityCode,
						selectedProId: e.value[0],
						selectedCityId: e.value[1],
						selectedCountyId: e.value[2],
						selectedPro: e.label[0],
						selectedCity: e.label[1],
						selectedCounty: e.label[2],
						seladstr: that.$.isNull(e.label.toString()) ? that.__("请选择地址") : e.label.toString()
				});
			},
			onCancel(e) {
				console.log(e)
			},
			GetAddressList: function() {
				var that = this;
				var params = {};
				that.setData({
					isdata: false,
					category: [],
					area: []
				});
				that.$.request({
					url: that.Config.URL.user.serviceMessage,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status){
							if (data.items.length > 0) {
								that.addresslist = data.items;
								that.setData({
									isdata: true,
									category: data.category,
									area: data.area
								});
							} else {
								that.setData({
									isdata: false
								});
							}
						}
						uni.stopPullDownRefresh()
					},
				})
			},   
			submitInfo(e) {
				var that = this;
				var params = this.formData
				params.message_full_area = this.seladstr
				params.photos_area = JSON.stringify(that.ImgList)
				params.user_birthday == that.__("请选择生日日期") && (params.user_birthday = "");
				that.$.request({
					url: this.Config.URL.user.addServiceMessage,//新加提交接口，家胜
					data: params,
					success: function(data, status, msg, code) {
						if (status == 200) {
							that.$.showToast({
								title: that.__("更新成功!")
							})
				
							setTimeout(function(){
								that.$.navigateBack(1)
							},2000)
						} else {
							that.$.confirm(msg);
						}
					}
				});
			},
			chooseVideoImage(){
			    let that = this;
			    uni.showActionSheet({
			        title:that.__("选择上传类型"),
			        itemList: [that.__('图片')],
			        success: (res) => {
			            console.log(res)
			            if(res.tapIndex == 0){
			              this.chooseImages()
			            } else {
			              this.chooseVideo()
			            }
			        }
			    })
			},
			UploadImg() {
			    var that = this, max_num = 9;
			
			    if (that.$.isNull(that.ImgList) || (max_num = 9 - that.ImgList.length), 0 != max_num){
						that.$.chooseImage({
								count: max_num,
								sizeType: ["compressed"],
								sourceType: ["album", "camera"],
								success: function (result) {
									for (var num = that.ImgList.length, path = result.tempFilePaths, idx = 0; idx < path.length; idx++){
										that.$.uploadFile({
											url: that.Config.URL.upload,
											method: "POST",
											filePath: path[idx],
											name: "upfile",
											formData: {user: idx + num},
											//header: {"content-type": "multipart/form-data"},
											success: function (t) {
												console.log(t), console.log(t.data);
												var a = JSON.parse(t.data);
												console.log(a);
												var s = that.$.parseJSON(t.data);
												let info = {Url:s.data.url, SkuId:1}
												picPath.push(info);
												for (var o = picPath.length - 1; 0 < o; o--)
												{
													for (var e = 0; e < o; e++)
													{
														if (picPath[e].order > picPath[e + 1].order)
														{
															var i = picPath[e];
															picPath[e] = picPath[e + 1], picPath[e + 1] = i
														}
													}
												}
												that.setData({ImgList: picPath})
											},
											fail: function (t) {
											},
											complete: function (t) {
											}
										})
									}
							},
							fail: function (t) {
							},
							complete: function (t) {
							}
			        })
			    }
			    else
			    {
			        that.$.alert(that.__("最多上传9张图片！"))
			    }
			},
			delImg(e) {
			    var that = this;
			    that.$.confirm("是否放弃上传本张图片?", function (t) {
			            if (t.confirm)
			            {
			                var a = that.ImgList, s = [];
			                for (var o in picPath = [], a)
			                {
			                    o != e.target.dataset.index && (s.push(a[o]), picPath.push(a[o]));
			                }
			                that.setData({ImgList: s})
			            }
			        },
			        true)
			},
			chooseImages(){
			    this.UploadImg();
			
			    return;
			
			    // 上传图片
			    uni.chooseImage({
			        count: 4, //默认9
			        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			        sourceType: ['album','camera'], //从相册选择
			        success:(res)=> {
			            this.ImgList = this.ImgList.concat(res.tempFilePaths);
			
			            if(this.ImgList.length == 4) {
			                this.VideoOfImagesShow = false
			            }
			        }
			    });
			},
			// 三级联动选择
			showbox() {
				/*
				this.setData({
				    isShow: true
				})
				*/
				this.$refs.mpvueCityPicker.show()
			},
		}
	}
</script>

<style lang="scss" scoped>
@import '../../styles/_variables.scss';
.input{
	font-size: 30rpx;
	color: #333333;
	line-height: 34rpx;
	border: 1rpx dashed #666;
	width: auto;
	height: 100px;
	border-radius: 5px;
	padding: 20rpx;
	&.input-1{
		height: 60rpx;
		line-height: 60rpx;
		border-style: solid;
		padding: 0 20rpx;
	}
}
.placeholder{
	line-height: 40rpx;
	font-size: 30rpx;
	color: #CCCCCC;
}
.m-cell-hd{
	width: 120rpx;
	text-align: center;
	flex-shrink: 0;
}
.m-cell{
	padding: 30rpx;
}
.m-cell-hd{
	font-size: 24rpx;
	font-weight: 400;
}
.bk_box{
	display: flex;
	.pic_box_image{
		width: 100%;
		height: 100%;
	}
	.pic_box_img{
		display: flex;
		flex-wrap: wrap;
	}
	.hjs-select-img{
		display: inline-block;
		position: relative; 
		width: 200rpx; 
		height: 200rpx;
		margin: 0 20rpx 20rpx;
	}
}
.m-select-box-msk {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 3;
	}

	.m-select-box {
		position: absolute;
		width: 100%;
		height: 300px;
		background-color: #fff;
		left: 0;
		bottom: 0;
	}

	.u-select {
		width: 100%;
		height: 300px;
		text-align: center;
	}

	.u-select .m-cell-bd {
		width: 100%;
		line-height: 50px;
		font-size: 28rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.u-select .m-cell-bd label {
		width: 100%;
	}

	.m-select-content {
		position: relative
	}
	
</style>
