<template>
	<view class="section">
		<view class=" padding-lr-sm padding-top-sm text-bold"><text class="cuIcon-titles textBlue"></text>车队绑定</view>
		<view class="cu-card ">
			<view class="cu-item shadow padding-lr-sm">
				<view class="flex solids-bottom justify-between padding-tb-sm">
					<view class="orderNumber padding-left-sm">
						<u-form>
							<u-form-item :required="true" label="车队" label-width="100">
							</u-form-item>
						</u-form>
					</view>
					<view class="padding-tb-xs inputTop" @click="getName">
						{{motorName ? motorName : '请选择车队' }}
						<u-picker :show="show" :columns="listArr" keyName="label" @confirm="confirm" @cancel="cancel"
							:immediateChange='true'> </u-picker>
					</view>
				</view>
				<view class="flex solids-bottom justify-between padding-tb-sm">
					<view class="orderNumber padding-left-sm">
						<u-form>
							<u-form-item label="负责人" disabled label-width="100">
							</u-form-item>
						</u-form>
					</view>
					<view class="padding-top-xs inputTop">
						<u-input border="none" disabled v-model="principal" inputAlign='right' disabledColor="#fff"
							color="#808080">
						</u-input>
					</view>
				</view>
				<view class="flex justify-between padding-tb-sm">
					<view class="orderNumber padding-left-sm">
						<u-form>
							<u-form-item label="联系方式" label-width="100">
							</u-form-item>
						</u-form>
					</view>
					<view class="padding-top-xs inputTop">
						<u-input border="none" disabled v-model="phone" inputAlign='right' disabledColor="#fff"
							color="#808080">
						</u-input>
					</view>
				</view>
			</view>
		</view>
		<view class="confirm" v-if="teamId == null || is_submit">
			<u-button @click="bound" shape='circle' type="primary">提交绑定</u-button>
		</view>
		<!--  -->
		<view class="action padding-lr-sm padding-bottom-sm"><text class="cuIcon-titles textBlue"></text>车队审核记录</view>
		<view>
			<view class="cu-card " v-for="(item,index) in orderData" :key="index" v-if="orderData.length!=0">
				<view class="cu-item shadow">
					<view class="flex padding-sm justify-between">
						<!-- left -->
						<view style="font-size: 24rpx">
							<view class="flex">
								<view class="pay">申请人: {{item.auditName}}</view>
							</view>
							<view class="payTime">申请时间: {{item.applyTime}}</view>
							<view class=" payMoney">审核原因: {{item.auditReason}}</view>
							<view class="payMoney">
								<text>审核时间: </text>
								{{item.auditTime}}
							</view>
						</view>
						<!-- right -->
						<view>
							<view class="payState" v-if="item.auditState == 1 ">
								通过审核
							</view>
							<view class="non-payment" v-if="item.auditState == 2 ">
								审核拒绝
							</view>
							<view class="non-payment" v-if="item.auditState == 0">
								未审核
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="center">
				<image class="noneImg" src="../../static/user/none.png" mode="scaleToFill"></image>
			</view>
		</view>
		<!--  -->
		<u-modal :show="boundShow" :showCancelButton="true" @confirm="boundConfirm" :content="content"
			@cancel="boundCancel" confirmText="确定">
		</u-modal>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
		watch
	} from "vue";
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";

	const boundShow = ref(false)
	const content = ref()
	const listArr = reactive([])
	const show = ref(false)
	const motorName = ref()
	const motorId = ref()
	const principal = ref()
	const phone = ref()
	const initialName = ref()
	const heartInf = reactive([])
	const teamId = reactive(uni.getStorageSync("teamId"))
	const orderData = ref([])
	onLoad(() => {
		getSelect()
		getList()
	})
	onShow(() => {

	})
	watch(motorName, (newValue, oldValue) => {
		// console.log(motorName, 'motorName', heartInf[0]);
		if (oldValue != newValue && heartInf[0] != undefined) {
			let heart = heartInf[0].filter(item => {
				return item.teamName == newValue
			})
			principal.value = heart[0].principal
			phone.value = heart[0].contactWay
			motorId.value = heart[0].id
		}

	});
	const is_submit = ref(false)
	const getList = () => { //初次进来请求的数据
		let data = {
			pageNo: 1,
			pageSize: 10
		}
		uni.$request({
			url: config.baseUrl + "app-api/cloud/teamDriverApply/page",
			data: data
		}).then(res => {
			if (res.data.code == 0) {
				// console.log(res, '审核列表')
				orderData.value = res.data.data.list
				if (orderData.value.length > 0) {
					for (let item of orderData.value) {
						if (item.auditState == 2) {
							is_submit.value = true
						}
					}
				}

			}
		}).catch(err => {
			uni.$u.toast(err)
		})
	}
	const confirm = (e) => {
		motorName.value = e.value[0].label
		motorId.value = e.value[0].value
		show.value = false
	}
	const cancel = () => {
		show.value = false
	}
	const getName = () => {
		show.value = true
	}
	const getSelect = () => {
		uni.$request({
			url: config.baseUrl + 'app-api/cloud/teamVehicle/queryTeamList'
		}).then(res => {
			// console.log(res,'车队');
			// let listCopy = JSON.parse(JSON.stringify(res.data.data))
			let listCopy = res.data.data
			heartInf.push(listCopy)
			// getList()//列表
			let arr = []
			listCopy.forEach(item => {
				arr.push({
					value: item.id,
					label: item.teamName
				})
			})
			listArr.push(arr)
			let teamId = uni.getStorageSync("teamId")
			for (let item of heartInf[0]) {
				if (teamId == item.id) {
					principal.value = item.principal
					phone.value = item.contactWay
					motorName.value = item.teamName
				}
			}
		})
	}
	const bound = () => {
		if (initialName.value != motorName.value) {
			boundShow.value = true
			content.value = '绑定车队审核通过后不可更改,是否确认提交审核?'
		} else {
			uni.$u.toast('当前已绑定此车队，请重新选择车队');
		}
	}
	const boundConfirm = () => {
		boundShow.value = false
		let data = {
			teamId: motorId.value,
			phone: phone.value
		}
		uni.$request({
			url: config.baseUrl + 'app-api/cloud/teamDriverApply/create',
			method: 'POST',
			data: data
		}).then(res => {
			if (res.data.code == 0) {
				//res.data.msg
				uni.$u.toast('变更车队信息成功');
				setTimeout(function() {
					uni.navigateBack({
						delta: 1,
					});
				}, 1000)
			} else {
				uni.$u.toast('绑定失败');
			}
		}).catch(err => {
			uni.$u.toast('绑定失败');
		})
	}
	const boundCancel = () => {
		boundShow.value = false
	}
</script>

<style lang="scss" scoped>
	.section {
		width: 100%;
		height: 100vh;
		background: #F7F8FA;
		position: relative;
	}

	.confirm {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 16rpx 32rpx;
	}

	.textBlue {
		color: #4C91FF;
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.noneImg {
		width: 336rpx;
		height: 452rpx;
	}

	.payState {
		font-size: 20rpx;
		font-weight: 400;
		padding: 4rpx 8rpx;
		border: 1px solid #4C91FF;
		border-radius: 8rpx;
		color: #4C91FF;
		margin-left: 10rpx;
	}

	.non-payment {
		font-size: 20rpx;
		font-weight: 400;
		color: #FF7B0E;
		border: 1px solid #FF7B0E;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		margin-left: 10rpx;
	}

	.payMoney {
		font-size: 24rpx;
	}
</style>