<template>
	<view class="addWe">
		<custom-navbar title="平台自营项目合作" :show-back="true" title-color="#000" background-color="#FFFFFF"></custom-navbar>
		<view class="addWe-tip">
			<image class="addWe-tip-img"
				src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/1d4e0db5-d778-4e8e-97cc-ae2ce08a38a0">
			</image>
			<text>如有合作意向，需提交以下信息。审核人员会在3-5天内联系您。</text>
		</view>
		<view class="addWe-form">
			<view class="addWe-form-title">
				<text>意向填写</text>
			</view>
			<view class="form-item">
				<text class="form-item-text">真实姓名</text>
				<input type="text" v-model="queryData.name" :placeholder="`请输入真实姓名`" />
			</view>
			<view class="form-item">
				<text class="form-item-text">联系方式</text>
				<input type="text" v-model="queryData.phone" :placeholder="`请输入联系方式`" />
			</view>
			<view class="form-item">
				<text class="form-item-text">所在地</text>
				<input type="text" v-model="queryData.address" :placeholder="`请输入所在地`" />
				<!-- <view class="form-item-right" @click="addAddress">
					<text class="text1">请选择</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view> -->
			</view>
			<view class="form-item">
				<text class="form-item-text">合作类型</text>
				<view class="form-item-right" v-if="artisanType!=`user`">
					<text class="text2">{{ info[artisanType].name }}</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
				<view class="form-item-right" @click="openPicker" v-else>
					<text class="text1" :class="{text2:selectValue}">{{ selectValue || "请选择"}}</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>

		<view class="agreement-footer">
			<view class="agreement-btn" @click="submit">{{
        detailId ? "返回" : "提交申请"
      }}</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request";
	export default {
		name: "AddAlipayAccount",
		data() {
			return {
				detailId: "", // 详情id
				isSubmit: false,
				queryData: {
					name: "",
					phone: "",
					address: "",
					type:null
				},
				columns: [
					["手艺人", "商家"]
				],
				selectValue:"",
				artisanType: "user", //
				info: {
					1: {
						apply: "/syr/clueSelf/apply",
						name: "手艺人",
						detail: "/syr/clueSelf/details",
					},
					2: {
						apply: "/sj/clueSelf/apply",
						name: "商家",
						detail: "/sj/clueSelf/details",
					},
					user:{
						apply: "/user/clueSelf/apply",
						name: "用户",
						detail: "/user/clueSelf/details",
					}
				},
			};
		},
		async onLoad(options) {
			console.log(this.artisanType);
			if (getApp().globalData.artisanType) {
				this.artisanType = getApp().globalData.artisanType
			}
			this.getDetail();

		},
		methods: {
			getDetail() {
				request
					.post(this.info[this.artisanType].detail)
					.then((res) => {
						console.log(res, "======");
						if (res.code == 200) {
							if (res.data?.id) {
								this.detailId = res.data.id;
								this.queryData = {
									...this.queryData,
									name: res.data.name,
									phone: res.data.phone,
									address: res.data.address,
								};
								if(res.data.type){
									this.selectValue = this.columns[0][res.data.type-1]
								}
							}
						} else {
							uni.showToast({
								title: res.message,
								icon: "none",
							});
						}
					})
					.finally(() => {});
			},
			//选择地址回显
			editAddress(item) {
				console.log(1111, item);
			},
			// 添加地址
			addAddress() {
				uni.navigateTo({
					url: "/pages/address/search",
				});
			},

			submit() {
				if (this.detailId) {
					uni.navigateBack({
						delta: 2, // 返回上一级
					});
					return;
				}
				if (this.isSubmit) return;
				if (!this.queryData.name) {
					uni.showToast({
						title: "请输入真实姓名",
						icon: "none",
					});
					return;
				}
				if (!this.queryData.phone) {
					uni.showToast({
						title: "请输入联系方式",
						icon: "none",
					});
					return;
				}
				if (!this.queryData.address) {
					uni.showToast({
						title: "请输入所在地",
						icon: "none",
					});
					return;
				}
				if(!this.selectValue && this.artisanType=="user"){
					uni.showToast({
						title: "请选择合作类型",
						icon: "none",
					});
					return;
				}
				if(this.selectValue && this.artisanType=="user"){
					this.queryData.type= this.selectValue=="手艺人"?1:2
				}
				this.isSubmit = true;
				request
					.post(this.info[this.artisanType].apply, this.queryData)
					.then((res) => {
						console.log(res, "======");
						if (res.code == 200) {
							uni.showToast({
								title: "提交申请成功",
								icon: "none",
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 2, // 返回上两级
								});
							}, 500);

							// this.getUserInfo();
							// this.goBack();
						}else{
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
					})
					.finally(() => {
						this.isSubmit = false;
					});
			},
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				console.log('confirm', e);
				this.selectValue = e.value[0]
			}
		},
	};
</script>

<style lang="less">
	.addWe {
		.addWe-tip {
			width: 710rpx;
			margin: 20rpx 20rpx 0 20rpx;
			box-sizing: border-box;
			padding: 24rpx 22rpx 60rpx 22rpx;
			background: #fce8e8;
			border-radius: 20rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #c8424b;
			line-height: 37rpx;
			text-align: left;
			font-style: normal;
			display: flex;

			.addWe-tip-img {
				width: 24rpx;
				height: 27rpx;
				margin-right: 9rpx;
				margin-top: 4rpx;
			}
		}

		.addWe-form {
			transform: translateY(-40rpx);
			box-sizing: border-box;
			margin: 0 20rpx;
			padding: 25rpx;
			width: 710rpx;
			height: 480rpx;
			background: #ffffff;
			border-radius: 20rpx;

			.addWe-form-title {
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}

			.form-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #f2f2f2;
				padding: 30rpx 0;

				.form-item-text {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					width: 180rpx;
					flex-shrink: 0;
				}

				input {
					font-weight: 400;
					font-size: 28rpx;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					flex: 1;
					margin-left: 30rpx;
					color: #333;
					background-color: transparent;
					padding: 0;
					box-sizing: border-box;
				}

				::v-deep .uni-input-wrapper {
					text-align: end;
				}

				.form-item-right {
					display: flex;
					align-items: center;

					.text1 {
						color: #c4c4c4;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 40rpx;
					}

					.text2 {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
					}

					.arrow-right {
						margin-left: 20rpx;
						width: 12rpx;
						height: 24rpx;
					}
				}
			}

			.input-placeholde {
				color: #c4c4c4;
			}
		}
	}

	.agreement-footer {
		padding: 60rpx 30rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;

		.agreement-btn {
			width: 690rpx;
			height: 78rpx;
			background: #e8101e;
			border-radius: 798rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #ffffff;
			text-align: center;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	//text标签样式
	.uni-input-placeholder {
		font-weight: 400;
		font-size: 28rpx;
		color: #C4C4C4;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
	}

	::v-deep .uni-input-input {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
	}
</style>