<template>
	<view class="order-pages">
		<view class="order-info">
			<!-- 订单状态 -->
			<view class="order-status">
				<view class="status-title flex align_center justify_center">
					<u-icon class="icon" name="icon_service"
					custom-prefix="custom-icon" size="48" color="#333333"></u-icon>
				{{orderInfo.orderStatusDictValue || '--'}}
				</view>
				<!-- <view class="status-care">
					预约时间：{{orderInfo.reserveTime || '--'}}
				</view> -->
			</view>
			<!-- 回收品类明细 -->
			<view class="item-info">
				<view class="item-title">
					<view>回收品类明细</view>
					<view class="care">(切换分类可输入不同回收物的价格和重量)</view>
				</view>
				<view class="item flex justify_between">
					<view :class="['item-type', curType == item.code ? 'active' : '']" v-for="(item,index) in typeData" :key="item.id"  @click="getRow(item.code,index)">
						{{item.dispName}}
					</view>
				</view>
				<view class="table">
					<view>单价(元/kg)</view>
					<view>重量(kg)</view>
					<view>合计金额(元)</view>
				</view>
				<view v-if="list.length && list[curIndex].typeList.length" v-for="(item,index) in list[curIndex].typeList" :key="item.id" class="item flex justify_between align_center">
					<view class="flex align_center">
						<text class="item-name">{{item.name}}</text>
						<u-input type="digit" @input="numberToFixed(item,'customerPrice',index)" :custom-style="inputLeftStyle" input-align="center" :clearable="false" v-model="item.customerPrice" placeholder="输入单价" />
					</view>
					<view class="flex flex_1 align_center">
						<u-input type="digit" @input="numberToFixed(item,'rubbishWeight',index)" :custom-style="inputRightStyle" input-align="center" :clearable="false" v-model="item.rubbishWeight" placeholder="请输入重量" />
					</view>
					<view class="flex_1 flex align_center justify_center">{{item.totalAmount}}</view>
				</view>
			</view>
			<!-- 金额 -->
			<view class="item-info">
				<view class="item flex justify_between">
					<text>应付金额</text>
					<text>{{originalAmount}} 元</text>
				</view>
				<view class="item flex justify_between">
					<text>支付方式</text>
					<v-select class="flex_1" ref="payType" :disabled="true" placeholder="请选择支付方式" @itemChange="chooseType" code="ORDER_RESERVE_PAY_TYPE" style="width: 100%"></v-select>
				</view>
			</view>
			<!-- 服务信息 -->
			<view class="info-main flex flex_column">
				<view class="flex flex_1 align_center">
					<view class="new-left">
						{{orderInfo.contactAddress? orderInfo.contactAddress:'' + (orderInfo.houseAddress||'')}}
					</view>
				</view>
				<view class="time flex align_center justify_between">
					<text>{{orderInfo.contactName}}</text>
					<view @click="callPhone(orderInfo.contactMobile)" class="flex align_center">
						<u-icon class="phone" name="icon_phone" custom-prefix="custom-icon" size="28" color="#999999"></u-icon>
						<text>{{orderInfo.contactMobile}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button @click="submit" :loading="loading" class="flex_1" type="primary">提交</u-button>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import { orderDetailFind, orderSubmit } from '@/api/order.js'
	import { getLookUpDatas } from '@/api/data.js'
	import { reservePriceFind } from '@/api/index.js'
	import vSelect from '@/components/select/v-select.vue'
	import {numberToFixed} from '@/libs/tools.js'
	export default {
		components: {
			vSelect
		},
		data() {
			return {
				orderInfo: {},
				totalPrice: 0, // 支付合计
				orderReserveNo: '', // 订单号
				inputLeftStyle: {
					Width: '110rpx',
					borderBottom: '1px solid #707070',
					padding: '0rpx 10rpx',
					color: '#191919'
				},
				inputRightStyle:{
					padding: '0rpx 10rpx',
					color: '#191919'
				},
				curType: '', // 当前类型
				curIndex: 0, // 当前类型index
				typeData: [], // 垃圾类型数据
				list: [],
				payType: '', // 支付方式
				loading: false
			}
		},
		onLoad(options) {
			if (options.orderNo) {
				console.log(options.orderNo)
				this.orderReserveNo = options.orderNo
				this.getOrderDetail()
				this.getRubbishType()
			}
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		computed: {
			// 支付总金额
			originalAmount() {
				let total = 0
				if(this.list.length){
					this.list.map(item =>{
						item.typeList.map(k =>{
							if(k.totalAmount){
								total = total + Number(k.totalAmount)
							}
						})
					})
				} 
				return total.toFixed(2)
			},
			// 总重量
			totalWeight() {
				let total = 0
				if(this.list.length){
					this.list.map(item =>{
						item.typeList.map(k =>{
							total = total + Number(k.rubbishWeight) 
						})
					})
				} 
				return total.toFixed(2)
			}
		},
		methods: {
			// 小数点后两位
			numberToFixed: function (item,key, index) {
			  let val = item[key]
			  let ret = numberToFixed(val, 2, 999999)
			  this.$nextTick(() => {
				item[key] = Number(ret)
				item.totalAmount = item.customerPrice ?(item.customerPrice * item.rubbishWeight).toFixed(2) : 0
			  })
			},
			// 打电话
			callPhone(phone) {
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			// 获取订单详情
			getOrderDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				orderDetailFind({
					orderReserveNo: this.orderReserveNo
				}).then(res => {
					console.log(res,'rrrrrrrr')
					if (res.status == 200 && res.data) {
						this.orderInfo = res.data
						this.orderInfo.reserveTime = moment(this.orderInfo.reserveDateBegin).format('YYYY-MM-DD') + this.orderInfo.reserveTimeTypeDictValue
					} 
					uni.hideLoading()
				})
			},
			// 获取垃圾类型数据
			getRubbishType() {
				this.list = []
				getLookUpDatas({type:'RESERVE_RUBBISH_TYPE'}).then(res=>{
					if(res.status == 200) {
						this.typeData = res.data || []
						this.typeData.map(k =>{
							let p = {
								typeCode: k.code,
								typeName: k.dispName,
								typeList: []
							}
							console.log(p,'pppppp')
							this.list.push(p)
						})
						// console.log(this.list,'this.list----------')
						this.curType = this.typeData.length ? this.typeData[0].code : ''
						this.curIndex = 0
						this.getRow()
					} else {
						this.typeData = []
					}
				})
			},
			// 查询列表
			getRow(code,num) {
				this.curType = code || this.curType
				this.curIndex = num || 0
				if(this.list[this.curIndex].typeList.length) return
				reservePriceFind({code:this.curType}).then(res => {
					if (res.status == 200) {
						let data = res.data
						data.forEach(item =>{
							item.rubbishWeight = ''
							item.totalAmount = ''
						})
						this.list[this.curIndex].typeList = data
						// console.log(this.list,'----this.list')
					} else {
						this.list[this.curIndex].typeList = []
						this.total = 0
						this.noDataText = res.message
					}
				})
			},
			// 选择支付方式
			chooseType(code) {
				this.payType = code
				console.log(this.payType,'this.payType')
			},
			// 提交
			submit() {
				let arr = [] // 有重量也有价格
				let arrP = [] // 有重量没有价格
				this.list.map(item =>{
					item.typeList.map(k =>{
						if(k.rubbishWeight && k.customerPrice) {
							let p = {
								rubbishType: item.typeCode,   //垃圾大类型
								rubbishTypeItem: k.code, //   垃圾细分类型
								rubbishWeight: k.rubbishWeight*1000, //   垃圾重量（克）
								rubbishPrice: k.customerPrice, //   单价
								totalAmount: k.rubbishWeight* k.customerPrice // 总价金额
							}
							arr.push(p)
						}
						if(k.rubbishWeight && !k.customerPrice) {
							let p = {
								name: item.typeName,
								itemName: k.name
							}
							arrP.push(p)
						}
					})
				})
				if(arrP.length) {
					uni.showToast({
						title: `请输入【 ${arrP[0].name} 】中 【${arrP[0].itemName}】的价格！`,
						icon: 'none',
						duration: 3000
					})
					return
				}
				if(arr.length==0) {
					uni.showToast({
						title: '请先输入重量且合计金额必须大于0！',
						icon: 'none'
					})
					return
				}
				
				let item = arr.find(item=>!item.rubbishPrice)
				if(item) {
					uni.showToast({
						title: '请先输入重量且合计金额必须大于0！',
						icon: 'none'
					})
					return
				}
				if (!this.payType) {
					uni.showToast({
						title: '请选择支付方式！',
						icon: 'none'
					})
					return
				}
				let params = {
					"payType": this.payType, //支付方式
					originalAmount: this.originalAmount, // 支付总金额
					totalWeight: this.totalWeight*1000, // 总重量（g）
					contactName:  this.orderInfo.contactName,  //联系人姓名
					contactMobile:  this.orderInfo.contactMobile, //联系人手机号
					contactAddress:  this.orderInfo.contactAddress,//联系人地址
					orderReserveNo: this.orderReserveNo,
					orderReserveItemEntityList: arr
				}
				this.loading = true
				orderSubmit(params).then(res=>{
					if(res.status == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						console.log('=============跳转')
						uni.redirectTo({
							url: '/pages/order/finish?money=' + res.data
						})
						console.log('=============')
					}
					this.loading = false
				})
			}
		},
	}
</script>

<style lang="scss">

	.order-pages {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F5F5F5;
		.order-info {
			width: 100%;
			flex: 1;
			overflow-y: scroll;
			// 订单内容
			.info-main{
				background: #ffffff;
				padding: 10upx 32upx;
				margin: 20upx 32upx;
				border-radius: 24upx;
				box-shadow: 1px 1px 3px #EEEEEE;
				font-size: 28upx;
				background-image: url(../../static/order_bg_stor.png);
				background-repeat: no-repeat;
				background-size: contain;
				.new-left{
					width: 360rpx;
					font-size: 36rpx;
					color: #191919;
					font-weight: 600;
					line-height: 44rpx;
					margin-top: 30rpx;
					min-height: 80rpx;
				}
				.time{
					padding: 20rpx 0;
					font-size: 32rpx;
					color: #7C7D7E;
					margin-top: 20rpx;
					view:last-child{
						font-size: 28rpx;
						color: #4C4C4C;
						margin-left: 6rpx;
					}
				}
			}
			// 状态
			.order-status {
				padding: 30upx 0;
				text-align: center;
				.status-title {
					font-size: 42upx;
					color: #191919;
					.icon{
						width: 48rpx;
						height: 48rpx;
						margin-right: 10rpx;
					}
				}

				.status-care {
					font-size: 28upx;
					margin-top: 10upx;
					color: #191919;

					>text {
						color: red;
					}
				}
			}

			// 订单信息列
			.item-info{
				border-radius: 24rpx;
				margin: 0rpx 32rpx 20rpx;
				padding: 0rpx 32rpx;
				background-color: #fff;
				.item-title{
					font-size: 32rpx;
					color: #181818;
					padding-top: 28rpx;
					.care{
						font-size: 24rpx;
						color: #FF2C5C;
						margin-top: 10rpx;
					}
				}
				.table{
					padding: 20rpx 0;
					display: flex;
					font-size: 28rpx;
					view{
						width: 33%;
						text-align: center;
					}
				}
				.item{
					padding: 28rpx 0;
					font-size: 32rpx;
					border-bottom: 1px solid #EBEBEB;
					.item-name{
						max-width: 100rpx;
						font-size: 30rpx;
					}
					:first-child{
						color: #7C7D7E;
					}
					:last-child-child{
						color: #222222;
					}
					&:last-child{
						border-bottom: none;
					}
					.input-left{
						padding: 6rpx;
						border-bottom: 1px solid #707070;
					}
					.item-type{
						padding: 10rpx 14rpx;
						border: 1px solid #979797;
						opacity: 1;
						border-radius: 30rpx;
						font-size: 30rpx;
						color: #999999;
						text-align: center;
					}
					.item-type.active{
						background-color: #4F88F7;
						border: none;
						color: #fff;
					}
				}
			}
			.price-text {
				font-size: 20upx;
				margin-left: 10upx;
			}
			.price-num {
				font-size: 32upx;
				color: red;
				font-weight: 600;
				margin-right: 6rpx;
			}
			.u-cell {
				padding: 10rpx 32rpx;
			}
		}
		.footer {
			padding: 20rpx 32rpx;
			display: flex;
			background-color: #fff;
		}
	}
</style>
