<template>
	<view class="Box">
		<navseat :opacity='false' :title='"极速开票"' :titleshow='true' :namecolor='"#fff"' iconcolor='#fff'></navseat>
		<view class="Box_box_O">
			<view class="Box_box flex-between" @click="showpopupclick">
				<view>*项目名称</view>
				<view class=""
					style="width: 60%;  overflow:hidden; font-size:32rpx;text-overflow: ellipsis;white-space: nowrap;">
					<text v-if="form.article"> {{ form.article}} </text>
					<text v-else style="color: #86909c;">选择项目名称</text>
				</view>
			</view>
			<view class="Box_box flex-between">
				<view>*金额</view>
				<view><input type="digit" v-model="form.price" @input="onInput" placeholder="请填写金额" /></view>
			</view>
			<view class="Box_box flex-between">
				<view>*数量</view>
				<view><input type="number" v-model="form.number" @input="handleInputChange" placeholder="请填写数量"
						data-key="mobile" /></view>
			</view>

			<view class="Box_box flex-between" @click="showpicker = true">
				<view class="Box_boxlang Box_box_bouttme_item_O">*发票类型</view>
				<view class="Box_box_bouttme_item_T">
					<text type="text" v-model="form.type">{{ form.type || '请输入发票类型' }}</text>
				</view>
			</view>
			<view class="Box_box flex-between">
				<view>*税额</view>
				<view class="Box_box_bouttme_item_T">
					<text>{{ form.tax_amount || '请填写税额' }}</text>
				</view>
			</view>
			<view class="Box_box flex-between">
				<view>*单价</view>
				<view class="Box_box_bouttme_item_T">
					<text>{{ form.d_price || '请填写单价' }}</text>
				</view>
			</view>
			<view class="Box_box flex-between" @click="Issuedbyshowpicker = true">
				<view class="Box_boxlang Box_box_bouttme_item_O">*开票人</view>
				<view class="Box_box_bouttme_item_T">
					<text type="text" v-model="form.dlzhid">{{ form.dlzhid || '请选择开票人' }}</text>
				</view>
			</view>
			<template>
				<view class="Box_box flex-between" @click="showElse = !showElse">
					<view class="Box_boxone">其他信息</view>
					<view class="arrow">
						<text class="t">规格、单位</text>
						<u-icon name="arrow-down" class="arrow-icon" :class="{ active: showElse }"></u-icon>
					</view>
				</view>
				<template v-if="showElse">
					<view class="Box_box flex-between">
						<view>规格型号</view>
						<view><input v-model="form.ggxh" placeholder="请填写规格型号" data-key="mobile" /></view>
					</view>
					<view class="Box_box flex-between">
						<view>单位</view>
						<view><input v-model="form.dw" placeholder="请填写单位" data-key="mobile" /></view>
					</view>
				</template>
			</template>
			<view class="Box_box flex-between">
				<view>备注：</view>
				<u--textarea v-model="form.notes" placeholder="请输入内容"></u--textarea>
			</view>
		</view>
		<view class="preservation flex-colum">
			<view class="preservation_box" @tap="$u.throttle(saveMerchantBaseInfoV2, 1000)">提交</view>
		</view>
		<u-popup :show="showpopup" @close="showpopup = false">
			<view class="popupshow">
				<view class="popupshowone">请选择项目名称</view>
				<view class="popupshowone_item" style="	border-bottom: 1rpx solid #E5E5E5;" v-if="keyword">
					<view class="popupshowone_itemone" @click="popupshowone_itemone">
						{{keyword}}
					</view>
				</view>
				<view class="popupshowonebotton" @click="businesscategory">搜索其他项目名称</view>
			</view>
		</u-popup>
		<u-picker :show="showpicker" @confirm="showpickerconfirm" :columns="columns" @cancel="showpicker = false"
			:defaultIndex='[0,0]'></u-picker>
		<u-picker :show="Issuedbyshowpicker" @confirm="Issuedbyconfirm" :columns="Issuedbycolumns"
			@cancel="Issuedbyshowpicker = false" keyName='name'></u-picker>
	</view>
</template>
<script>
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		data() {
			return {
				keyword: uni.getStorageSync('keyword').name ? uni.getStorageSync('keyword').name : '',
				showpopup: false,
				showpicker: false,
				Issuedbyshowpicker: false,
				columns: [],
				Issuedbycolumns: [],
				Uploadurlnumber: '',
				namelang: '',
				merchantAuditStatus: '',
				showElse: false,
				form: {
					store_id: uni.getStorageSync('userId'),
					article: uni.cache.get('keyword').name ? uni.getStorageSync('keyword').name : '',
					type: '',
					price: '',
					se_amount: '',
					number: 1,
					tax_amount: '',
					d_price: '',
					notes: '',
					mcc: uni.cache.get('keyword').code ? uni.getStorageSync('keyword').code : '',
					dlzh: '',
					dlzhid: "",
					is_new: 1,
					ggxh: '',
					dw: ''
				}
			};
		},
		onNavigationBarButtonTap() {
			uni.pro.navigateTo('index/order');
		},
		async onLoad(e) {
			// #ifdef APP-PLUS
			let webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(0, {
				width: '70px'
			});
			// #endif
			let res = await this.api.storedigitalinvoice()
			this.columns = res.data
			let ress = await this.api.szzpyissuedby({
				store_id: uni.getStorageSync('userId'),
			})
			this.Issuedbycolumns = [ress.data]
			console.log(this.Issuedbycolumns)
		},
		onShow() {
			uni.$on('businesscategorys', res => {
				console.log(res);
				this.form.mcc = uni.cache.get('keyword').code
				this.form.article = uni.cache.get('keyword').name
				this.keyword = uni.cache.get('keyword').keyword
				// this.form.contactLine = res.unionpayCode
				// this.form.branchName = res.branchName
			});
		},
		methods: {
			showpopupclick() {
				this.keyword = uni.getStorageSync('keyword').name ? uni.getStorageSync('keyword').name : ''
				this.showpopup = true
			},
			popupshowone_itemone() {
				this.showpopup = false
				this.form.article = this.keyword
			},
			handleInputChange(e) {
				if (this.form.price == null || this.form.price == '') {
					return false;
				}
				if (this.form.number == null || this.form.number == '') {
					return false;
				}
				if (this.form.type == null || this.form.type == '') {
					return false;
				}
				uni.$u.debounce(this.showpickerconfirm(), 500)

			},
			onInput(e) {
				if (this.form.price == null || this.form.price == '') {
					return false;
				}
				if (this.form.number == null || this.form.number == '') {
					return false;
				}
				if (this.form.type == null || this.form.type == '') {
					return false;
				}
				if (e.detail.value) {
					uni.$u.debounce(this.showpickerconfirm(), 500)
				} else {
					this.subCategoryList = []
				}
			},
			async showpickerconfirm(e) {
				console.log(e, 1)
				if (this.form.price == null || this.form.price == '') {
					uni.showToast({
						title: '请输入开票金额',
						icon: 'none'
					});
					return false;
				}
				if (this.form.number == null || this.form.number == '') {
					uni.showToast({
						title: '请输入数量',
						icon: 'none'
					});
					return false;
				}
				try {
					if (e.value) {
						if (e.value[1] == "1%") {
							this.form.se_amount = 1
						} else {
							this.form.se_amount = 3
						}
						switch (e.value[1]) {
							case '1%':
								this.form.se_amount = 1
								break;
							case '3%':
								this.form.se_amount = 3
								break;
							case '6%':
								this.form.se_amount = 6
								break;
						}
						this.form.type = e.value.toString();
					}
				} catch (e) {
					//TODO handle the exception
				}
				let res = await this.api.storese({
					amount: this.form.price,
					se_amount: this.form.se_amount
				})
				if (res) {
					this.form.tax_amount = res.data.tx
					this.form.d_price = res.data.d_amount
					this.showpicker = false;
				}
			},
			Issuedbyconfirm(e) {
				this.Issuedbyshowpicker = false
				console.log(e)
				if (e.value) {
					this.form.dlzh = e.value[0].id
					this.form.dlzhid = e.value[0].name
					// this.form.dlzh = e.value.toString();
				}
			},
			businesscategory() {
				this.showpopup = false
				uni.pro.navigateTo('index/businesscategory');
			},
			async saveMerchantBaseInfoV2() {
				if (this.form.article == null || this.form.article == '') {
					uni.showToast({
						title: '选择项目名称',
						icon: 'none'
					});
					return false;
				}
				if (this.form.type == null || this.form.type == '') {
					uni.showToast({
						title: '请选择类型',
						icon: 'none'
					});
					return false;
				}
				if (this.form.price == null || this.form.price == '') {
					uni.showToast({
						title: '请输入开票金额',
						icon: 'none'
					});
					return false;
				}
				if (this.form.number == null || this.form.number == '') {
					uni.showToast({
						title: '请输入数量',
						icon: 'none'
					});
					return false;
				}
				if (this.form.tax_amount == null || this.form.tax_amount == '') {
					uni.showToast({
						title: '请输入税额',
						icon: 'none'
					});
					return false;
				}
				if (this.form.d_price == null || this.form.d_price == '') {
					uni.showToast({
						title: '请输入单价',
						icon: 'none'
					});
					return false;
				}
				if (this.form.dlzh == null || this.form.dlzh == '') {
					uni.showToast({
						title: '请选择开票人',
						icon: 'none'
					});
					return false;
				}
				if ([...this.form.dw].length > 22) {
					uni.showToast({
						title: '单位不能多余22个字体！',
						icon: 'none'
					});
					return false;
				}
				console.log(this.form)
				let res = await this.api.storesubinvoicing(this.form)
				if (res) {
					this.form = {
						store_id: uni.getStorageSync('userId'),
						article: uni.cache.get('keyword').name,
						type: '',
						price: '',
						se_amount: '',
						number: '',
						tax_amount: '',
						d_price: '',
						notes: '',
						mcc: uni.cache.get('keyword').code,
						dlzh: '',
						is_new: 1,
						ggxh: '',
						dw: ''
					}
					// #ifdef  MP-WEIXIN
					let params = JSON.stringify(res.data.invoice_records);
					params = encodeURIComponent(params);
					// 跳转页面，附带编码后的参数
					uni.navigateTo({
						url: "/pages/index/wxinvoicing?data=" + params
					});
					// #endif
					// #ifndef MP-WEIXIN
					uni.pro.navigateTo('index/wxinvoicing', res.data.invoice_records)
					// #endif
				}

			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.arrow {
		display: flex;
		align-items: center;

		.t {
			margin-right: 8upx;
			color: #808080;
			font-size: 28rpx;
		}

		.arrow-icon {
			transition: all 0.3s ease-in-out;

			&.active {
				transform: rotate(180deg);
			}
		}
	}

	.Box {
		.Box_box_O {
			padding: 0 28rpx;

			.Box_box {
				text-align: right;
				padding: 24rpx;
				border-bottom: 1px solid #e5e5e5;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			.Box_box_bouttme_item_T {
				padding-left: 30rpx;
				flex: 1;
				text-align: right;

				text {
					color: #808080;
				}
			}

			input {
				font-size: 28rpx;
			}
		}

		.Box_box_T {
			padding: 0 28rpx;
			border-top: 16rpx solid #e5e5e5;

			.Box_box_T_o {
				margin-top: 16rpx;
			}

			.flex-colum {
				image {
					width: 396rpx;
					height: 240rpx;
				}

				padding-bottom: 16rpx;
				border-bottom: 1px solid #e5e5e5;

				.Box_box_Ts {
					width: 396rpx;
					height: 240rpx;
					background: #ffffff;
					border-radius: 8rpx;
					border: 2rpx dashed #707070;
					background: url(https://czg-invoicing.oss-cn-beijing.aliyuncs.com/static/my2.png) no-repeat;
					background-position: 50% 50%;
					background-size: 50%;
				}
			}
		}

		.preservation {
			margin-top: 50rpx;
			width: 100%;

			.preservation_box {
				width: 70%;
				height: 72rpx;
				background: #288efb;
				text-align: center;
				line-height: 72rpx;
				border-radius: 50rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}
		}

		.popupshow {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding-bottom: 50rpx;

			.popupshowone {
				margin-top: 22rpx;
				text-align: center;
				width: 100%;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}

			.popupshowone_item {
				padding: 26rpx 52rpx;

				.popupshowone_itemone {
					text-align: center;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
				}

			}

			.popupshowonebotton {
				margin: 100rpx auto 0 auto;
				width: 558rpx;
				height: 84rpx;
				background: #288EFB;
				border-radius: 50rpx 50rpxmy2 50rpx 50rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
				padding-bottom: 32rpx;
			}
		}
	}
</style>