<template>
	<div class="app-content">
		<form @submit="formSubmit">
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">花店名称</div>
					<input v-model="form.name" placeholder-class="phcolor" class="tui-input" name="name" placeholder="请输入" maxlength="50" type="text" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">店长姓名</div>
					<input v-model="form.adminName" placeholder-class="phcolor" class="tui-input" name="adminName" placeholder="请输入" maxlength="50" type="text" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">店长手机号</div>
					<input v-model="form.mobile" placeholder-class="phcolor" class="tui-input" name="mobile" placeholder="请输入" maxlength="50" type="number" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">确认手机号</div>
					<input v-model="form.confirmMobile" placeholder-class="phcolor" class="tui-input" name="confirmMobile" placeholder="请输入" maxlength="50" type="number" />
				</tui-list-cell>
				<view class="line-hint_bx">
					以下选填
				</view>
				<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
					<div class="tui-title">所在城市</div>
					<div class="tui-input" v-if="form.province">{{ form.province + '-' + form.city }}</div>
					<div class="tui-placeholder" v-else>请选择</div>
				</tui-list-cell>
				 <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
					<div class="tui-title">详细地址</div>
					<div class="tui-input" v-if="form.address">{{ form.address }}</div>
					<div class="tui-placeholder" v-else>请填写详细地址</div>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">门牌号</div>
						<input
							v-model="form.floor"
							placeholder-class="phcolor"
							placeholder-style="color:#CCCCCC"
							class="tui-input"
							placeholder="楼号门牌号（选填）"
						/>
					</tui-list-cell>
					<div class="btn-wrap">
					<button class="admin-button-com blue big" formType="submit">确认</button>
				</div>		
			</div>
			<!-- 选择地区 -->
			<app-area-sel :show.sync="showRegion" @change="changeAreaFn" :city="form.city" />
			<!-- 省市联动 -->
			<simple-address
				ref="simpleAddress"
				:pickerValueDefault="cityPickerValueDefault"
				@onConfirm="onCityConfirm"
			></simple-address>
		</form>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import TuiListCell from '@/components/plugin/list-cell'
const form = require('@/utils/formValidation.js')
// api
import { getLevel } from '@/utils/config'
import { add } from '@/api/member'
// import {
//   regionTree
// } from "@/api/official";
import AppAreaSel from "@/components/app-area-sel";
import SimpleAddress from "@/components/plugin/simple-address";
export default {
	name: 'member-add',
	components: {
		TuiListCell,
		AppAreaSel,
        SimpleAddress,
	},
	data() {
		return {
			showRegion:false,
			 // 省市联动
			regionData: [],
			cityPickerValueDefault: [0, 0],
			form: {
				floor:'',
				address:'',
				province:'',
				city:'',
				mobile: '',
				confirmMobile: '',
				name: '',
				adminName: '',
				lat:'',
				long: ''
			},
			levelSelData: {}
		}
	},
	computed: {
	},
	onLoad() {
	},
	methods: {
		init(){
		},
		onCityConfirm(e) {
		this.form.province = e.provinceName;
		this.form.city = e.cityName;
		},
		changeAreaFn(e) {
		console.log("changeAreaFn", e);
		this.form.address = e.address;
		this.form.lat = e.location.lat;
		this.form.long = e.location.lng;
		},
		selRegionFn(){
			if (!this.form.city) {
				this.$msg("请先选择城市！");
				return false;
			}
			this.showRegion = true;
		},
		openAddres(){
			this.$refs.simpleAddress.open();
		},
		confirmFn() {
			add({
				...this.form,
				mobile: +this.form.mobile,
				confirmMobile: +this.form.confirmMobile
			}).then(res => {
				this.$msg('添加成功！')
				setTimeout(() => {
					uni.reLaunch({
						url: '/admin/home/member'
					});
				}, 1000)
			})
		},
		changeLevelFn(e) {
			this.levelSelData = this.levelData.list[e.detail.value]
			this.form.memberLevel = this.levelSelData.level
		},
		// 表单验证
		formSubmit(e) {
			// 表单规则
			let rules = [
				{
					name: 'name',
					rule: ['required'],
					msg: ['请输入花店名称']
				},
				{
					name: 'adminName',
					rule: ['required'],
					msg: ['请输入店长名称']
				},
				{
					name: 'mobile',
					rule: ['required'],
					msg: ['请输入手机号']
				},
				{
					name: 'confirmMobile',
					rule: ['required'],
					msg: ['请输入确认手机号']
				},	
			]
			// 进行表单检查
			let formData = e.detail.value
			let checkRes = form.validation(formData, rules)
			// 验证通过!
			if (!checkRes) {
				this.confirmFn()
			} else {
				this.$msg(checkRes)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.line-hint_bx {
		color: #999999;
		font-size: 24px;
		font-weight: 400;
		line-height: 70px;
		padding-left: 31px;
	}
</style>
