<template>
	<view class="page-wrapper store jeepay-edit-form">
		<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="140">
			<uni-forms-item required label="选择商户" name="mchApplyId">
				<view class="selected-sex" :style="{ color: vdata.formData.mchApplyId ? '#000' : '' }" @tap="showShopList">
					{{ shopName || '请选择商户' }}
					<image class="left-image" src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" />
				</view>
			</uni-forms-item>
			<uni-forms-item required label="门店名称" name="storeName">
				<uni-easyinput v-model="vdata.formData.storeName" placeholder="请输入门店名称" :inputBorder="false"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required label="联系人电话" name="contactPhone">
				<uni-easyinput v-model="vdata.formData.contactPhone" placeholder="联系人电话" :inputBorder="false"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required label="备注" name="remark" class="line">
				<uni-easyinput v-model="vdata.formData.remark" placeholder="备注" :inputBorder="false"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required label="门店地址" name="address">
				<view class="selected-sex" :style="{ alignItems: vdata.formData.address ? 'flex-end' : '', color: vdata.formData.lng ? '#000' : '' }" @tap="showMap">
					{{ vdata.formData.address || '选择地址后自动回显' }}
					<image class="left-image" src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" />
				</view>
			</uni-forms-item>
			<uni-forms-item required label="省市区/县" name="areaCode">
				<JeepayAreacodeSelect ref="jeepayAreacodeSelect" v-model:areacodeList="vdata.formData.areaCode" />
			</uni-forms-item>
			<uni-forms-item required label="经纬度" name="lngAndLat" class="line">
				<view class="selected-sex" :style="{ color: vdata.formData.lng ? '#000' : '' }">{{ vdata.formData.lng }}/{{ vdata.formData.lat }}</view>
			</uni-forms-item>
			<uni-forms-item required label="门店类目" name="shopCategory" v-if="vdata.type">
				<JeepayAreacodeSelect ref="jeepayAreacodeSelect" type="mccAli" v-model:areacodeList="vdata.formData.shopCategory" />
			</uni-forms-item>
			<uni-forms-item required label="经营类型" name="shopType" v-if="vdata.type && !['99', '031'].includes(vdata.aliStatus)">
				<JeepayRadioPopupView
					label="请选门店经营类型"
					v-model:value="vdata.formData.shopType"
					:list="[
						{ label: '直营', value: '01' },
						{ label: '加盟', value: '02' }
					]"
				></JeepayRadioPopupView>
			</uni-forms-item>

			<uni-forms-item required label="门店Logo" name="storeLogo" v-if="!vdata.type">
				<view class="selected-sex">
					<JeepayUploadImg v-model:src="vdata.formData.storeLogo" bizType="applyment" />
				</view>
			</uni-forms-item>

			<uni-forms-item required label="门头照" name="storeOuterImg" v-if="!vdata.type">
				<view class="selected-sex">
					<JeepayUploadImg v-model:src="vdata.formData.storeOuterImg" bizType="applyment" />
				</view>
			</uni-forms-item>

			<uni-forms-item required label="门店内景照" name="storeInnerImg" v-if="!vdata.type">
				<view class="selected-sex">
					<JeepayUploadImg v-model:src="vdata.formData.storeInnerImg" bizType="applyment" />
				</view>
			</uni-forms-item>
		</uni-forms>

		<view class="confirm-wrapper" v-if="vdata.aliStatus">
			<view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc">保存</view>
		</view>

		<view class="confirm-wrapper" v-else>
			<view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc">
				{{ vdata.storeId ? '确认修改' : '确认创建' }}
			</view>
		</view>
	</view>
	<JeepayPopupListSelect
		ref="selectIncomingRef"
		title="请选择商户"
		searchInputName="appName"
		:reqTableDataFunc="reqTableDataFunc"
		:fields="{ key: 'applyId', left: 'mchApplyName', right: 'isvNo' }"
		@confirm="confirmIncoming"
	></JeepayPopupListSelect>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { $location2areacode, reqLoad, API_URL_MCH_STORE_LIST, API_URI_DEV_RUYI, API_URL_MCH_APPLYMENT_LIST } from '@/http/apiManager.js';
import infoBox from '@/commons/utils/infoBox.js';
import go from '@/commons/utils/go.js';
import formUtil from '@/commons/utils/formUtil.js';
import emit from '@/commons/utils/emit.js';
import cal from '@/commons/utils/cal.js';

const jeepayAreacodeSelect = ref();
const formRef = ref();

const selectIncomingRef = ref(null);
const shopList = ref([]);
const shopName = ref('');

function showShopList() {
	selectIncomingRef.value.open();
}

function confirmIncoming(selected) {
	// console.log(selected.applyId);
	selectIncomingRef.value.close();
	vdata.formData.mchApplyId = selected.applyId;
	shopName.value = selected.mchShortName;
}

function reqTableDataFunc(params) {
	// if(!params.state){
	// 	params.state = 99
	// }
	return reqLoad.list(API_URL_MCH_APPLYMENT_LIST, params);
}

onLoad((options) => {
	if (options.type == 'aliStore' && options.aliStatus == '0') {
		uni.setNavigationBarTitle({
			title: '同步蚂蚁店铺'
		});
	} else if (options.type) {
		uni.setNavigationBarTitle({
			title: '修改蚂蚁店铺'
		});
	}
	// 修改页面
	if (options.storeId) {
		vdata.storeId = options.storeId;
		vdata.type = options.type;
		vdata.aliStatus = options.aliStatus;
		reqLoad.getById(options.type == 'aliStore' && ['99', '031'].includes(vdata.aliStatus) ? API_URI_DEV_RUYI : API_URL_MCH_STORE_LIST, vdata.storeId).then(({ bizData }) => {
			vdata.formData = bizData;
		});
	}
	reqTableDataFunc();
});

const rules = {
	mchApplyId: {
		rules: [formUtil.rules.requiredSelect('请选择商户')]
	},
	storeName: {
		rules: [formUtil.rules.requiredInput('')]
	},
	contactPhone: {
		rules: [formUtil.rules.requiredInput(''), formUtil.rules.patternRule('联系人电话', formUtil.regexp.mobile)]
	},
	address: {
		rules: [formUtil.rules.requiredSelect('门店地址')]
	},
	areaCode: {
		rules: [formUtil.rules.requiredInput('省市县')]
	},
	storeLogo: {
		rules: [formUtil.rules.requiredUpload('门店Logo')]
	},
	storeOuterImg: {
		rules: [formUtil.rules.requiredUpload('门头照')]
	},
	storeInnerImg: {
		rules: [formUtil.rules.requiredUpload('门店内景照')]
	},
	shopCategory: {
		rules: [formUtil.rules.requiredInput('门店类型')]
	},
	shopType: {
		rules: [formUtil.rules.requiredInput('经营类型')]
	}
};

const vdata = reactive({
	storeId: null, // 新建 or 修改

	formData: {} // 表单数据
});

// 选择地图
function showMap() {
	// 本地 测试选择
	// return test();

	// 打开地图 && 获取省市县
	uni.chooseLocation().then((res) => {
		console.log(res);
		vdata.formData.lng = res.longitude.toFixed(6); // IOS 小程序中：  经纬度12位。
		vdata.formData.lat = res.latitude.toFixed(6);
		vdata.formData.address = res.name;

		// 经纬度 --》 获取到省市县编码
		$location2areacode(vdata.formData.lng + ',' + vdata.formData.lat).then(({ bizData }) => {
			if (bizData && bizData.areacode) {
				jeepayAreacodeSelect.value.resetBySingleAreacode(bizData.areacode);
			}
		});
	});
}

function test() {
	vdata.formData.lng = '116.099';
	vdata.formData.lat = '39.84548';
	vdata.formData.address = '测试地址';
	// 经纬度 --》 获取到省市县编码
	$location2areacode(vdata.formData.lng + ',' + vdata.formData.lat).then(({ bizData }) => {
		if (bizData && bizData.areacode) {
			jeepayAreacodeSelect.value.resetBySingleAreacode(bizData.areacode);
		}
	});
}

function confirmFunc() {
	const goBack = () => {
		emit.pageEmit(emit.ENAME_REF_STORE_LIST); // 更新列表
		go.back(1, emit.ENAME_REF_STORE_DETAIL); // 返回详情 && 更新详情
	};

	// 修改或更新店铺信息
	if (!vdata.type) {
		formUtil
			.validate(formRef.value)
			.then(() => {
				return reqLoad.addOrUpdate(vdata.storeId, API_URL_MCH_STORE_LIST, vdata.formData);
			})
			.then(({ bizData }) => {
				goBack();
			});
	} else {
		// 同步蚂蚁店铺
		formUtil.validate(formRef.value).then(() => {
			vdata.formData.shopCategory = vdata.formData.shopCategory.join('_');
			if (['99', '031'].includes(vdata.aliStatus)) {
				reqLoad.updateById(API_URI_DEV_RUYI, vdata.storeId, vdata.formData).then((res) => {
					goBack();
				});
			} else {
				reqLoad.add(`${API_URI_DEV_RUYI}/${vdata.storeId}`, vdata.formData).then((res) => {
					goBack();
				});
			}
		});
	}
}
</script>

<style lang="scss">
.store {
	/*  #ifdef  MP-WEIXIN  */
	jeepay-upload-img[is='components/JeepayUploadImg/JeepayUploadImg'] {
		flex-grow: 1;
	}

	/*  #endif  */

	.upload-wrapper-store {
		padding-top: 40rpx;
	}

	.upload-wrapper-store-last {
		padding-bottom: 40rpx;
	}
}

input {
	font-size: 32rpx;
}

.selected-sex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 32rpx;
	color: #b3b3b3;

	image {
		flex-shrink: 0;
		width: 120rpx;
		height: 120rpx;
	}
}

.selected-sex :nth-child(2) {
	margin: 30rpx 0;
}

.line {
	margin-bottom: 20rpx;
}

.confirm-wrapper {
	padding: 50rpx 30rpx;

	.confirm-button {
		height: 110rpx;
		color: #fff;
		border-radius: 20rpx;
		background: $jeepay-bg-primary;
	}
}

.align-top {
	align-items: flex-start;
	padding: 40rpx 0;
	height: auto;
	min-height: auto;

	image {
		width: 120rpx;
		height: 40rpx;
		transform: rotate(90deg);
	}
}

.border-tb {
	position: relative;

	&::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10;
		width: 90vw;
		height: 1rpx;
		background-color: #ededed;
	}

	&::before {
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 10;
		width: 90vw;
		height: 1rpx;
		background-color: #ededed;
	}
}

.left-image {
	width: 120rpx;
	height: 40rpx;
}
</style>
