<template>
  <view class="orgvzone">
    <view class="vfbox" :class=" step===1 ? 'step_show' : 'step_none' ">
      <view class="vftit">机构认证</view>
      <view class="vfitem" :class="vfindex===1?'selected':''" @click="vfselitem(1)">
        <view class="vfi-tit">公共文化机构</view>
        <view class="vfi-desc">
          <view>公共文化是相对经营文化而言，是为满足社会的共同需要而形成的文化形态，强调的是以社会全体公众为服务对象的公共行政职能。</view>
          <view class="">如：博物馆、美术馆、图书馆、文化馆及街道、社区各级文化活动站（室）</view>
        </view>
      </view>
      <view class="vfitem" :class="vfindex===2?'selected':''" @click="vfselitem(2)">
        <view class="vfi-tit">文化生产机构</view>
        <view class="vfi-desc">
          <view>文化生产机构是指从事文化工作，具有法人资格，以创作生产某种业态文化数字内容为目标的文化机构；比如是出版社、影视公司、演出公司、设计公司等</view>
        </view>
      </view>
      <view class="vfitem" :class="vfindex===3?'selected':''" @click="vfselitem(3)">
        <view class="vfi-tit">高校科研机构</view>
        <view class="vfi-desc">
          <view>高校科研机构是指经过学校上级主管部门或者学校正式下文批准成立的，一般分为实体性科研机构和非实体性科研机构</view>
          <view>如：实验室、研究室、研究所、研究中心、研究院、研究基地等</view>
        </view>
      </view>
      <view class="vfitem" :class="vfindex===4?'selected':''" @click="vfselitem(4)">
        <view class="vfi-tit">其它</view>
        <view class="vfi-desc">
          <view>其他 - 通常指经营类企业。</view>
        </view>
      </view>
      <!-- 立即认证 -->
      <view class="vfbtn" v-if="vfindex>0">
        <button @click="gotostep(2)">下一步</button>
      </view>
    </view>
    <!-- step 2 -->
    <view class="vfbox" :class=" step===2 ? 'step_show' : 'step_none' ">
      <view class="form-item">
        <input class="form-item--input" v-model="Organizationcode" maxlength="18" placeholder="统一社会信用代码"/>
      </view>
      <view class="vfbtn">
        <button @click="chkinput()">下一步</button>
      </view>
    </view>
    <view class="vfbox" :class=" step===3 ? 'step_show' : 'step_none' ">
      <view class="form-item sfsel">
        <view class="sf-tit">选择身份</view>
        <view class="sf-item">
          <view class="sfiv" :class="{ active: sfval == 10 }" @click="selsf(10)">法  人</view>
          <view class="sfiv" :class="{ active: sfval == 20 }" @click="selsf(20)">经办人</view>
        </view>
      </view>
      <!-- 如果是代办，需要下面的 -->

      <uni-forms ref="valiForm" :modelValue="formData">
        <view v-if="sfval===20">
          <!-- 经办人授权委托书 预览图 -->
          <uni-forms-item class="form-item" :class="{ view_show_image: jfr_entfile!=''}" label="经办人授权委托书" name="jfr_entfile" required>
            <view class="image-list" v-if="jfr_entfile!=''">
              <view class="image-preview" v-for="(image, imageIndex) in jfr_entfile[0]">
                <image class="image" mode="aspectFill" :src="image.path"></image>
              </view>
            </view>
            <button class="form-item--input" @click="chooseImage('jfr_entfile')" v-else>上传授权委托书</button>
            <input type="text" class="image_url" v-model="formData.jfr_entfile">
          </uni-forms-item>
          <!-- 经办人身份证扫描件（需盖章） 预览图-->
          <uni-forms-item class="form-item" :class="{ view_show_image: jfr_idafile!=''}" label="经办人身份证扫描件" name="jfr_idafile" required>
            <view class="image-list" v-if="jfr_idafile!=''">
              <view class="image-preview" v-for="(image, imageIndex) in jfr_idafile[0]">
                <image class="image" mode="aspectFill" :src="image.path"></image>
              </view>
            </view>
            <button class="form-item--input" @click="chooseImage('jfr_idafile')" v-else>（需盖章）国徽面</button>
            <input type="text" class="image_url" v-model="formData.jfr_idafile">
          </uni-forms-item>
          <!-- 经办人身份证扫描件（需盖章） 预览图 -->
          <uni-forms-item class="form-item" :class="{ view_show_image: jfr_idbfile!=''}" label="经办人身份证扫描件" name="jfr_idbfile" required>
            <view class="image-list" v-if="jfr_idbfile!=''">
              <view class="image-preview" v-for="(image, imageIndex) in jfr_idbfile[0]">
                <image class="image" mode="aspectFill" :src="image.path"></image>
              </view>
            </view>
            <button class="form-item--input" @click="chooseImage('jfr_idbfile')" v-else>（需盖章）头像面</button>
            <input type="text" class="image_url" v-model="formData.jfr_idbfile">
          </uni-forms-item>
          <!-- 经办人姓名 -->
          <uni-forms-item class="form-item" label="经办人姓名" name="managerName" required>
            <uni-easyinput v-model="formData.managerName" type="text" placeholder="请输入经办人姓名" />
          </uni-forms-item>
          <!-- 经办人身份证号 -->
          <uni-forms-item class="form-item" label="经办人身份证号" name="managerIdnum" required>
            <uni-easyinput v-model="formData.managerIdnum" type="text" placeholder="请输入经办人身份证号" />
          </uni-forms-item>
        </view>
        <uni-forms-item class="form-item" label="机构名称" name="name" required>
          <uni-easyinput v-model="formData.name" type="text" placeholder="请输入机构名称" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="行业类别" name="industryType" required>
          <picker class="picker_select" mode="selector" :range="industryList" range-key="name"  :value="idIndex"
                  @change="onChangeIndustry">
            <text v-if="idIndex > -1">{{ industryList[idIndex].name }}</text>
            <text v-else class="col-80">请选择选择行业类别</text>
          </picker>
        </uni-forms-item>
        <uni-forms-item class="form-item" label="机构注册地址" name="regionStr" required>
          <picker class="picker" mode="multiSelector" :range="region" range-key="name" :value="regionIndex" @change="pickerChange"
                  @columnchange="pickerColumnchange">
            <view class="pbox">
              <view>{{formData.regionStr === '' ? provinceStr : formData.regionStr}}</view>
              <text class="iconfont icon-you"></text>
            </view>
          </picker>
        </uni-forms-item>
        <uni-forms-item class="form-item" label="详细地址" name="address" required>
          <uni-easyinput v-model="formData.address" type="text" placeholder="请输入详细地址" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="机构成立日期" name="establishDate" required>
          <picker mode="date" :value="formData.establishDate" :start="startDate" :end="endDate" @change="bindDateChange">
            <view class="uni-input" >{{formData.establishDate !== "" ? formData.establishDate : dateStr}}</view>
          </picker>
        </uni-forms-item>
        <uni-forms-item class="form-item form-item-textarea" label="机构简介" name="desc" required>
          <uni-easyinput type="textarea" v-model="formData.desc" placeholder="请输入机构简介" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="法人姓名" name="legalsName" required>
          <uni-easyinput type="text" v-model="formData.legalsName" placeholder="请输入法人姓名" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="法人证件类型" name="legalsType" required>
          <picker mode="selector" :range="legalsTypeList" range-key="name"  :value="legalsTypeIndex"
                  @change="onChangeLegalsType">
            <text v-if="legalsTypeIndex > -1">{{ legalsTypeList[legalsTypeIndex].name }}</text>
            <text v-else class="col-80">选择法人证件类型</text>
          </picker>
        </uni-forms-item>
        <uni-forms-item class="form-item" label="法人证件号" name="legalsIdnum" required>
          <uni-easyinput type="text" v-model="formData.legalsIdnum" placeholder="请输入法人证件号" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="营业执照有效期" name="licenseDate" required>
          <picker mode="date" :value="formData.licenseDate" :start="startDate" :end="endDate" @change="bindDateChange2">
            <view class="uni-input" >{{formData.licenseDate !== "" ? formData.licenseDate : dateStr}}</view>
          </picker>
        </uni-forms-item>
        <uni-forms-item class="form-item" label="法人手机号" name="legalsCellPhone" required>
          <uni-easyinput type="text" v-model="formData.legalsCellPhone" placeholder="请输入法人手机号" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="银行账号" name="publicAccount" required>
          <uni-easyinput type="text" v-model="formData.publicAccount" placeholder="请输入银行账号" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="开户人" name="bankAccountName" required>
          <uni-easyinput type="text" v-model="formData.bankAccountName" placeholder="请输入开户人姓名" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="银行卡类型" name="bankCardType" required>
          <uni-data-checkbox class="title_content" v-model="formData.bankCardType" :localdata="bankCardTypeList" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="开户行名称" name="bankName" required>
          <uni-easyinput type="text" v-model="formData.bankName" placeholder="请输入开户行名称" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="银行行号" name="bankType" required>
          <uni-easyinput type="text" v-model="formData.bankType" placeholder="请输入银行行号" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="开户银行所在地" name="bankStr" required>
          <picker class="picker" mode="multiSelector" :range="bankArr" range-key="name" :value="bankIndex" @change="pickerBankChange"
                  @columnchange="pickerBankColumnChange">
            <view class="pbox">
              <view>{{formData.bankStr === "" ? provinceStr : formData.bankStr}}</view>
              <text class="iconfont icon-you"></text>
            </view>
          </picker>
        </uni-forms-item>
        <uni-forms-item class="form-item" label="开户人身份证号码" name="certIdnum" required>
          <uni-easyinput type="text" v-model="formData.certIdnum" placeholder="请输入开户人身份证号码" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="开户银行预留手机号" name="bankCellPhone" required>
          <uni-easyinput type="text" v-model="formData.bankCellPhone" placeholder="开户银行预留手机号" />
        </uni-forms-item>
        <uni-forms-item class="form-item" :class="{ view_show_image: yyzz_idbfile!=''}" label="营业执照/事业单位法人证书扫描件" name="yyzz_idbfile" required>
          <view class="image-list" v-if="yyzz_idbfile!=''">
            <view class="image-preview" v-for="(image, imageIndex) in yyzz_idbfile[0]">
              <image class="image" mode="aspectFill" :src="image.path"></image>
            </view>
          </view>
          <button class="form-item--input" @click="chooseImage('yyzz_idbfile')" v-else>请点击上传</button>
          <input type="text" class="image_url" v-model="formData.yyzz_idbfile">
        </uni-forms-item>
        <uni-forms-item class="form-item" :class="{ view_show_image: fr_idbfile!=''}" label="法人身份证正面扫描件" name="fr_idbfile" required>
          <view class="image-list" v-if="fr_idbfile!=''">
            <view class="image-preview" v-for="(image, imageIndex) in fr_idbfile[0]">
              <image class="image" mode="aspectFill" :src="image.path"></image>
            </view>
          </view>
          <button class="form-item--input" @click="chooseImage('fr_idbfile')" v-else>正面扫描件（指纹或盖章）</button>
          <input type="text" class="image_url" v-model="formData.fr_idbfile">
        </uni-forms-item>
        <uni-forms-item class="form-item" :class="{ view_show_image: fr_idbfile2!=''}" label="法人身份证反面扫描件" name="fr_idbfile2" required>
          <view class="image-list" v-if="fr_idbfile2!=''">
            <view class="image-preview" v-for="(image, imageIndex) in fr_idbfile2[0]">
              <image class="image" mode="aspectFill" :src="image.path"></image>
            </view>
          </view>
          <button class="form-item--input" @click="chooseImage('fr_idbfile2')" v-else>反面扫描件（指纹或盖章）</button>
          <input type="hidden" class="image_url" v-model="formData.fr_idbfile2">
        </uni-forms-item>
        <uni-forms-item class="form-item" :class="{ view_show_image: door_idbfile!=''}" label="门头照" name="door_idbfile" required>
          <view class="image-list" v-if="door_idbfile!=''">
            <view class="image-preview" v-for="(image, imageIndex) in door_idbfile[0]">
              <image class="image" mode="aspectFill" :src="image.path"></image>
            </view>
          </view>
          <button class="form-item--input" @click="chooseImage('door_idbfile')" v-else>门头照</button>
          <input type="hidden" class="image_url" v-model="formData.door_idbfile">
        </uni-forms-item>
        <uni-forms-item class="form-item" label="推荐中介服务机构" name="islicode" required>
          <picker mode="selector" :range="certiauditList" range-key="name"  :value="idIndex2"
                  @change="onChangeCertiaudit">
            <text v-if="idIndex2 > -1">{{ certiauditList[idIndex2].name }}</text>
            <text v-else class="col-80">请选择推荐中介服务机构</text>
          </picker>
        </uni-forms-item>
        <uni-forms-item class="form-item" label="身份" name="saleType" required>
          <checkbox v-for="item in identityList" v-model="item.show" color="#4399ff" class="ckbox title_left_radio title_content" @click="onCalculateAmount(item.id)">{{item.saleType}}</checkbox>
        </uni-forms-item>

        <uni-forms-item v-if="box05" class="form-item box05" label="中介服务机构类型" name="current_show" required>
          <div id="tags01">
            <div :class="{ 'current01' : current_show === 1 }" @click="toggleDiv(1)">法务</div>
            <div :class="{ 'current01' : current_show === 2 }" @click="toggleDiv(2)">技术</div>
            <div :class="{ 'current01' : current_show === 3 }" class="div_two" @click="toggleDiv(3)">估价</div>
            <div class="tags01_wh div_two" :class="{ 'current01' : current_show === 4 }" @click="toggleDiv(4)">文化数据经纪商</div>
            <div :class="{ 'current01' : current_show === 5 }" class="div_two" @click="toggleDiv(5)">其他</div>
          </div>
          <p id="PersonType" style="display: none;color:#a94442;margin:10px 0 0 292px;">需选择一个类型</p>
        </uni-forms-item>

        <uni-forms-item class="form-item" label="认证费用" name="fee">
          <view class="title_content">￥{{fee}}</view>
        </uni-forms-item>

      </uni-forms>

      <view class="privacy">
        <checkbox :checked="isTick" color="#4399ff" class="ckbox" @click="readpri"></checkbox>
        <view class="privacy_view">
          我已阅读并同意网站的 《<text class="atxt" @click="gotopage('trading')">交易主体进场协议</text> 》和
          《<text class="atxt" @click="gotopage('commission')">文化数据交易委托协议</text>》和
          《<text class="atxt" @click="gotopage('business')">临时业务机构委托协议</text>》
        </view>
      </view>

      <!-- 协议弹框 -->
      <whpop v-model="showPopup" :maskCloseAble="true" :mkey="murl"></whpop>

      <button type="primary" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>

import * as VerifyApi from '@/api/verify'
import { checkLogin,returnAccountId } from '@/core/app'
import region from 'utils/json/pca.json'
import uniForms from '../../../uni_modules/uni-forms/components/uni-forms/uni-forms';
import uniFormsItem from '../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item'
import uniEasyinput from '../../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput'
import uniDataCheckbox from '../../../uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox'
import whpop from '../../login/components/WhPopup'

export default {
  name: "orgverify2",
  components: {
    'uni-forms': uniForms,
    'uni-forms-item': uniFormsItem,
    'uni-easyinput': uniEasyinput,
    'uni-data-checkbox': uniDataCheckbox,
    'whpop': whpop,
  },
  data() {
    return {
      step: 1, // 步骤
      vfindex: 0, // 机构行业
      Organizationcode: "", // 统一社会信用代码
      sfval: 10, // 选择身份
      jfr_entfile:[], // 经办人授权委托书
      jfr_idafile:[], // 经办人身份证（正）
      jfr_idbfile:[], // 经办人身份证（反）
      // 提交数据表单
      formData: {
        managerName: '', // 经办人姓名
        managerIdnum: '', // 经办人身份证号
        jfr_entfile: '', // 经办人授权委托书url
        jfr_idafile: '', // 经办人身份证（正）url
        jfr_idbfile: '', // 经办人身份证（反）url
        name: '', // 机构名称
        industryType: '', // 行业id
        regionStr: '', // 机构地址
        address: '', // 详细地址
        establishDate: '', // 机构成立日期
        desc: '', // 机构简介
        legalsName: '', // 法人姓名
        legalsType: '', // 法人证件类型
        legalsIdnum: '', // 法人证号
        licenseDate: '', // 营业执照有效期
        legalsCellPhone: '', // 法人手机号
        publicAccount: '', // 银行账号
        bankAccountName: '', // 开户人
        bankCardType: '', // 银行卡类型
        bankName: '', // 开户行名称
        bankType: '', // 银行行号
        bankStr: '', // 开户行所在地
        certIdnum: '', // 开户人身份证号码
        bankCellPhone: '', // 开户银行预留手机号
        yyzz_idbfile: '', // 营业执照
        fr_idbfile: '', // 法人身份证正
        fr_idbfile2: '', // 法人身份证反
        door_idbfile: '', // 门头照
        islicode: '', // islicode
        saleType: '', // 身份
      },
      // 表单数据验证
      rules: {
        managerName: {
          rules: [{
            required: true,
            errorMessage: '经办人姓名不能为空'
          }]
        },
        managerIdnum: {
          rules: [{
            required: true,
            errorMessage: '经办人身份证号不能为空'
          }]
        },
        jfr_entfile: {
          rules: [{
            required: true,
            errorMessage: '请上传经办人授权委托书'
          }]
        },
        jfr_idafile: {
          rules: [{
            required: true,
            errorMessage: '请上传经办人身份证正面（国徽）'
          }]
        },
        jfr_idbfile: {
          rules: [{
            required: true,
            errorMessage: '请上传经办人身份证反面（人像）'
          }]
        },
        name: {
          rules: [{
            required: true,
            errorMessage: '机构行业不能为空'
          }]
        },
        industryType: {
          rules: [{
            required: true,
            errorMessage: '行业类别不能为空'
          }]
        },
        regionStr: {
          rules: [{
            required: true,
            errorMessage: '机构注册地址不能为空'
          }]
        },
        address: {
          rules: [{
            required: true,
            errorMessage: '详细地址不能为空'
          }]
        },
        establishDate: {
          rules: [{
            required: true,
            errorMessage: '机构成立日期不能为空'
          }]
        },
        desc: {
          rules: [{
            required: true,
            errorMessage: '机构简介不能为空'
          }]
        },
        legalsType: {
          rules: [{
            required: true,
            errorMessage: '证件类型为必选项'
          }]
        },
        legalsName: {
          rules: [{
            required: true,
            errorMessage: '法人姓名不能为空'
          }]
        },
        legalsIdnum: {
          rules: [{
            required: true,
            errorMessage: '法人证件号不能为空'
          }]
        },
        licenseDate: {
          rules: [{
            required: true,
            errorMessage: '请选择营业执照有效日期'
          }]
        },
        legalsCellPhone: {
          rules: [{
            required: true,
            errorMessage: '法人手机号不能为空'
          }]
        },
        publicAccount: {
          rules: [{
            required: true,
            errorMessage: '银行账号不能为空'
          }]
        },
        bankAccountName: {
          rules: [{
            required: true,
            errorMessage: '开户人不能为空'
          }]
        },
        bankCardType: {
          rules: [{
            required: true,
            errorMessage: '银行卡类型必须选择一项'
          }]
        },
        bankName: {
          rules: [{
            required: true,
            errorMessage: '开户行名称不能为空'
          }]
        },
        bankType: {
          rules: [{
            required: true,
            errorMessage: '银行行号不能为空'
          }]
        },
        bankStr: {
          rules: [{
            required: true,
            errorMessage: '开户银行所在地不能为空'
          }]
        },
        certIdnum: {
          rules: [{
            required: true,
            errorMessage: '开户人身份证号码不能为空'
          }]
        },
        bankCellPhone: {
          rules: [{
            required: true,
            errorMessage: '开户银行预留手机号不能为空'
          }]
        },
        yyzz_idbfile: {
          rules: [{
            required: true,
            errorMessage: '请上传营业执照/事业单位法人证书扫描件'
          }]
        },
        fr_idbfile: {
          rules: [{
            required: true,
            errorMessage: '请上传法人身份证正面扫描件'
          }]
        },
        fr_idbfile2: {
          rules: [{
            required: true,
            errorMessage: '请上传法人身份证反面扫描件'
          }]
        },
        door_idbfile: {
          rules: [{
            required: true,
            errorMessage: '请上传门头照'
          }]
        },
        islicode: {
          rules: [{
            required: true,
            errorMessage: '推荐中介服务机构不能为空'
          }]
        },
        saleType: {
          rules: [{
            required: true,
            errorMessage: '身份必须选择一项'
          }]
        },
      },
      industryList: [], // 行业列表
      idIndex: -1,  // 选择行业
      oldRegion: region, // 省市区数据
      region: [[],[],[]], // 机构处理后地址
      regionIndex: [0, 0, 0], // 机构地址选择下标
      bankIndex: [0, 0, 0], // 开户行所在地选择下标
      bankArr: [[],[],[]], // 开户行所在地选择数据
      isRevise: false,
      dateStr: '请点击选择日期',
      provinceStr: '请点击选择地址',
      legalsTypeIndex: -1, // 法人证件类型列表索引
      legalsTypeList: [{id : 0, name: '身份证'}], // 法人证件类型列表
      bankCardTypeList:[{text: '借记卡', value: '借记卡'}, {text: '单位结算卡', value: '单位结算卡'}],
      yyzz_idbfile:[], // 营业执照
      fr_idbfile:[], // 法人身份证正
      fr_idbfile2:[], // 法人身份证反
      door_idbfile:[], // 门头照
      certiauditList: [], // 中介服务机构列表
      idIndex2: -1, // 中介服务机构列表索引
      identityList: [], // 身份费用列表
      fee: 0, // 认证费用
      box05: false, // 机构显示特殊选项
      current_show: 1, // 显示类型
      isTick: false, // 隐私政策
      showPopup: false, // 协议展示
      murl: '', // 协议标识
    }
  },
  mounted() {
    // 页面初始化
    this.getIndustList()
    this.getCertiauditList()
    this.getSelectCertificationFee()
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  onReady() {
    // 需要在onReady中设置规则
    this.$refs.valiForm.setRules(this.rules)
  },
  created() {
    // 省市区选择
    let provinceArr = [];
    let cityArr = [];

    this.oldRegion.map((item, index) => {
      this.region[0].push({
        name: item.name,
        code: item.code
      });
      this.bankArr[0].push({
        name: item.name,
        code: item.code
      });
      if (this.region[0][0].code == item.code) {
        provinceArr = item.children;
        this.regionIndex[0] = index;
      }
    })
    provinceArr.map((item, index) => {
      this.region[1].push({
        name: item.name,
        code: item.code
      });
      this.bankArr[1].push({
        name: item.name,
        code: item.code
      });
      if (this.region[1][0].code == item.code) {
        cityArr = item.children;
        this.regionIndex[1] = index;
      }
    })
    cityArr.map((item, index) => {
      this.region[2].push({
        name: item.name,
        code: item.code
      });
      this.bankArr[2].push({
        name: item.name,
        code: item.code
      });
      if (this.region[2][0].code == item.code) {
        this.regionIndex[2] = index;
      }
    })
    if (this.isRevise) {
      this.formData.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]].name + ' ' +
          this.region[2][this.regionIndex[2]].name;
    } else {
      this.formData.regionStr = '';
      this.formData.bankStr = '';
    }
  },
  methods: {
    // 身份选择
    vfselitem(item){
      this.vfindex = item
    },
    // 跳转步骤
    gotostep(step){
      this.step = step
    },
    //检验统一社会信用代码
    chkinput(){
      let Code = this.Organizationcode
      if(Code === ""){
        this.$toast("统一社会信用代码不能为空")
        return false
      }
      // 社团统一编码
      const patrn = /^[0-9A-Z]+$/
      if(Code.length !== 18 || patrn.test(Code) === false){
        this.$toast("统一社会信用代码格式不对")
        return false
      }else{
        let Ancode; //统一社会信用代码的每一个值
        let Ancodevalue; //统一社会信用代码每一个值的权重
        let total = 0;
        const weightedfactors = [1, 3, 9, 27, 19, 26, 16, 17, 20, 29, 25, 13, 8, 24, 10, 30, 28,] //加权因子
        const str = "0123456789ABCDEFGHJKLMNPQRTUWXY";
        //不用I、O、S、V、Z
        for (let i = 0; i < Code.length - 1; i++) {
          Ancode = Code.substring(i, i + 1)
          Ancodevalue = str.indexOf(Ancode)
          total = total + Ancodevalue * weightedfactors[i]
          //权重与加权因子相乘之和
        }
        let logiccheckcode = 31 - (total % 31)
        if (logiccheckcode === 31) {
          logiccheckcode = 0
        }
        let Str = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,T,U,W,X,Y";
        let Array_Str = Str.split(",")
        logiccheckcode = Array_Str[logiccheckcode]
        let checkcode = Code.substring(17, 18);
        if (logiccheckcode !== checkcode) {
          this.$toast("统一社会信用代码格式不对")
          return false
        } else {
          this.step = 3
        }
      }
    },
    // 身份选择
    selsf(val){
      this.sfval = val
    },
    // 选择图片
    chooseImage( item) {
      const app = this
      const oldImageList = app.$data[item]
      // 选择图片
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success({ tempFiles }) {
          oldImageList.push(tempFiles)
          uni.uploadFile({
            url: VerifyApi.getUploadUrl(), //仅为示例，非真实的接口地址
            filePath: tempFiles[0].path,
            name: 'file',
            success: (uploadFileRes) => {
              let res = JSON.parse(uploadFileRes.data)
              if (res.resultCode != '00000000' ) {
                app.$error('上传失败')
              }
              app.formData[item] = res.data
            }
          });
        }
      });
    },
    // 行业列表
    getIndustList(){
      const app = this
      return new Promise((resolve, reject) => {
        VerifyApi.getIndustry()
            .then(result => {
              app.industryList = result.data
              resolve()
            })
            .catch(reject)
      })
    },
    // 选择行业类别
    onChangeIndustry(e) {
      const curIndex = e.detail.value
      this.idIndex = curIndex
      this.formData.industryType = this.industryList[curIndex].industryId
    },
    // 切换城市户籍
    pickerChange(e) {
      this.regionIndex = e.detail.value;
      this.formData.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]].name + ' ' +
          this.region[2][this.regionIndex[2]].name;

      // 组件传值
      this.$emit('region', [this.region[0][this.regionIndex[0]].name , this.region[1][this.regionIndex[1]].name,
        this.region[2][this.regionIndex[2]].name]);
    },
    // 选择城市信息 户籍
    pickerColumnchange(e) {

      if (e.detail.column === 0) {
        // 声明城市数组
        let cityArr = [];
        let countyArr = [];
        // 设置下标
        this.regionIndex = [e.detail.value, 0, 0];
        // 改变城市列表
        this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
          cityArr.push({
            name: item.name,
            code: item.code
          });
        })
        this.$set(this.region, 1, cityArr);
        // 改变县区列表
        this.oldRegion[e.detail.value].children[0].children.map(item => {
          countyArr.push({
            name: item.name,
            code: item.code
          });
        })
        this.$set(this.region, 2, countyArr);
      }
      if (e.detail.column === 1) {
        this.regionIndex[1] = e.detail.value;
        this.regionIndex[2] = 0;
        let countyArr = [];
        this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
          countyArr.push({
            name: item.name,
            code: item.code
          });
        })
        this.$set(this.region, 2, countyArr);
      }
      if (e.detail.column === 2) {
        this.regionIndex[2] = e.detail.value;
      }
    },
    // 获取当前的日子
    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}`;
    },
    // 机构日期选择
    bindDateChange: function(e) {
      this.formData.establishDate = e.detail.value
    },
    // 选择证件类别
    onChangeLegalsType(e) {
      const curIndex = e.detail.value
      this.legalsTypeIndex = curIndex
      this.formData.legalsType = this.legalsTypeList[curIndex].id
    },
    // 营业执照有效期选择
    bindDateChange2: function(e) {
      this.formData.licenseDate = e.detail.value
    },
    // 切换城市 开户
    pickerBankChange(e) {
      this.bankIndex = e.detail.value;
      this.formData.bankStr = this.bankArr[0][this.bankIndex[0]].name + ' ' + this.bankArr[1][this.bankIndex[1]].name + ' ' +
          this.bankArr[2][this.bankIndex[2]].name;

      // 组件传值
      this.$emit('bankArr', [this.bankArr[0][this.bankIndex[0]].name , this.bankArr[1][this.bankIndex[1]].name,
        this.bankArr[2][this.bankIndex[2]].name]);
    },
    // 选择城市信息 开户
    pickerBankColumnChange(e) {
      if (e.detail.column === 0) {
        // 声明城市数组
        let cityArr = [];
        let countyArr = [];
        // 设置下标
        this.bankIndex = [e.detail.value, 0, 0];
        // 改变城市列表
        this.bankArr[1] = this.oldRegion[e.detail.value].children.map(item => {
          cityArr.push({
            name: item.name,
            code: item.code
          });
        })
        this.$set(this.bankArr, 1, cityArr);
        // 改变县区列表
        this.oldRegion[e.detail.value].children[0].children.map(item => {
          countyArr.push({
            name: item.name,
            code: item.code
          });
        })
        this.$set(this.bankArr, 2, countyArr);
      }
      if (e.detail.column === 1) {
        this.bankIndex[1] = e.detail.value;
        this.bankIndex[2] = 0;
        let countyArr = [];
        this.oldRegion[this.bankIndex[0]].children[this.bankIndex[1]].children.map(item => {
          countyArr.push({
            name: item.name,
            code: item.code
          });
        })
        this.$set(this.bank, 2, countyArr);
      }
      if (e.detail.column === 2) {
        this.bankIndex[2] = e.detail.value;
      }
    },
    // 机构列表
    getCertiauditList(){
      const app = this
      return new Promise((resolve, reject) => {
        VerifyApi.getCertiaudit()
            .then(result => {
              app.certiauditList = result.data
              resolve()
            })
            .catch(reject)
      })
    },
    // 选择中介服务机构
    onChangeCertiaudit(e) {
      const curIndex = e.detail.value
      this.idIndex2 = curIndex
      this.formData.islicode = this.certiauditList[curIndex].islicode
    },
    // 获取身份，认证费用
    getSelectCertificationFee(){
      const app = this
      return new Promise((resolve, reject) => {
        VerifyApi.getIdentity()
            .then(result => {
              let data = result.data
              for (let attr in data) {
                let value = data[attr]
                if (value.userType == '机构') {
                  value.checked = 0
                  app.identityList.push(value)
                }
              }
              resolve()
            })
            .catch(reject)
      })
    },
    // 计算认证费用
    onCalculateAmount(id){
      const app = this;
      app.fee = 0;
      let saleTypeTemp = []

      for (let attr in app.identityList) {

        let value = app.identityList[attr]

        if (id === value.id) {
          if (value.checked === 1) {
            app.identityList[attr].checked = 0
            value.checked = 0
          } else {
            app.identityList[attr].checked = 1
            value.checked = 1
          }
        }

        if (value.checked === 1) {
          app.fee += value.fee * 1
          if (value.saleType === "中介服务机构") {
            app.box05 = true
          }
          saleTypeTemp.push(value.saleType)
        }

      }
      this.formData.saleType = saleTypeTemp.length < 1 ? '' : saleTypeTemp.join(',')
    },
    // 显示蓝色
    toggleDiv(index) {
      this.current_show = index
    },
    // 隐私政策勾选
    readpri() {
      this.isTick = true;
    },
    // 阅读注册协议和隐私
    gotopage(str){
      this.murl = str
      this.showPopup = ! this.showPopup
    },
    // 提交
    submit() {
      uni.showLoading()
      this.$refs.valiForm.validate().then(res => {
        uni.hideLoading()

        // 验证勾选
        const app = this
        if (!app.isTick) {
          app.$error('请勾选《交易主体进场协议》和《文化数据交易委托协议》和《临时业务机构委托协议》')
          return false;
        }
        // 用户ID
        let accountId = returnAccountId()
        if (accountId === '') {
          app.$error('登录已失效，请前往登录')
          uni.navigateTo({
            url:"/pages/login/index"
          })
          return false
        }
        let agreement = {
          agreementIds: "4,5,6",
          userId: accountId
        }

        // 注册地址
        let regionStr = app.formData.regionStr
        let regionArr = regionStr.split(" ")

        // 开户地址
        let bankProvince = app.formData.bankStr
        let bankProvinceArr = bankProvince.split(" ")

        // 买卖方类型 多个,隔开
        let tagsName = "公共文化机构"; //保存标签名称
        let estimate = 1; //判断是机构还是服务商  机构1 服务商2
        let identityList2 = app.identityList
        for (let attr in identityList2) {
          let saleTypeData = identityList2[attr]
          if (saleTypeData.checked === 1) {
            if (saleTypeData.saleType === '中介服务机构') {
              estimate = 2;
            }
          }
        }
        let saleType = app.formData.saleType
        //
        let tages = ''
        if (app.current_show == 1) {
          tages = '法务'
        } else if (app.current_show == 2) {
          tages = '技术'
        } else if (app.current_show == 3) {
          tages = '估价'
        } else if (app.current_show == 4) {
          tages = '文化数据经纪商'
        } else if (app.current_show == 5) {
          tages = '其他'
        }

        // 营业执照、身份证正面、身份证反面、门头照
        let yyzz_idbfile = app.formData.yyzz_idbfile;
        let fr_idbfile = app.formData.fr_idbfile;
        let fr_idbfile2 = app.formData.fr_idbfile2;
        let door_idbfile = app.formData.door_idbfile;

        let institutionsdata = {
          name: app.formData.name, //机构名称
          avatar: '', //头像地址
          industrytype: app.formData.industryType, //行业类别
          regionprovince: regionArr[0], //注册地区-省
          regioncity: regionArr[1], //注册地区-市
          regiondistrict: regionArr[2], //注册地区-区/县
          address: app.formData.address, //详细地址
          establishdate: app.formData.establishDate, //机构成立日期
          desc: app.formData.desc, //机构简介
          legalsname: app.formData.legalsName, //法人姓名
          legalstype: app.formData.legalsType, //法人证件类型
          legalsidnum: app.formData.legalsIdnum, //法人身份证号
          uscc: app.Organizationcode, //统一社会信用代码
          licensedate: app.formData.licenseDate, //营业执照有效期
          legalscellphone: app.formData.legalsCellPhone, //法人手机号
          publicaccount: app.formData.publicAccount, //银行账号
          bankaccountname: app.formData.bankAccountName, //开户人
          bankcardtype: app.formData.bankCardType, //银行卡类型
          bankprovince: bankProvinceArr[0], //开户银行所在地-省
          bankcity: bankProvinceArr[1], //开户银行所在地-市
          bankdistrict: bankProvinceArr[2], //开户银行所在地-区/县
          bankname: app.formData.bankName, //开户银行名称
          banktype: app.formData.bankType, //银行行号
          certidnum: app.formData.certIdnum, //开户人身份证号码
          bankcellphone: app.formData.bankCellPhone, //开户银行预留手机号
          cerscanpath: yyzz_idbfile, //营业执照/事业单位法人证书扫描件
          legalsscanpath1: fr_idbfile, //法人身份证正反面扫描件（指纹或盖章）
          legalsscanpath2: fr_idbfile2, //法人身份证正反面扫描件（指纹或盖章）
          doorheadphoto: door_idbfile, //门头照
          parentislicode: app.formData.islicode, //推荐中介服务机构 中介机构is
          isposttion: 0, //是否后置名单(0、否 1、是 ) 默认0
          saleType: saleType, //买卖方类型
          intermediaryType: tages, //中介服务机构类型
          fees: app.fee, //总费用
          type: estimate === 1 ? tagsName : tages, //机构类型
          userid: accountId, //用户ID
          identity: app.sfval === 10 ? '法人' : '经办人', //身份:'法人','经办人'，‘个人’
          usertype: estimate === 1 ? "企业" : "服务商", //用户类型 企业/服务商 "企业"'
        };

        // 10 = 法人 20 = 经办人
        if (app.sfval === 20) {
          // 经办人授权委托书、经办人身份证正面、经办人身份证反面
          let jfr_entfile = app.formData.jfr_entfile
          let jfr_idafile = app.formData.jfr_idafile
          let jfr_idbfile = app.formData.jfr_idbfile
          institutionsdata.managerpath = jfr_entfile; //经办人授权委托书
          institutionsdata.managerscanpath1 = jfr_idafile; //经办人身份证正面扫描件
          institutionsdata.managerscanpath2 = jfr_idbfile; //经办人身份证反面扫描件
          institutionsdata.managername = app.formData.managerName; //经办人姓名
          institutionsdata.manageridnum = app.formData.managerIdnum; //经办人身份证号
        }

        VerifyApi.preservation(agreement)
        return new Promise((resolve, reject) => {
          VerifyApi.verifySubmit(institutionsdata)
              .then(result => {
                if (result.resultCode != '00000000') {
                  app.$error('提交认证失败')
                } else {
                  app.$success('认证提交成功')
                  uni.navigateTo({
                    url:"/pages/user/index"
                  })
                }

                resolve()
              })
              .catch(reject)
        })

      }).catch(err => {
        uni.hideLoading()
        return false
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.orgvzone{
  background: #fff;
  margin-bottom: 36rpx;

  .step_show {
    display: block;
  }
  .step_none {
    display: none;
  }

  .vfbox{
    width: 90%;
    margin: 0rpx auto;
    padding: 10rpx;

    .vftit{
      font-size: 36rpx;
      font-weight: 600;;
    }

    .vfitem{
      font-size: 30rpx;
      line-height: 1.8;
      margin: 30rpx auto;
      border:2rpx solid #eee;
      border-radius: 10rpx;
      padding: 16rpx;

      .vfi-tit{
        font-size: 34rpx;
        line-height: 80rpx;
        padding-left: 22rpx;
      }

      .vfi-desc{
        background-color: #FEFFE8;
        border: 1px solid #CFAF0F;
        padding: 10px 8px;
        color: #444444;
        border-radius: 12rpx;
        text-indent: 36rpx;
      }

      &:hover{
        background-color: #487AEE;
        color: #fff;
      }

      &.selected{
        background-color: #487AEE;
        color: #fff;
      }
    }

    // 按钮
    .vfbtn{

      button{
        background: #487AEE;
        color: #fff;
      }
    }

    .ver-form{
      // todo o
    }

    .sfsel{
      float: left;
      width: 100%;

      .sf-tit{
        width: 20%;
        padding: 10rpx 0;
        display: flex;
        flex-direction: center;
      }

      .sf-item{
        background: #EAEAEA;
        width: 80%;
        display: flex;
        text-align: center;
        color: #333;
        border-radius: 12rpx;

        .sfiv{
          width: 50%;
          padding: 10rpx;

          &.active{
            border-radius: 12rpx;
            background: #487AEE;
            color: #fff;
          }
        }

      }
    }

    // 输入框元素
    .form-item {
      display: flex;
      padding: 18rpx;
      margin-bottom: 30rpx;
      height: 96rpx;

      &--input {
        font-size: 28rpx;
        letter-spacing: 1rpx;
        flex: 1;
        height: 100%;
      }

      &--parts {
        min-width: 100rpx;
        height: 100%;
      }

      .picker_select {
        margin-top: 18rpx;
      }

      .title_content {
        margin-top: 12rpx!important;
      }

      .image_url {
        display: none;
      }
    }

    .form-item-textarea {
      margin-bottom: 120rpx;
    }

    // 登录按钮
    .vf-button {
      width: 100%;
      height: 86rpx;
      margin-top: 80rpx;
      background: linear-gradient(to right, #242e4b, #242e4b);
      color: #fff;
      // border-radius: 80rpx;
      box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
      letter-spacing: 5rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    // 协议
    .privacy{
      display: flex;
      margin-top: 10rpx;
      margin-bottom: 50rpx;
      margin-left: 15rpx;

      .ckbox{
        border-radius: 50%;
      }

      .privacy_view {
        margin-left: 20rpx;
      }

      .atxt{
        color: #4399ff;
      }
    }

    .view_show_image {
      margin-bottom: 110rpx;
    }
    .image-list {
      display: flex;
      padding: 0 20rpx;
      margin-bottom: -20rpx;

      &:after {
        clear: both;
        content: " ";
        display: table;
      }

      .image {
        display: block;
        width: 100%;
        height: 100%;
      }

      .image-picker,
      .image-preview {
        width: 196rpx;
        height: 196rpx;
        margin-right: 30rpx;
        margin-bottom: 30rpx;
        float: left;

        &:nth-child(3n+0) {
          margin-right: 0;
        }
      }

      .image-picker {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 1rpx dashed #ccc;
        color: #ccc;

        .choose-icon {
          font-size: 48rpx;
          margin-bottom: 6rpx;
        }

        .choose-text {
          font-size: 24rpx;
        }
      }

      .image-preview {
        position: relative;

        .image-delete {
          position: absolute;
          top: -15rpx;
          right: -15rpx;
          height: 42rpx;
          width: 42rpx;
          line-height: 42rpx;
          background: rgba(0, 0, 0, 0.64);
          border-radius: 50%;
          color: #fff;
          font-weight: bolder;
          font-size: 22rpx;
          z-index: 10;
          text-align: center;
        }
      }
    }

    .title_left_radio {
      margin-right: 20rpx;
    }
    #tags01 {
      display: flex;
      flex-wrap: wrap;
    }
    .box05 {
      padding-top: 0rpx;
      margin-bottom: 100rpx;
    }
    .box05 #tags01 div {
      font-size: 20rpx;
      width: 100rpx;
      height: 30rpx;
      border-radius: 5rpx;
      border: 1rpx solid #DDDDDD;
      cursor: pointer;
      padding: 5rpx 15rpx;
      text-align: center;
      margin-right: 40rpx;
    }
    .box05 #tags01 .div_two {
      margin-top: 20px;
    }
    .box05 #tags01 .tags01_wh {
      width: 140rpx!important;
    }
    .box05 #tags01 .current01{
      background: #5B93FF;
      color: #FFFFFF;
    }
  }

}
</style>
