<template>
	<view class="flex-col page">
	  <view class="flex-col group">
	    <view class="flex-row justify-between self-stretch">
	      <text class="font text">请选择拍摄人数和场地</text>
	      <image
	        class="image"
	        :src="bookUrl + '/component/cha.png'"
			@click="closePopup"
	      />
	    </view>
	    <image
	      class="self-start image_2"
	      :src="obj.introImg"
	    />
	    <text class="self-start font text_2">拍摄人数</text>
	  </view>
	  <view class="flex-col justify-start relative group_2">
	    <view class="flex-row items-center relative section">
	      <image
	        class="image_5"
	        :src="bookUrl + '/component/sub.png'"
			@click="sub"
	      />
	      <view class="flex-col justify-start items-center text-wrapper"><text class="text_4">{{ number }}</text></view>
	      <image
	        class="image_6"
	        :src="bookUrl + '/component/add.png'"
			@click="add"
	      />
	      <text class="text_3">人</text>
	    </view>
	    <image
	      class="image_3 pos"
	      :src="bookUrl + '/component/duoren.png'"
	    />
	    <image
	      class="image_4 pos_2"
	      :src="bookUrl + '/component/danren.png'"
	    />
	  </view>
	  <view class="flex-col group_3">
	    <text class="self-start font text_5">拍摄场地</text>
		
	    <radio-group class="flex-row equal-division mt-17 my-radio" @change="handlerRadioChange">
		 
	      <view class="flex-col section_2 equal-division-item" v-if="!disabled1">
	        <view class="flex-row justify-between items-end self-stretch">
	          <image
	            class="image_7"
	            :src="bookUrl + '/component/shinei.png'"
	          />
	          <radio class="section_3" color="#FFB6B9" value="室内" :checked="checked1" :disabled="disabled1"></radio>
	        </view>
	        <text class="self-start font_2 text_6 mt-5">室内</text>
	      </view>
		  
	      <view class="flex-col section_2 equal-division-item" v-if="!disabled2">
	        <view class="flex-row justify-between items-end self-stretch">
	          <image
	            class="image_8"
	            :src="bookUrl + '/component/shiwai.png'"
	          />
	          <radio class="section_3" color="#FFB6B9" value="室外" :checked="checked2" :disabled="disabled2"></radio>
	        </view>
	        <text class="self-start font_2 text_6 mt-5">室外</text>
	      </view>
		
	    </radio-group>
	  </view>
	  <view class="flex-row justify-between items-center group_4">
	    <view class="flex-row items-center">
	      <view class="flex-col items-center shrink-0 section_4" @click="openFeeTips">
	        <text class="font_3">费用</text>
	        <text class="font_3">说明</text>
	      </view>
	      <text class="font text_7">定金：</text>
	      <text class="font text_8">￥{{ totalPrice.toFixed(2) }}</text>
	    </view>
	    <view @click="jumpToOrder" class="flex-col justify-start items-center text-wrapper_2">
			<text class="text_9">确定</text></view>
	  </view>
	</view>
	
	<uni-popup ref="feeTips" :maskClick="false" :animation="false">
		<view class="fee-tips">
			<feeTipsVue></feeTipsVue>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import {nextTick, onMounted, onUnmounted, ref} from 'vue'
	import emitter from '../../../utils/emitter';
	import feeTipsVue from './feeTips.vue';
	import { bookUrl } from '../../../common/globalImagesUrl';
	import { baseUrl } from '../../../api/request';
	import { dealResult } from '../../../common/globalFunction';
	import { onLoad } from "@dcloudio/uni-app";
	import { getFonts } from '../../../common/globalFont';
	
	const number = ref(1)
	const field = ref('')
	const feeTips = ref(null)
	const obj = ref('')
	const totalPrice = ref(0)
	const shotScene = ref('')
	const disabled1 = ref(false)
	const disabled2 = ref(false)
	const checked1 = ref(false)
	const checked2 = ref(false)
	const type = ref('')
	const cookie = wx.getStorageSync('cookie')
	
	
	onLoad(() => {
		getFonts()
	})
	
	const closeFeeTipsHandler = () => {
		nextTick(() => {
			if (feeTips.value) {
				feeTips.value.close()
			}
		})
	}
	
	const getProductsTypeHandler = (val:any) => {
		type.value = val
		console.log('=================================================>', type.value)
	}
	
	const getProductObjHandler = (val:any) => {
		obj.value = val
		totalPrice.value = val.price * val.minNumber
		number.value = obj.value.minNumber
		shotScene.value = obj.value.shotScene
		if (shotScene.value === '室内') {
			disabled2.value = true
			checked1.value = true
			field.value = '室内'
		} else if (shotScene.value === '室外'){
			disabled1.value = true
			checked2.value = true
			field.value = '室外'
		}
		console.log(totalPrice.value)
	}
	
	
	
	onMounted(() => {
		emitter.on('closeFeeTips', closeFeeTipsHandler)
		
		emitter.on('getProductsType', getProductsTypeHandler)
		
		emitter.on('getProductObj', getProductObjHandler)
	})
	
	
	onUnmounted(() => {
		emitter.off('closeFeeTips', closeFeeTipsHandler)
		
		emitter.off('getProductsType', getProductsTypeHandler)
		
		emitter.off('getProductObj', getProductObjHandler)
	})
	
	
	const sub = () => {
		if (number.value > obj.value.minNumber) {
			number.value --
			totalPrice.value = number.value * obj.value.price
		}
	}
	const add = () => {
		if (number.value < obj.value.maxNumber) {
			number.value ++ 
			totalPrice.value = number.value * obj.value.price
		}
	}
	
	const handlerRadioChange = (e:any) => {
		field.value = e.detail.value
		console.log(field.value)
	}
	
	const closePopup = () => {
		emitter.emit('closeBookingPopup')
	}
	
	const openFeeTips = () => {
		feeTips.value.open('center')
	}
	
	const jumpToOrder = async () => {
		if (field.value === '' || field.value === undefined || field.value === null) {
			uni.showToast({
				title: '请选择场地',
				icon: 'error'
			})
			return ;
		}
		
		let res = await checkPhotoProducts()
		if (!dealResult(res)) return ;
	
		uni.navigateTo({
			url: '/pages/book/photoProductsOrder/photoProductsOrder?field=' + field.value + '&number=' + number.value + '&id=' + obj.value.id + '&type=' + type.value
		})
	}
	
	
	
	const checkPhotoProducts = async () => {
		const res = await uni.request({
			url: baseUrl + '/advanceOrder/check/photoProducts',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				id: obj.value.id
			}
		})
		return res
	}
</script>

<style scoped lang="scss">
	.my-radio {
		display: flex;
		justify-content: space-between;
	}
	.fee-tips {
		justify-content: center;
		background-color: #fff;
		border-radius: 41.1rpx;
		margin-top: -400rpx;
		width: 650rpx;
		height: 900rpx;
		overflow-y: auto;
	}
	
	.mt-17 {
	  margin-top: 31.88rpx;
	}
	.mt-5 {
	  margin-top: 9.38rpx;
	}
	.ml-19 {
	  margin-left: 35.63rpx;
	}
	.page {
	  padding-top: 43.13rpx;
	  background-color: #fffcf9;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	  position: fixed;
	  bottom: 0;
	}
	.group {
	  padding: 0 37.5rpx;
	}
	.font {
	  font-size: 37.5rpx;
	  font-family: FangZhengFonts;
	  line-height: 33.99rpx;
	  color: #000000;
	}
	.text {
	  margin: 3.75rpx 0;
	  line-height: 36.34rpx;
	}
	.image {
	  width: 52.5rpx;
	  height: 41.25rpx;
	}
	.image_2 {
	  margin-top: 28.13rpx;
	  width: 172.5rpx;
	  height: 174.38rpx;
	}
	.text_2 {
	  margin-top: 41.25rpx;
	}
	.group_2 {
	  margin-top: 18.75rpx;
	  padding-bottom: 31.88rpx;
	}
	.section {
	  margin: 0 37.5rpx;
	  padding: 125.63rpx 0 86.25rpx;
	  background-image: linear-gradient(180deg, #fdefef 0%, #fffcfa 100%);
	  border-radius: 18.75rpx;
	  box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
	}
	.image_5 {
	  margin-left: 249.38rpx;
	  border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
	  width: 68.06rpx;
	  height: 71.04rpx;
	}
	.text-wrapper {
	  margin-left: 3.75rpx;
	  padding: 18.75rpx 0;
	  background-color: #fbdedf80;
	  width: 82.06rpx;
	  height: 71.04rpx;
	}
	.text_4 {
	  color: #323232b3;
	  font-family: FangZhengFonts;
	  line-height: 35.04rpx;
	}
	.image_6 {
	  margin-left: 3.75rpx;
	  border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
	  width: 68.06rpx;
	  height: 71.04rpx;
	}
	.text_3 {
	  margin-left: 22.5rpx;
	  color: #000000;
	  font-size: 30rpx;
	  font-family: FangZhengFonts;
	  line-height: 26.4rpx;
	}
	.image_3 {
	  width: 238.13rpx;
	  height: 271.88rpx;
	}
	.pos {
	  position: absolute;
	  left: 7.5rpx;
	  bottom: 0;
	}
	.image_4 {
	  width: 125.63rpx;
	  height: 200.63rpx;
	}
	.pos_2 {
	  position: absolute;
	  right: 65.63rpx;
	  bottom: 0;
	}
	.group_3 {
	  margin-top: 45rpx;
	  padding: 0 35.63rpx;
	}
	.text_5 {
	  margin-left: 3.75rpx;
	}
	.equal-division {
	  align-self: stretch;
	}
	.section_2 {
	  position: relative;
	  width: 320.63rpx;
	}
	.equal-division-item {
	  padding: 18.75rpx 26.25rpx;
	  background-color: #ffffff;
	  border-radius: 18.75rpx;
	  box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
	  height: 157.5rpx;
	}
	.image_7 {
	  opacity: 0.85;
	  border-radius: 18.75rpx;
	  width: 138.75rpx;
	  height: 84.38rpx;
	}
	.section_3 {
	  margin-right: 11.25rpx;
	  background-color: #ffffff;
	  border-radius: 50%;
	  width: 45rpx;
	  height: 45rpx;
	}
	.font_2 {
	  font-size: 26.25rpx;
	  font-family: FangZhengFonts;
	  line-height: 24.21rpx;
	  color: #000000;
	}
	.text_6 {
	  margin-left: 45rpx;
	}
	.image_8 {
	  border-radius: 15rpx;
	  width: 138.75rpx;
	  height: 84.38rpx;
	}
	.group_4 {
	  margin-top: 37.5rpx;
	  padding: 30rpx 35.63rpx;
	  border-top: solid 1.88rpx #0000001f;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: 0 auto;
	}
	.section_4 {
	  padding: 7.5rpx 0;
	  background-color: #ffb6b9;
	  border-radius: 9.38rpx;
	  width: 78.75rpx;
	  height: 67.5rpx;
	}
	.font_3 {
	  font-size: 22.5rpx;
	  font-family: FangZhengFonts;
	  line-height: 26.25rpx;
	  color: #ffffff;
	}
	.text_7 {
	  margin-left: 22.5rpx;
	  line-height: 34.42rpx;
	}
	.text_8 {
	  line-height: 25.05rpx;
	}
	.text-wrapper_2 {
	  padding: 22.5rpx 0;
	  background-color: #ffb6b9;
	  border-radius: 187.5rpx;
	  width: 241.88rpx;
	  height: 76.88rpx;
	}
	.text_9 {
	  color: #ffffff;
	  font-size: 30rpx;
	  font-family: FangZhengFonts;
	  line-height: 28.01rpx;
	}
	@import url(../../../common/css/global.css);
</style>