<template>
	<view class="page">

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

			<view class="top">

				<view class="top-item">

					<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" style="margin-top: 24px;">

					<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>

			<view class="bom">

				<view class="bom-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>

					</view>
				</view>

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

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

							<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="bom-item" style="margin-top: 12px;">

							<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="bom-item" style="margin-top: 12px;">

							<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="bom-item" style="margin-top: 12px;">

							<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="bom-item" style="margin-top: 12px;">

							<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 class="default">

				<text class="item-text">设为默认</text>

				<radio :checked="radioDefault" @click="radioDefaultClick" style="transform:scale(0.8);" color="#FF9900">
				</radio>
			</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>
</template>

<script>
	//引入bus
	import bus from '@/common/bus';
	export default {
		data() {
			return {
				isPerson: true,
				showDetail: false,
				radioDefault: false,
				info: {
					sid:"",
					invoiceType: "", //发票类型
					headingType: "", //抬头类型
					invoiceHeader: "", //发票抬头
					dutyParagraph: "", //税号
					bankOfDeposit: "", //开户行
					bankAccount: "", //账号
					enterpriseAddress: "", //企业地址
					enterprisePhone: "", //企业电话
					isDefault: "0", //是否默认 1 为默认
					customerSid: getApp().globalData.sid,
				}
			}
		},
		onLoad(options) {
			console.log("options", options);

			if (JSON.stringify(options) != '{}') {
				let userInfo = JSON.parse(decodeURIComponent(options.info));
				console.log('userInfo', userInfo);
				this.info = userInfo
				this.radioDefault = this.info.isDefault == '1'
				this.isPerson = this.info.headingType != '个人或事业单位'
			}


		},
		methods: {

			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.$api.saveOrUpdateInvoice(this.info).then((resp) => {
					this.info.sid = resp
					bus.$emit('invoice', this.info);
					uni.navigateBack()
				}).catch(e => {

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #F7F7F7;
		height: 100vh;

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

			.top-item {
				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;

				}
			}

		}

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

			.bom-item {
				width: 100%;
				display: flex;
				flex-direction: row;
				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;
			}

		}

		.default {
			margin-top: 12px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-radius: 10px;
			padding: 16px 12px;

		}
	}
</style>