<template>
  <view class="page-wrapper">
    <view class="page-cell">
      <view class="label">头像</view>
      <view class="right" @tap="uploadImg.preview()">
			<up-avatar class="fileImg" :src="vdata.shopInfo.coverImg?vdata.shopInfo.coverImg:''" mode="aspectFill"></up-avatar>
			<view class="file" @tap="chooseAndUploadAvatar('coverImg')"></view>
      </view>
    </view>
    <!-- <view class="page-cell m" @tap="updateValue('商户名称','shopName',vdata.shopInfo.shopName)"> -->
    <view class="page-cell m" @tap="go.to('PAGES_SHOP_EDITVAL',{name:'shopName',value: vdata.shopInfo.shopName})">
		<view class="label">商户名称</view>
		<view class="right"><view>{{ vdata.shopInfo.shopName }}</view><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
    </view>
	<view class="page-cell m" @tap="go.to('PAGES_SHOP_EDITVAL',{name:'phone',value: vdata.shopInfo.phone})">
		<view class="label">商户电话</view>
		<view class="right"><view>{{ vdata.shopInfo.phone }}</view><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
	</view>
<!-- 	<view class="page-cell m" >
		<view class="label">到期时间</view>
		<view class="right"><view>{{ vdata.shopInfo.realname }}</view><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
	</view> -->
	<view class="page-cell m">
		<view class="label">营业状态</view>
		<view class="right"><up-switch v-model="vdata.shopInfo.status" size="20" :inactiveValue="2" :activeValue="1" activeColor="#0FC161" @change="switchChange('status')"></up-switch></view>
	</view>
	<view class="page-cell m" @tap="showMap">
		<view class="label">门店详细地址</view>
		<view class="right"><view>{{ vdata.shopInfo.address }}</view><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
	</view>
	<!-- <view class="page-cell">
		<view class="label">堂食功能</view>
		<view class="right"><up-switch v-model="vdata.dineIn" size="20" activeColor="#0FC161" @change="switchChange('eatModel')"></up-switch></view>	
	</view> -->
	<view class="page-cell">
		<view class="label">允许打包</view>
		<view class="right"><up-switch v-model="vdata.takeout" size="20"activeColor="#0FC161" @change="switchChange('eatModel')"></up-switch></view>
	</view>
	<view class="page-cell m">
		<view class="label">是否开启会员支付</view>
		<view class="right"><up-switch v-model="vdata.shopInfo.isUseVip" size="20" :inactiveValue="0" :activeValue="1" activeColor="#0FC161" @change="switchChange('isUseVip')"></up-switch></view>
	</view>

	<view class="page-cell">
		<view class="label">桌位费<view v-if="!vdata.isTableFee" class="tableFee" @tap="go.to('PAGES_SHOP_EDITVAL',{name:'tableFee',value: vdata.shopInfo.tableFee})">{{vdata.shopInfo.tableFee}}</view></view>
		<view class="right">	
			<view>
				<up-checkbox-group><up-checkbox label="免桌位费" v-model:checked="vdata.isTableFee"  activeColor="#0FC161" shape="circle" @change="isTableFeeChange"> </up-checkbox></up-checkbox-group>
			</view>
		</view>
	</view>
	<view class="page-cell m">
		<view class="label">付费模式</view>
		<view class="right"> 
			<up-radio-group
			    v-model="vdata.shopInfo.registerType"
				placement="row"
			  >
			    <up-radio
			      :customStyle="{marginRight: '10px'}"
			      v-for="(item, index) in vdata.registerTypeList"
			      :key="index"
			      :label="item.name"
			      :name="item.value"
			      @change="radioChange"
			    >
			    </up-radio>
			  </up-radio-group>
		
		</view>
	</view>
	<view class="page-cell" @tap="go.to('PAGES_SHOP_QRCODE',{paymentQrcode: vdata.shopInfo.paymentQrcode})">
		<view class="label">店铺收款码</view>
		<view class="right"><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
	</view>
	<view class="page-cell column" >
		<view class="label">店铺图片</view>
		<view class="extendList">
			<view class="extendTab">
				<view class="extendTab_item"
					v-for="(item,index) in vdata.extendList" :key="index"
					:class="{'active':vdata.extendIndex==index}"
					@click="extendTabClick(item,index)"
				 >{{item.title}}</view>
			</view>
			<view class="extend_content">
				<view class="preview">
					<view class="index_bg"><up-image v-if="'index_bg' == vdata.extendInfo.autokey"  :src="vdata.extendInfo.value"></up-image></view>
					<view class="my_bg"><up-image v-if="'my_bg' == vdata.extendInfo.autokey"  :src="vdata.extendInfo.value"></up-image></view>
					<view class="bg"><up-image v-if="'member_bg' == vdata.extendInfo.autokey" :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/'+vdata.extendInfo.autokey+'1.png'" ></up-image></view>
					<view class="member_bg"><up-image v-if="'member_bg' == vdata.extendInfo.autokey"  :src="vdata.extendInfo.value"></up-image></view>
					<view class="shopinfo_bg"><up-image v-if="'shopinfo_bg' == vdata.extendInfo.autokey"  :src="vdata.extendInfo.value"></up-image></view>
					<view class="shopinfo_bg_f" v-if="'shopinfo_bg' == vdata.extendInfo.autokey"></view>
					<view class="bg"><up-image :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/'+vdata.extendInfo.autokey+'.png'" ></up-image></view>
				</view>
				<view class="extend_img">
					<view class="extend_title">{{vdata.extendInfo.title}}背景图片</view>
					<view class="fileUp">
						<up-image :src="vdata.extendInfo.value"></up-image>
						<view class="file" @tap="chooseAndUploadAvatar('extendUp')"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- <view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view> -->
  </view>

  
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app';
import { getShopInfo , editShopInfo, getShopExtend, editShopExtend } from '@/http/yskApi/shop.js'
import storageManage from '@/commons/utils/storageManage.js'
import go from '@/commons/utils/go.js'
import infoBox from '@/commons/utils/infoBox.js'
import { $uploadFile } from '@/http/yskApi/file.js'
import { forIn } from 'lodash';

const uploadImg = ref()
const phone = ref(null)
const vdata = reactive({
	shopInfo: {
		status: 2,
		isUseVip: 0,
	},
	extendList: [],
	registerTypeList: [
		{name: "先付费", value: "munchies"},
		{name: "后付费", value: "restaurant"}
	],
	extendIndex: 0,
	extendInfo: {},
	dineIn: false,
	takeout: false,
	isTableFee: false,
	label: "",
	type: "",
	inputValue: "",
	inputType: "text",
	maxLength: '999',

})
onMounted(() => {
	shopExtend();
	
})

onShow(() => {
	shopInfo();
	uni.$on('refreshPreviousPage', (params) => {
	    // 这里执行刷新数据的操作，例如重新调用API获取数据
	    refreshData(params);
	  });
})


/**
 * 输入内容修改
 */
let refreshData = (e) => {
	let params = {
		id : vdata.shopInfo.id,
	}
	params[e.name] = e.value
	vdata.type = e.name;
	vdata.inputValue = e.value;
	updateShopInfo(params,'input')
}

/**
 * 获取店铺信息
 */
const shopInfo = () => {
	getShopInfo(storageManage.shopId()).then((res) => {
		vdata.isTableFee = res.isTableFee == 1 ? true: false;
		if (res.eatModel.join(",").indexOf("dine-in") != -1) {
			vdata.dineIn = true
		}
		if (res.eatModel.join(",").indexOf("take-out") != -1) {
			vdata.takeout = true
		}
		vdata.shopInfo = res;
	})
}

/**
 * 获取店铺图片
 */
let shopExtend = () => {
	getShopExtend({
		autokey: "index_bg",
	}).then((res) => {
		if ( res.content && res.content.length > 0 ) {
			vdata.extendList = res.content;
			vdata.extendIndex = 0;
			vdata.extendInfo = res.content[0];
		}
	})
}

/**
 * 付费模式修改
 */
let radioChange = (n) => {
  console.log('radioChange', n);
  let params = {
  	id : vdata.shopInfo.id,
  	registerType : n,
  }
  updateShopInfo(params)
};

/**
 * 修改
 */
let updateShopInfo = (params,type) => {
	editShopInfo(params).then((res) => {
		if (type && type == "input") { 
			vdata.shopInfo[vdata.type] = vdata.inputValue;
		}
	})
}

/**
 * 修改店铺图片
 */
let updateShopExtend = () => {
	editShopExtend(vdata.extendInfo).then((res) => {
		
	})
}



/**
 * 上传头像
 */
let chooseAndUploadAvatar = ( type ) => {
	 // 选择图片
	uni.chooseImage({
	    count: 1, // 默认为1，只选择一张图片
		sizeType: ['original', 'compressed'], // 图片质量，原图或压缩
		sourceType: ['album', 'camera'], // 图片来源，相册或相机
	    success: (res) => {
	      let file = res.tempFiles[0];
		  console.log(res)
		 $uploadFile(file).then(res => {
		 	console.log(res);
			if ( type == "coverImg") {
				vdata.shopInfo.coverImg = res.data[0];
				let params = {
					id : vdata.shopInfo.id,
					coverImg : vdata.shopInfo.coverImg,
				}
				updateShopInfo(params)
			}
			if ( type == "extendUp") {
				vdata.extendInfo.value = res.data[0];
				updateShopExtend()
			}
			
		 }).catch(res=>{
		 	console.log(res);
		 	if(res.errMsg){
		 		uni.showToast({
		 			title:'图片大小超出限制',
		 			icon:'error'
		 		})
		 	}
		 	
		 })
	    },
	    fail: chooseImageError => {
	      // 选择图片失败处理逻辑
	      console.log('choose image fail:', chooseImageError);
	    }
	});
}

/**
 * 店铺图片TAB切换
 */
let extendTabClick = (item,index) => {
	vdata.extendInfo = item;
	vdata.extendIndex = index;
}

/**
 * 是否免桌位费
 */
let isTableFeeChange = (e) => {
	if ( e ) {
		vdata.isTableFee = true;
	} else {
		vdata.isTableFee = false;
	}
	switchChange('isTableFee')
}

/**
 * 修改
 */
let switchChange = ( type ) => {
	let params = {
		id : vdata.shopInfo.id,
	}
	switch ( type ){
		case "address":
			params.lng = vdata.shopInfo.lng;
			params.lat = vdata.shopInfo.lat;
			params.address = vdata.shopInfo.address;
			break;
		case "status":
			params.status = vdata.shopInfo.status;
			break;
		case "eatModel":
			params.eatModel = [];
			if ( vdata.dineIn ) {
				params.eatModel.push('dine-in');
			}
			if ( vdata.takeout ) {
				params.eatModel.push('take-out');
			}
			break;
		case "isUseVip":
			params.isUseVip = vdata.shopInfo.isUseVip;
			break;
		case "isTableFee":
			if ( vdata.isTableFee ) {
				params.isTableFee = 1;
			} else {
				params.isTableFee = 0;
			}
			break;
	}
	updateShopInfo(params);
}

/**
 * 选择地图
 */
let showMap = () => {
	// 本地 测试选择
	// 打开地图
	
	uni.chooseLocation({
		// type: 'wgs84',
		success: function (res) {
			
			vdata.shopInfo.lng = res.longitude.toFixed(6); // IOS 小程序中：  经纬度12位。
			vdata.shopInfo.lat = res.latitude.toFixed(6);
			vdata.shopInfo.address = res.name;
			switchChange('address')
		},
		fail: function(err) {
			console.log(err);
			// uni.showToast({
			// 	title:err,
			// 	icon:'error'
			// })
		}
	})
	
	
}


</script>

<style lang="scss" scoped>
	.page-wrapper{
		background-color: #F8F8F8;
		padding-bottom: 32rpx;
		.page-cell {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 28rpx;
			box-sizing: border-box;
			background-color: #fff;
			.label {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				display: flex;
				align-items: center;
				flex-shrink: 0;
				margin-right: 20rpx;
				.tableFee {
					width: 186rpx;
					height: 54rpx;
					line-height: 54rpx;
					margin-left: 10rpx;
					font-size: 28rpx;
					color: #333;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #E5E5E5;
					text-align: left;
					padding: 0 18rpx;
					box-sizing: border-box;
				}
			}
			.extendList{
				width: 100%;
				display: flex;
				flex-direction: column;
				margin-top: 24rpx;
				.extendTab{
					display: flex;
					justify-content: space-around;
					.extendTab_item{
						font-size: 24rpx;
						font-weight: 400;
						padding: 4rpx 12rpx;
						border-radius: 4rpx;
						border: 2rpx solid #E5E5E5;
					}
					.active{
						background: #318AFE;
						border: 2rpx solid #318AFE;
						color: #fff;
					}
				}
				.extend_content{
					display: flex;
					margin-top: 32rpx;
					.preview{
						width: 146rpx;
						height: 342rpx;
						position: relative;
						margin-right: 32rpx;
						background-color: #f7f7f7;
						::v-deep .bg,::v-deep .bg .u-image,::v-deep .bg .u-image__image{
							width: 146rpx!important;
							height: 342rpx!important;
							position: absolute;
							top: 0;
						}
						
						::v-deep .index_bg .u-image,::v-deep .index_bg .u-image__image{
							width: 146rpx!important;
							height: 242rpx!important;
							position: absolute;
							top: 0;
						}
						
						::v-deep .my_bg .u-image,::v-deep .my_bg .u-image__image{
							width: 146rpx!important;
							height: 90rpx!important;
							position: absolute;
							top: 0;
						}
						
						::v-deep .member_bg .u-image,::v-deep .member_bg .u-image__image{
							width: 134rpx!important;
							height: 63rpx!important;
							position: absolute;
							top: 22rpx;
							left: 0;
							right: 0;
							margin: auto;
							border-radius: 5rpx!important;
						}
						
						::v-deep .shopinfo_bg .u-image,::v-deep .shopinfo_bg .u-image__image{
							width: 146rpx!important;
							height: 50rpx!important;
							position: absolute;
							top: 0;
						}
						
						.shopinfo_bg_f{
							width: 146rpx;
							height: 290rpx;
							position: absolute;
							bottom: 0;
							background-color: #fff;
						}
						
					}
					.extend_img{
						display: flex;
						flex-direction: column;
						.extend_title{
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;
							margin-bottom: 16rpx;
						}
						.fileUp{
							width: 148rpx;
							height: 148rpx;
							position: relative;
							.file{
								width: 148rpx;
								height: 148rpx;
								position: absolute;
								top: 0;
							}
						}
						::v-deep .u-image,::v-deep .u-image__image{
							width: 148rpx!important;
							height: 148rpx!important;
						}
					}
				}
			}
		  
		}
		.column{
			flex-direction: column;
			.label{
				align-self: flex-start;
			}
		}
		.m{
			margin-bottom: 12rpx;
		}
		.cutShop{
			width: 530rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #318AFE;
			border-radius: 56rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 48rpx auto 0 auto;
			text-align: center;
		}
		
		.right {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			position: relative;
		
			.file{
				width: 112rpx;
				height: 112rpx;
				line-height: 112rpx;
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
			}
		
			.fileImg{
				width: 112rpx!important;
				height: 112rpx!important;
				::v-deep .u-avatar__image{
					width: 112rpx!important;
					height: 112rpx!important;
				}
			}
		}
		
	}



</style>
