<template>
	<view class="content">
		<view class="contenttop">
			<view class="flex-start">
				<input type="text" placeholder="请输入抬头名称" v-model="form.like" @input="onInput" />
				<!-- <text @click="popupshow = !popupshow">筛选</text> -->
				<text@click="itemmodify()">新增</text>
			</view>
			<view class="contenttopbox flex-center">

			</view>
		</view>
		<view class="contentbox">
			<view class="contentboxitem" v-for="(item,index) in form.list" :key="index">
				<view class="contentboxitemtop flex-between">
					<text>*{{item.abbreviation}}*{{item.title}}</text>
					<!-- <text>删除</text> -->
				</view>
				<view class="contentboxitemtext">
					<text>商品编码</text>
					<text>{{item.spbm}}</text>
				</view>
				<view class="contentboxitemtext">
					<text>商品规格</text>
					<text>{{item.ggxh}}</text>
				</view>
				<view class="contentboxitemtext">
					<text>单位</text>
					<text>{{item.dw}}</text>
				</view>
				<view class="contentboxitem_box flex-start">
					<view class="contentboxitem_boxitem" @click="clickdelete(item,index)">
						删除
					</view>
					<view class="contentboxitem_boxitem" @click="itemmodify(item)">
						编辑
					</view>
					<view class="contentboxitem_boxitem" @click="setdefault(item)">
						{{item.is_default == 1?'取消默认':'设为默认'}}
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="form.status" />
		<u-popup :show="addshow" @close="addshow = false" mode="center" :round="16">
			<view class="popupaddclass">
				<view class="addshowbox">
					<view class="addshowboxinput flex-colum-start">
						<text class="addshowboxinputtext">*商品编码</text>
						<view class="addshowboxinput_inp">
							<input type="text" placeholder="" v-model="addform.spbm" disabled
								style="background: #f6f6f6;" />
							<view class="absolute"
								@click="addtowshow=!addtowshow,selectencoding({selected: true,pid: ''},'index')">
								选择商品名称
							</view>
						</view>
					</view>

					<view class="addshowboxinput flex-colum-start">
						<text class="addshowboxinputtext">编码简称</text>
						<view class="addshowboxinput_inp">
							<input type="text" placeholder="" v-model="addform.abbreviation" disabled
								style="background: #f6f6f6;" />
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start">
						<text class="addshowboxinputtext">*商品名称</text>
						<view class="addshowboxinput_inp">
							<input type="text" placeholder="请输入" v-model="addform.title" />
							<view class="absolute" @click="titlecoding">
								赋码
							</view>
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start">
						<text class="addshowboxinputtext">规格型号</text>
						<view class="addshowboxinput_inp">
							<input type="text" placeholder="请输入" v-model="addform.spec" />
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start">
						<text class="addshowboxinputtext">计量单位</text>
						<view class="addshowboxinput_inp">
							<input type="text" placeholder="请输入" v-model="addform.unit" />
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start">
						<text class="addshowboxinputtext">单价(元)</text>
						<view class="addshowboxinput_inp flex-between">
							<input style="width: auto;" type="text" placeholder="请输入" v-model="addform.unit_price" />
							<!-- <view class="flex-start" style="margin-right: 10rpx;">
								<text
									style="font-family: Source Han Sans CN, Source Han Sans CN;font-weight: 400;font-size: 28rpx;color: #333333;margin-right: 16rpx;">含税</text>
								<u-switch v-model="addform.priceswitch" size="18"></u-switch>
							</view> -->
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start" @click="selectshowlslbs = !selectshowlslbs">
						<text class="addshowboxinputtext">免税类型</text>
						<view class="addshowboxinput_inp flex-between">
							<view class="listinput_leftrelative">
								<text class="leftrelativetext">{{addform.lslbsname}}</text>
								<u-icon style="padding-right: 16rpx;" :name="selectshowlslbs?'arrow-up':'arrow-down'"
									color="#999999" size="14"></u-icon>
								<view class="listinput_leftabsolute" v-if="selectshowlslbs">
									<view v-for="(item,index) in lslbslist.lslbs" :key="index"
										:class="addform.lslbs == item.id?'class':''" @click="taxexempttype(item,index)">
										{{ item.name }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start"
						@click="taxrateselectionshow = !taxrateselectionshow">
						<text class="addshowboxinputtext">*税率</text>
						<view class="addshowboxinput_inp flex-between">
							<view class="listinput_leftrelative">
								<text class="leftrelativetext">{{addform.tax_ratename}}</text>
								<u-icon style="padding-right: 16rpx;"
									:name="taxrateselectionshow?'arrow-up':'arrow-down'" color="#999999"
									size="14"></u-icon>
								<view class="listinput_leftabsolute" v-if="taxrateselectionshow">
									<view v-for="(item,index) in lslbslist.taxrateselection" :key="index"
										:class="addform.tax_rate == item.id?'class':''"
										@click="taxrateselectiontype(item,index)">
										{{ item.name }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start" @click="zzstsglshow = !zzstsglshow">
						<text class="addshowboxinputtext">优惠政策类型</text>
						<view class="addshowboxinput_inp flex-between">
							<view class="listinput_leftrelative">
								<text class="leftrelativetext">{{addform.zzstsgl}}</text>
								<u-icon style="padding-right: 16rpx;" :name="zzstsglshow?'arrow-up':'arrow-down'"
									color="#999999" size="14"></u-icon>
								<view class="listinput_leftabsolute" v-if="zzstsglshow">
									<view v-for="(item,index) in lslbslist.zzstsgl" :key="index"
										:class="addform.zzstsgl == item.id?'class':''" @click="zzstsgltype(item,index)">
										{{ item.name }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view
						style="margin:32rpx 0 32rpx auto;width: 112rpx;height: 56rpx;background: #318AFE;border-radius: 4rpx 4rpx 4rpx 4rpx;font-family: Source Han Sans CN, Source Han Sans CN;font-weight: 400;font-size: 28rpx;color: #FFFFFF;line-height: 56rpx;text-align: center;"
						@click="addinvoicegoods">
						保存
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="addtowshow" @close="addtowshow = false" mode="bottom" :round="16">
			<view class="addtowshowclass">
				<view class="addtowshowclasstop">
					<!-- 	<text class="addtowshowclassabsolute">x</text> -->
					商品编码(税局)选择
					<u-icon class="addtowshowclassabsolutelet" v-if="this.selectencodinglists.length>1"
						@click="selectencodingicon" name="arrow-left" color="#999999" size="20"></u-icon>
					<u-icon @click="addtowshow = false" class="addtowshowclassabsolute" name="close" color="#999999"
						size="20"></u-icon>
				</view>
				<view v-if="selectencodingitem.tax_rate">
					<view class="addtowshowpositionitem flex-between">
						<view>
							商品编码
						</view>
						<view style="color: #999999;">
							{{selectencodingitem.pid}}
						</view>
					</view>
					<view class="addtowshowpositionitem flex-between">
						<view>
							编码名称

						</view>
						<view style="color: #999999;">
							{{selectencodingitem.catalog_name}}
						</view>
					</view>
					<view class="addtowshowpositionitem flex-between">
						<view>
							编码简称
						</view>
						<view style="color: #999999;">
							{{selectencodingitem.catalog_name_short}}
						</view>
					</view>
					<view class="addtowshowpositionitem flex-between">
						<view>
							商品税率
						</view>
						<view style="color: #999999;">
							{{selectencodingitem.tax_rate}}
						</view>
					</view>
					<view class="selecconfirm" @click="selecconfirm">
						确认选择
					</view>
				</view>
				<view v-else class="addtowshowpositionitem flex-between" v-for="(item,index) in selectencodinglist"
					:key="index" @click="selectencoding(item,index)">
					<view>
						{{item.catalog_name}}
					</view>
					<view class="flex-start">
						{{item.tax_rate?item.tax_rate:''}}
						<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				addshow: false,
				addtowshow: false,
				form: {
					like: '',
					page: 1,
					status: 'loadmore',
					list: []
				},
				addform: {

				},
				taxrateselectionshow: false, //税率
				selectshowlslbs: false, //免税类型
				zzstsglshow: false,
				lslbslist: {},
				selectencodingitem: {},
				selectencodinglists: [], //总数据
				selectencodinglist: [],
			}
		},
		async onLoad() {
			let {
				data
			} = await this.api.hfivelslbs()
			this.lslbslist = data
		},
		onShow() {
			this.init()
		},
		onReachBottom() {
			if (this.form.status != 'nomore') {
				this.form.page = ++this.form.page;
				this.invoicegoodslist()
			}
		},
		methods: {
			async clickdelete(item, index) {
				let res = await this.api.addinvoicegoodsdel({
					id: item.id
				})
				this.form.list.splice(index, 1)

			},
			// 设置默认
			async setdefault(item) {
				let res = await this.api.setdefault({
					is_default: item.is_default == 0 ? 1 : 0,
					id: item.id
				})
				this.init()
			},
			// 初始化
			init() {
				this.form.like = ''
				this.form.page = 1
				this.form.status = 'loadmore'
				this.form.list = []
				this.invoicegoodslist()
			},
			// 修改
			itemmodify(item) {
				console.log(item)
				if (item) {
					this.addform = item
					this.addform.lslbsname = this.lslbslist.lslbs[item.lslbs].name
					this.lslbslist.taxrateselection.forEach((i) => {
						if (i.id == item.tax_rate) {
							this.addform.tax_ratename = i.name
						}
					})
				} else {
					this.addform = {}
				}
				this.addshow = true
			},
			//行业列表 （选择编码）列表
			async selectencoding(item, index) {
				this.selectencodingitem = {}
				if (index == 'index') {
					this.selectencodinglists = []
				}
				if (item.selected) {
					let {
						data
					} = await this.api.selectencoding({
						pid: item.pid
					})
					this.selectencodinglist = data
					this.selectencodinglists.push(this.selectencodinglist) //暂存一个空数组
					console.log(this.selectencodinglists)

				} else {
					this.selected = false
					this.selectencodingitem = item
				}

			},
			//编码简称点击确定
			selecconfirm() {
				this.addtowshow = false
				this.addform.abbreviation = this.selectencodingitem.catalog_name_short
				this.addform.title = this.selectencodingitem.catalog_name
				this.addform.spbm = this.selectencodingitem.pid
			},
			//返回键
			selectencodingicon() {
				this.selectencodingitem = {}
				this.selectencodinglists.splice(this.selectencodinglists.length - 1, 1)
				this.selectencodinglist = this.selectencodinglists[this.selectencodinglists.length - 1]
			},
			//免税类型
			taxexempttype(item, index) {
				console.log(item)
				this.addform.lslbsname = item.name
				this.addform.lslbs = item.id
			},
			//税率
			taxrateselectiontype(item, index) {
				this.addform.tax_ratename = item.name
				this.addform.tax_rate = item.id
			},

			//优惠政策类型
			zzstsgltype(item, index) {
				this.addform.zzstsglname = item.name
				this.addform.zzstsgl = item.id
			},
			// 搜索
			onInput(e) {
				if ([...e.detail.value].length >= 2) {
					this.form.page = 1
					this.form.status = 'loadmore'
					this.form.list = []
					uni.$u.debounce(this.invoicegoodslist, 500)
				}
			},
			//商品列表
			async invoicegoodslist() {
				let res = await this.api.invoicegoodslist({
					page: this.form.page,
					like: this.form.like
				})
				if (this.form.page == 1 && res.data.length == 0) {
					this.form.list = res.data
					this.form.status = 'nomore'
					return false;
				} else {
					setTimeout(() => {
						if (this.form.page == 1) {
							this.form.list = res.data
						} else {
							this.form.list = [...this.form.list, ...res.data]
						}
						if (res.data.length < 10) this.form.status = 'nomore';
						else this.form.status = 'loadmore';
					}, 500)
				}
			},
			// 保存
			async addinvoicegoods() {
				console.log(this.addform)
				if (this.addform.title == null || this.addform.title == '') {
					uni.showToast({
						title: '请选择商品名称',
						icon: 'none'
					});
					return false;
				}
				if (this.addform.spbm == null || this.addform.spbm == '') {
					uni.showToast({
						title: '请输入商品编码',
						icon: 'none'
					});
					return false;
				}
				if (this.addform.tax_rate == null || this.addform.tax_rate === '') {
					uni.showToast({
						title: '请选择税率',
						icon: 'none'
					});
					return false;
				}
				let res = await this.api.addinvoicegoods({
					id: this.addform.id,
					title: this.addform.title,
					spbm: this.addform.spbm,
					spec: this.addform.spec,
					unit: this.addform.unit,
					unit_price: this.addform.unit_price,
					tax_rate: this.addform.tax_rate,
					lslbs: this.addform.lslbs,
					zzstsgl: this.addform.zzstsgl,
					priceswitch: this.addform.priceswitch,
					abbreviation: this.addform.abbreviation,
					spsl: 1 //初始化数量
				})
				this.init()
				this.addshow = false
			},
		}
	}
</script>

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

	.content {
		padding: 0;

		.contenttop {
			width: 100%;
			background: #FFFFFF;
			padding: 48rpx 28rpx 32rpx 28rpx;

			.flex-start {
				input {
					padding: 18rpx 24rpx;
					height: 64rpx;
					background: #F6F6F6;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					flex: auto;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}

				text {
					padding: 0 0 0 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

		.contentbox {
			width: 100%;
			padding: 0 28rpx;

			.contentboxitem {
				margin-top: 32rpx;
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.contentboxitemtop {
					text:nth-child(1) {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}

					text:nth-child(2) {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.contentboxitemtext {
					margin-top: 24rpx;

					text:nth-child(1) {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
					}

					text:nth-child(2) {
						margin-left: 24rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

				}

				.contentboxitem_box {
					justify-content: flex-end;

					.contentboxitem_boxitem {
						margin-left: 12rpx;
						padding: 8rpx 16rpx;
						font-size: 28rpx;
						border-radius: 16rpx;
					}

					.contentboxitem_boxitem:nth-child(1) {
						background-color: #faad14;
						color: #fff;
					}

					.contentboxitem_boxitem:nth-child(2) {
						background-color: #5473e8;
						color: #fff;
					}

					.contentboxitem_boxitem:nth-child(3) {
						background-color: #5473e8;
						color: #fff;
					}
				}

			}
		}

		.popupaddclass {

			padding: 32rpx 34rpx;
			width: 694rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.addshowtop {
				border-bottom: 2rpx solid #E5E5E5;

				text:nth-child(1) {
					margin-left: 0;
				}

				text {
					padding-bottom: 26rpx;
					display: inline-block;
					margin-left: 64rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}

				.select {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #318AFE;
					border-bottom: 1rpx solid #318AFE;
				}
			}



			.addshowbox {
				max-height: 750rpx;
				overflow: auto;
				position: relative;

				.addshowboxinput {
					margin-top: 32rpx;

					.addshowboxinputtext {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}

					.addshowboxinput_inp {
						margin-top: 24rpx;
						position: relative;
						width: 100%;
						height: 66rpx;
						background: #fff;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 2rpx solid #D9D9D9;

						.listinput_leftrelative {
							position: relative;
							display: flex;
							justify-content: space-between;
							align-items: center;
							flex: auto;
							height: 100%;
							background: #FFFFFF;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 26rpx;

							.leftrelativetext {
								padding: 6rpx 24rpx;
								color: #6f6f6f;
							}

							.listinput_leftabsolute {
								position: absolute;
								z-index: 999;
								width: 100%;
								top: 65rpx;
								max-height: 250rpx;
								overflow: auto;
								background: #fff;
								border: 1px solid #D9D9D9;

								view {
									padding: 6rpx 24rpx;
									color: #6f6f6f;
								}

								.class {
									font-weight: 500;
									font-size: 28rpx;
									color: #333;
									border-bottom: 1rpx solid #e3d8d8;
									background: #f1f1f1;
								}
							}
						}

						input {
							width: 100%;
							height: 100%;
							padding: 0 16rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
						}

						.absolute {
							padding: 8rpx 18rpx;
							position: absolute;
							background: #318AFE;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							right: 16rpx;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}

				.addshowinput {
					margin-top: 30rpx;
					width: 100%;
					height: 64rpx;
					background: #F6F6F6;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					padding: 0 16rpx;

					input {
						padding-left: 16rpx;
						flex: auto;
						height: 64rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 64rpx;
					}
				}

				.boxaddshowitem {
					overflow: auto;
					max-height: 500rpx;

					.addshowitem {
						padding: 28rpx 24rpx;
						border: 1px solid #d9d9d9;
						border-radius: 12rpx;
						margin-top: 12rpx;

						.addshowitembox {
							margin-left: 12rpx;
							width: 80%;

							.addshowitemboxtext {
								width: 100%;
								font-weight: 700;
								font-size: 28rpx;
								overflow: hidden; //超出的文本隐藏
								text-overflow: ellipsis; //溢出用省略号显示
								white-space: nowrap; //溢出不换行
							}
						}
					}

				}

				.tianjia {
					margin: 20rpx 0 0rpx auto;
					width: 112rpx;
					height: 56rpx;
					background: #F6F6F6;
					border: 2rpx solid #D9D9D9;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 56rpx;
					text-align: center;
				}
			}

		}

		.addtowshowclass {
			height: 750rpx;
			overflow: auto;
			padding: 0 24rpx;

			.addtowshowclasstop {
				text-align: center;
				width: 100%;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				padding: 32rpx 0;
				position: relative;

				.addtowshowclassabsolutelet {
					position: absolute;
					left: 0;
					top: 32rpx;
				}

				.addtowshowclassabsolute {
					position: absolute;
					right: 0;
					top: 32rpx;
				}
			}

			.selecconfirm {
				margin: 42rpx auto;
				width: 524rpx;
				height: 72rpx;
				background: #2F87FD;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
				border-radius: 16rpx;
			}

			.addtowshowpositionitem {
				padding: 24rpx 0;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				border-bottom: 1rpx solid #E5E5E5;
			}
		}
	}
</style>