<template>
	<view class="page">

		<view style="height: 80vh;overflow: hidden;overflow-y: auto;padding: 12px;">

			<view class="top">

				<view class="top-item" style="margin-top: 0px;">

					<text class="item-text">发票类型</text>

					<radio-group @change="radioChange">
						<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="普通发票"
							:checked="info.invoiceType=='普通发票'">普通发票</radio>
						<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="增值税发票"
							:checked="info.invoiceType=='增值税发票'">增值税发票</radio>
					</radio-group>
				</view>

				<view class="top-item">

					<text class="item-text">抬头类型</text>

					<radio-group @change="radioChange2">
						<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="个人或事业单位"
							:checked="info.headingType=='个人或事业单位'">个人或事业单位
						</radio>
						<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="企业"
							:checked="info.headingType=='企业'">企业</radio>
					</radio-group>

				</view>

				<view class="top-item">

					<text class="item-text">发票抬头</text>

					<view class="item-right">
						<view style="width: 100%;margin-left: 20px;padding-left: 5px;">
							<input class="input" type="text" placeholder="填写抬头名称" v-model="info.invoiceHeader" />
						</view>

						<image src="../../static/more.png" style="width: 15px;height: 15px;margin-left: 5px;"
							@click="showList"></image>

					</view>
				</view>

				<view v-if="isPerson">
					<view style="display: flex;flex-direction: column;" v-if="showDetail">

						<view class="top-item">

							<text class="item-text">税号</text>

							<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;">
								<input class="input" type="text" placeholder="纳税人识别号或社会统一征信代码"
									v-model="info.dutyParagraph" />
							</view>
						</view>

						<view class="top-item">

							<text class="item-text">开户银行</text>

							<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;">
								<input class="input" type="text" placeholder="选填" v-model="info.bankOfDeposit" />
							</view>
						</view>


						<view class="top-item">

							<text class="item-text">银行账号</text>

							<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;">
								<input class="input" type="text" placeholder="选填" v-model="info.bankAccount" />
							</view>
						</view>


						<view class="top-item">

							<text class="item-text">企业地址</text>

							<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;">
								<input class="input" type="text" placeholder="选填" v-model="info.enterpriseAddress" />
							</view>
						</view>


						<view class="top-item">

							<text class="item-text">企业电话</text>

							<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;">
								<input class="input" type="text" placeholder="选填" v-model="info.enterprisePhone" />
							</view>
						</view>


					</view>

					<view class="item_btn" v-if="!showDetail" @click="showDetailClick(item)">
						<text style="font-size: 12px;color: #999; margin-right: 5px;">展开</text>
						<image src="../../static/zhankai.png" style="width: 15px;height: 15px;"></image>
					</view>

					<view class="item_btn" v-if="showDetail" @click="showDetailClick(item)">
						<text style="font-size: 12px;color: #999; margin-right: 5px;">收起</text>
						<image src="../../static/shouqi.png" style="width: 15px;height: 15px;"></image>
					</view>

				</view>

			</view>

		</view>
		<view style="position: absolute; bottom: 20px; display: flex;flex-direction: column;width: 100%;
	box-sizing: border-box;padding-left: 40px;padding-right: 40px; ">
			<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B);
				width: 100%;border-radius: 25px;height: 50px;text-align: center; 
				line-height: 50px;color: #FFFFFF;font-size: 16px;" @click="save">
				提交申请</view>
		</view>

		<!-- 弹窗蒙版 -->
		<view class="model" catchtouchmove='preventTouchMove' v-if='showModal'></view>
		<view class="modalDlg" id="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal'>

			<view style="display: flex;flex-direction: column;padding: 12px;">

				<view
					style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; width: 100%;">

					<text style="font-size: 16px;font-weight: 600;font-family: sans-serif;margin-left: 5px;">选择抬头</text>
					<image src="../../static/close2.png" style="width: 25px;height: 25px;" @click.stop="colseDialog()">
					</image>

				</view>

				<scroll-view scroll-y="true" :show-scrollbar="false"
					style="margin-top: 10px;padding-left: 12px;padding-right: 12px;box-sizing: border-box;"
					:style="'height:'+viewHeight+'px'">

					<view v-for="(item,index) in data" :key="index" style="display: flex;flex-direction: column;"
						v-if="showData">

						<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;
							 background: #fff; border-radius: 10px; margin-top: 12px;padding: 20px 12px;" @click="itemClick(item)">

							<view style="flex: 1;display: flex;flex-direction: column;">

								<view style="flex: 1;display: flex;flex-direction: row;align-items: center;">
									<text
										style="font-size: 16px;font-weight: 600;font-family: sans-serif;">{{item.invoiceHeader}}</text>
									<text v-if="item.isDefault==1" style="background: #FFF0DA; color: #FF7200; 
									font-size: 10px;margin-left: 6px;border-radius: 5px;padding: 2px 5px;">默认</text>
								</view>

								<text style="font-size: 12px;color: #999;margin-top: 5px;">
									{{item.invoiceType}} - {{item.headingType}}</text>

							</view>

							<text style="font-size: 12px;color: #999;" @click.stop="editItem(item)">编辑</text>
						</view>

					</view>

					<view v-if="notData" style="display: flex;flex-direction: column;align-items: center;">

						<image src="https://supervise.yxtsoft.com/lpk/image/notData.png" mode="aspectFit"
							style="width: 100px;height: 100px;"></image>
						<view style="display: flex;flex-direction: column;align-items: center;margin-top: 10px;">
							<text style="font-size: 14px; color: #999;margin-right: 5px;">暂无数据</text>
						</view>
					</view>


				</scroll-view>


			</view>

			<view style="position: absolute; bottom: 20px; display: flex;flex-direction: column;width: 100%;
			box-sizing: border-box;padding-left: 40px;padding-right: 40px; ">
				<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B);
						width: 100%;border-radius: 25px;height: 50px;text-align: center; 
						line-height: 50px;color: #FFFFFF;font-size: 16px;" @click="addInviice">
					添加新的抬头</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModal: false,
				showData: false,
				notData: true,
				viewHeight: "",
				page: {
					sid: ""
				},
				isPerson: true,
				showDetail: false,
				radioDefault: false,
				info: {
					sid: "",
					invoiceType: "", //发票类型
					headingType: "", //抬头类型
					invoiceHeader: "", //发票抬头
					dutyParagraph: "", //税号
					bankOfDeposit: "", //开户行
					bankAccount: "", //账号
					enterpriseAddress: "", //企业地址
					enterprisePhone: "", //企业电话
					isDefault: "0", //是否默认 1 为默认
					customerSid: getApp().globalData.sid,
					orderSid: "" // 订单sid
				},
				data: []
			}
		},
		onLoad(options) {
			this.page.sid = options.sid
			this.getData()
			//隐藏加载框
			// uni.hideLoading();
		},
		onShow() {
			// this.getData()
			// //隐藏加载框
			// uni.hideLoading();
		},
		created() {
			var _this = this
			this.$bus.$on('invoice', msg => {
				console.log("aaaaaaaaaaa4", msg)

				const index = _this.data.findIndex(item => item.sid == msg.sid)
				console.log(">>>>", index)
				if (index != -1) {
					// 替换 已修改过
					_this.data.splice(index, 1, msg)
				} else {
					// 刚新增的 
					_this.data.push(msg)
				}


			});
		},
		methods: {
			getData() {

				this.$api.getInvoiceList(getApp().globalData.sid).then((resp) => {
					console.log("getInvoiceList>>>" + resp);
					this.data = resp

					const arr1 = this.data.filter(item => item.isDefault == 1)
					console.log(">>>>", arr1)

					if (arr1.length > 0) {
						this.info = arr1[0]
						this.isPerson = this.info.headingType != '个人或事业单位'
					}

				}).catch(e => {

				})

			},
			showList() {
				this.showModal = true
				uni.showLoading({
					title: '加载中'
				})
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.modalDlg').boundingClientRect(data => {
						console.log("得到布局位置信息" + JSON.stringify(data));
						console.log("节点离页面顶部的距离为" + data.top);
						console.log("节点离页面顶部的距离为" + data.height);
						this.viewHeight = data.height - 135
						this.showData = this.data.length > 0
						this.notData = this.data.length == 0

						console.log("showData2" + this.showData);
						console.log("notData2" + this.notData);

						//隐藏加载框
						uni.hideLoading();
					}).exec();

				}, 500)

			},

			itemClick(item) {
				console.log("itemClick", item);

				this.info = item
				this.isPerson = this.info.headingType != '个人或事业单位'
				this.colseDialog()

			},
			editItem(item) {
				console.log("editItem", item);

				uni.navigateTo({
					url: "/pages/me/addInvoice?info=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			colseDialog() {
				this.showModal = false
			},
			addInviice() {
				uni.navigateTo({
					url: "/pages/me/addInvoice"
				})
			},
			radioChange(val) {
				console.log("radioChange", val);
				this.info.invoiceType = val.detail.value
			},
			radioChange2(val) {
				console.log("radioChange2", val);

				this.info.headingType = val.detail.value

				this.isPerson = val.detail.value != "个人或事业单位"


			},
			showDetailClick() {
				this.showDetail = !this.showDetail
			},
			radioDefaultClick() {
				this.radioDefault = !this.radioDefault

				this.info.isDefault = this.radioDefault ? "1" : "0"

			},
			save() {

				console.log("save", this.info);

				if (this.stringIsEmpty(this.info.invoiceType)) {
					this.shortToast('请选择发票类型')
					return
				}
				if (this.stringIsEmpty(this.info.headingType)) {
					this.shortToast('请选择抬头类型')
					return
				}
				if (this.stringIsEmpty(this.info.invoiceHeader)) {
					this.shortToast('发票抬头不能为空')
					return
				}

				if (this.isPerson) {
					if (this.stringIsEmpty(this.info.dutyParagraph)) {
						this.shortToast('税号不能为空')
						return
					}
				}
				this.info.orderSid = this.page.sid
				
				console.log("info",	this.info);

				this.$api.submitInvoice(this.info).then((resp) => {
					uni.navigateBack()
				}).catch(e => {

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.page {
		background: #F7F7F7;
		height: 100vh;

		.top {
			display: flex;
			flex-direction: column;
			background: #fff;
			border-radius: 10px;
			padding: 16px 12px;

			.top-item {
				margin-top: 24px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.item-text {
					font-size: 16px;
				}

				.item-right {
					flex: 1;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;

					.input {
						width: 100%;
						text-align: right;
						pointer-events: auto;
					}
				}
			}

			.item_btn {
				margin-top: 10px;
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				justify-content: center;
			}

		}


	}

	/* 弹窗样式 */
	.model {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #000;
		z-index: 1;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.modalDlg {
		/* 设置超出滚动 */
		overflow: auto;
		width: 100%;
		position: fixed;
		top: 70vw;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		background-color: #F7F7F7;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
		display: flex;
		flex-direction: column;
	}

	button::after {
		border: 0;
	}
</style>