<!--  缴预交金 -->
<template>
	<nav-bar id="nav-bar" ref="navBar" :navbar-data="navbarData"></nav-bar>
	<view :style="{paddingTop: height +'px'}" class="advance-payment">
		<view class="dati-select">
			<text data-reply-Type="1" @tap="handleSwitch" :class="activeKey === '1' ? 'active active-left' : ''">我要充值</text>
			<text data-reply-Type="2" @tap="handleSwitch" :class="activeKey === '2' ? 'active active-right' : ''">充值记录</text>
		</view>
		<uni-notice-bar :scrollable="false" text="请根据实际情况选择用途，否则会影响预交金使用。" v-if="activeKey === '1'" />
		<view v-if="activeKey === '1'" class="ap-visit-list">
			<view class="ap-visit-list-content">
				<radio-group :value="radio" @change="handleRadioChange" name="lib">
				<view :data-item="item" v-for="(item,index) in visitList" class="ap-visit-list-item border-bottom-after" :key="index">
					<view class="ap-visit-list-item-content">
						<view class="ap-visit-list-item-header border-bottom-after">
							<radio name="acc" :value="item.accPurPoseID" :id="item.accPurPoseID" @change="stopPropagation" :data-index="item"></radio>
							<text>{{item.accpurPoseDesc}}</text>
							<text style="color:#FF9933">（余额 ￥ {{item.balance}}）</text>
						</view>
						<view class="ap-visit-list-item-diagnosis">
							<view>{{item.title}}</view>
						</view>
					</view>
				</view>
				</radio-group>
			</view>
			<view class="ap-btn">
				<button @tap="handleNextStep" type="primary" class="btn-primary" block>下一步</button>
			</view>
		</view>
		<view v-if="activeKey === '2'" class="ap-recharge-record">
			<view class="ap-query-conditions">
				<van-cell-group class="van-cell-group">
					<van-cell title="" is-link class="cell-first">
						<picker mode="date" fields="month" @change="handlePickerConfirm">
							<view class="t-l">{{ dateValue }}</view>
						</picker>
					</van-cell>
					<van-cell title="" is-link>
						<picker class="t-l" range-key="label" :range="purposeSelectData" @change="purposeChange">
							<view class="t-l">{{purposeDesc ? purposeDesc : '预交金用途'}}</view>
						</picker>
					</van-cell>
				</van-cell-group>
			</view>
			<view class="ap-recharge-record-list">
				<view class="arrl-item" v-for="(item,index) in rechargeRecordListData" :key="index">
					<view>
						<text class="arrl-item-title">{{item.accPurposeDesc}}</text>
						<text class="arrl-item-money">{{item.paywAmt}} ({{item.paywModeDesc}})</text>
					</view>
					<view>
						<text class="arrl-item-date">{{item.paywDate}}</text>
						<text class="arrl-item-balance">{{item.subBalance}}</text>
					</view>
				</view>
			</view>
			<!-- <van-popup :show="pickerVisible" title="选择年月" position="bottom" custom-style="height: 30%;" @close="pickerClose">
				<van-datetime-picker type="year-month" :value="startTime" bind:cancel="pickerClose" @confirm="handlePickerConfirm" />
			</van-popup> -->
		</view>
	</view>
</template>

<script>
	import $http from "@/utils/https";
	import Utils from "@/utils/utils";
	import NavBar from '@/components/navBar/index.vue'
	import VanPopup from '@/components/popup/index.vue'
	import VanCellGroup from '@/components/cell-group/index.vue'
	import VanCell from '@/components/cell/index.vue'
	const app = getApp();
	export default {
		components: {
			'nav-bar': NavBar,
			"van-popup": VanPopup,
			"van-cell-group": VanCellGroup,
			'van-cell': VanCell,
		},
		data() {
			return {
				userData: this.$cache.get('userData'),
				height: app.globalData.height,
				navbarData: {
					isGoHome: true,
					isGoBack: true,
					title: "缴预交金"
				},
				activeKey: "1",
				visitList: [],
				radio: '',
				pickerVisible: false, // 日期弹窗状态
				startTime: new Date().getTime(),
				dateValue: Utils.timestampToDateFormat(new Date().getTime(), "年月"),
				// purposeVisible: false, //  预交金用途下拉弹窗状态
				purposeSelectData: [], //  //  预交金用途下拉数据
				purposeValue: undefined, //  预交金用途ID
				purposeDesc: "", //  预交金用途描述
				admList: "",
				purPoseObj: "",
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getPurpose(); // 获取充值用途下拉数据
			if (options && options.flag === "Y") {
				this.setData({
					activeKey: "2"
				})
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.getAccManagement()
			this.getAccType()
		},
		
		methods: {
			// 菜单切换
			handleSwitch: function(event) {
				this.setData({
					activeKey: event.currentTarget.dataset.replyType
				}, () => {
					if (this.activeKey === "2") {
						this.getAccManagement(); // 获取充值记录
					}
				});
			},

			handleRadioChange: function(event) {
				this.setData({
					radio: event.detail.value,
				});
			},

			// 下一步
			handleNextStep: function() {
				let {
					purPoseObj,
				} = this;
				console.log(purPoseObj)
				if (Object.keys(purPoseObj).length !== 0) {
					if (purPoseObj.ifAdmflag === "Y") {
						uni.navigateTo({
							url: '/pages/order/pages/selectAVisit/selectAVisit',
							success: (res) => {
								res.eventChannel.emit('selectAVisit', {
									purPoseObj: purPoseObj,
								})
							}
						})
					} else {
						uni.navigateTo({
							url: '../prepaymentAndRecharge/prepaymentAndRecharge',
							success: (res) => {
								res.eventChannel.emit('selectAVisit', {
									purPoseObj: purPoseObj,
								})
							}
						})
					}
				} else {
					uni.showToast({
						title: "请选择充值用途。",
						icon: "none"
					})
				}
			},

			// 阻止事件maop
			stopPropagation: function(e) {
				let purPoseObj = e.currentTarget.dataset.index
				this.setData({
					purPoseObj: purPoseObj,
				})
			},


			// 确认选择日期
			handlePickerConfirm(event) {
				let { value } = event.detail
				if(value && value.indexOf('-') > -1) {
					value +='-01'
				} else if(value && value.indexOf('/') > -1) {
					value +='/01'
				}
				const timemap = new Date(value).getTime()
				console.log(event)
				console.log(timemap)
				this.setData({
					dateValue: Utils.timestampToDateFormat(timemap, "年月"),
					startTime: timemap
				}, () => {
					this.getAccManagement();
				})
			},

			// 类别change
			purposeChange(event) {
				let {
					value
				} = event.detail;
				this.setData({
					purposeValue: this.purposeSelectData[value].value,
					purposeDesc: this.purposeSelectData[value].label
				}, () => {
					this.getAccManagement()
				})
			},

			//获取充值记录
			getAccManagement: function() {
				let userData = this.$cache.get('userData');
				let dateArr = Utils.timestampToDateFormat(this.startTime, "YYYY-MM").split("-")
				let year = dateArr[0]
				let mouth = dateArr[1]
				var firstDay = Utils.timestampToDateFormat(new Date(year, mouth - 1, 1));
				var lastDay = Utils.timestampToDateFormat(new Date(year, mouth, 0));
				let data = {
					params: [{
						hospCode: userData.hisHospID || "",
						userCode: "wxsf",
						patNumber: userData.hisPatNo,
						stDate: firstDay || "",
						endDate: lastDay || "",
						purPoseCode: this.purposeValue || ""
					}]
				}
				$http.post("urlS", this, {
					code: "05100364",
					data: data,
					namespace: "Y",
					success: function(res) {
						if (+res.errorCode === 0) {
							this.setData({
								rechargeRecordListData: res.result.Data
							}, () => {
								console.log("rechargeRecordListData", this.rechargeRecordListData)
							})
						} else {
							this.setData({
								rechargeRecordListData: []
							})
						}
					}
				});
			},
			//获取充值类型
			getAccType: function() {
				let userData = this.$cache.get('userData');
				let data = {
					params: [{
						hospCode: userData.hisHospID || "",
						patNumber: userData.hisPatNo || "",
						//patNumber:"0000013374",
						patID: userData.hisPatID || "",
						userCode: "wxsf"
					}]
				}
				$http.post("urlS", this, {
					code: "05100366",
					data: data,
					namespace: "Y",
					success: function(res) {
						if (+res.errorCode === 0) {
							let visitList = res.accPurPoseList
							for (var i = 0; i < visitList.length; i++) {
								if (visitList[i].accpurPoseCode === "IP") {
									visitList[i].title = "充值成功后，用于抵扣住院费用"
								} else if (visitList[i].accpurPoseCode === "SS") {
									visitList[i].title = "充值成功后，用于抵扣门诊手术费用"
								} else {
									visitList[i].title = "充值成功后，用于抵扣门诊视光费用"
								}
							}
							this.setData({
								visitList: res.accPurPoseList
							})
						} else {
							this.setData({
								visitList: []
							})
						}
					}
				});
			},
			//获取充值用途
			getPurpose: function() {
				let data = {
					params: [{}]
				}
				$http.post("urlS", this, {
					code: "03100211",
					data: data,
					namespace: "Y",
					success: function(res) {
						if (+res.errorCode === 0) {
							console.log(res.result)
							this.setData({
								purposeSelectData: res.result
							})
						} else {
							this.setData({
								purposeSelectData: []
							})
						}
					}
				});
			},

			/**
			 * 用户点击右上角分享
			 */
			onShareAppMessage: function() {

			},
		}
	}
</script>

<style lang="scss">
	@use "../../../../static/base.scss" as *;
	
	.advance-payment {
		box-sizing: border-box;
		overflow: hidden;
		height: 100vh;
	}
		
	.advance-payment .dati-select {
	  width: 100%;
	  padding: 24rpx 72rpx;
	  box-sizing: border-box;
	}
	
	.advance-payment .van-tab {
	  font-size: 30rpx;
	}
	
	.advance-payment .dati-select text {
	  display: inline-block;
	  width: 50%;
	  height: 68rpx;
	  line-height: 68rpx;
	  text-align: center;
	  border: 1px solid #1890FF;
	  box-sizing: border-box;
	  color: #1890FF;
	  font-size: 28rpx;
	  position: relative;
	}
	
	.advance-payment .dati-select text:nth-child(1) {
	  border-right: 0;
	  border-radius: 34rpx 0 0 34rpx;
	}
	
	.advance-payment .dati-select text:nth-child(2) {
	  border-left: 0;
	  border-radius: 0 34rpx 34rpx 0;
	}
	
	.advance-payment .dati-select .active:before {
	  position: absolute;
	  width: 110%;
	  text-align: center;
	  top: 0;
	  height: 64rpx;
	  background-color: #1890FF;
	  color: #fff;
	  border-radius: 34rpx;
	  box-sizing: border-box;
	}
	
	.advance-payment .dati-select .active-left:before {
	  left: 0;
	  content: "我要充值";
	}
	
	.advance-payment .dati-select .active-right:before {
	  right: 0;
	  content: "充值记录";
	}
	
	.advance-payment .ap-visit-list {
	  width: 100%;
	  height: calc(100% - 196rpx);
	  background: #fff;
	  position: relative;
	  overflow: hidden;
	  padding-bottom: 136rpx;
	  box-sizing: border-box;
	}
	
	.advance-payment .ap-visit-list-content {
	  height: 100%;
	  overflow: auto;
	}
	
	.advance-payment .ap-visit-list-item {
	  width: 100%;
	  padding: 24rpx;
	  box-sizing: border-box;
	}
	.advance-payment .ap-visit-list-item-content {
	  border-radius:10px;
	  box-shadow: 0px 1px 5px 1px rgba(204, 204, 204, 0.54);
	}
	.advance-payment .ap-visit-list-item-header {
	  height: 99rpx;
	  display: flex;
	  padding: 0 22rpx;
	  box-sizing: border-box;
	  align-items: center;
	}
	
	.advance-payment .ap-visit-list-item-header text{
		display: block;
		font-size: 28rpx;
		line-height: 44rpx;
	}
	.advance-payment .van-radio .van-radio__label {
	  font-size:32rpx;
	  color: #666;
	}
	/* .advance-payment .ap-visit-list-item-header-date {
	  font-size:30rpx;
	  color: #999;
	  display: flex;
	}
	.advance-payment .ap-visit-list-item-header-date .van-icon.van-icon-arrow {
	  margin-top: 4rpx;
	} */
	.advance-payment .ap-visit-list-item-diagnosis {
	  height: 100rpx;
	  font-size:30rpx;
	  color: #999;
	  padding: 12rpx 26rpx;
	  box-sizing: border-box;
	}
	.advance-payment .ap-visit-list-item-diagnosis view {
	  width: 100%;
	  height: 100%;
	  line-height: 76rpx;
	  text-overflow: -o-ellipsis-lastline;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	}
	.advance-payment .ap-visit-list-item-interrogation {
	  height: 99rpx;
	  line-height: 99rpx;
	  text-align: right;
	  padding-right: 22rpx;
	  box-sizing: border-box;
	  color: #1890FF;
	  font-size: 30rpx;
	}
	
	.ap-btn {
	  position: absolute;
	  bottom: 48rpx;
	  left: 0;
	  width: 100%;
	  padding: 0 24rpx;
	  box-sizing: border-box;
	}
	
	/* 充值记录 */
	.ap-query-conditions van-cell-group,
	.ap-query-conditions .van-cell-group {
	  display: flex;
	  background: #fff;
	}
	
	.ap-query-conditions van-cell-group .van-cell,
	.ap-query-conditions .van-cell-group .van-cell {
	  width: 50vw;
	  padding-left: 36rpx;
	  padding-right: 24rpx;
	}
	
	.ap-query-conditions .van-cell-group .cell-first .van-cell {
	  border-right: 1rpx solid #ebedf0;
	}
	
	.ap-query-conditions .van-cell-group .van-cell .van-cell__title {
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	
	.ap-recharge-record {
	  width: 100%;
	  height: calc(100vh - 116rpx);
	  overflow: hidden;
	  background: #fff;
	}
	
	.ap-recharge-record-list {
	  height: calc(100% - 88rpx);
	  overflow: auto;
	}
	
	.ap-recharge-record-list {
	  width: 100%;
	  padding: 0 36rpx;
	  box-sizing: border-box;
	}
	
	.arrl-item {
	  width: 100%;
	  border-bottom: 1rpx solid #ebedf0;
	  padding: 16rpx 0;
	  box-sizing: border-box;
	}
	
	.arrl-item view {
	  display: flex;
	  justify-content: space-between;
	  line-height: 64rpx;
	  font-size: 28rpx;
	  color: #999;
	}
	
	.arrl-item-title, .arrl-item-money {
	  font-size: 32rpx;
	  color: #000;
	}
	
	.arrl-item-money {
	  font-weight: 600;
	  color: #FE9400;
	}
</style>