<template>
	<div class="container">
		<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
			<div class="searchBox_add">
				<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
			</div>
		</div>

		<div class="community">
			<div class="community_left">
				<image mode="aspectFill"
					src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png" alt="" />
			</div>
			<div class="community_right" @click="changeShow">
				<div class="community_right_text">
					<div class="community_right_text1">{{ currentRoom.name }}</div>
					<div class="community_right_text2">{{ currentCommunityAddr }}</div>
				</div>
				<div class="community_right_more">
					<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
				</div>
			</div>
		</div>

		<div class="tabList">
			<div class="tabItem" :class="active == 0 ? 'active' : ''" @click="changeTab(0)">账单</div>
			<div class="line"></div>
			<div class="tabItem" :class="active == 1 ? 'active' : ''" @click="changeTab(1)">缴费记录</div>
		</div>

		<div class="homeMoney" v-if="active == 0">
			<div class="homeMoney_box">
				<div class="homeMoney_box_left">
					<div class="homeMoney_box_left1">物业公积金</div>
					<div class="homeMoney_box_left2">可抵扣账户金额</div>
				</div>
				<div class="homeMoney_box_right">
					<div class="homeMoney_box_right1"><span>￥</span>{{ balanceMoney }}</div>
					<div class="homeMoney_box_right2" @click="more">
						查看详情
						<div style="margin-left: 12rpx;">
							<u-icon bold color="#894B11" size="30" name="arrow-right" ></u-icon>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="payList" v-if="active == 0">
			<div class="payItem" v-for="(item, index) in Bill" :key="index">
				<div class="payItem_tit">
					<div class="payItem_left">
						<checkbox :checked="item.check" @click="checkChange(item, index)"></checkbox>
						<div style="margin-left: 24rpx;">{{ item.order_date }}年</div>
					</div>
					<div class="payItem_right">
						<span>￥</span>
						{{ item.unpaid_amount }}
						<p>未缴</p>

						<div style="margin-left: 40rpx;" @click="changeCheck(item, index)">
							<u-icon bold color="#894B11" size="30" name="arrow-down" v-if="!item.more"></u-icon>
							<u-icon bold color="#894B11" size="30" name="arrow-up" v-if="item.more"></u-icon>
						</div>
					</div>
				</div>
				<div v-if="item.more">
					<div class="payItem_List" v-for="(items, indes) in item.community_order_rows"
						:key="items.order_id">
						<checkbox :checked="items.check" @click="itemsCheckChange(items, indes, index)"></checkbox>
						<div class="Item_time" v-if="items.billing_cycle == 1">{{ items.order_date }}年</div>
						<div class="Item_time" v-if="items.billing_cycle == 2">{{ items.order_datetime }}月</div>
						<div class="Item_type">{{ items.community_fee_type.type_name }}</div>
						<div class="Item_money">￥{{ items.money }}</div>
						<div class="Item_status" v-if="items.status == 0">未付款</div>
						<div class="Item_status sucess" v-if="items.status == 1">已付款</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 选择支付类型 -->
		<div class="payTypeList" v-if="active == 0">
			<div class="PayTypeItem">
				<div class="PayTypeItem_left">
					<div class="PayTypeItem_img">
						<image mode="aspectFill"
							src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
							alt="" />
					</div>
					<div class="PayTypeItem_con">
						<div class="PayTypeItem_con_tit">微信支付</div>
						<div class="PayTypeItem_con_msg">单笔支付限额：￥10000.00</div>
					</div>
				</div>

				<div class="PayTypeItem_right">
					<radio :checked="payType == 1" @click="changePayType(1)"></radio>
				</div>
			</div>
			<div class="line3"></div>
			<div class="PayTypeItem">
				<div class="PayTypeItem_left">
					<div class="PayTypeItem_img">
						<image mode="aspectFill"
							src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
							alt="" />
					</div>
					<div class="PayTypeItem_con">
						<div class="PayTypeItem_con_tit">物业公积金支付</div>
						<div class="PayTypeItem_con_msg">单笔支付限额：￥10000.00</div>
					</div>
				</div>

				<div class="PayTypeItem_right">
					<radio :checked="payType == 2" @click="changePayType(2)"></radio>
				</div>
			</div>
		</div>

		<div class="bottom" v-if="active == 0">
			<div class="bottom_left">
				<span>合计</span>
				<p>￥</p>
				{{ currentMoney }}
			</div>
			<div class="bottom_right" @click="OrderPay">
				立即支付
			</div>
		</div>


		<div class="payHisList" v-if="active == 1">
			<div class="payHisItem" v-for="item in payOrderList" :key="item.id">
				<div class="row">
					<div class="row_label">缴费金额</div>
					<div class="row_con1">￥{{ item.money }}</div>
				</div>
				<div class="row">
					<div class="row_label2"></div>
					<div class="row_con2">{{ item.pay_time }}支付</div>
				</div>
				<div class="line4"></div>
				<div class="row">
					<div class="row_label">绑定房源</div>
					<div class="row_con3">
						<div class="row_con3_1">{{ item.community_order.length }}个账单</div>
						<div class="row_con3_2">明细可从收据查看</div>
					</div>
				</div>

				<div class="row">
					<div class="row_label">应缴费金额</div>
					<div class="row_con4">￥{{ item.money }}</div>
				</div>

				<div class="row">
					<div class="row_label">物业费公积金抵扣金额</div>
					<div class="row_con4">-￥{{ item.reduction_money }}</div>
				</div>

				<div class="row">
					<div class="row_label">缴费单号</div>
					<div class="row_con4">{{ item.order_pay_no }} </div>
				</div>
				<div class="line4"></div>
				<div class="Receipt">收据</div>

			</div>
		</div>


		<div class="boxshadow" v-if="show" @click="changeShow">
			<div class="boxshadowCon">
				<div class="boxshadowCon_Tit">
					选择房源
					<div class="cancel">取消</div>
				</div>
				<div class="lines"></div>
				<div class="communityList" v-if="roomList.length > 0">
					<div class="communityItem" v-for="item in roomList" :key="item.room_id">
						<div class="communityItem_text">{{ item.facility_name }}{{ item.floor }} {{ item.number }}</div>
						<div class="communityItem_radio">
							<radio></radio>
						</div>
					</div>
				</div>
				<div class="communityList" v-else>
					<div class="communityItem">
						<div class="communityItem_text">暂无房源</div>
					</div>
				</div>
			</div>
		</div>

		<div class="boxshadow" v-if="show2" @click="changeShow2">
			<div class="boxshadowCon">
				<div class="boxshadowCon_Tit">
					付款总金额
					<div class="cancel">取消</div>
				</div>
				<div class="boxshadowCon_subTit">
					<span>￥</span>4900.00
				</div>
				<div class="lines"></div>

				<div class="BanlenceList">
					<div class="banlenceItem">
						<div class="banlenceItem_left">
							<image mode="aspectFill"
								src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
								alt="" />
							微信支付
						</div>
						<div class="banlenceItem_right">
							<span>￥</span>4900.00
						</div>
					</div>
					<div class="line3"></div>
					<div class="banlenceItem">
						<div class="banlenceItem_left">
							<image mode="aspectFill"
								src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
								alt="" />
							物业公积金支付
						</div>
						<div class="banlenceItem_right">
							<span>￥</span>4900.00
						</div>
					</div>

				</div>

				<div class="btn">
					物业公积金+微信支付 <span>￥</span>4900.00
				</div>

			</div>
		</div>

	</div>

</template>

<script>
import {
	request,
	picUrl,
	uniqueByField,
	menuButtonInfo,
	formatDate,
	NavgateTo
} from '../../../utils';
import {
	apiArr
} from '../../../api/community';


export default {
	data() {
		return {
			top: "",
			localHeight: "",
			active: 0,
			show: false,
			show2: false,
			roomList: [],
			currentRoom: {},
			currentCommunity: "", //当前房源
			currentCommunityAddr: "", //当前房源地址
			Bill: "", //账单
			balanceMoney: "",//公积金

			currentMoney: 0, //所选金额

			payType: '1',
			payInfoId: "",//支付信息id
			page_size: 10,
			page_num: 1,
			payOrderList: [],
			flag: false,
		}
	},
	onLoad(options) {
		const meun = menuButtonInfo();
		this.top = meun.top;
		// this.top = meun.height + meun.top;
		this.localHeight = meun.height;
		this.currentCommunity = uni.getStorageSync('changeCommData')
		this.currentCommunityAddr = uni.getStorageSync("currentCommunityAddr")
		this.getRoomSelect()
		this.getUserGovenmentMoney()
	},


	methods: {
		changeTab(index) {
			this.active = index;
			if (index == 1) {
				this.page_num = 1
				this.getPayList()
			}
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		changeShow() {
			this.show = !this.show
		},
		changeShow2() {
			this.show2 = !this.show
		},
		//获取房源
		getRoomSelect() {
			request(apiArr.getCommunityRoomList, 'POST', {
				community_id: this.currentCommunity.id,
				page_num: 1,
				page_size: 50
			}).then(res => {
				this.roomList = res.rows
				this.currentRoom = this.roomList[0]
				this.getOrderList()

			})
		},

		//获取用户公积金
		async getUserGovenmentMoney() {
			request(apiArr.getUserGovenmentMoney, "POST", {}).then(res => {
				console.log(res, '公积金');
				this.balanceMoney = res.balance_after
			})
		},

		//获取账单
		async getOrderList() {
			await request(apiArr.getOrderList, 'POST', {
				room_id: this.currentRoom.room_id,
				page_num: 1,
				page_size: 50
			}).then(res => {
				console.log(res, '账单');
				res.rows.forEach(item => {
					item.check = false
					item.more = false
					item.community_order_rows.forEach(ite => {
						ite.check = false
					})
				});
				this.Bill = res.rows
			})
		},
		//账单详情切换展示显示
		changeCheck(e, index) {
			this.Bill[index].more = !this.Bill[index].more
		},
		//整体选择
		checkChange(e, index) {
			this.Bill[index].check = !this.Bill[index].check
			this.Bill[index].community_order_rows.forEach(item => {
				if (this.Bill[index].check) {
					item.check = true
				} else {
					item.check = false
				}
			})

			// 重新计算选中金额
			let money = 0
			this.Bill.forEach(item => {
				item.community_order_rows.forEach(ite => {
					if (ite.check) {
						money += ite.money
					}
				})
			})
			this.currentMoney = money
		},
		//具体选择
		itemsCheckChange(e, indes, index) {
			this.Bill[index].community_order_rows[indes].check = !this.Bill[index].community_order_rows[indes].check
			//判断是否全部选中
			let isAll = this.Bill[index].community_order_rows.every(item => {
				return item.check
			})
			if (isAll) {
				this.Bill[index].check = true
			} else {
				this.Bill[index].check = false
			}
			//帮我计算所有Bill的的community_order_rows 所选中的金额  现在取消选择金额没有减
			let money = 0
			this.Bill.forEach(item => {
				item.community_order_rows.forEach(ite => {
					if (ite.check) {
						money += ite.money
					}
				})
			})
			this.currentMoney = money

		},
		//切换支付方式
		changePayType(e) {
			this.payType = e
		},
		//创建支付订单
		async createPay() {
			let order_ids = []
			this.Bill.forEach(item => {
				item.community_order_rows.forEach(items => {
					if (items.check) {
						order_ids.push(items.order_id)
					}
				})
			})
			let name_mini = ''
			if(this.payType == 1){
				name_mini = '微信'
			}else{
				name_mini = '物业公积金'
			}
			if(!this.currentMoney){
				return uni.showToast({
					title: '请选择账单',
					duration: 2000
				});
			}
			await request(apiArr.createPayOrder, "POST", {
				order_ids: order_ids,
				community_id: this.currentCommunity.id,
				room_id: this.currentRoom.room_id,
				pay_user_id: uni.getStorageSync('userId'),
				user_name: uni.getStorageSync('nickName'),
				pay_user_name: uni.getStorageSync('nickName'),
				//格式化年月日 时分秒
				pay_time: formatDate(new Date()), 
				money: this.currentMoney,
				name_mini
			}).then(res => {
				console.log(res);
				this.payInfoId = res.id
				this.getPayInfo()
			})
		},
		//根据支付订单查询交易信息
		async getPayInfo() {
			await request(apiArr.getPayOrderInfo, "POST", { order_pay_id: 6}).then(res => {
				this.OrderPay()
			})
		},
		//预下单
		async OrderPay(){
			// this.payInfoId
				await request(apiArr.OrderPay, "POST", { order_pay_id: 6}).then(res => {
				console.log(res);

			})
		},

		//支付记录
		getPayList() {
			request(apiArr.getPayOrderList, "POST",
				{
					room_id: this.currentRoom.room_id,
					page_num: this.page_num,
					page_size: this.page_size
				}).then(res => {
					console.log(res);
					let flag = false
					if (res.rows && res.rows.length == this.page_size) {
						flag = true
					} else {
						flag = false
					}
					this.flag = flag
					this.payOrderList = this.payOrderList.concat(res.rows)
				})
		},

		//物业公积金详情
		more(){
			NavgateTo("../providentFund/index")
		},

	},


}
</script>

<style>
@import url("./index.css");
</style>