<template>
	<!-- 店铺信息 编辑修改页面 设置店铺信息 -->
	<view class="shopinfoss">

		<view class="logobox">
			<image v-if="fromdata.logo!='' && fromdata.logo!=null"  class="islogimg" :src="staticUrl+fromdata.logo"
			 mode=""></image>
			<!-- <view class="islogimg" v-else @tap="uploadimgs">上传logo</view> -->
		</view>

		<view class="biao">
			<view class="cu-form-group ">
				<view class="title" style="letter-spacing:10upx;">联系人：</view>
				<input class="title" style="flex-grow: 1;" placeholder="请输入联系人" disabled="disabled" v-model="fromdata.contact"></input>
			</view>
			<view class="cu-form-group ">
				<view class="title">店铺电话：</view>
				<view class="flex1 jus-b ali-c">
					<input class="title" style="flex-grow: 1;" placeholder="请修改店铺电话" type="number" v-if="editortel" @blur='telblur' focus="true" v-model="editortelvalue"></input>
					<input class="title" style="flex-grow: 1;" placeholder="请输入店铺电话" v-else disabled="disabled" v-model="fromdata.tel"></input>
					<view style="color: #FF6900;border:1px solid #FF6900;font-size:20upx;padding: 0 5upx;" @tap="editorTel">编辑</view>
				</view>
			</view>
			<view class="cu-form-group " >
				<view class="title">店铺地址：</view>
				<view class="flex1 jus-b ali-c">
					<input class="title" style="flex-grow: 1;" placeholder="请输入店铺地址" disabled="disabled" v-model="fromdata.addr"></input>
					<view  style="color: #FF6900;border:1px solid #FF6900;font-size:20upx;padding: 0 5upx;" @tap="chooseLocation">编辑</view>
				</view>
			</view>

			<view class="cu-form-group flex" style="padding: 30upx;">
				<view class="title">营业时间：</view>
				
				<view class="flex1 jus-b ali-c">
					<view class="time flex">
						<view class="biao_05_2">
							<view class="uni-list-cell-db flex">
								<view style="color:rgb(84, 84, 84);font-size: 32upx;">{{time}}</view>
							</view>
						</view>
						<view class="biao_05_2 flex" style="margin: 0 20upx 0 20upx;">--</view>
						<view class="uni-list-cell-db flex">
							<view class="" style="color:rgb(84, 84, 84);font-size: 32upx;">{{time_close}}</view>
						</view>
					</view>
					
					
					<view class="" style="color: #FF6900;border:1px solid #FF6900;font-size:20upx;padding: 0 5upx;" @tap='modifyTime'>编辑</view>
					<lb-picker ref="picker" :list="list2" :value='value' range-key="label" mode="multiSelector" :level='2' @confirm='confirm'></lb-picker>
				</view>
				
				
				
			</view>
			<view class="cu-form-group ">
				<view class="title">介绍：</view>
			</view>
			<view class="cu-form-group">
				<!-- <textarea maxlength="-1" type="rich-text" v-model="fromdata.details" placeholder="请输入介绍"></textarea> -->
				<!-- <editor id="editor" @input="onEditorInput" @ready="onEditorReady(fromdata.details)"></editor> -->
				<rich-text contenteditable="false" :nodes="fromdata.details"></rich-text>
				<!-- :disabled="modalName!=null" -->
			</view>
			<!-- <view class="cu-form-group ">
				<view class="title">是否营业：</view>
				<view class="title" >
					<switch @change="SwitchAchange" :class="switchA?'checked':''"  :checked="switchA?true:false" color="#e54d42"></switch> 
				</view>
			</view> -->

		</view>


		<!-- <view class="p_btn">
			<view class=" flex flex-direction">
				<button @tap="addNewStoreFun()" class="cu-btn bg-red margin-tb-sm lg">提交</button>
			</view>
		</view> -->
		
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import wPicker from "@/components/w-picker/w-picker.vue";
	import graceRichText from "@/utils/richText.js";
	import config from "@/utils/config.js";
	import {addNewStore,shopDetail} from "@/utils/api/api.js";  

	import QQMapWX from "@/utils/libs/qqmap-wx-jssdk.min.js";
	var qqmapsdk = new QQMapWX({
		key: 'KROBZ-N2ORJ-VYBFJ-F76TY-ASPMT-JFBFH'
	});

	var telStr = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
	import timeList from './timeList.json';
	export default {
		data() {
			return {
				list2: [],//选择得时间
				editortel:false,
				editortelvalue:'',
				content: [],
				list: [],
				address: '',
				time: '09:00',
				time_close: '19:00',
				modalName: "", //？
				switchA: false,

				//提交的表单
				fromdata: {
					contact: "", //联系人
					tel: "", //电话
					lat: "", ///经纬度
					lng: "", //经纬度
					details: "", //介绍
					addr: "", //地址
					business_time: "", //时间
					logo: "", //店铺logo

				},

				//可能少的
				//address: "",//详细地址
				cate_id: 0, //分了id
				shop_name: "", //店铺名称
				makeruid: "",
				city_code: 360100, //城市代码
				area_code: 360102, //区号
				cate_name: "品牌服装", //分类名称 文字


				shopinfos: {},


			};
		},
		onLoad() {
			this.content = this.$api.json.content;
			//获取之前设置过的信息
			this.getshopDetail();
			this.list2=timeList.list;
			console.log(timeList)
		},
		components: {
			uniIcon,
			wPicker
		},
		//计算属性
		computed: {
			staticUrl() {
				return this.$store.state.staticUrl;
			},
			uploaddata() {
				return {
					model: "shopphoto",
					user_token: this.$store.state.token,
					shop_id: this.$store.state.userInfo.shop_id
				}
			}
		},
		methods: {
			//获取之前设置过的信息
			async getshopDetail() {
				let res = await shopDetail({

				});
				if (res.code == 0) {
					this.shopinfos = res.data;

					this.fromdata.contact = this.shopinfos.contact;
					this.fromdata.tel = this.shopinfos.tel;
					this.fromdata.lat = this.shopinfos.lat;
					this.fromdata.lng = this.shopinfos.lng;
					this.fromdata.details = graceRichText.format(this.shopinfos.details);
					this.fromdata.addr = this.shopinfos.addr;
					this.fromdata.business_time = this.shopinfos.business_time; //营业时间 需要特殊处理
					this.fromdata.logo = this.shopinfos.logo;

					if (this.fromdata.business_time.indexOf("---") != -1) {
						let timearr = this.fromdata.business_time.split("---");
						if (timearr.length != 0) {
							this.time = timearr[0];
							this.time_close = timearr[1];
						}
					} else if (this.fromdata.business_time.indexOf("--") != -1) {
						let timearr = this.fromdata.business_time.split("--");
						if (timearr.length != 0) {
							this.time = timearr[0];
							this.time_close = timearr[1];
						}
					} else if (this.fromdata.business_time.indexOf("-") != -1) {
						let timearr = this.fromdata.business_time.split("-");
						if (timearr.length != 0) {
							this.time = timearr[0];
							this.time_close = timearr[1];
						}
					}
				} else {
					this.$api.msg(res.msg);
				}
			},
			//上传图片方法
			uploadimgs() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: config.SiteBaseUrl + 'FileUpload/uploadify', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'img',
							formData: this.uploaddata,
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data, "上传成功后~");

								let resdata = JSON.parse(uploadFileRes.data);
								console.info(resdata, "resdata");

								this.fromdata.logo = resdata.data;
							}
						});
					}
				});
			},
	
			textareaAInput(e) {

			},
			SwitchAchange(e) {

			},
			TimeChange(e) {
				this.time = e.detail.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			bindTimeChange_close: function(e) {
				this.time_close = e.target.value
			},



			switch1Change: function(e) {
				if (e.target.value) {
					this.list.shop_state = true //   1   checked的值为布尔值
				} else {
					this.list.shop_state = false //   0
				}
			},
			editorTel(){ //点击修改电话
				this.editortel=true;
			},
			modifyTime(){//点击编辑营业时间
				console.log('点击了');
				this.$refs.picker.show() // 显示
			},
			confirm(e){
				console.log(e.item[0].label,e.item[1].label)
				this.fromdata.business_time = e.item[0].label+'-'+e.item[1].label; //营业时间 需要特殊处理
				this.addNewStoreFun(); //修改信息
				
				this.time = e.item[0].label;
				this.time_close = e.item[1].label;
			},
			telblur(){ //失去焦点
				if (this.editortelvalue == '' || !(telStr.test(this.editortelvalue))) {
					this.$api.msg('请输入正确手机号');
				}else{
					this.editortel=false;
					this.fromdata.tel = this.editortelvalue;
					this.editortelvalue='';
					this.addNewStoreFun(); //修改信息
				}
			},
			//选中定位 获取经纬度
			chooseLocation() {
				uni.chooseLocation({
					success: (data) => {
						console.log(data,'fdfs')
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: data.latitude,
								longitude: data.longitude
							},
							success: (res)=>{
								this.fromdata.lat = res.result.location.lat;
								this.fromdata.lng = res.result.location.lng;
								this.fromdata.addr = res.result.address+res.result.formatted_addresses.rough;
								this.addNewStoreFun(); //修改信息
							},
							fail: (err)=>{
								console.log(err)
							}
						})
					},
					fail: (err)=>{
						console.log(err)
					}
				});
			},
			async addNewStoreFun(){
				addNewStore(this.fromdata).then(res=>{ //修改商家信息
					if (res.code == 0) {
						this.$api.msg(res.msg);
					} else {
						this.$api.msg(res.msg);
					}
				}); 
			},
			onEditorReady(data) {
				uni.createSelectorQuery().select('#editor').context((res) => {
					console.log(res)
					this.editorCtx = res.context;
					let content = {
						html: data
					}
					this.editorCtx.setContents(content); //设置富文本编辑器的内容
				}).exec()
			},
			onEditorInput(res){
				if(res.detail.html){
					this.fromdata.details = res.detail.html
				}
			}
		}
	}
</script>

<style lang="scss">
	.logobox {
		padding: 15upx 0;
		text-align: center;

		.islogimg {
			width: 200upx;
			height: 200upx;
			line-height: 200upx;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>
