<template>
	<!-- 布局 flex 组件 view -->
	<view class="addDiver_body">
		<view class="sele_Bar">
			<view :style="{transform: barIndex==2?  'translateX( calc(100% - 20rpx)   )' :'' ,background:barIndex==2?  '#EC4645' :'' }" class="move_item"></view>
			<view @tap="seleBarFn(1)" :style="{color:barIndex==1? 'white' : ''}" class="sele_Bar_item">常规</view>
			<view @tap="seleBarFn(2)" :style="{color:barIndex==2? 'white' : ''}" class="sele_Bar_item">紧急</view>
		</view>
		<!--  卡片  -->
		<view class="addDiver_card">
			<uni-list :border="false">
				<uni-list-item @click="isShowFn('companyAccount')" link>
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
						</image>
						企业打款账户
					</view>
					<view slot="body" class="list_right list_nosele textOverflow">
						{{postData.paymentCompanyIds[0]? companyAccountData.filter(item=>item.value== postData.paymentCompanyIds[0])[0].label :'请选择企业打款账户'}}
					</view>
				</uni-list-item>
				<uni-list-item @click="isShowFn('companyAccountBank')" link>
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
						</image>
						企业打款银行
					</view>
					<view slot="body" class="list_right list_nosele textOverflow">
						{{postData.paymentCompanyIds[1]? companyAccountBankData.filter(item=>item.value== postData.paymentCompanyIds[1])[0].label :'请选择企业打款银行'}}
					</view>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="addDiver_card">
			<uni-list :border="false">

				<uni-list-item @click="isShow.picker=true" link >
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
						</image>
						油站公司
					</view>
					<view slot="body" class="list_right list_nosele textOverflow">
						{{postData.companyName?postData.companyName :'请选择油站公司'}}
					</view>
				</uni-list-item>
				<uni-list-item @click="isShowFn('oilCompanyBank')" link >
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
						</image>
						油站公司银行
					</view>
					<view slot="body" class="list_right list_nosele textOverflow">
						{{postData.bankCardName?postData.bankCardName :'请选择油站公司银行'}}
					</view>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="addDiver_card">
			<uni-list :border="false">
				<uni-list-item>
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
						</image>
						交易金额
					</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right">
						<input type="digit" @input="inputFn('transactionAmount')" v-model="postData.transactionAmount" placeholder="请输入交易金额"
							class="list_right_input" />
					</view>
				</uni-list-item>
			</uni-list>
		</view>
		<!--  卡片  -->
		<view class="addDiver_card">
			<view class="summary">
				<view class="list_header" style="margin-bottom: 12px;">
					<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
					</image>
					交易摘要
				</view>
				<uni-easyinput :autoHeight="true" type="textarea" v-model="postData.reverseRemark" placeholder="请输入交易摘要"></uni-easyinput>
			</view>
		</view>
		<view class="addDiver_card">
			<uni-list :border="false">
				<uni-list-item link>
					<view class="list_header" slot="header">交易凭证</view>
					<view @click="clickfn" slot="body" :style="{color:postData.offlineTransactionProof?'#333333':''}"
						class="list_right list_nosele">
						{{postData.offlineTransactionProof?'已上传':'请上传'}}
					</view>
				</uni-list-item>
			</uni-list>
		</view>
		<!--  卡片  -->
		<view v-if="barIndex==2" class="addDiver_card">
			<uni-list :border="false">
				<uni-list-item >
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
						</image>
						操作码
					</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right">
						<input v-model="postData.operationCode" placeholder="请输入操作码" class="list_right_input" />
						<!-- <text style="color: #007AFF;"  v-if="!countdown" @click="getCode">获取操作码</text>
						<text  v-else >
						{{`${postData.operationCode } `}}
						<text class="codeTip">{{`${countdown}秒后失效`}}</text>
						 </text> -->
					</view>
				</uni-list-item>
			</uni-list>
		</view>
		<view v-if="barIndex==2" class="cue">
			请向财务或技术部门索取操作码。<br />
			注意：操作码时间有限，超过时间，请重新获取
		</view>
		<!-- 底部按钮 -->
		<view class="list_footer">
			<button @tap="postFn" class="list_butten ">保存</button>
		</view>
		<!-- 企业打款账户选择器 -->
		<u-select v-model="isShow.companyAccount" :list="companyAccountData" @confirm="companyAccountConfirm">
		</u-select>
		<!-- 企业打款银行选择器 -->
		<u-select v-model="isShow.companyAccountBank" :list="companyAccountBankData" @confirm="companyAccountBankConfirm"></u-select>
		<!-- 油站公司选择器 -->
		<cpicker ref ='cpicker'  @localSeach='localSeach' @chargeChange='chargeChange' v-model="isShow.picker" />
		<u-select v-model="isShow.oilCompanyBank" :list="oilCompanyBankData" @confirm="oilCompanyBankConfirm">
		</u-select>
	</view>
</template>

<script>
	import tool from '@/utils/tool'
	import account from '@/api/oilAccount'
	import md5 from 'js-md5'
	import cpicker from '../../components/picker.vue'
	export default {
		components: {
			cpicker
		},
		data() {
			return {
				barIndex:1,
				countdown:0,
				companyAccountData: [],
				companyAccountBankData: [],
				oilCompanyData: [],
				oilCompanyBankData: [],
				isShow: {
					picker: false,
					companyAccount: false,
					companyAccountBank: false,
					oilCompanyBank: false
				},
				timer:null,
				disabled: false,
				postData: {
					companyName:'',
					offlineTransactionProof:'',//凭证
					bankCardName: "",   //银行卡账户名
					bankCardNo: "", //银行卡号
					bankDeposit: "", //开户所属银行
					bankName: "", //开户行银行名称
					companyId: "", //公司ID
					createSource: "OMS-MINIAPP",
					interBankCode: null, //联行号
					operationCode: "", //操作码
					paymentCompanyIds: [], //付款银行信息ID（内部银行信息ID）
					reverseRemark: "", //交易摘要
					transactionAmount: "", //交易金额
					// 交易类型
					// RECHARGE：充值
					// RECHARGE_REBETE：充值返利
					// CONSUME_REBATE: 消费返利 
					// TURN 圈回(暂无)
					transactionType: "RECHARGE"
				}
			}
		},
		created() {
			this.init()
		},
		onLoad() {},
		onUnload() {
			(!this.timer)&&clearInterval(this.timer);
		},
		methods: {
			seleBarFn(e) {
				this.barIndex = e
			},
			localSeach(e){
				account.getLikeBySiteComNameNew({companyName:e}).then(res=>{
					this.$refs.cpicker.upDateList(res.data)
				})
				console.log('seach')
			},
			countdownFn(e){
				this.countdown = e
				this.timer = setInterval(()=>{
					if(!this.countdown){
						clearInterval(this.timer);
						this.timer = null;
						this.operationCode = ''
					}else{
						this.countdown-=1
					}
				},1000)
			},
			getCode(){
				account.getRechargeCode({type:3}).then(res=>{
					(res.code==20000)&&(this.postData.operationCode = res.data.code);
					this.countdownFn(60)
				})
			},
			isShowFn(e){
				switch(e){
					case 'companyAccount':
					this.isShow[e] = !this.isShow[e]
					break
					case 'companyAccountBank':
					if(this.postData.paymentCompanyIds.length!==0){
						this.isShow[e] = !this.isShow[e]
					}else{
						uni.showToast({
							title:'请先选择企业打款账户',
							icon:'none'
						})
						return
					}
					break
					case 'oilCompanyBank':
					if(this.postData.companyName&&this.postData.companyId){
						this.isShow[e] = !this.isShow[e]
					}else{
						uni.showToast({
							title:'请先选择油站公司',
							icon:'none'
						})
						return
					}
					break
				}
			},
			//图片上传方法
			clickfn(e) {
				
				if (typeof e !== "object") {
					this.postData.offlineTransactionProof = e;
					uni.showToast({
						title: '上传成功'
					})
					return
				}
				tool.chooseImage(this.clickfn)
			},
			oilCompanyBankConfirm(e) {
					let a = this.oilCompanyBankData.filter(item => item.value == e[0].value);
					(a.length)&&({
						bankCardName:this.postData.bankCardName,
						bankCardNo:this.postData.bankCardNo,
						bankDeposit:this.postData.bankDeposit,
						bankName:this.postData.bankName,
						interBankCode:this.postData.interBankCode
						}=a[0]);
						
					console.log(a,'11111')
			},
			//企业打款银行回调
			companyAccountBankConfirm(e) {
				let a = this.companyAccountBankData.filter(item => item.value == e[0].value);
				(a.length)&&(this.postData.paymentCompanyIds.push(a[0].value))
				console.log(this.postData.paymentCompanyIds,this.companyAccountBankData,'companyAccountBankConfirm');
			},
			// 企业打款账户回调
			companyAccountConfirm(e) {
				this.companyAccountBankData = [];
				this.postData.paymentCompanyIds = [];
				let a = this.companyAccountData.filter(item => item.value == e[0].value);
				(a.length) && (this.companyAccountBankData = a[0].children)&&this.postData.paymentCompanyIds.push(a[0].value);
				console.log(this.postData.paymentCompanyIds,this.companyAccountBankData,'companyAccountConfirm');
			},
			//油站公司选择器回调
			chargeChange(e) {
				if (e) {
					this.oilCompanyBankData = [];
					this.clearFn(this.postData,['bankCardName','bankCardNo','bankDeposit','bankName','interBankCode']);
					this.postData.companyId = e['id'];
					this.postData.companyName = e['companyName']
					account.getBySiteCompanyId(e.id).then(res => {
						(res.code == 20000) && (this.oilCompanyBankData = res.data);
						(this.oilCompanyBankData.length) && (this.oilCompanyBankData.forEach(item => {
							item['value'] = item.bankCardNo;
							item['label'] = item.bankCardName + `(${item.bankCardNo})`;
						}));
					})
				}

			},
			clearFn(e,w){
				if(e&&w){
					w.forEach(item=>{e[item]=''})
				}
			},
			init() {
				this.getAccounts()
			},
			getAccounts() {
				account.getCascaderList().then(res => {
					if (res.code == 20000) {
						this.companyAccountData = res.data
					}
				})
			},
			confirm(e) {
				console.log('confirm', e)
			},
			inputFn(e) {
				console.log(e)
				if(this.postData[e].indexOf('.')!=-1){
					if(this.postData[e].split('.')[1].length>2){
						uni.showToast({
							title:'最多保留小数点后两位',
							icon:'none'
						})
						this.$nextTick(function(){
							this.postData[e] = Number(this.postData[e]).toFixed(2)
						})
					}
				}
			},
			postFn() {
				let that = this
				let olicheck = null
				let check = null
				let checkPage = {
					paymentCompanyIds: {
						tacitly: '',
						minLength: 2,
						WrongText: '请完善企业打款信息'
					},
					companyName:{
						tacitly:'',
						WrongText:'请完善油站公司信息'
					},
					companyId:{
						tacitly:'',
						WrongText:'请完善油站公司信息'
					},
					bankCardName:{
						tacitly:'',
						WrongText:'请完善油站公司信息'
					},
					transactionAmount:{
						tacitly:'',
						WrongText:'交易金额不能为空'
					},
					
					reverseRemark:{
						tacitly:'',
						WrongText:'交易摘要不能为空'
					},
					operationCode:{
						tacitly:'',
						WrongText:'操作码不能为空'
					},
				};
				(this.barIndex==1)&&(delete checkPage.operationCode);
				check = tool.checkFn(this.postData, [], checkPage)
				if (!check.result) {
					uni.showToast({
						title: check.WrongText,
						icon: 'none'
					})
					return
				}
				this.saveFn()
			},
			saveFn(){
				let data = JSON.parse(JSON.stringify(this.postData));
				(this.barIndex==1)&&(delete data.operationCode);
				account.save(data).then(res=>{
					(res.code==20000)&& uni.showToast({
						title: '操作成功',
						icon: 'none'
					})&&(setTimeout(()=>{uni.navigateBack()},500))
				})
			},
			open() {
				this.show = !this.show
			},
			change() {
				this.aboutEnterprise.shareCompanyQuota = this.switchOpen ? 1 : 0
				console.log(this.switchOpen)
			},
			radioChange(e) {
				console.log(e)
			},
		}
	}
</script>
<style scoped>
	.move_item {
		position: absolute;
		left: 10rpx;
		width: 50%;
		height: 60rpx;
		background: #2866FF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		z-index: 0;
		transition: all .3s;
	}
	.sele_Bar_item {
	
		/* width: 287rpx; */
		flex: 1;
		height: 60rpx;
		/* background: #2866FF; */
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		z-index: 1;
		transition: color .4s;
	}
	
	.sele_Bar {
		/* background-color: #18B566; */
		margin: 31rpx 40rpx;
		padding: 10rpx;
		display: flex;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 10px;
	}
	.codeTip{
		color: #007AFF;
		font-size: 20rpx;
	}
	.textOverflow{
		overflow: hidden;/*超出部分隐藏*/
		white-space: nowrap;/*不换行*/
		text-overflow:ellipsis;/*超出部分文字以...显示*/
	}
	>>>.uni-easyinput__content {
		border-radius: 15px !important;
		margin-top: 15rpx;
	}
</style>
<style lang="scss">
	.cue {
		color: #666666;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.summary {
		padding: 12px 0;
	}

	.clear {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BBBBBB;
		display: flex;
		align-items: center;
	}

	.yuan {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.popup_body {
		padding: 20rpx;
	}

	.list_right_input {
		font-size: 28rpx;
	}

	.list_footer {
		padding-bottom: 57rpx;
		margin-top: 57rpx;
	}

	.list_butten {
		// height: 100rpx;
		background: #2866FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 36pxr;
	}

	.fg {
		.uni-list-item__container {
			padding-bottom: 0px !important;
		}
	}

	.list_nosele {
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #999999;
	}

	.uni-icon-wrapper {
		padding: 0px !important;
	}

	.uni-list-item__container {
		padding: 12px 0 !important;
	}

	.tiao {
		width: 8rpx;
		height: 34rpx;
		background: #2866FF;
	}

	.card_title_text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 10rpx;
	}

	.card_title {
		display: flex;
		border-bottom: 1px solid #F0F0F0;
		align-items: center;
		padding-bottom: 17rpx;
		height: 86rpx;
	}

	.list_header {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		align-items: center;
		padding-left: 16px;
		position: relative;
		height: fit-content;
	}

	.list_right_input {
		width: 100%;
		color: #333333;
		text-align: end !important;
		font-size: 28rpx;
		text-align: right !important;
		padding-left: 90rpx;
		box-sizing: border-box;
	}

	.list_right {
		flex: 1;
		// display: flex;
		// justify-content: flex-end;
		text-align: end;
		overflow: hidden;
		box-sizing: border-box;
		padding-left: 20rpx;
	}

	.addDiver_body {
		padding: 0 40rpx;
	}

	.addDiver_card {

		background: #FFFFFF;
		box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
		border-radius: 20rpx;
		margin-top: 38rpx;
		overflow: hidden;
		/* padding-top: 19rpx; */
		padding: 0rpx 20rpx 0 20rpx;
		box-sizing: border-box;
	}
</style>