<template>
	<JeepayBackground>
	  <view class="page-wrapper jeepay-edit-form">
		<JeepayCustomNavbar :title="vdata.mbrId ? '修改会员信息' : '创建会员' " backCtrl="back" />
		<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="140">
			
		  <uni-forms-item required label="会员名称" name="mbrName">
			  <uni-easyinput v-model="vdata.formData.mbrName" placeholder="请输入会员名称" :inputBorder="false"></uni-easyinput>
		  </uni-forms-item>
		  
		  <uni-forms-item required label="手机号" name="mbrTel">
			  <text v-if="vdata.mbrId">{{ vdata.formData.mbrTel }}</text>
			  <uni-easyinput v-else v-model="vdata.formData.mbrTel" placeholder="请输入手机号" :inputBorder="false"></uni-easyinput>
		  </uni-forms-item>
		  
		<JeepayTableListItem v-if="vdata.mbrId" title="状态" subtitle="状态禁用后，会员将无法支付">
			<template #titleRight>
				<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true" :confirm='false'  />
			</template>
		</JeepayTableListItem>
		
		  <uni-forms-item required label="备注" name="remark">
				<uni-easyinput v-model="vdata.formData.remark" placeholder="请输入备注" :inputBorder="false"></uni-easyinput>
		  </uni-forms-item>
	   
	   </uni-forms>
		
		<view class="confirm-wrapper">
		  <view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc"> {{ vdata.mbrId ? '确认修改' : '确认创建' }}</view>
		</view>
		
	  </view>
	</JeepayBackground>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { reqLoad, API_URL_MEMBERS } 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'

const formRef = ref()

onLoad((options) => {
	
	// 修改页面 
	if(options.mbrId){
		vdata.mbrId = options.mbrId
		reqLoad.getById(API_URL_MEMBERS, vdata.mbrId).then(({bizData}) => {
			vdata.formData = bizData
		})
	}
	
})

	
const rules = {
	mbrName: {
		rules:[ formUtil.rules.requiredInput() ],
	},
	mbrTel: {
		rules:[ formUtil.rules.requiredInput(), formUtil.rules.patternRule('联系人电话', formUtil.regexp.mobile) ],
	},
}


const vdata = reactive({
	
	mbrId: null, // 新建 or 修改 
	
	 // 表单数据 
	formData: {
		state: 1
	}
})


function confirmFunc(){
	
	formUtil.validate(formRef.value).then(() => {
		return reqLoad.addOrUpdate(vdata.mbrId, API_URL_MEMBERS, vdata.formData)
	})
	.then(( {bizData} ) => {
		emit.pageEmit(emit.ENAME_REF_MEMBER_LIST) // 更新列表
		go.back(1, emit.ENAME_REF_MEMBER_DETAIL) // 返回详情 && 更新详情
	})
	
}

</script>


<style lang="scss" scoped>
input {
  font-size: 32rpx;
}
.f-label {
	width: 240rpx;
}
.selected-sex {
  display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 45rpx;
	margin-bottom: 10rpx;
  font-size: 32rpx;
  color: #b3b3b3;
  image {
    width: 120rpx;
    height: 120rpx;
		margin-top: -40rpx;
  }
	.selected-box {
		color: #000;
	}
}
.confirm-wrapper {
  padding: 50rpx 30rpx;
  .confirm-button {
    height: 110rpx;
    color: #fff;
    border-radius: 20rpx;
    background: $jeepay-bg-primary;
  }
}
</style>
