webapp / GreenwayWeb

<template>
	  <div
	    style="background-color: #fff;min-height: 94vh;"
	  >
	  <div style="height:58px;line-height:58px;padding-left:20px;">
	    <div style="color:#0006"> <span>商城商家管理</span> <span style="padding:0 5px;">></span> <span
	        style="color:#000000e6">查看商家</span></div> 
	  </div>
	    <div style="padding:20px;">
	      <el-tabs
	        v-model="activeName"
	      >
	        <el-tab-pane
	          label="入驻类型"
	          name="0"
	        >
	          <el-form
	            ref="shopDetailsInfo"
	            :model="shopDetails"
	            label-width="120px"
	          >
	            <el-form-item
	              label="商家类型"
	              prop="merchantType"
	            >
	  		  <div >{{shopDetails.merchantType}}</div>
	              
	            </el-form-item>
	            <el-form-item
	              label="经营主体"
	              prop="authenType"
	            >
	  		<div>{{shopDetails.authenType==2?'个体工商户':'企业'}}</div>
	            
	            </el-form-item>
	  
	          </el-form>
	        </el-tab-pane>
	        <el-tab-pane
	          label="开店信息"
	          name="1"
	        >
	          <el-form
	            ref="shopDetailsInfo"
	            :model="shopDetails"
	
	            label-width="120px"
	          >
	  
	            <el-form-item
	              label="店铺名称"
	              prop="shopName"
	            >
	  		    <div >{{shopDetails.shopName}}</div>
	   
	            </el-form-item>
	            <el-form-item
	              label="店铺负责人"
	              prop="chargePersonName"
	            >
	  		   <div >{{shopDetails.chargePersonName}}</div>
	       
	            </el-form-item>
	            <el-form-item
	              label="负责人电话"
	              prop="chargePersonPhone"
	            >
	  		    <div >{{shopDetails.chargePersonPhone}}</div>
	             
	            </el-form-item>
	            <el-form-item
	              label="店铺地址"
	              prop="shopAdress"
	            >
	  		   <div >{{shopDetails.shopAdress}}</div>
	         
	            </el-form-item>
	        
	          </el-form>
	        </el-tab-pane>
	        <el-tab-pane
	          label="主体信息"
	          name="2"
	        >
	        <el-form ref="shopDetailsInfo" :model="shopDetails"   label-width="140px">
	          <el-form-item label="主体名称" prop="principalName" >
	  			  <div >{{shopDetails.principalName}}</div>
	         
	          </el-form-item>
	          <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
	  			<div >{{shopDetails.unifiedSocialCreditCode}}</div>
	       
	          </el-form-item>
	  
	          <el-form-item label="法定代表人" prop="legalRepresentative">
	  			<div >{{shopDetails.legalRepresentative}}</div>
	        
	          </el-form-item>
	          
	          <el-form-item label="注册资本" prop="registeredCapital" >
	  			<div >{{shopDetails.registeredCapital}}</div>
	          
	          </el-form-item>
	          <el-form-item label="成立日期" prop="dateEstablishment">
	          <div >{{shopDetails.dateEstablishment}}</div>
	  		  
	          </el-form-item>
	          <el-form-item label="住所" prop="domicile" >
	  			<div >{{shopDetails.domicile}}</div>
	       
	          </el-form-item>
	          <el-form-item label="邮箱地址" prop="emailAddress">
	  			<div >{{shopDetails.emailAddress}}</div>
	         
	          </el-form-item>
	          <el-form-item label="营业期限" prop="business">
	  			<div >{{shopDetails.businessStartDate}}-{{shopDetails.businessEndDate}}</div>
	            
	          </el-form-item>
	          <el-form-item label="营业执照" prop="businessLicense">
	            <img :src="$baseURL+shopDetails.businessLicense"    style="width:150px;height:150px"/>
	          </el-form-item>
	        </el-form>
	        </el-tab-pane>
	        <el-tab-pane
	          label="经营者信息"
	          name="3"
	        >
	        <el-form ref="shopDetailsInfo" :model="shopDetails"   label-width="140px">
	          <el-form-item label="客户级别" prop="customerLevel">
	  			<div >{{shopDetails.customerLevel}}</div>
	            
	          </el-form-item>
	          <el-form-item label="证件类型" prop="certificateType">
	  			<div >{{shopDetails.certificateType=='6'?'身份证':''}}</div>
	            
	          </el-form-item>
	          <el-form-item label="身份证号码"  prop="idCardNum">
	  			<div >{{shopDetails.idCardNum}}</div>
	            
	          </el-form-item>
	          <el-form-item label="身份证有效期"  prop="plan_Time">
	  			<div >{{shopDetails.validityStartDate}}-{{shopDetails.validityEndDate}}</div>
	            
	          </el-form-item>
	          <el-form-item label="身份证照片(正面)" prop="cardPhotoFront">
	            <img :src="$baseURL+shopDetails.cardPhotoFront" alt=""   style="width:150px;height:150px"/>
	            
	  		  
	          </el-form-item>
	          <el-form-item label="身份证照片(反面)" prop="cardPhotoBack">
	            <img :src="$baseURL+shopDetails.cardPhotoBack" alt=""   style="width:150px;height:150px"/>
	        
	  		  
	          </el-form-item>
	          <el-form-item label="是否为法人" prop="legalEntity">
	  			<div >{{shopDetails.legalEntity}}</div>
	            
	          </el-form-item>
	          <el-form-item label="企业授权书" prop="enterpriseAuthorizationLetter">
	            <img :src="$baseURL+shopDetails.enterpriseAuthorizationLetter" alt=""   style="width:150px;height:150px"/>
	          </el-form-item>
	        </el-form>
	        </el-tab-pane>
	        <el-tab-pane
	          label="账号"
	          name="4"
	        >
	        <el-form
	          ref="shopDetails"
	          :model="shopDetails"
	   
	          label-width="100px"
	        >
	          <el-form-item
	            label="账号"
	            prop="shopPhone"
	          >
	  		<div >{{shopDetails.shopPhone}}</div>

	           
	          </el-form-item>
	          <!-- <el-form-item
	            label="密码"
	            prop="shopPassword"
	          >
	  		<div >{{mimaShow?shopDetails.shopPassword:'**********'}} <span style="margin-left: 20px;" @click="mimaShow=!mimaShow"><i class="el-icon-view"></i></span></div>
	           
	          </el-form-item> -->
	        </el-form>
	        </el-tab-pane>
	        
	      </el-tabs>
	    </div>
		<div style="padding:0 20px;">
			
			  <el-form
			    ref="shopDetails"
			    :model="addForm"
			    label-width="80px"
			  >
			  <el-form-item
			    label="审核状态"
          v-if="flag"
			  >
			 <el-radio-group v-model="liuYe">
			     <el-radio :label="1">通过</el-radio>
			     <el-radio :label="0">不通过</el-radio>
			   </el-radio-group>
			  </el-form-item>
			  
			    <el-form-item
			      v-if="liuYe == 2&&flag"
			      label="拒绝原因"
            
			    >
			      <el-input
			        v-model="addForm.reason"
			        type="textarea"
			      />
			    </el-form-item>
			    <el-form-item
			      v-if="liuYe == 1&&flag"
			      label="生效日期"
			    >
			      <el-radio-group v-model="addForm.effectiveDate">
			        <el-radio label="null">即时生效</el-radio>
			        <el-radio label="0">指定日期</el-radio>
			      </el-radio-group>
			    </el-form-item>
			    <el-form-item
			     v-if="addForm.effectiveDate == 0 && liuYe  == 1 && flag"
			    >
			      <el-date-picker
			        v-model="chooseDate"
			        value-format="yyyy-MM-dd"
			        type="date"
			        placeholder="选择日期"
			      />
			    </el-form-item>
			    <el-form-item
			      label="生效时间"
			      v-if="liuYe  == 1 && flag"
			    >
			      <el-input
			        v-model="addForm.effectiveYear"
			        type="number"
			        oninput="value=value.replace(/[^\d]/g,'')"
			        class="spanIpt"
			      />
			      <span class="riSpan">年</span>
			    </el-form-item>
			  </el-form>
		</div>
	    <div	
	      slot="footer"
	      class="dialog-footer"
	  	style="padding: 0 20px 20px 20px;"
	    >
	      <el-button @click="back"
	      class="buttonHover"
	        style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
	      >取 消</el-button>
	      <el-button
	        @click="handle_save"
	        style="background-color: #3F9B6A;color: #fff;"
	      >确 定</el-button>
	    </div>

	  </div>
	  
 <!-- <div style="padding:10px 20px;">
         <div style="display: flex;justify-content: space-between;border-bottom: 1px solid #E5E5E5;padding: 0 0 10px 0;">
            <div style="display: flex;align-items: center;">
                <div style="margin-right: 10px;">代办任务</div>
                <div style="background-color: #E8F6F3;padding: 5px;margin-right: 10px;font-size:12px;color:#56AC83;border-radius: 3px;">发起人：</div>
                <div style="background-color: #E8F6F3;padding: 5px;margin-right: 10px;font-size:12px;color:#56AC83;border-radius: 3px;">任务节点：部门领导审批</div>
              </div>
              <div style="margin-right:20px ">
                <el-button  style="background-color: #3F9B6A;color: #fff;" @click="back">关闭</el-button>
              </div>
            </div>
            <div style="padding:20px 15px 15px 15px;">
                 <el-tabs v-model="actCard" >
                    <el-tab-pane label="表单信息" name='1'>
                      <div style="margin:0 0 10px 30%">商家名称 {{shopDetails.shopName}}</div>
                      <div style="margin:15px 0;padding:0 20%; padding-bottom:20px;border-bottom: 1px solid #E1EEEF;">
                        <el-button @click="MsgShen(1)"  style="background-color: #3F9B6A;color: #fff;">基本信息查看</el-button>
                        <el-button  @click="MsgShen(2)"  style="background-color: #3F9B6A;color: #fff;">主体信息查看</el-button>
                        <el-button  @click="MsgShen(3)" style="background-color: #3F9B6A;color: #fff;">经营者信息查看</el-button>
                        <el-button  @click="MsgShen(4)" style="background-color: #3F9B6A;color: #fff;">账号查看</el-button>
                      </div>
                      <div style="padding:20px 0;display:flex;justify-content:flex-end;" v-if="shopDetails.checkState === 0">
                        <el-button icon="el-icon-edit"  @click="LiuYes(1)"
                          style="background-color: #3F9B6A;color: #fff;">同意</el-button>
                    
                            <el-button icon="el-icon-circle-close"  @click="LiuYes(0)"
                              style="background-color: #3F9B6A;color: #fff;">驳回</el-button>
                      </div>
                      <el-dialog
                           width="60%"
                          title="审批信息"
                          custom-class='liucheng_css'
                           :visible.sync="MsgSp"
                           append-to-body>
                           <div style="padding:30px 20px 0 20px">
                                 <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 1">
                                   <div style="padding: 10px 13px;font-size: 12px;border-bottom: 1px solid #E5E5E5;">
                                    基本信息
                                   </div>
                                   <div style="padding: 15px;">
                                     <el-form  label-position="top"  :model="shopDetails"  label-width="120px"
                                       style="position: relative">
                                       <el-row :gutter="20">
                                         <el-col :span="8">
                                           <el-form-item label="店铺名称" class="grid-content bg-purple device-from" prop="planName">
                                             <el-input v-model="shopDetails.shopName" placeholder=""  disabled/>
                                           </el-form-item>
                                         </el-col>
                                         <el-col :span="8">
                                           <el-form-item label="商家类型" class="grid-content bg-purple" prop="planType">
                                             <el-select v-model="shopDetails.merchantType" placeholder="请选择" :disabled="shopDetails.merchantType!=''" style="width: 100%" >
                                               <el-option label="线上商家" value="线上商家"></el-option>
                                               <el-option label="实体商家" value="实体商家"></el-option>
                                             </el-select>
                                           </el-form-item>
                                         </el-col>
                                         <el-col :span="8">
                                           <el-form-item label="店铺地址" class="grid-content bg-purple" prop="eventAddrs">
                                             <el-input v-model="shopDetails.shopAdress" placeholder="" disabled/>
                                           </el-form-item>
                                         </el-col>
                                       </el-row>
                                       <el-row :gutter="20">
                                         <el-col :span="8">
                                           <el-form-item
                                             label="经营主体"
                                             prop="empiricalSubject"
                                             class="grid-content bg-purple"
                                           >
                                           <el-select
                                             v-model="shopDetails.empiricalSubject"
                                             disabled
                                           >

                                             <el-option label="个人" value="1" />
                                             <el-option label="个体工商户" value="2" />
                                             <el-option label="企业" value="3" />
                                             <el-option label="其他组织" value="4" />
                                           </el-select>
                                           </el-form-item>
                                         </el-col>
                                       </el-row>
                                     </el-form>
                                   </div>
                                 </div>
                                 <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 2">
                                   <div style="padding: 10px 13px;font-size: 12px;border-bottom: 1px solid #E5E5E5;display: flex;">
                                   <div>主体信息</div>
                                   </div>
                                   <div style="padding: 15px;">
                                     <el-form  label-position="top"  :model="shopDetails"  label-width="120px"
                                       style="position: relative">
                                       <el-row :gutter="20">
                                         <el-col :span="8">
                                           <el-form-item label="主体名称" class="grid-content bg-purple" prop="subjectName">
                                             <el-input v-model="shopDetails.subjectName"  disabled/>
                                           </el-form-item>
                                  
                                         </el-col>
                                         <el-col :span="8">
                                           <el-form-item label="负责人电话" class="grid-content bg-purple" prop="chargePersonPhone">
                                             <el-input v-model="shopDetails.chargePersonPhone " placeholder=""  disabled/>
                                           </el-form-item>
                                 
                                         </el-col>
                                         <el-col :span="8">
                                           <el-form-item label="统一社会信用代码" class="grid-content bg-purple" prop="subjectCode">
                                             <el-input v-model="shopDetails.subjectCode " placeholder=""  disabled/>
                                           </el-form-item>
                                         </el-col>
                                       </el-row>
                                       <el-row :gutter="20">

                                         <el-col :span="8">
                                           <el-form-item label="法定代表人" class="grid-content bg-purple" prop="legalRepresentative">
                                             <el-input v-model="shopDetails.legalRepresentative" placeholder="" disabled/>
                                           </el-form-item>
                                         </el-col>
                                         <el-col :span="8">
                                           <el-form-item label="经营范围" class="grid-content bg-purple" prop="businessScope">
                                             <el-input v-model="shopDetails.businessScope"  disabled/>
                                           </el-form-item>
                                         </el-col>
                                         <el-col :span="8">
                                           <el-form-item label="注册资本" class="grid-content bg-purple" prop="registeredCapital">
                                             <el-input v-model="shopDetails.registeredCapital " placeholder=""  disabled/>
                                           </el-form-item>
                                         </el-col>
                                       </el-row>
                                       <el-row :gutter="20">

                                         <el-col :span="8">
                                           <el-form-item label="成立日期" class="grid-content bg-purple" prop="dateEstablishment">
                                             <el-input v-model="shopDetails.dateEstablishment" placeholder="" disabled/>
                                           </el-form-item>
                                         </el-col>
                                         <el-col :span="8">
                                           <el-form-item label="住所" class="grid-content bg-purple" prop="adress">
                                             <el-input v-model="shopDetails.adress"  disabled/>
                                           </el-form-item>
                                         </el-col>
                                         <el-col :span="8">
                                           <el-form-item label="邮箱地址" class="grid-content bg-purple" prop="emailAddress">
                                             <el-input v-model="shopDetails.emailAddress"  disabled/>
                                           </el-form-item>
                                         </el-col>
                                       </el-row>
                                       <el-row :gutter="20">

                                         <el-col :span="8">
                                           <el-form-item label="营业期限" class="grid-content bg-purple" prop="subjectStartTime">
                                             
                                             {{shopDetails.subjectStartTime}}-{{shopDetails.subjectEndTime}}
                                           </el-form-item>
                                         </el-col>
                                         <el-col :span="8">
                                           <el-form-item label="营业执照" class="grid-content bg-purple" prop="subjectLicense">
                                             <img :src="shopDetails.subjectLicense" alt=""   style="width:150px;height:150px"/>
                                           </el-form-item>
                                         </el-col>

                                       </el-row>
                                     </el-form>
                                   </div>
                                 </div>
                                 <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 3">
                                   <div style="padding: 10px 13px;font-size: 12px;border-bottom: 1px solid #E5E5E5;display: flex;">
                                   <div>经营者信息</div>
                                   </div>
                                   <div style="padding: 15px;">
                                     <div style="">
                                       <el-form  label-position="top"  :model="shopDetails" label-width="120px"
                                         style="position: relative">
                                         <el-row :gutter="20">
                                           <el-col :span="8">
                      
                                             <el-form-item label="客户级别" class="grid-content bg-purple device-from"  prop="customerLevel">
                                               <el-select
                                                 v-model="shopDetails.customerLevel"
                                                 disabled
                                               >
                                                 <el-option label="A" value="A" />
                                                 <el-option label="B" value="B" />
                                                 <el-option label="C" value="C" />
                                               </el-select>
                                             </el-form-item>
                                           </el-col>
                                           <el-col :span="8">
                          
                                             <el-form-item label="证件类型" class="grid-content bg-purple device-from"  prop="contentStyle">
                            
                                               <el-input v-model="shopDetails.contentStyle" placeholder="" disabled/>
                                             </el-form-item>
                                           </el-col>

                                           <el-col :span="8">
                              
                                             <el-form-item label="身份证号码" class="grid-content bg-purple" prop="idCard">
                                               <el-input v-model="shopDetails.idCard" placeholder="" disabled/>
                                             </el-form-item>
                                           </el-col>
                                         </el-row>
                                         <el-row :gutter="20">
                                           <el-col :span="8">
                                             <el-form-item label="身份证有效期" class="grid-content bg-purple device-from"
                                               prop="internalLaborCostEstimation">
                                               <el-input v-model="shopDetails.cardTime" placeholder="" disabled/>
                                             </el-form-item>
                                           </el-col>
                                
                                         </el-row>
                                         <el-row :gutter="20">
                                           <el-col :span="8">
                                    
                                             <el-form-item label="身份证照片(正面)" class="grid-content bg-purple" prop="cardPositive">
                                             <img :src="shopDetails.cardPositive" alt=""  style="width:150px;height:150px"/>
                                             </el-form-item>
                                           </el-col>
                                           <el-col :span="8">
                                             <el-form-item label="身份证照片(反面)" class="grid-content bg-purple" prop="cardSide">
                                             <img :src="shopDetails.cardSide" alt=""  style="width:150px;height:150px"/>
                                             </el-form-item>
                                           </el-col>
                                           <el-col :span="8">
                                             <el-form-item label="企业授权书" class="grid-content bg-purple" prop="enterpriseAuthorizationLetter">
                                             <img :src="shopDetails.enterpriseAuthorizationLetter" alt=""  style="width:150px;height:150px"/>
                                             </el-form-item>
                                           </el-col>
                                         </el-row>

                                       </el-form>
                                     </div>
                                   </div>
                                 </div>
                                <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index ==4">
                                  <div style="padding: 10px 13px;font-size: 12px;border-bottom: 1px solid #E5E5E5;display: flex;">
                                  <div>账号</div>
                                  </div>
                                  <div style="padding: 15px;">
                                    <div style="">
                                          <el-form
                                            :model="shopDetails"
                                            label-width="120px"
                                          >
                                            <el-form-item
                                              label="账号"
                                              prop="shopPhone"
                                            >
                                              <el-input
                                                v-if="shopPhoneShow"
                                                :value="hidden(shopDetails.shopPhone, 3, 4)"
                                                disabled
                                                maxlength="20"
                                                @focus="focusShopPhoneInput"
                                              />
                                              <el-input
                                                v-else
                                                ref="shopPhoneCls"
                                                v-model="shopDetails.shopPhone"
                                                disabled
                                                maxlength="20"
                                              />
                                            </el-form-item>
                                            <el-form-item
                                              label="密码"
                                              prop="shopPassword"
                                            >
                                              <el-input
                                                v-model="shopDetails.shopPassword"
                                                type="password"
                                                disabled
                                                maxlength="20"
                                              />
                                            </el-form-item>
                                          </el-form>

                                    </div>
                                  </div>
                                </div>
                           </div>
                           <div style="display:flex;justify-content: flex-end;padding:20px;">
                             <el-button   @click="MsgSp=false"
                             class="buttonHover"
                               style="background-color: #3F9B6A;color: #fff;">返回</el-button>
                           </div>
                         </el-dialog>
                       <el-dialog
                            width="40%"
                            title="流程审批"
                            custom-class='liucheng_css'
                            :visible.sync="Liunie"
                            :close-on-click-modal="false" :close-on-press-escape="false" :show-close='false'
                            append-to-body>
                            <div style="padding:30px 20px 0 20px">
                              <el-form
                                ref="shopDetails"
                                :model="addForm"
                                label-width="80px"
                              >
                                <el-form-item
                                  v-if="liuYe == 2"
                                  label="拒绝原因"
                                >
                                  <el-input
                                    v-model="addForm.reason"
                                    type="textarea"
                                  />
                                </el-form-item>
                                <el-form-item
                                  v-if="liuYe == 1"
                                  label="生效日期"
                                >
                                  <el-radio-group v-model="addForm.effectiveDate">
                                    <el-radio label="null">即时生效</el-radio>
                                    <el-radio label="0">指定日期</el-radio>
                                  </el-radio-group>
                                </el-form-item>
                                <el-form-item
                                 v-if="addForm.effectiveDate == 0 && liuYe  == 1"
                                >
                                  <el-date-picker
                                    v-model="chooseDate"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    placeholder="选择日期"
                                  />
                                </el-form-item>
                                <el-form-item
                                  label="生效时间"
                                  v-if="liuYe  == 1"
                                >
                                  <el-input
                                    v-model="addForm.effectiveYear"
                                    type="number"
                                    oninput="value=value.replace(/[^\d]/g,'')"
                                    class="spanIpt"
                                  />
                                  <span class="riSpan">年</span>
                                </el-form-item>
                              </el-form>
                            </div>
                            <div style="display:flex;justify-content: flex-end;padding:20px;">
                              <el-button   @click="Liunie=false"
                                style="background-color: #3F9B6A;color: #fff;">取消</el-button>
                                <el-button   @click="handle_save"
                                  style="background-color: #3F9B6A;color: #fff;">确定</el-button>
                            </div>
                          </el-dialog>
                    </el-tab-pane>
                    <el-tab-pane label="流转记录" name="2">
                      <div style="">
                        <el-steps direction="vertical" :active="0" class="shen_steps1">
                          <el-step>
                            <template slot="title">
                              <div style="font-size: 12px;font-weight: 600;">部门领导审批</div>
                                 </template>
                             <template slot="description">
                               <div style="margin-bottom:10px;padding:10px;border:1px solid #EBEEF5;width:50%">
                                      <div>
                                        <el-descriptions class="margin-top" :column="1"  border>
                                            <el-descriptions-item>
                                              <template slot="label">
                                                <i class="el-icon-user"></i>
                                                办理人
                                              </template>

                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                              <template slot="label">
                                                <i class="el-icon-mobile-phone"></i>
                                                接收时间
                                              </template>

                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                              <template slot="label">
                                                <i class="el-icon-mobile-phone"></i>
                                                处理时间
                                              </template>

                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                              <template slot="label">
                                                <i class="el-icon-mobile-phone"></i>
                                                处理意见
                                              </template>

                                            </el-descriptions-item>
                                          </el-descriptions>
                                      </div>
                               </div>
                               </template>
                          </el-step>
                          <el-step>
                            <template slot="title">
                              <div style="font-size: 12px;font-weight: 600;">公司领导审批</div>
                                 </template>
                            <template slot="description">
                              <div style="margin-bottom:10px;padding:10px;border:1px solid #EBEEF5;width:50%">
                                     <div>
                                       <el-descriptions class="margin-top" :column="1"  border>
                                           <el-descriptions-item>
                                             <template slot="label">
                                               <i class="el-icon-user"></i>
                                               办理人
                                             </template>

                                           </el-descriptions-item>
                                           <el-descriptions-item>
                                             <template slot="label">
                                               <i class="el-icon-mobile-phone"></i>
                                               接收时间
                                             </template>

                                           </el-descriptions-item>
                                           <el-descriptions-item>
                                             <template slot="label">
                                               <i class="el-icon-mobile-phone"></i>
                                               处理时间
                                             </template>

                                           </el-descriptions-item>
                                           <el-descriptions-item>
                                             <template slot="label">
                                               <i class="el-icon-mobile-phone"></i>
                                               处理意见
                                             </template>

                                           </el-descriptions-item>
                                         </el-descriptions>
                                     </div>
                              </div>
                              </template>
                          </el-step>
                          <el-step>
                            <template slot="title">
                              <div style="font-size: 12px;font-weight: 600;">其他审批</div>
                                 </template>
                                 <template slot="description">
                                   <div style="margin-bottom:10px;padding:10px;border:1px solid #EBEEF5;width:50%">
                                     <div>
                                       <el-descriptions class="margin-top" :column="1"  border>
                                           <el-descriptions-item>
                                             <template slot="label">
                                               <i class="el-icon-user"></i>
                                               办理人
                                             </template>

                                           </el-descriptions-item>
                                           <el-descriptions-item>
                                             <template slot="label">
                                               <i class="el-icon-mobile-phone"></i>
                                               接收时间
                                             </template>

                                           </el-descriptions-item>
                                         </el-descriptions>
                                     </div>

                                   </div>
                                   </template>
                          </el-step>
                        </el-steps>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="流程图" name="3">
                      <div style="height:120px;width:70%;margin-left:18%;margin-top: 78px;">
                         <el-steps :active="0" class="liu_steps">
                           <el-step  class="step_start">
                             <template slot="icon">
                     
                                 </template>
                           </el-step>
                           <el-step  class="step_buen">
                             <template slot="icon">
                               <div >
                                  <div>部门领导审批</div>
                               </div>
                                 </template>
                           </el-step>
                           <el-step  class="step_buen">
                             <template slot="icon">
                               <div>
                                  <div>公司领导审批</div>
                               </div>
                                 </template>
                           </el-step>
                           <el-step  class="step_buen">
                             <template slot="icon">
                               <div>
                                  <div>其他审批</div>
                               </div>
                                 </template>
                           </el-step>
                           <el-step class="step_start">
                            <template slot="icon">

                                 </template>
                           </el-step>
                         </el-steps>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
            </div>
    </div> -->
    <!-- 卡片 -->
    <!-- <div v-if="shopDetails.checkState !== 0">审核信息</div> -->
    <!-- <div v-if="shopDetails.checkState === 0">
      <el-form
        ref="shopDetails"
        :model="addForm"
        label-width="80px"
      >
        <el-form-item label="入驻处理">
          <el-radio-group
            v-model="addForm.checkHandle"
            @change="selectChoose"
          >
            <el-radio label="1">同意入驻</el-radio>
            <el-radio label="0">拒绝入驻</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="addForm.checkHandle == 0"
          label="审核意见"
        >
          <el-input
            v-model="addForm.reason"
            type="textarea"
          />
        </el-form-item>
        <el-form-item
          v-if="addForm.checkHandle == 1"
          label="生效日期"
        >
          <el-radio-group v-model="addForm.effectiveDate">
            <el-radio label="null">即时生效</el-radio>
            <el-radio label="0">指定日期</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="addForm.effectiveDate == 0 && addForm.checkHandle == 1"
        >
          <el-date-picker
            v-model="chooseDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item
          v-if="addForm.checkHandle == 1"
          label="生效时间"
        >
          <el-input
            v-model="addForm.effectiveYear"
            type="number"
            oninput="value=value.replace(/[^\d]/g,'')"
            class="spanIpt"
          />
          <span class="riSpan">年</span>
        </el-form-item>
      </el-form>
      <el-button
        class=""
        @click="back"
      >取消
      </el-button>
      <el-button
        @click="handle_save"
      >确 定</el-button>
    </div> -->
    <!-- <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span
          v-if="shopDetails.checkState === 2"
          class="leftTitle"
        >已拒绝</span>
        <span
          v-if="shopDetails.checkState === 1"
          class="leftTitle"
        >已通过</span>
        <span
          v-if="shopDetails.checkState === 0"
          class="leftTitle"
        >未处理</span>
        <div class="girhtBtn">
          <el-button
            class=""
            @click="back"
          >取消
          </el-button>
          <el-button
            v-if="shopDetails.checkState === 0"
            type="primary"
            @click="handle"
          >处理
          </el-button>
        </div>
      </div>

      <div>
        <div class="msgDetail">
          <div class="detail">
            <div class="shop_info">
              <p class="detail_title">店铺信息</p>
              <p class="detail_text">
                <span>
                  <font>*</font>店铺名称：
                </span>
                <span>{{ shopDetails.shopName }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>店铺类型：
                </span>
                <span v-if="shopDetails.authenType == 1">个人</span>
                <span v-if="shopDetails.authenType == 2">个体工商户</span>
                <span v-if="shopDetails.authenType == 3">企业</span>
                <span v-if="shopDetails.authenType == 4">其他组织</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>
                  客服电话：
                </span>
                <span>{{ shopDetails.shopPhone }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>店铺负责人：
                </span>
                <span>{{ shopDetails.chargePersonName }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>负责人电话：
                </span>
                <span>{{ shopDetails.chargePersonPhone }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>店铺地址：
                </span>
                <span>{{ shopDetails.shopAdress }}</span>
              </p>
            </div>
            <div class="person_info">
              <p class="detail_title">个人信息</p>
              <p class="detail_text">
                <span>
                  <font>*</font>名称：
                </span>
                <span>{{ shopDetails.name }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>证件信息：
                </span>
                <span>{{ shopDetails.cardTypeName }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>身份证号码：
                </span>
                <span>{{ shopDetails.idCard }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>身份证有效期：
                </span>
                <span>{{ shopDetails.cardTime }}</span>
              </p>
              <p class="detail_img">
                <span>
                  <font>*</font>证件照片:
                </span>
                <el-image
                  v-for="(src, index) in idCardCopyFilePath"
                  :key="'id' + index"
                  class="img_box"
                  :preview-src-list="idCardCopyFilePath"
                  :src="src"
                  :preview="2"
                  alt=""
                />
              </p>
              <p
                v-if="shopDetails && shopDetails.authenType === 1"
                class="detail_img"
              >
                <span>
                  <font>*</font>手持证件照:
                </span>
                <el-image
                  class="img_box"
                  :src="shopDetails.cardHand"
                  :preview-src-list="[shopDetails.cardHand]"
                />
              </p>
            </div>

            <div
              v-if="shopDetails.authenType !== 1"
              class="person_info"
            >
              <p class="detail_title">主体信息</p>
              <p class="detail_text">
                <span v-if="shopDetails.authenType == 2"><font>*</font> 商户名称：</span>
                <span v-if="shopDetails.authenType == 3"><font>*</font> 企业名称：</span>
                <span v-if="shopDetails.authenType == 4"><font>*</font> 组织名称：</span>
                <span>{{ shopDetails.subjectName }}</span>
              </p>
              <p class="detail_text">
                <span><font>*</font> {{ shopDetails.authenType == 4 ? '组织机构代码' : '社会信用代码' }}：</span>
                <span>{{ shopDetails.subjectCode }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>注册地址
                </span>
                <span>{{ shopDetails.subjectAdress }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>营业期限
                </span>
                <span>{{ shopDetails.subjectStartTime }} - {{ shopDetails.subjectEndTime }}</span>
              </p>
              <p class="detail_img">
                <span>
                  <font>*</font>{{ shopDetails.authenType == 4 ? '机构证明材料' : '营业执照' }}：
                </span>
                <img
                  v-for="(src, index) in shopDetails.subjectLicense"
                  :key="'id' + index"
                  :src="src"
                  :preview="2"
                  alt=""
                >
              </p>
            </div>
            <div class="person_info">
              <p class="detail_title">授权信息</p>
              <p class="detail_text">
                <span>
                  <font>*</font>生效日期：
                </span>
                <span>{{ shopDetails.effectiveDate }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>生效时限：
                </span>
                <span>{{ shopDetails.effectiveYear }}</span>
                <span v-if="shopDetails.effectiveYear">年</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </el-card> -->

    <!-- *************对话框开始************* -->
    <!-- <el-dialog
      title="处理申请"
      :visible.sync="addFormDialog"
      width="30%"
      center
      :show-close="false"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :modal="false"
    >
      <div>
        <el-form
          ref="shopDetails"
          :model="addForm"
          label-width="80px"
        >
          <el-form-item label="入驻处理">
            <el-radio-group
              v-model="addForm.checkHandle"
              @change="selectChoose"
            >
              <el-radio label="1">同意入驻</el-radio>
              <el-radio label="0">拒绝入驻</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="addForm.checkHandle == 0"
            label="拒绝原因"
          >
            <el-input
              v-model="addForm.reason"
              type="textarea"
            />
          </el-form-item>
          <el-form-item
            v-if="addForm.checkHandle == 1"
            label="生效日期"
          >
            <el-radio-group v-model="addForm.effectiveDate">
              <el-radio label="null">即时生效</el-radio>
              <el-radio label="0">指定日期</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="addForm.effectiveDate == 0 && addForm.checkHandle == 1"
          >
            <el-date-picker
              v-model="chooseDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item
            v-if="addForm.checkHandle == 1"
            label="生效时间"
          >
            <el-input
              v-model="addForm.effectiveYear"
              type="number"
              oninput="value=value.replace(/[^\d]/g,'')"
              class="spanIpt"
            />
            <span class="riSpan">年</span>
          </el-form-item>
        </el-form>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="addFormDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handle_save"
        >确 定</el-button>
      </span>
    </el-dialog> -->

</template>

<script>
import { settlementHandle } from '@/api/business'
import { hidden } from '@/utils'

export default {
  props: {
    businessData: {
      type: Object,
      default: () => ({})
    },
    flag:{
      type: Boolean,
      default:false
    }
  },
  data() {
    // 这里存放数据
    return {
      shopId: '',
      shopDetails: {},
      addFormDialog: false,
      idCardCopyFilePath: [],
      chooseDate: '',
      addForm: {
        merchantType:'',
        shopId: '', // 店铺id
        checkHandle: '', // 1-同意入驻 0-拒绝入驻
        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
        effectiveYear: '', // 生效时限（年）
        reason: '' // 处理原因
      },
      actCard:'1',
      liuYe:1,//通过or驳回
      Liunie:false,
      index:1,
      MsgSp:false,
      shopPhoneShow: true ,// 是否显示脱敏账号
	  activeName:'0',
	  mimaShow:false
	  
    }
  },
  watch: {
    businessData: {
      handler(nVal, oVal) {
        this.shopDetails = {}
        this.idCardCopyFilePath = []
        this.shopId = nVal.shopId
        this.shopDetails = nVal
        this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
        this.idCardCopyFilePath.push(nVal.cardPositive)
        this.idCardCopyFilePath.push(nVal.cardSide)
      }
    }
  },
  created() {
    this.shopDetails = {}
    this.idCardCopyFilePath = []
    this.shopId = this.businessData.shopId
    this.shopDetails = this.businessData
    this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
    this.idCardCopyFilePath.push(this.businessData.cardPositive)
    this.idCardCopyFilePath.push(this.businessData.cardSide)
  },
  // 方法集合
  methods: {
    // 处理
    handle() {
      this.addFormDialog = true
    },
    // 返回
    back() {
      this.$emit('cancel')
    },
    // selectChoose
    selectChoose(index) {
      if (index !== 1) {
        this.addForm.effectiveDate = ''
        this.addForm.effectiveYear = ''
        this.chooseDate = ''
      }
    },
    clearAddForm() {
      this.addForm = {
        shopId: '', // 店铺id
        checkHandle: '', // 1-同意入驻 0-拒绝入驻
        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
        effectiveYear: '', // 生效时限（年）
        reason: '' // 处理原因
      }
    },
    // 处理申请确定
    async handle_save() {
      // if (this.addForm.checkHandle === '') {
      //   this.$message.error('请选择入驻处理')
      //   return
      // }
	  this.addForm.checkHandle = this.liuYe 
      if (this.addForm.effectiveDate === '' && this.addForm.checkHandle === 1) {
        this.$message.error('请选择生效日期')
        return
      }
      if (this.addForm.effectiveYear === '' && this.addForm.checkHandle === 1) {
        this.$message.error('请输入生效时间')
        return
      }
      if (this.addForm.effectiveDate !== 'null') {
        this.addForm.effectiveDate = this.chooseDate
      } else {
        this.addForm.effectiveDate = 'null'
      }
      this.addForm.shopId = this.shopId
      const loading = this.$loading({
        lock: true,
        text: '处理中请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
       this.addForm.merchantType  = this.shopDetails.merchantType
      const res = await settlementHandle(this.addForm)
      this.addFormDialog = false
      if (res.code === '') {
        this.shopDetails = {}
        this.idCardCopyFilePath = []
        this.$message({
          message: '处理成功',
          type: 'success'
        })
        this.mimaShow = false
		 this.activeName = '0' 
        this.clearAddForm()
        this.$emit('cancel')
        this.$emit('search')
      } else {
        console.log('error')
      }
      loading.close()
    },
    LiuYes(val){
      this.liuYe = val
      this.Liunie = true
      this.addForm.checkHandle =val

    },
    MsgShen(val){
       this.index = val
       this.MsgSp =true
    },
    // 中间部分
    hidden (str, frontLen, endLen) {
      let endLenData = 0
      console.log('中间部分',str)
      if (str.length !== 2) {
        endLenData = endLen
      }
      const len = str.length - frontLen - endLenData
      let xing = ''
      for (let i = 0; i < len; i++) {
        xing += '*'
      }
      return (
        str.substring(0, frontLen) + xing + str.substring(str.length - endLenData)
      )
    },
    focusShopPhoneInput () {
      this.shopPhoneShow = false
      this.shopDetails.shopPhone = ''
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs.shopPhoneCls.focus()
      })
    },
  }
}
</script>
<style
  lang="scss"
  scoped
>
//@import url(); 引入公共css类
.clearfix {
  .leftTitle {
    font-size: 24px;
    color: #333333;
  }

  .girhtBtn {
    float: right;
  }
}

.detail {
  min-height: 500px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
  border-radius: 4px;
  padding: 1px 50px 20px;
  margin-top: 15px;

  .detail_title {
    font-size: 24px;
    color: #333333;
    position: relative;
    margin: 50px 20px 20px;

    font {
      color: #ff7911;
    }

    &:before {
      content: "";
      display: block;
      position: absolute;
      top: 5px;
      left: -20px;
      width: 4px;
      height: 24px;
      background-color: #3a68f2;
    }
  }

  .detail_text {
    line-height: 40px;

    span {
      display: inline-block;
      color: #333333;
      font-size: 16px;

      &:nth-child(1) {
        width: 150px;
        text-indent: 20px;

        font {
          color: red;
        }
      }

      &:nth-child(2) {
        color: #666666;
      }
    }
  }

  .detail_img {
    position: relative;
    line-height: 40px;
    margin-bottom: 30px;
    overflow: hidden;

    span {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      color: #333333;
      font-size: 16px;
      width: 150px;
      text-indent: 20px;

      font {
        color: #ff7911;
      }
    }

    .img_box {
      width: 265px;
      height: 170px;
      border-radius: 4px;
      float: left;

      &:nth-of-type(1) {
        margin: 0 30px 0 150px;
      }
    }
  }
}

.spanIpt {
  width: 60%;
}

.riSpan {
  margin-left: 10px;
}
</style>
<style lang="scss" scoped>
  ::v-deep .souTabs {
    padding:0 15px 0 12px;
    .el-submenu{
      padding:0px;
    }
    .el-menu-item:focus, .el-menu-item:hover{
      background-color: #3F9B6A !important;
    }
    .el-menu-item:hover{
      background-color:#3f9b6a1a !important;
      color:#000 !important;
    }
    .el-tabs--left .el-tabs__header.is-left {
      width: 100%;
      margin-right: 0px;
    }

    .el-tabs--left .el-tabs__item.is-left {
      text-align: center;
    }

    .el-tabs__item.is-active {
      background-color: #DEEBE2;
    }
  }
  ::v-deep .shen_steps1 {
   .is-process { /* 待执行步骤颜色 */
     color: #3F9B6A;
     border:none;
      .el-step__icon{
         background-color: #3F9B6A;
      }
      .el-step__icon-inner{
        color:#fff;
      }
      .el-step__line{
        background-color: #3F9B6A;
      }

  }
 .is-finish{
    color: #3F9B6A;
    border:none;
    .el-step__icon{
       background-color: #3F9B6A;
    }
    .el-step__icon-inner{
      color:#fff;
    }
    .el-step__line{
      background-color: #3F9B6A;
    }
  }

}

::v-deep .liu_steps{
  .step_start{
    flex-basis:15% !important;
    .is-finish{
      border: none;
       color: #3F9B6A;
       .el-step__icon{
          background-color: #D3E6CC;
       }
       .el-step__icon .is-text{
         border: 2px solid #3F9B6A;
       }
       .el-step__icon-inner{
         display: none;
       }
       .el-step__line{
         border-color: #3F9B6A;
       }
     }
     .is-wait{

            border: none;
             color: #000;
             .el-step__icon{
                background-color: #fff;
             }
             .el-step__icon .is-text{
               border: 2px solid #000;
             }
             .el-step__icon-inner{
               display: none;
             }
             .el-step__line{
               background-color: #000;
             }

     }
 .is-process{
      border: none;
       color: #000;
       .el-step__icon{
          background-color: #fff;
       }
       .el-step__icon .is-text{
         border: 2px solid #000;
       }
       .el-step__icon-inner{
         display: none;
       }
       .el-step__line{
         background-color: #000;
       }
     }
  }
  .step_buen{
    flex-basis:25% !important;
      .is-process{
        .el-step__icon{
          padding: 10px;
            border-radius:10px;
            width:120px;
            height:70px;
            margin-top:-24px;
            position: relative;
          border: 2px solid #FABB41;
          font-size: 12px;
        }
        .el-step__icon .is-text{
            padding: 10px;
            border-radius:10px;
          border: 2px solid #FABB41;
          font-size: 12px;
        }
      }
      .is-wait{
        .el-step__icon{
          padding: 10px;
            border-radius:10px;
            width:120px;
            height:70px;
            margin-top:-24px;
            position: relative;
          border: 2px solid #C0C4CC;
          font-size: 12px;
        }
        .el-step__icon .is-text{
            padding: 10px;
            border-radius:10px;
          border: 2px solid #C0C4CC;
          font-size: 12px;
        }
      }
       .is-finish{
         .el-step__icon{
           padding: 10px;
             border-radius:10px;
             width:120px;
             height:70px;
             margin-top:-24px;
             position: relative;
           border: 2px solid #3F9B6A;
           background-color: #D3E6CC;
           font-size: 12px;
           color: #3F9B6A;
         }
         .el-step__icon .is-text{
             padding: 10px;
             border-radius:10px;
           border: 2px solid #3F9B6A;
           font-size: 12px;
         }
         .el-step__line{
           background-color: #3F9B6A;
         }
       }
  }
  ::v-deep .xiang_steps{
   .is-process{ /* 待执行步骤颜色 */
     color: #3F9B6A;
     border:none;
      .el-step__icon{
         background-color: #3F9B6A;
      }
      .el-step__icon-inner{
        color:#fff;
      }
      .el-step__line{
        background-color: #3F9B6A;
      }

  }
 .is-finish{
    color: #3F9B6A;
    border:none;
    .el-step__icon{
       background-color: #3F9B6A;
    }
    .el-step__icon-inner{
      color:#fff;
    }
    .el-step__line{
      border-color: #3F9B6A;
    }
  }


  }
}

 ::v-deep .souTabs {
    .el-submenu{
      padding:0px;
    }
    .el-menu-item:focus, .el-menu-item:hover{
      background-color: #3F9B6A !important;
    }
    .el-menu-item:hover{
      background-color:#3f9b6a1a !important;
      color:#000 !important;
    }
    .el-tabs--left .el-tabs__header.is-left {
      width: 100%;
      margin-right: 0px;
    }

    .el-tabs--left .el-tabs__item.is-left {
      text-align: center;
    }

    .el-tabs__item.is-active {
      background-color: #DEEBE2;
    }
  }

  ::v-deep .tableList {
    width: 74%;

    .el-button:hover {
      border: none
    }
  }
  ::v-deep .actSpye_dialog{
    .dialog__header{
      padding: 0px;
    }
  }
  ::v-deep .el-tabs--border-card {
        border: none;
        -webkit-box-shadow:none;
        box-shadow:none;
    .el-tabs__content{
      border:  1px solid #E4E7ED;
      padding:0;
    }
    .el-tabs__header{
      background-color: #fff;
        border-bottom:none;
    }
    .el-tabs__content{
        border: none;
     }
    .el-tabs__header .el-tabs__item{
      border: none;
      margin-right: 10px;
      background-color: #F2F2F2;
      font-size:12px;
       border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      padding:0 15px;
    }
    .el-tabs__header .el-tabs__item.is-active{
      color:#fff;
      background-color: #3F9B6A;
    }
    .el-tabs__header .el-tabs__item:not(.is-disabled):hover{
       color:#3F9B6A;
    }
  }
  ::v-deep .demo-input-suffix {
    display: flex;
    margin-right: 20px;
    width: 83%;
    .el-input__inner{
       height:32px;
    }
  }
  ::v-deep .buttonHover:hover{
    color:#3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
  ::v-deep .DelBtnHover:hover{
    color:#fff !important;
    border-color: rgb(226, 78, 90) !important;
    background-color: rgb(226, 78, 90) !important;
    outline: none;
  }
  ::v-deep .el-input__icon{
      line-height:25px;
    }
  ::v-deep .el-input--mini .el-input__icon{
      line-height:33px;
    }
::v-deep .el-menu-item.is-active {
    background-color: #3F9B6A !important;
}
::v-deep .el-tabs__nav-wrap::after {
    background-color: #fff;
  }
</style>