<template>
	<view>
		<!-- 进度 -->
		<view class="width100 height90 backcorfff">
			<evan-steps :active="merchart" direction="horizontal" class="paddtop10">
				<evan-step title="账户信息"></evan-step>
				<evan-step title="基本信息"></evan-step>
				<evan-step title="结算信息"></evan-step>
				<evan-step title="门店信息"></evan-step>
			</evan-steps>
		</view>

		<!-- 审核状态回馈 -->
		<view class="width100 line10 "></view>
		<view class="width100 height100p" style="background-color: #eb6a53;">
			<view class="font18 fcorfff paading10 aliitem">
				<image src="../../../static/img/error.png" mode="widthFix" class="iconw25 marglerig"></image>资料不全
			</view>
			<view class="font14 fcorfff paading10">门店信息与营业执照不符合</view>
		</view>
		<!--第一步 未录入账户信息 -->
		<view class="width100 mart10 backcorfff font14" v-if="merchart == 0 && currentstatus != 1">
			<view class="username">
				<view class="namecont">商户联系人</view>
				<input placeholder="请输入商户联系人" v-model="mercontacts" type="text"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">商户手机号</view>
				<input placeholder="请输入申请人手机号" v-model="phoneNumber" type="number"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="password">
				<view class="namecont">验证码</view>
				<input placeholder="请输入验证码" v-model="code" type="number"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}
				</view>
			</view>
			<view class="password">
				<view class="namecont">登录账号</view>
				<input placeholder="2-20位数字,字母" v-model="loginphone" type="text"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="notes">
				注:商户初始密码为注册手机号后6位
			</view>
		</view>
		<view class="checkboxg font14" v-if="merchart == 0 && currentstatus != 1">
			<checkbox-group class="aliitem fcor666" @change="changechk">
				<checkbox class="checbox" value="cb" :checked="ischecked" />同意<text class="fcor089">《什么什么什么什么法哦》</text>
			</checkbox-group>
		</view>
		<!--第一步 已录入账户信息 -->
		<view class="width100 mart10 backcorfff font14" v-if="merchart == 0 && currentstatus == 1">
			<view class="username">
				<view class="namecont">商户手机号</view>
				<view class="font14 fcor333 text2 width75 fotrt">15583658692</view>
			</view>
			<view class="username">
				<view class="namecont">登录账号</view>
				<view class="font14 fcor333 text2 width75 fotrt">15583658692</view>
			</view>
		</view>


		<!--第二步 未录入基本信息 -->
		<view class="width100 mart10 backcorfff" v-if="merchart == 1 && currentstatus != 1">
			<view class="titlename font18 fontwig6 fcor333">营业信息</view>
			<!-- 个体商户,企业商户 -->
			<view class="username">
				<view class="namecont">商户类型</view>
				<input placeholder="请选择商户类型" v-model="merchantType" style="width: 70%;" disabled="true"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" @click="showPopup()" />
				<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw"></image>
			</view>
			<view class="titlename fcor666">营业执照</view>
			<view class="width94 displ">
				<image src="../../../static/img/businesslic.png" mode="widthFix" class="width45"
					style="margin-left: 3%;"></image>
				<image src="../../../static/img/businesslic1.png" mode="widthFix" class="width45"
					style="margin-left: 3%;" @click="perImage('../../../static/img/businesslic1.png')"></image>
			</view>
			<view class="username" style="border-bottom: 0px;">
				<view class="namecont">公司名称</view>
				<input placeholder="请输入营业执照上的名称" v-model="companyname" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="notes font13" style="color: #eb5823;border-bottom: 1px solid #f6f6f6;">
				<image mode="widthFix" class="iconw" src="../../../static/img/gth.png"></image> 公司名称应与营业执照一致
			</view>
			<view class="username">
				<view class="namecont">营业执照号</view>
				<input placeholder="请输入营业执照号" v-model="businnum" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">注册地址</view>
				<input placeholder="请输入注册地址" v-model="regaddress" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username" style="border-bottom: 0px;">
				<view class="namecont">营业期限</view>
				<view class="width30 aliitem" @tap="timetype='times'">
					<radio class="checbox" :checked="timetype=='times'" color="#0083f5" /> 选择时间
				</view>
				<view class="width30 aliitem" @tap="timetype='longterm'">
					<radio class="checbox" :checked="timetype=='longterm'" color="#0083f5" /> 长期有效
				</view>
			</view>
			<view class="username width80">
				<picker mode="date" class="width40 fotct" :value="start_date" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="date">{{start_date}}</view>
				</picker>
				<view class="width10 fotct">至</view>
				<picker v-if="timetype == 'times'" mode="date" class="width40 fotct" :value="end_date"
					:start="startDate" :end="endDate" @change="bindDateChange2">
					<view class="date">{{end_date}}</view>
				</picker>
				<view class="width40 fotct fcor999" v-if="timetype == 'longterm' ">长期有效</view>
			</view>
			<view class="username" style="border-bottom: 0px;">
				<view class="namecont">商户简称</view>
				<input placeholder="请输入商户简称" v-model="merabbreviation" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="notes font13" style="color: #eb5823;border-bottom: 1px solid #f6f6f6;">
				<view class="width70 aliitem">
					<image mode="widthFix" class="iconw" src="../../../static/img/gth.png"></image> 在支付完成后向买家展示,请慎重填写!
				</view>
				<view class="fcor666 alijusend width30" @click="perImage('../../../static/img/businesslic2.png')">查看示例
					<image mode="widthFix" style="width: 12px;" src="../../../static/img/jtg.png"></image>
				</view>
			</view>
			<view class="username">
				<view class="namecont">行业类目</view>
				<input placeholder="请选择类目" v-model="industrycategory" style="width: 70%;" disabled="true"
					@click="showjob()" placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
				<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw"></image>
			</view>
			<view class="username">
				<view class="namecont">经营地区</view>
				<pickRegions :defaultRegion="defaultRegionCode" class="width70" @getRegion="handleGetRegion">
					<view style="color: #333333;font-size:14px;padding-top:2px;" v-if="regionName">
						{{regionName}}
					</view>
					<view style="color: #bfbfbf;font-size:14px;padding-top:2px;" v-else>请选择经营地区</view>
				</pickRegions>
				<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw"></image>
			</view>
			<view class="username" style="border-bottom: 0px;">
				<view class="namecont">详情地址</view>
				<input placeholder="请精确到XX路XX号" v-model="detailsaddress" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="width100 line10"></view>
			<view class="titlename font18 fontwig6 fcor333">经营者/法人信息</view>

			<!-- 	<view class="notes font16" style="border-bottom: 0px;">
				<view class="width70 aliitem fcor666">
					手持身份证
				</view>
			</view>
			<view class="width94 displ mart5">
				<image src="../../../static/img/businesslic4.png" mode="widthFix" class="width45"
					style="margin-left: 3%;"></image>
				<image src="../../../static/img/businesslic5.png" mode="widthFix" class="width45"
					style="margin-left: 3%;" @click="perImage('../../../static/img/businesslic5.png')"></image>
			</view> -->

			<view class="notes font16" style="border-bottom: 0px;">
				<view class="width70 aliitem fcor666">
					证件照片
				</view>
				<view class="fcor666 alijusend width30 font14"
					@click="perImage('../../../static/img/businesslic3.png')">查看示例
					<image mode="widthFix" style="width: 12px;" src="../../../static/img/jtg.png"></image>
				</view>
			</view>
			<view class="width94 displ mart5">
				<image src="../../../static/img/frontidcard.png" mode="widthFix" class="width45"
					style="margin-left: 3%;"></image>
				<image src="../../../static/img/reverseidcard.png" mode="widthFix" class="width45"
					style="margin-left: 3%;"></image>
			</view>

			<view class="username">
				<view class="namecont">姓名</view>
				<input placeholder="请输入姓名" v-model="idcardname" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">身份证号</view>
				<input placeholder="请输入身份证号" v-model="idcard" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username" style="border-bottom: 0px;">
				<view class="namecont">有效期</view>
				<view class="width30 aliitem" @tap="timetype='times'">
					<radio class="checbox" :checked="timetype=='times'" color="#0083f5" /> 选择时间
				</view>
				<view class="width30 aliitem" @tap="timetype='longterm'">
					<radio class="checbox" :checked="timetype=='longterm'" color="#0083f5" /> 长期有效
				</view>
			</view>
			<view class="username width80">
				<picker mode="date" class="width40 fotct" :value="start_date" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="date">{{start_date}}</view>
				</picker>
				<view class="width10 fotct">至</view>
				<picker v-if="timetype == 'times'" mode="date" class="width40 fotct" :value="end_date"
					:start="startDate" :end="endDate" @change="bindDateChange2">
					<view class="date">{{end_date}}</view>
				</picker>
				<view class="width40 fotct fcor999" v-if="timetype == 'longterm' ">长期有效</view>
			</view>
		</view>
		<!--第二步 已录入基本信息 -->
		<view class="width100 mart10 backcorfff" v-if="merchart == 1 && currentstatus == 1">
			<view class="titlename font18 fontwig6 fcor333">营业信息</view>
			<view class="username">
				<view class="namecont">商户类型</view>
				<view class="font14 fcor333 text2 width75 fotrt">企业商户</view>
			</view>
			<view class="titlename fcor666">营业执照</view>
			<view class="width94 displ">
				<image src="../../../static/img/businesslic.png" mode="widthFix" class="width30"
					@click="perImage('../../../static/img/businesslic1.png')" style="margin-left: 3%;"></image>
			</view>
			<view class="username">
				<view class="namecont">公司名称</view>
				<view class="font14 fcor333 text2 width75 fotrt">方式的放松放松放方式地方沙发上方式地方史蒂夫</view>
			</view>
			<view class="username">
				<view class="namecont">营业执照号</view>
				<view class="font14 fcor333 text2 width75 fotrt">423423423442FSDFSF32432</view>
			</view>
			<view class="username">
				<view class="namecont">注册地址</view>
				<view class="font14 fcor333 text2 width75 fotrt">方式的放松放松放方式地方沙发上方式地方史蒂夫</view>
			</view>
			<view class="username">
				<view class="namecont">营业期限</view>
				<view class="font14 fcor333 text2 width75 fotrt">2020-10-28 至 长期有效</view>
			</view>
			<view class="username">
				<view class="namecont">商户简称</view>
				<view class="font14 fcor333 text2 width75 fotrt">方式地方舒服舒服</view>
			</view>
			<view class="username">
				<view class="namecont">行业类目</view>
				<view class="font14 fcor333 text2 width75 fotrt">教育培训-艺术培训</view>
			</view>
			<view class="username">
				<view class="namecont">经营地区</view>
				<view class="font14 fcor333 text2 width75 fotrt">四川省-成都市-青羊区</view>
			</view>
			<view class="username">
				<view class="namecont">详情地址</view>
				<view class="font14 fcor333 text2 width75 fotrt">四川省成都市青羊区看风使舵可能放开你</view>
			</view>
			<view class="width100 line10"></view>
			<view class="titlename font18 fontwig6 fcor333">经营者/法人信息</view>
			<view class="titlename fcor666">证件照片</view>
			<view class="width94 displ">
				<image src="../../../static/img/businesslic.png" mode="widthFix" class="width30"
					@click="perImage('../../../static/img/businesslic1.png')" style="margin-left: 3%;"></image>
				<image src="../../../static/img/businesslic.png" mode="widthFix" class="width30"
					@click="perImage('../../../static/img/businesslic1.png')" style="margin-left: 3%;"></image>
			</view>
			<view class="username">
				<view class="namecont">姓名</view>
				<view class="font14 fcor333 text2 width75 fotrt">房东的</view>
			</view>
			<view class="username">
				<view class="namecont">身份证号</view>
				<view class="font14 fcor333 text2 width75 fotrt">3423555234234234234223424</view>
			</view>
			<view class="username">
				<view class="namecont">有效期</view>
				<view class="font14 fcor333 text2 width75 fotrt">2013-04-23 至 2025-04-23</view>
			</view>
		</view>


		<!--第三步 未录入结算信息 -->
		<view class="width100 mart10 backcorfff" v-if="merchart == 2 && currentstatus != 1">
			<view class="titlename font18 fontwig6 fcor333">结算信息</view>
			<view class="username">
				<view class="namecont">结算类型</view>
				<input placeholder="请选择结算类型" v-model="lementType" style="width: 70%;" disabled="true"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" @click="showPopup()" />
				<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw"></image>
			</view>
			<!-- 非法人结算 -->
			<view class="titlename fcor666">非法人结算授权书</view>
			<view class="width94 displ">
				<image src="../../../static/img/businesslic7.png" mode="widthFix" class="width45"
					style="margin-left: 3%;"></image>
				<image src="../../../static/img/businesslic8.png" mode="widthFix" class="width45"
					style="margin-left: 3%;" @click="perImage('../../../static/img/businesslic10.png')"></image>
			</view>
			<view class="notes font13" style="color: #eb5823;border-bottom: 1px solid #f6f6f6;">
				<image mode="widthFix" class="iconw" src="../../../static/img/gth.png"></image> <text
					class="width90p">请预览并保存授权书到本地，打印填写完整并签字后拍照上传；图片需清晰完整，以免审核失败</text>
			</view>
			<view class="notes font16" style="border-bottom: 0px;">
				<view class="width70 aliitem fcor666">
					非法人身份证照片
				</view>
				<view class="fcor666 alijusend width30 font14"
					@click="perImage('../../../static/img/businesslic3.png')">查看示例
					<image mode="widthFix" style="width: 12px;" src="../../../static/img/jtg.png"></image>
				</view>
			</view>
			<view class="width94 displ mart5">
				<image src="../../../static/img/frontidcard.png" mode="widthFix" class="width45"
					style="margin-left: 3%;"></image>
				<image src="../../../static/img/reverseidcard.png" mode="widthFix" class="width45"
					style="margin-left: 3%;"></image>
			</view>
			<view class="username">
				<view class="namecont">姓名</view>
				<input placeholder="请输入姓名" v-model="idcardname" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">身份证号</view>
				<input placeholder="请输入身份证号" v-model="idcard" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username" style="border-bottom: 0px;">
				<view class="namecont">有效期</view>
				<view class="width30 aliitem" @tap="timetype='times'">
					<radio class="checbox" :checked="timetype=='times'" color="#0083f5" /> 选择时间
				</view>
				<view class="width30 aliitem" @tap="timetype='longterm'">
					<radio class="checbox" :checked="timetype=='longterm'" color="#0083f5" /> 长期有效
				</view>
			</view>
			<view class="username width80">
				<picker mode="date" class="width40 fotct" :value="start_date" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="date">{{start_date}}</view>
				</picker>
				<view class="width10 fotct">至</view>
				<picker v-if="timetype == 'times'" mode="date" class="width40 fotct" :value="end_date"
					:start="startDate" :end="endDate" @change="bindDateChange2">
					<view class="date">{{end_date}}</view>
				</picker>
				<view class="width40 fotct fcor999" v-if="timetype == 'longterm' ">长期有效</view>
			</view>
			<view class="notes font16" style="border-bottom: 0px;">
				<view class="width70 aliitem fcor666">
					结算人银行卡照片
				</view>
			</view>
			<view class="width94 displ mart5">
				<image src="../../../static/img/businesslic9.png" mode="widthFix" class="width100"></image>
			</view>
			<!-- 对公结算 -->
			<view class="notes font16" style="border-bottom: 0px;">
				<view class="width70 aliitem fcor666">
					开户许可证照片
				</view>
				<view class="fcor666 alijusend width30 font14"
					@click="perImage('../../../static/img/businesslic6.png')">查看示例
					<image mode="widthFix" style="width: 12px;" src="../../../static/img/jtg.png"></image>
				</view>
			</view>
			<view class="width94 displ mart5">
				<image src="../../../static/img/businesslic11.png" mode="widthFix" class="width100"></image>
			</view>
			<view class="username">
				<view class="namecont">银行卡号</view>
				<input placeholder="请输入银行卡号" v-model="bankNo" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">所属银行</view>
				<input placeholder="请输入所属银行" v-model="belongbank" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">所属地</view>
				<input placeholder="请输入所属地" v-model="belongaddress" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">所属支行</view>
				<input placeholder="请输入所属支行" v-model="belongbranch" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">清算行号</view>
				<input placeholder="请输入清算行号" v-model="clearbankNo" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
		</view>
		<!--第三步 已录入结算信息 -->
		<view class="width100 mart10 backcorfff" v-if="merchart == 2 && currentstatus == 1">
			<view class="titlename font18 fontwig6 fcor333">结算信息</view>
			<view class="username">
				<view class="namecont">商户类型</view>
				<view class="font14 fcor333 text2 width75 fotrt">对公结算</view>
			</view>
			<!-- 对私非法人结算 -->
			<view class="titlename fcor666">非法人结算授权书</view>
			<view class="width94 displ">
				<image src="../../../static/img/businesslic.png" mode="widthFix" class="width30"
					@click="perImage('../../../static/img/businesslic1.png')" style="margin-left: 3%;"></image>
				<image src="../../../static/img/businesslic.png" mode="widthFix" class="width30"
					@click="perImage('../../../static/img/businesslic1.png')" style="margin-left: 3%;"></image>
			</view>
			<view class="titlename fcor666">结算人身份证照片</view>
			<view class="width94 displ">
				<image src="../../../static/img/businesslic.png" mode="widthFix" class="width30"
					@click="perImage('../../../static/img/businesslic1.png')" style="margin-left: 3%;"></image>
				<image src="../../../static/img/businesslic.png" mode="widthFix" class="width30"
					@click="perImage('../../../static/img/businesslic1.png')" style="margin-left: 3%;"></image>
			</view>
			<view class="username">
				<view class="namecont">姓名</view>
				<view class="font14 fcor333 text2 width75 fotrt">发发发</view>
			</view>
			<view class="username">
				<view class="namecont">身份证号</view>
				<view class="font14 fcor333 text2 width75 fotrt">123131232131323123213131</view>
			</view>
			<view class="username">
				<view class="namecont">有效期</view>
				<view class="font14 fcor333 text2 width75 fotrt">2013-04-23 至 2025-04-23</view>
			</view>
			<view class="titlename fcor666">结算人银行卡照片</view>
			<view class="width94 displ">
				<image src="../../../static/img/businesslic.png" mode="widthFix" class="width30"
					@click="perImage('../../../static/img/businesslic1.png')" style="margin-left: 3%;"></image>
			</view>
			<!-- 对公结算 -->
			<view class="titlename fcor666">开户许可证照片</view>
			<view class="width94 displ">
				<image src="../../../static/img/businesslic.png" mode="widthFix" class="width30"
					@click="perImage('../../../static/img/businesslic1.png')" style="margin-left: 3%;"></image>
			</view>
			<view class="username">
				<view class="namecont">所属地</view>
				<view class="font14 fcor333 text2 width75 fotrt">123131232131323123213131</view>
			</view>
			<view class="username">
				<view class="namecont">所属支行</view>
				<view class="font14 fcor333 text2 width75 fotrt">123131232131323123213131</view>
			</view>
			<view class="username">
				<view class="namecont">银行卡号</view>
				<view class="font14 fcor333 text2 width75 fotrt">123131232131323123213131</view>
			</view>
			<view class="username">
				<view class="namecont">清算行号</view>
				<view class="font14 fcor333 text2 width75 fotrt">123131232131323123213131</view>
			</view>
			<!-- 对私法人 -->
			<view class="titlename fcor666">法人银行卡照片</view>
			<view class="width94 displ">
				<image src="../../../static/img/businesslic.png" mode="widthFix" class="width30"
					@click="perImage('../../../static/img/businesslic1.png')" style="margin-left: 3%;"></image>
			</view>
			<view class="username">
				<view class="namecont">银行卡号</view>
				<view class="font14 fcor333 text2 width75 fotrt">123131232131323123213131</view>
			</view>
			<view class="username">
				<view class="namecont">所属银行</view>
				<view class="font14 fcor333 text2 width75 fotrt">中国农业银行</view>
			</view>
		</view>


		<!--第四步 未录入门店信息 -->
		<view class="width100 mart10 backcorfff" v-if="merchart == 3">
			<view class="username">
				<view class="namecont">门店账号</view>
				<input placeholder="请输入门店账号" v-model="storeaccount" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">门店密码</view>
				<input placeholder="请输入门店密码" v-model="storepasd" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">门店名称</view>
				<input placeholder="请输入门店名称" v-model="storename" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">门店电话</view>
				<input placeholder="请输入门店电话" v-model="storephone" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="notes font16" style="border-bottom: 0px;">
				<view class="width70 aliitem fcor666">
					门店照片
				</view>
			</view>
			<view class="width94 displ mart5">
				<image src="../../../static/img/store/store1.png" mode="widthFix" class="width45"
					style="margin-left: 3%;"></image>
				<image src="../../../static/img/store/store2.png" mode="widthFix" class="width45"
					@click="perImage('../../../static/img/store/store2.png')" style="margin-left: 3%;"></image>
			</view>

			<view class="width94 displ mart5">
				<image src="../../../static/img/store/store3.png" mode="widthFix" class="width45"
					style="margin-left: 3%;"></image>
				<image src="../../../static/img/store/store4.png" mode="widthFix" class="width45"
					@click="perImage('../../../static/img/store/store4.png')" style="margin-left: 3%;"></image>
			</view>

			<view class="width94 displ mart5 marb15">
				<image src="../../../static/img/store/store5.png" mode="widthFix" class="width45"
					style="margin-left: 3%;"></image>
				<image src="../../../static/img/store/store6.png" mode="widthFix" class="width45"
					@click="perImage('../../../static/img/store/store6.png')" style="margin-left: 3%;"></image>
			</view>
		</view>


		<wybPopup ref="popup" type="bottom" width="500" bgColor="#f6f6f6" radius="6" :showCloseIcon="true">
			<!-- 商户类型选择 -->
			<view class="width100" v-if="merchart == 1">
				<view class="fotct font18 fontwig6 fcor333 mart10 height30">选择商户类型</view>
				<view class="width92 mart20" @click="changeMerchant(1)">
					<view class="wybtc">
						<image src="../../../static/img/wyb1.png" mode="widthFix" class="iconw40"></image>
						<view class="width70 margle10">
							<view class="fcor333 font16">个体商户</view>
							<view class="fcor999 font14">需要提供营业执照和法人身份证照片和结算银行卡等</view>
						</view>
						<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw margle20"></image>
					</view>
				</view>
				<view class="width92 mart15" @click="changeMerchant(2)">
					<view class="wybtc">
						<image src="../../../static/img/wyb2.png" mode="widthFix" class="iconw40"></image>
						<view class="width70 margle10">
							<view class="fcor333 font16">企业商户</view>
							<view class="fcor999 font14">一般为有限公司,需要提供营业执照及法人身份证照片等</view>
						</view>
						<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw margle20"></image>
					</view>
				</view>
				<view class="width92 mart15" @click="changeMerchant(3)">
					<view class="wybtc">
						<image src="../../../static/img/wyb3.png" mode="widthFix" class="iconw40"></image>
						<view class="width70 margle10">
							<view class="fcor333 font16">小微商户</view>
							<view class="fcor999 font14">无营业执照的商户</view>
						</view>
						<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw margle20"></image>
					</view>
				</view>
			</view>
			<!-- 结算类型 -->
			<view class="width100" v-if="merchart == 2">
				<view class="fotct font18 fontwig6 fcor333 mart10 height30">选择商户类型</view>
				<view class="width92 mart20" @click="changelementtype(1)">
					<view class="wybtc" style="height: 40px;">
						<image src="../../../static/img/wyb4.png" mode="widthFix" class="iconw40"></image>
						<view class="width70 margle10">
							<view class="fcor333 font16">对私非法人结算</view>
						</view>
						<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw margle20"></image>
					</view>
				</view>
				<view class="width92 mart20" @click="changelementtype(2)">
					<view class="wybtc" style="height: 40px;">
						<image src="../../../static/img/wyb4.png" mode="widthFix" class="iconw40"></image>
						<view class="width70 margle10">
							<view class="fcor333 font16">对私法人结算</view>
						</view>
						<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw margle20"></image>
					</view>
				</view>
				<view class="width92 mart20" @click="changelementtype(3)">
					<view class="wybtc" style="height: 40px;">
						<image src="../../../static/img/wyb4.png" mode="widthFix" class="iconw40"></image>
						<view class="width70 margle10">
							<view class="fcor333 font16">对公结算</view>
						</view>
						<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw margle20"></image>
					</view>
				</view>
			</view>
		</wybPopup>
		<!-- 下一步,审核 -->
		<view class="btn" @tap="gonextstep" v-if="merchart != 3">下一步</view>
		<view class="btn" @tap="gonextstep" v-else>提交审核</view>
		<view class="onlab" @click="choicemer" v-if="merchart != 0">查看上一步内容</view>
		<view class="width100 height60"></view>
	</view>
</template>

<script>
	import EvanStep from '../../../components/evan-steps/evan-step.vue';
	import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
	import pickRegions from '../../../components/pick-regions/pick-regions.vue';
	let app = getApp();
	export default {
		components: {
			EvanStep,
			wybPopup,
			pickRegions
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				merchart: 0, //当前第几步操作
				mercontacts: '', //商户联系人
				phoneNumber: '', //商户手机号
				loginphone: '', //商户登录账号
				code: '', //验证码
				passwd: '', //密码
				getCodeText: '获取验证码',
				getCodeBtnColor: "#609ded", //倒计时颜色
				getCodeisWaiting: false, //是否点击
				ischecked: false, //是否同意条约
				currentstatus: 0, //当前步骤状态 1: 已录入  其他:未录入
				merchantType: '', //商户类型
				merchantId: '', //商户id
				lementType: '', //结算账户类型
				lementId: '', //结算id
				businimg: '', //营业执照图片
				companyname: '', //公司名称
				businnum: '', // 营业执照号
				regaddress: '', //注册地址
				merabbreviation: '', //商户简称
				industrycategory: '', //行业类目
				inducateid: '', //行业id
				detailsaddress: '', // 详情地址 
				idcardposimg: '', //证件照正面
				idcardsideimg: '', //证件照反面，
				idcardname: '', //证件姓名
				idcard: '', //身份证号
				uncorporsettelimg: '', //非法人结算授权书
				settleimg: '', //结算人银行卡照片
				accopenperimg: '', //开户许可证图片
				bankNo: '', // 银行卡号
				belongbank: '', //所属银行
				belongaddress: '', //所属地
				belongbranch: '', //所属支行
				clearbankNo: '', //清算行号
				storeaccount: '', //门店账号
				storepasd: '', //门店密码
				storename: '', //门店名称
				storephone: '', //门店电话
				storeimg1: '', //门店图片
				timetype: 'times', // times:选择时间  longterm: 长期 
				start_date: '开始时间', //开始时间
				end_date: '结束时间', //到期时间
				region: [], //选择区域
				defaultRegion: ['广东省', '广州市', '番禺区'], //默认地区
				defaultRegionCode: '440113', //区级编号
			}
		},
		computed: {
			//开始时间转化
			startDate() {
				return this.getDate('start');
			},
			//结束时间转化
			endDate() {
				return this.getDate('end');
			},
			//地区转换
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join('-')
			}
		},
		methods: {
			//显示商户弹出
			showPopup() {
				this.$refs.popup.show();
			},
			// 选择开始日期
			bindDateChange: function(e) {
				this.start_date = e.target.value
			},
			// 选择结束日期
			bindDateChange2: function(e) {
				this.end_date = e.target.value;
			},
			//选择地区
			handleGetRegion(region) {
				this.region = region;
			},
			//选择行业
			showjob() {
				uni.navigateTo({
					url: '../business-category/business-category'
				})
			},
			//选择商户
			changeMerchant(item) {
				if (item == 1) {
					this.merchantId = 1;
					this.merchantType = '个体商户';
				}
				if (item == 2) {
					this.merchantId = 2;
					this.merchantType = '企业商户';
				}
				if (item == 3) {
					this.merchantId = 3;
					this.merchantType = '小微商户';
				}
				this.$refs.popup.hide();
			},
			//选择结算类型
			changelementtype(item) {
				if (item == 1) {
					this.lementId = 1;
					this.lementType = '对私非法人结算';
				}
				if (item == 2) {
					this.lementId = 2;
					this.lementType = '对私法人结算';
				}
				if (item == 3) {
					this.lementId = 3;
					this.lementType = '对公结算';
				}
				this.$refs.popup.hide();
			},
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			/**
			 * 请求发送验证码
			 */
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return;
				}
				// uni.showLoading({
				// 	title: '发送中...'
				// })
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#bfbfbf"
				uni.showToast({
					title: '验证码已发送',
					icon: "none"
				});
				this.setTimer();
				// let params = {
				// 	phone: this.phoneNumber
				// }
				// sendSmsCode(params).then(res => {
				// 	uni.hideLoading();
				// 	if (res.return_code == '000000') {
				// 		this.getCodeisWaiting = true;
				// 		this.getCodeBtnColor = "#bfbfbf"
				// 		uni.showToast({
				// 			title: '验证码已发送',
				// 			icon: "none"
				// 		});
				// 		this.setTimer();
				// 	}
				// })
			},
			/**
			 * 倒计时
			 */
			setTimer() {
				let holdTime = 60;
				this.getCodeText = "重新获取60s"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#609ded";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = "重新获取" + holdTime + "s";
					holdTime--;

				}, 1000)
			},
			/**
			 * 勾选条约
			 */
			changechk() {
				if (this.ischecked) {
					this.ischecked = false;
				} else {
					this.ischecked = true;
				}
			},
			/**
			 * @param {Object} item 放大图片
			 */
			perImage(item) {
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: [item] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			/**
			 * 上一步
			 */
			choicemer() {
				uni.pageScrollTo({
					scrollTop: 0
				})
				if (this.merchart != 0) {
					this.merchart = this.merchart - 1;
				}
			},
			/**
			 * 下一步
			 */
			gonextstep() {
				uni.pageScrollTo({
					scrollTop: 0
				})
				// 第一步
				if (this.merchart == 0) {
					if (this.currentstatus == 1) {
						this.merchart = 1;
					} else {
						if (!this.ischecked) {
							uni.showToast({
								title: '请勾选',
								icon: "none"
							});
						} else {
							this.merchart = 1;

						}
					}
					return;
				}
				// 第二步
				if (this.merchart == 1) {
					this.merchart = 2;
					return;
				}
				// 第三步
				if (this.merchart == 2) {
					this.merchart = 3;
					return;
				}
				// 第四步
				if (this.merchart == 3) {

					return;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f5f6;
	}

	.firstcz {
		color: #609ded;
		width: 15%;
		text-align: center;
		display: inline-grid;
		justify-content: center;

		.labely {
			width: 40px;
			height: 40px;
			line-height: 40px;
			border-radius: 50%;
			border: 1px solid #007AFF;
		}
	}

	.lineh {
		width: 13.3%;
		height: 1px;
		background-color: #e6e8e7;
	}

	.titlename {
		width: calc(100% - 90upx);
		height: 100upx;
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		padding: 0 45upx;
	}

	.username,
	.password {
		width: calc(100% - 90upx);
		height: 100upx;
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		border-bottom: 1px solid #f6f6f6;
		padding: 8upx 45upx;

		input {
			width: 50%;
			height: 50upx;
			font-size: 16px;
			color: #333333;
			font-weight: blod;
		}

		.get-code {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 7px;
			z-index: 3;
			border: 1px solid #bfbfbf;
			width: 25%;
			padding: 3px 5px;
			border-radius: 22px;

			&:after {
				content: " ";
				width: 1upx;
				height: 50upx;
				position: absolute;
				z-index: 3;
				margin-right: 100%;
				left: 0;
				top: 20upx;
			}
		}

		.namecont {
			color: #666666;
			width: 25%;
		}
	}

	.notes {
		width: calc(100% - 90upx);
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		border-bottom: 1px solid #f6f6f6;
		padding: 20rpx 45rpx;
		color: #bfbfbf;

	}

	.checkboxg {
		width: calc(100% - 90upx);
		display: flex;
		align-items: center;
		padding: 20rpx 45rpx;
	}

	.checbox {
		zoom: 80%;
	}

	.btn {
		color: #FFFFFF;
		background-color: #0083f5;
		width: 90%;
		margin-left: 5%;
		margin-top: 80rpx;
		margin-bottom: 50rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		font-size: 40rpx;
	}

	.onlab {
		color: #0083f5;
		text-align: center;
		font-size: 14px;
	}

	.wybtc {
		width: calc(100% - 90upx);
		display: flex;
		height: 80px;
		align-items: center;
		background-color: #FFFFFF;
		border-bottom: 1px solid #f6f6f6;
		padding: 15rpx 45rpx;
		border-radius: 8px;
		color: #bfbfbf;
	}
</style>
