<template>
  <div class="full_screen">
    <div class="apply_page">
      <div class="container">
        <div class="apply_content">
          <div class="main_content">
            <div class="apply_content">
				<div style="font-size: 20px;color: #F56C6C;">
					<span>拒绝理由:</span>
					<span>{{refundReason}}</span>
				</div>
              <div class="apply_component">
                <p class="title">店铺信息</p>
                <el-form  @keyup.enter.native="dataFormSubmit()" status-icon>
                  <el-form-item label="店铺名称:" prop="storeName" :label-width="formLabelWidth">
                    <el-input v-model="storeName" disabled placeholder="请输入店铺名称"></el-input>
                  </el-form-item>
                  <el-form-item label="店铺类型:" :label-width="formLabelWidth">
                    <el-select v-model="storeType" placeholder="请选择店铺类型" style="width: 100%;"  @change="selectTrigger(storeType)">
                      <el-option v-for="item in storeTypes" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="客服电话:" prop="serverPhone"  :label-width="formLabelWidth">
                    <el-input v-model="serverPhone" type="serverPhone" placeholder="请输入客服电话"></el-input>
                  </el-form-item>
                  <el-form-item prop="legal" label="店铺负责人:" :label-width="formLabelWidth">
                    <el-input v-model="legal" type="legal" placeholder="请输入店铺负责人姓名"></el-input>
                  </el-form-item>
                  <el-form-item prop="legalPhone" label="负责人电话:" :label-width="formLabelWidth">
                    <el-input v-model="legalPhone" disabled type="legalPhone" placeholder="请输入店铺负责人电话"></el-input>
                  </el-form-item>
                  <el-form-item label="店铺地址:" :label-width="formLabelWidth" style="position: relative;">
                    <span v-if="isspan" style="display: inline-block;width: 40%; position: absolute;top: 4px;left:0;z-index: 99;">{{storeAddress}}</span>
										<el-cascader
                          style="width:100%"
                          size="large"
                          ref="cascaderAddr"
                          :options="options"
                          placeholder=""
                          @change="handleChange">
                    </el-cascader>
                  </el-form-item>
                  <el-form-item label="店铺详细地址:" prop="storeAddressDetail" :label-width="formLabelWidth">
                    <el-input v-model="storeAddressDetail"  placeholder="请输入店铺详细地址"></el-input>
                  </el-form-item>
                  <div v-if="storeType >1">
                    <p class="title">主体信息</p>
                    <el-form-item label="商户名称:" prop="companyName" v-if="storeType == 2" :label-width="formLabelWidth">
                      <el-input v-model="companyName" placeholder="请输入商户名称"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称:" prop="companyName" v-if="storeType == 3" :label-width="formLabelWidth">
                      <el-input v-model="companyName" placeholder="请输入公司名称"></el-input>
                      <!-- <p>需与当地政府颁发的商业许可证书或企业注册证上的企业名称完全一致，信息审核审核成功后，企业名称不可修改</p> -->
                    </el-form-item>
                    <el-form-item label="组织名称:" prop="companyName" v-if="storeType == 4" :label-width="formLabelWidth">
                      <el-input v-model="companyName" placeholder="请输入组织名称"></el-input>
                      <!-- <p>需与当地政府颁发的商业许可证书或企业注册证上的企业名称完全一致，信息审核审核成功后，企业名称不可修改</p> -->
                    </el-form-item>
                    <el-form-item label="营业执照编号:" prop="companyCode" :label-width="formLabelWidth">
                      <el-input v-model="companyCode" placeholder="请输入营业执照编号"></el-input>
                    </el-form-item>
                    <el-form-item label="公司注册地址省:" :label-width="formLabelWidth" style="position: relative;">
                      <span v-if="isspan1" style="position: absolute;top: 5px;left:0;z-index: 99;">{{companyAddress}}</span>
												<el-cascader
                            style="width:100%"
                            size="large"
                            :options="options"
                            ref="cascaderAddr"
                            placeholder="请选择省市区"
                            @change="handleChange1">
                      </el-cascader>
                    </el-form-item>
                    <el-form-item label="公司详细地址:" prop="companyAddressDetail" :label-width="formLabelWidth">
                      <el-input v-model="companyAddressDetail"  placeholder="请输入公司详细地址"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="营业期限:" :label-width="formLabelWidth">
                      <el-date-picker
                        style="width: 100%;"
                        v-model="companyTerm"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item> -->
                    <el-form-item label="营业执照照片:" :label-width="formLabelWidth">
                      <div style="display: inline-block; width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
                      	<el-upload
                      		class="avatar-uploader"
                      		v-model="companyLicenseImg"
action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
                      		:show-file-list="false"
                      		:on-success="handleAvatarSuccess1"
                      		>
                      		<img v-if="companyLicenseImg" :src="companyLicenseImg" class="avatar" style="width: 140px;height: 140px;"/>
                      		<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
                      	</el-upload>
                      </div>
                    </el-form-item>
                  </div>
                  <div>
                    <p class="title">经营者信息</p>
                    <el-form-item label="经营者姓名:" prop="storeHead" :label-width="formLabelWidth">
                      <el-input v-model="storeHead" placeholder="请输入经营者姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="证件类型:" :label-width="formLabelWidth">
                      <el-select v-model="idCardType" placeholder="请选择证件类型" style="width:100%;" @change="selectTrigger(storeType)">
                        <el-option v-for="item in idCardTypes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="身份证号码:" prop="idCardNumber" :label-width="formLabelWidth">
                      <el-input v-model="idCardNumber" placeholder="请输入身份证号码"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="身份证有效期限:" :label-width="formLabelWidth">
                      <el-date-picker
                          style="width:215px;"
                          v-model="idCardValidTimeStart"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="身份证有效期限起始时间">
                      </el-date-picker>
                      <el-date-picker
                          style="width:215px;margin-left:8px;"
                          v-model="idCardValidTimeEnd"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="身份证有效期限截止时间">
                      </el-date-picker>
                    </el-form-item> -->
                    <el-form-item label="证件照片:" :label-width="formLabelWidth">
                      <div style="display: inline-block; width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
                      	<el-upload
                      		class="avatar-uploader"
                      		v-model="idCardImg1"
action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
                      		:show-file-list="false"
                      		:on-success="handleAvatarSuccess2"
                      		>
                      		<img v-if="idCardImg1" :src="idCardImg1" class="avatar" style="width: 140px;height: 140px;"/>
                      		<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
                      	</el-upload>
                      </div>
                      <div style="display: inline-block;margin-left:20%; width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
                      	<el-upload
                      		class="avatar-uploader"
                      		v-model="idCardImg2"
action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
                      		:show-file-list="false"
                      		:on-success="handleAvatarSuccess3"
                      		>
                      		<img v-if="idCardImg2" :src="idCardImg2" class="avatar" style="width: 140px;height: 140px;"/>
                      		<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
                      	</el-upload>
                      </div>
                      <div><span style="text-align: center;margin-right: 20%;width: 148px;display: inline-block;">正面</span> <span style="text-align: center;width: 148px;display: inline-block;">国徽面</span></div>
                    </el-form-item>
                    <el-form-item label="手持证件照:" prop="companyTerm" :label-width="formLabelWidth">
                      <div style="display: inline-block; width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
                      	<el-upload
                      		class="avatar-uploader"
                      		v-model="idCardImg3"
action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
                      		:show-file-list="false"
                      		:on-success="handleAvatarSuccess4"
                      		>
                      		<img v-if="idCardImg3" :src="idCardImg3" class="avatar" style="width: 140px;height: 140px;"/>
                      		<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
                      	</el-upload>
                      </div>
                      <div><span style="width: 148px;text-align: center;">请务必上传高清图片</span></div>
                    </el-form-item>
                  </div>
                  <el-form-item style="text-align:center;">
                    <el-button class="login-btn-submit" style="margin-top:0px;width: 250px;height: 40px;" type="primary" @click="dataFormSubmit()">提交</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getUUID } from '@/utils'
  import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
  export default {
    data () {
      return {
        storeName: '',
        serverPhone: '',
        legal: '',
        legalPhone:'',
        companyName:'',
        companyCode:'',
        storeHead:'',
        idCardNumber:'',
		refundReason:'',	
        options: regionData,
        storeAddress:[],
		storeAddressProvince:'',
        storeAddressCity:'',
        storeAddressDistrict:'',
		storeAddressDetail:'',
        companyAddress:[],
        companyAddressProvince:'',
        companyAddressCity:'',
        companyAddressDistrict:'',
		companyAddressDetail:'',
        companyTerm:'',
        companyLicenseImg:'',
        idCardValidTimeStart:'',
        idCardValidTimeEnd:'',
        idCardImg1:'',
        idCardImg2:'',
        idCardImg3:'',
        storeType:'',
		isspan:true,
		isspan1:true,
		formLabelWidth:'110px',
        storeTypes: [
             {
               value: 1,
               label: '个人'
             }, {
               value: 2,
               label: '个体工商户'
             }, {
               value: 3,
               label: '企业'
             }, {
               value: 4,
               label: '其他组织'
             },
          ],
          idCardType:'',
          idCardTypes: [
               {
                 value: '1',
                 label: '中国大陆居民身份证'
               }, {
                 value: '2',
                 label: '中国香港居民来往内地通行证'
               }, {
                 value: '3',
                 label: '中国澳门居民来往内地通行证'
               }, {
                 value: '4',
                 label: '中国台湾居民来往内地通行证'
               },{
                 value: '5',
                 label: '其他国家或地区居民护照'
               }
            ]
      }
    },
    created () {
    },
    methods: {
      handleChange (value) {
         value = this.$refs['cascaderAddr'].currentLabels
         this.storeAddressProvince = value[0]
         this.storeAddressCity = value[1]
         this.storeAddressDistrict = value[2]
		 this.isspan = false
      },
      handleChange1 (value) {
         value = this.$refs['cascaderAddr'].currentLabels
         this.companyAddressProvince = value[0]
         this.companyAddressCity = value[1]
         this.companyAddressDistrict = value[2]
		 this.isspan1 = false
      },
      // 图片上传
      handleAvatarSuccess1(file,fileList) {
      	this.companyLicenseImg = file.data
      },
      handleAvatarSuccess2(file,fileList) {
      	this.idCardImg1 = file.data
      },
      handleAvatarSuccess3(file,fileList) {
      	this.idCardImg2 = file.data
      },
      handleAvatarSuccess4(file,fileList) {
      	this.idCardImg3 = file.data
      },
      selectTrigger(val){
        this.storeType = val
      },
      // 提交表单
      dataFormSubmit () {
        this.$http({
          url: this.$http.adornUrl2('/self/merchantApply/update'),
          method: 'post',
          data: this.$http.adornData({
			'id':this.id,
            'storeName': this.storeName,
            'serverPhone':this.serverPhone,
            'legal': this.legal,
            'legalPhone': this.legalPhone,
			'storeAddressProvince':this.storeAddressProvince,
            'storeAddressCity':this.storeAddressCity,
            'storeAddressDistrict': this.storeAddressDistrict,
            'storeAddressDetail': this.storeAddressDetail,
            'companyName': this.companyName,
            'companyCode': this.companyCode,
            'storeHead': this.storeHead,
            'idCardNumber': this.idCardNumber,
            'companyAddressProvince': this.companyAddressProvince,
            'companyAddressCity':this.companyAddressCity,
            'companyAddressDistrict':this.companyAddressDistrict,
            'companyAddressDetail': this.companyAddressDetail,
            'companyTerm': this.companyTerm,
            'companyLicenseImg': this.companyLicenseImg,
            'idCardValidTimeStart': this.idCardValidTimeStart,
            'idCardValidTimeEnd': this.idCardValidTimeEnd,
            'idCardImg1': this.idCardImg1,
            'idCardImg2': this.idCardImg2,
            'idCardImg3': this.idCardImg3,
            'storeType': this.storeType,
            'idCardType': this.idCardType,
          })
        }).then(({data}) => {
            if(data.status == 0){
                this.$message({
                message: '提交成功,我们已收到您的入驻申请，将会在1-3个工作日内审核完毕，审核结果将以短信形式发送至您的手机号',
                type: 'success',
                duration: 1500,
                onClose: () => {
                 this.$router.replace({ name: 'login'})
                }
              })
            }
        })
      },
      // 获取数据列表
      dataSelect () {
        let phone = this.$route.query.phone
		let msg = this.$route.query.msg
        this.$http({
          url: this.$http.adornUrl2('/self/merchantApply/review'),
          method: 'get',
          params: this.$http.adornParams({
            'phone':phone,
			'msg':msg
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          let returnData = data.data
          this.storeName = returnData.storeName
		  this.id = returnData.id
          this.storeType = returnData.storeType
          this.serverPhone = returnData.serverPhone
          this.legal = returnData.legal
          this.legalPhone = returnData.legalPhone
		  this.storeAddress=returnData.storeAddressProvince+returnData.storeAddressCity+returnData.storeAddressDistrict
		  this.storeAddressProvince = returnData.storeAddressProvince
		  this.storeAddressCity = returnData.storeAddressCity
		  this.storeAddressDistrict = returnData.storeAddressDistrict
          this.storeAddressDetail = returnData.storeAddressDetail
          this.companyName = returnData.companyName
          this.companyCode = returnData.companyCode
		  this.companyAddress = returnData.companyAddressProvince+returnData.companyAddressCity+returnData.companyAddressDistrict
		  this.companyAddressProvince = returnData.companyAddressProvince
		  this.companyAddressCity = returnData.companyAddressCity
		  this.companyAddressDistrict = returnData.companyAddressDistrict
          this.companyAddressDetail = returnData.companyAddressDetail
          this.companyTerm = returnData.companyTerm
          this.companyLicenseImg = returnData.companyLicenseImg
          this.storeHead = returnData.storeHead
		  this.refundReason = returnData.refundReason
          this.idCardType = returnData.idCardType
          this.idCardNumber = returnData.idCardNumber
          this.idCardValidTimeStart = returnData.idCardValidTimeStart
          this.idCardValidTimeEnd = returnData.idCardValidTimeEnd
          this.idCardImg1 = returnData.idCardImg1
          this.idCardImg2 = returnData.idCardImg2
          this.idCardImg3 = returnData.idCardImg3
          this.storeType = returnData.storeType
        })
      }
    },
    mounted () {
      this.dataSelect()
    }
  }
</script>

<style scoped>
  .full_screen {
      background-color:#f7f7f7;
  }
  .apply_page .container{
    width: 55%;
    margin: 0 auto;
    padding: 40px 0;
  }
  .apply_page .container .apply_content {
      min-height: 500px;
      background: #fff;
      border-radius: 4px;
  }
  .apply_page .container .apply_content .main_content {
      padding: 30px 100px 30px;
  }
  .apply_component .title {
      font-size: 24px;
      color: #333;
      position: relative;
      margin: 30px 20px 20px;
  }
  .apply_component .title:before {
      content: "";
      display: block;
      position: absolute;
      top: 2px;
      left: -20px;
      width: 4px;
      height: 24px;
      background-color: #3a68f2;
  }
  .apply_page .container .apply_component span{display: inline-block;width:110px;text-align: right;}
  /* .apply_page .container .apply_component .el-input{width: 70%;} */
  .el-form-item__error {
      left:15%!important;
  }
</style>
