<template>
	<div class="app-content">
		<!-- 门店信息 -->
		<form @submit="formSubmit" @reset="formReset">
			<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.shopName" placeholder-class="phcolor" class="tui-input" name="shopName" placeholder="请输入名称，如同安店" maxlength="50" type="text" />
				</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false">
			<div class="tui-title required" >门店图片</div>
			<app-uploader @chooseImage="_resultData" :num="4" :prefixShow="true" :imgList="form.img"/>
			</tui-list-cell>
			</div>
			<!-- <div class="prompt-text">注: 请先关注公众号，绑定后可以在移动端自动登录</div> -->
			<!-- 登录信息 -->
			<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.openTime" placeholder-class="phcolor" class="tui-input" name="openTime" placeholder="请输入营业时间 例如：8:00 - 22:00" 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" :arrow="true" @click="openAddres">
					<div class="tui-title required">所在城市</div>
					<div class="tui-input" v-if="form.province || form.city">{{ form.province + '-' + form.city }}</div>
					<div class="tui-placeholder" v-else>请选择</div>
					<input v-model="form.province" name="province" hidden />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
					<div class="tui-title required">地址</div>
					<div class="tui-input" v-if="form.address">{{ form.address }}</div>
					<div class="tui-placeholder" v-else>请填写详细地址</div>
					<input v-model="form.address" name="address" hidden />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title ">门牌号</div>
					<input v-model="form.floor" placeholder-class="phcolor" class="tui-input" name="floor" placeholder="楼号门牌号（选填）" />
				</tui-list-cell>
				<tui-list-cell class="line-cell remark-wrap" :hover="false">
					<div class="tui-title">简介</div>
					<div class="tui-input">
						<textarea v-model="form.introduction" class="tui-textarea remark" placeholder-class="phcolor" placeholder="请输入简介" />
					</div>
				</tui-list-cell>
			</div>
			<!-- 提交 -->
			<div class="confirm-btn">
				<button class="admin-button-com big blue" formType="submit">提交</button>
			</div>
		</form>
		<!-- 省市联动 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onCityConfirm"></simple-address>
		<!-- 选择地区 -->
		<app-area-sel :show.sync="showRegion" :city="form.city" @change="changeAreaFn" />
	</div>
</template>

<script>
	import TuiListCell from '@/components/plugin/list-cell'
	import AppAvatarModule from '@/components/module/app-avatar'
	import SimpleAddress from '@/components/plugin/simple-address'
	import AppAreaSel from '@/components/app-area-sel'
  import AppUploader from "@/components/app-uploader";
	const form = require('@/utils/formValidation.js')
	// api
    import { updateShop as update, addShop as add } from '@/api/shop'
	import {mapActions} from "vuex";
	export default {
		name: 'staff-add',
		components: {
			TuiListCell,
            AppAvatarModule,
            SimpleAddress,
            AppAreaSel,
            AppUploader
		},
		data() {
			return {
				form: {
                    shopName: '',
                    province: '',
                    city: '',
                    address: '',
                    floor: '',
                    openTime: '8:00 - 22:00',
                    introduction: '',
                    mobile: '',
                    img: []
				},
				// 详细地址
				showRegion: false,
				region: {
					lat: 0,
					long: 0
				},
                // 省市联动
                regionData: [],
				cityPickerValueDefault: [0, 0]
			}
		},
		onLoad() {
			// this.init()
		},
		onShow() {
			if (this.option.id) {
				uni.setNavigationBarTitle({
					title: `修改门店`
				})
			} else {
				uni.setNavigationBarTitle({
					title: `添加门店`
				})
			}
		},
		methods: {
			...mapActions(['setUserShopAll']),
			init() {
                this._getDet()
			},
       _resultData(val) {
        console.log(val)
        this.form.img = val;
        // this.form.upImgList = item
      },
			// api
			_getDet() {
				let data = uni.getStorageSync('modifyShopB')
				if (this.$util.isEmpty(data)) return
				Object.keys(this.form).forEach((i, index) => {
					// if (i != 'password') {
					this.form[i] = data[i]
					// }
				})
			},
			// option
			// 选择地址
			selRegionFn() {
				if (!this.form.city) {
					this.$msg('请先选择城市！')
					return false
				}
				this.showRegion = true
			},
			changeAreaFn(e) {
				console.log('changeAreaFn', e)
				this.form.address = e.title
				this.region.lat = e.location.lat
				this.region.long = e.location.lng
			},
			// 省市联动
			openAddres() {
				this.$refs.simpleAddress.open()
			},
			onCityConfirm(e) {
				// this.form.receiveAddress = e.label
				this.form.province = e.provinceName
				this.form.city = e.cityName
        this.form.address = ''
        this.region.lat = 0
				this.region.long = 0
				// this.pickerText = JSON.stringify(e)
			},
			confirmFn() {
				let hostFn = this.option.id ? update : add
				if (this.option.id) {
					this.form.id = this.option.id
				}
				this.form = {...this.form,...this.region}
				hostFn(this.form).then(res => {
					this.setUserShopAll();
					let promptText = this.option.id ? '修改成功！' : '添加成功！'
                    this.$msg(promptText)
                    uni.removeStorageSync('modifyShopB')
                    setTimeout(() => {
					    this.$util.pageTo(1)
                    }, 1000)
				})
			},
			// 表单验证
			formSubmit(e) {
				// 表单规则
				let rules = [
					{
						name: 'shopName',
						rule: ['required'],
						msg: ['请输入名称']
					},
					{
						name: 'openTime',
						rule: ['required'],
						msg: ['请输入营业时间']
					},
					{
						name: 'mobile',
						rule: ['required'],
						msg: ['请输入手机号']
					},
					{
						name: 'province',
						rule: ['required'],
						msg: ['请选择地址']
					},
					{
						name: 'address',
						rule: ['required'],
						msg: ['请填写详细地址']
					}
				]
				// 进行npm表单检查
				let formData = e.detail.value
				let checkRes = form.validation(formData, rules)
				// 验证通过!
				if (!checkRes) {
					this.confirmFn()
				} else {
					this.$msg(checkRes)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-content {
		min-height: calc(100vh - 20px);
		padding-top: 20px;
	}
	.prompt-text {
		color: $fontColor3;
		padding-left: 30px;
		margin-bottom: 30px;
	}
	// ---
	.module-com {
		margin-bottom: 20px;
		.member-wrap {
			.member-det {
				font-size: 24px;
				margin-left: 20px;
			}
		}
		.remark-wrap {
			align-items: flex-start;
			.remark {
				height: 240px;
			}
		}
	}
	// 按钮
	.confirm-btn {
		width: calc(100% - 60px);
		margin: 60px 30px 20px;
		.admin-button-com {
			width: 100%;
		}
	}
</style>
