<template>
	<view class="page-container">
		<view class="condition-box">
			<view class="condition-input-box">
				<view class="condition-input-container">
					<icon class="ml-20" type="search" size="20"></icon>
					<input class="condition-input-text" :value="keywords" @input="inputKeywords"
						@confirm="doSearchKeyWord" placeholder-style="font-size:28rpx;" type="text"
						confirm-type="search" placeholder="搜索" />
					<view class="icon-clear size-32 mr-10" v-if="keywords != ''" @click="clearSearch"></view>
				</view>
				<view class="add-btn" @click="showCreate">新增</view>
			</view>
		</view>

		<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
		<view style="margin-top: 120rpx;">
		<!-- #endif -->
			<!-- #ifndef MP-TOUTIAO || MP-WEIXIN -->
			<view style="margin-top: 80rpx;">
			<!-- #endif -->
				<ContainerLoading :loadingVisible="loadingState" @refresh="doRefreshList">
					<scroll-view scroll-y style="height: 80vh;" :lower-threshold="100" refresher-background="#FFFFFF00"
						@scrolltolower="doLoadMore">
						<view class="order-box">
							<block v-for="(item,index) in invoiceInfoList" :key="index">
								<view class="order-item">
									<view class="contact-desc">
										<view class="contact-icon single-line">
											<view class="icon-user-default-blue size-48"></view>
											<view class="ml-10 name single-line">{{item.invoiceName}}</view>
										</view>
										<view class="operate-box">
											<view class="icon-edit-blue size-48 mr-10" @click="showEdit"
												:data-value="item">
											</view>
											<view class="icon-del-red size-48" @click="showDel" :data-value="item">
											</view>
										</view>
									</view>
									<view class="service-desc ml-10">纳税识别号:{{item.invoiceNumber}}</view>
									<view v-if="item.invoiceOrgtel != ''" class="service-desc ml-10">
										企业电话:{{item.invoiceOrgtel}}</view>
									<view class="service-desc ml-5" v-if="item.invoiceOrgaddress != ''">
										<view class="icon-location-yellow size-32"></view>
										<view class="ml-10">{{item.invoiceOrgaddress}}</view>
									</view>
								</view>
							</block>
							<uni-load-more :status="hasMore"></uni-load-more>
						</view>
					</scroll-view>
				</ContainerLoading>
			</view>
			<uni-popup ref="operateDialog" type="bottom" background-color="#fff" border-radius="15rpx 15rpx 0rpx 0rpx">
				<view class="bottom-dialog-container">
					<view class="dialog-title-box">
						<view class="icon-close size-48" @click="closeDialog"></view>
						<view class="dialog-title-txt">{{isCreate?'新增':'编辑'}}</view>
					</view>
					<view class="form-box">
						<view class="form-item">
							<text class="form-item-title star" decode>公&ensp;司&emsp;名&ensp;称</text>
							<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
								:value="companyName" placeholder="请输入公司名称" class="form-item-content"
								@input="inputCompanyName" />
						</view>
						<view class="form-item">
							<text class="form-item-title star">纳税人识别号</text>
							<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
								:value="companyTinNum" placeholder="请输入纳税人识别号" class="form-item-content"
								@input="inputCompanyTinNum" />
						</view>
						<view class="form-item">
							<text class="form-item-title" decode>公&ensp;司&emsp;地&ensp;址</text>
							<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
								:value="companyAddress" placeholder="请输入公司地址" class="form-item-content"
								@input="inputCompanyAddress" />
						</view>
						<view class="form-item">
							<text class="form-item-title" decode>公&ensp;司&emsp;电&ensp;话</text>
							<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
								:value="companyPhone" placeholder="请输入公司电话" class="form-item-content"
								@input="inputCompanyPhone" />
						</view>
						<view class="form-item">
							<text class="form-item-title" decode>开&emsp;&ensp;户&ensp;&emsp;行</text>
							<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
								:value="companyBank" placeholder="请输入开户行" class="form-item-content"
								@input="inputCompanyBank" />
						</view>
						<view class="form-item">
							<text class="form-item-title" decode>开 户 行 账 号</text>
							<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
								:value="companyBankNum" placeholder="请输入开户行账号" class="form-item-content"
								@input="inputCompanyBankNum" />
						</view>
					</view>
					<view>
						<view v-if="isCreate" class="confirm-btn" @click="doAdd">提交</view>
						<view v-if="!isCreate" class="confirm-btn" @click="doEdit">保存</view>
					</view>
				</view>
			</uni-popup>

			<uni-popup type="message" ref="msg">
				<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
</template>

<script>
	import ContainerLoading from '@/components/container-loading.vue'
	import InvoiceApi from '../../../../common/js/net/InvoiceApi';
	import {
		isValidPhone
	} from '@/common/js/validator.js'
	import {
		inject
	} from 'vue';
	export default {
		components: {
			ContainerLoading
		},
		setup() {
			const globalData = inject('globalData')
			return {
				globalData
			}
		},
		data() {
			return {
				imgAssets: this.globalData.imgAssetsUrl,
				localAssets: this.globalData.localAssets,
				keywords: '',
				pageData: {
					page: 1,
					rows: 10,
					keywords: ''
				},
				msgHint: '',
				msgType: 'error',
				loadingState: 'loading',
				listRefreshTrig: false,
				isLoadMore: false,
				hasMore: 'more',
				createDialog: false,
				title: '开票信息',
				isCreate: true, //区别是创建 or 编辑
				companyName: '', //公司名称
				companyAddress: '', //公司地址
				companyPhone: '', //公司电话
				companyBank: '', //公司开户行
				companyBankNum: '', //开户行账号
				companyTinNum: '', //纳税人识别号
				btnTxt: '提交',
				invoiceInfoList: [], //开票信息列表
				tempItem: null,
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "发票抬头",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#F0F0F0",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			this.doRefreshList()
		},
		onPullDownRefresh() {
			this.doRefreshList()
		},
		methods: {
			closeDialog() {
				this.companyName = ''
				this.companyAddress = ''
				this.companyPhone = ''
				this.companyBank = ''
				this.companyBankNum = ''
				this.companyTinNum = ''
				this.tempItem = null
				this.$refs.operateDialog.close()
			},
			showEdit(e) {
				this.tempItem = e.currentTarget.dataset.value
				this.isCreate = false
				this.companyName = this.tempItem.invoiceName
				this.companyAddress = this.tempItem.invoiceOrgaddress
				this.companyPhone = this.tempItem.invoiceOrgtel
				this.companyBank = this.tempItem.invoiceBank
				this.companyBankNum = this.tempItem.invoiceBanknumber
				this.companyTinNum = this.tempItem.invoiceNumber
				this.$refs.operateDialog.open()
			},
			showDel(e) {
				const item = e.currentTarget.dataset.value
				const _self = this
				uni.showModal({
					title: '警告',
					content: '您确定要删除该开票信息吗?',
					success(res) {
						if (res.confirm) {
							_self.doDel(item)
						}
					}
				})
			},
			showCreate() {
				this.companyName = ''
				this.companyAddress = ''
				this.companyPhone = ''
				this.companyBank = ''
				this.companyBankNum = ''
				this.companyTinNum = ''
				this.tempItem = null
				this.isCreate = true
				this.$refs.operateDialog.open()
			},
			inputCompanyName(e) {
				this.companyName = e.detail.value
			},
			inputCompanyAddress(e) {
				this.companyAddress = e.detail.value
			},
			inputCompanyPhone(e) {
				this.companyPhone = e.detail.value
			},
			inputCompanyBank(e) {
				this.companyBank = e.detail.value
			},
			inputCompanyBankNum(e) {
				this.companyBankNum = e.detail.value
			},
			inputCompanyTinNum(e) {
				this.companyTinNum = e.detail.value
			},
			inputKeywords(e) {
				this.keywords = e.detail.value
			},
			doSearchKeyWord() {
				this.doRefreshList()
			},
			clearSearch() {
				this.keywords = ''
				this.doRefreshList()
			},
			doRefreshList() {
				console.log('正在刷新...')
				const _self = this
				_self.loadingState = 'loading'
				_self.hasMore = 'more'
				_self.pageData.page = 1
				_self.pageData.keywords = _self.keywords
				_self.isLoadMore = false
				_self.doGetInvoiceInfoList(true)
			},
			doLoadMore() {
				//判断是否正在加载中 与是否存在更多数据
				const _self = this
				if (_self.data.isLoadMore || _self.hasMore == 'noMore') {
					return
				}
				_self.isLoadMore = true
				_self.hasMore = 'loading'
				_self.pageData.page = ++_self.pageData.page
				_self.pageData.keywords = _self.keywords
				_self.doGetInvoiceInfoList(false)
			},
			doGetInvoiceInfoList(isRefresh) {
				const _self = this
				_self.invoiceInfoList = isRefresh ? [] : _self.invoiceInfoList
				_self.loadingState = isRefresh ? 'loading' : ''
				InvoiceApi.doGetMineInvoiceList(_self.pageData)
					.then(res => {
						uni.stopPullDownRefresh()
						console.log(res)
						var status = 'success'
						status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						_self.loadingState = isRefresh ? status : ''
						_self.invoiceInfoList = _self.invoiceInfoList.concat(res.rows)
						_self.isLoadMore = false
						_self.hasMore = _self.invoiceInfoList.length < res.total ? 'more' : 'noMore'
					})
					.catch(err => {
						uni.stopPullDownRefresh()
						_self.loadingState = 'error'
						_self.isLoadMore = false
						_self.hasMore = 'more'
					})
			},
			//新增提交
			doAdd() {
				const isLegal = this.checkParams()
				if (isLegal) {
					const _self = this
					uni.showLoading({
						title: '提交中...',
					})
					const data = _self.buildParams()
					InvoiceApi.doSaveMineInvoiceInfo(data)
						.then(res => {
							uni.hideLoading()
							_self.$refs.operateDialog.close()
							_self.msgType = 'success'
							_self.msgHint = '新增开票信息成功'
							_self.$refs.msg.open()
							_self.companyAddress = ''
							_self.companyBank = ''
							_self.companyBankNum = ''
							_self.companyName = ''
							_self.companyPhone = ''
							_self.companyTinNum = ''
							_self.isCreate = true
							_self.doRefreshList()
						})
						.catch(err => {
							uni.hideLoading()
							_self.msgType = 'error'
							_self.msgHint = err.msg ? err.msg : '新增开票信息失败,请稍后重试'
							_self.$refs.msg.open()
						})
				}
			},
			//编辑提交
			doEdit() {
				const isLegal = this.checkParams()
				if (isLegal) {
					const _self = this
					uni.showLoading({
						title: '修改中...',
					})
					const data = _self.buildParams()
					InvoiceApi.doUpdateMineInvoiceInfo(_self.tempItem.invoiceId, data)
						.then(res => {
							uni.hideLoading()
							_self.$refs.operateDialog.close()
							_self.msgType = 'success'
							_self.msgHint = '修改开票信息成功'
							_self.$refs.msg.open()
							_self.companyAddress = ''
							_self.companyBank = ''
							_self.companyBankNum = ''
							_self.companyName = ''
							_self.companyPhone = ''
							_self.companyTinNum = ''
							_self.tempItem = null
							_self.isCreate = true
							_self.doRefreshList()
						})
						.catch(err => {
							uni.hideLoading()
							_self.msgType = 'error'
							_self.msgHint = err.msg ? err.msg : '修改开票信息失败,请稍后重试'
							_self.$refs.msg.open()
						})
				}
			},
			//删除
			doDel(item) {
				const _self = this
				uni.showLoading({
					title: '删除中...',
				})
				InvoiceApi.doDelMineInvoiceInfo(item.invoiceId)
					.then(res => {
						uni.hideLoading()
						_self.msgHint = '删除成功'
						_self.msgType = 'success'
						_self.$refs.msg.open()
						_self.doRefreshList()
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgHint = err.msg ? err.msg : '删除失败,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
			buildParams() {
				const _self = this
				const data = {
					invoiceType: "企业",
					invoiceName: _self.companyName,
					invoiceNumber: _self.companyTinNum,
					invoiceOrgaddress: _self.companyAddress,
					invoiceOrgtel: _self.companyPhone,
					invoiceBank: _self.companyBank,
					invoiceBanknumber: _self.companyBankNum,
				}
				return data
			},
			checkParams() {
				if (this.companyName == '') {
					this.msgHint = '请输入公司名称'
					this.msgType = 'error'
					this.$refs.msg.open()
					return false
				}
				if (this.companyTinNum == '') {
					this.msgHint = '请输入纳税人识别号'
					this.msgType = 'error'
					this.$refs.msg.open()
					return false
				}
				if (this.companyPhone != '') {
					if (!isValidPhone(this.companyPhone)) {
						this.msgHint = '请输入正确公司电话'
						this.msgType = 'error'
						this.$refs.msg.open()
						return false
					}
				}
				return true
			},
		}
	};
</script>

<style lang="scss" scoped>
	.condition-content-container {
		background-color: $divider-color;
		padding: 0rpx 30rpx;
		height: 350rpx;
		display: flex;
		flex-direction: column;
	}

	.add-btn {
		border-radius: 8rpx;
		background-color: $btn-green-color;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		text-align: center;
		height: 50rpx;
		margin-left: 20rpx;
		line-height: 50rpx;
		font-family: PingFangSC-regular;
		padding: 5rpx 20rpx;
	}

	.add-btn:active {
		background-color: $btn-green-color-active;
	}

	.order-box {
		display: flex;
		flex-direction: column;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		background-color: $white-color;
		border-radius: 15rpx;
	}

	.order-item:nth-of-type(n+2) {
		margin-top: 20rpx;
	}

	.contact-desc {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 15px;
	}

	.contact-icon {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex: 1;
	}

	.operate-box {
		display: flex;
		flex-direction: row;
	}

	.name {
		line-height: 32rpx;
		flex: 1;
		color: $text-color;
		font-size: 28rpx;
		text-align: left;
		font-weight: bold;
		font-family: SourceHanSansSC-black;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
	}

	.service-desc {
		padding: 5rpx 15rpx 15rpx 30rpx;
		line-height: 26rpx;
		color: $text-gray-desc-color;
		font-size: 26rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.edit {
		line-height: 20px;
		border-radius: 4px;
		background-color: $btn-blue-color;
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		text-align: center;
		font-family: PingFangSC-regular;
		padding: 5rpx 15rpx;
	}

	.edit:active {
		background-color: $btn-blue-color-active;
	}

	.del {
		line-height: 20px;
		border-radius: 4px;
		background-color: $btn-red-color;
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		text-align: center;
		font-family: PingFangSC-regular;
		padding: 5rpx 15rpx;
		margin-left: 5px;
	}

	.del:active {
		background-color: $btn-red-color-active;
	}

	.options-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		min-width: 170rpx;
	}


	.form-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx;
	}

	.form-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 10rpx 0rpx;
	}

	.form-item-title {
		flex: .5;
		font-size: 28rpx;
		color: $text-color;
		font-weight: 500;
		text-align: left;
	}


	.form-item-content {
		flex: 1;
		text-align: right;
		background-color: $bg-gray-input-color;
		padding: 15rpx;
		font-size: 28rpx;
		border-radius: 15rpx;
		margin-left: 20rpx;
	}

	.confirm-btn {
		background-color: $btn-green-color;
		color: $white-color;
		font-size: 28rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 5px;
		width: 100% !important;
		padding: 0rpx;
		text-align: center;
	}

	.confirm-btn:active {
		background-color: $btn-green-color-active;
		color: $white-color;
	}
</style>