<template>
  <div class="app-container shop-detail">
    <!-- <div class="head-title">{{$t('shopProcess.merchantDetail')}}</div> -->
    <!-- 导航栏 -->
    <div class="nav-box">
      <div class="nav">
        <div :class="['nav-item', navStatus === 0 ? 'active' : '']" @click="switchNav(0)">{{$t('shopProcess.basicInfo')}}</div>
        <div :class="['nav-item', navStatus === 1 ? 'active' : '']" @click="switchNav(1)">{{$t('shopProcess.businessInfo')}}</div>
        <div :class="['nav-item', navStatus === 2 ? 'active' : '']" @click="switchNav(2)">{{$t('shopProcess.signUpInfo')}}</div>
        <div :class="['nav-item', navStatus === 3 ? 'active' : '']" @click="switchNav(3)">{{$t('shopProcess.financeInfo')}}</div>
      </div>
    </div>
    <!-- 模块 -->
    <div class="shop-info-box">
      <!-- 基本信息 -->
      <div v-if="navStatus === 0" class="basic-info-mod">
        <!-- 店铺审核状态 -->
        <div class="audit-status">
          <!-- status 0 未审核 1已通过 -1未通过 2平台下线 3 平台下线待审核 -->
          <!-- shopStatus 店铺状态(-1:已删除 0: 停业中 1:营业中 2:平台下线 3:待审核 4:店铺申请中 5.审核失败) -->
          <div v-if="shopAuditStatus" class="audit-item">
            <span>{{$t('shopProcess.auditStatus')}}：</span>
            <span v-if="shopAuditStatus.status === -1">{{$t('shop.failed')}}</span>
            <span v-if="shopAuditStatus.status === 0">{{$t('shop.unreviewed')}}</span>
            <span v-if="shopAuditStatus.status === 1">{{$t('shop.passed')}}</span>
            <span v-if="shopAuditStatus.status === 2">{{$t('shop.platformOffline')}}</span>
          </div>
          <div class="audit-item">
            <span>{{$t('shopProcess.accountStatus')}}：</span>
            <span v-if="shopBasicInfo.accountStatus === 0">{{$t('shopProcess.disable')}}</span>
            <span v-if="shopBasicInfo.accountStatus === 1">{{$t('shopProcess.enable')}}</span>
            <span v-if="shopBasicInfo.accountStatus === -1">{{$t('shopProcess.delete')}}</span>
          </div>
          <div class="audit-item">
            <span>{{$t('shopProcess.shopStatus')}}：</span>
            <span v-if="shopBasicInfo.shopStatus === -1">{{$t('shopProcess.deleted')}}</span>
            <span v-if="shopBasicInfo.shopStatus === 0">{{$t('shopProcess.closed')}}</span>
            <span v-if="shopBasicInfo.shopStatus === 1">{{$t('shopProcess.inOperation')}}</span>
            <span v-if="shopBasicInfo.shopStatus === 2">{{$t('shop.platformOffline')}}</span>
            <span v-if="shopBasicInfo.shopStatus === 3">{{$t('shopProcess.onlinePendingReview')}}</span>
            <span v-if="shopBasicInfo.shopStatus === 4">{{$t('shopProcess.shopApplication')}}</span>
            <span v-if="shopBasicInfo.shopStatus === 5">{{$t('shopProcess.storeOpenPendingReview')}}</span>
          </div>
        </div>
        <!-- 信息 -->
        <div class="basic-info-list">
          <el-form
            ref="shopBasicInfo"
            label-width="120px"
            :model="shopBasicInfo"
            :rules="shopBasicInfoRules"
            size="small"
          >
            <div class="basic-info-box">
              <div class="left-info">
                <el-form-item :label="this.$i18n.t('shopProcess.merchantName')" prop="merchantName">
                  <p class="txt">
                    <el-input
                      v-model="shopBasicInfo.merchantName"
                      :placeholder="this.$i18n.t('shopProcess.merchantNameInputTips')"
                      maxlength="10"
                      @blur="
                        shopBasicInfo.merchantName =
                        shopBasicInfo.merchantName ?
                        removeHeadAndTailSpaces(shopBasicInfo.merchantName) :
                        shopBasicInfo.merchantName
                      "
                    />
                  </p>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('shopProcess.shopName')" prop="shopName">
                  <p class="txt">
                    <el-input
                      v-model="shopBasicInfo.shopName"
                      :placeholder="this.$i18n.t('shopProcess.shopNameInputTips')"
                      maxlength="20"
                      @blur="
                        shopBasicInfo.shopName =
                        shopBasicInfo.shopName ?
                        removeHeadAndTailSpaces(shopBasicInfo.shopName) :
                        shopBasicInfo.shopName
                      "
                    />
                  </p>
                </el-form-item>
                <!-- <el-form-item label="联系人：" prop="contactName">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.contactName" placeholder="请输入常用联系人姓名" maxlength="10" />
                  </p>
                </el-form-item> -->
                <el-form-item :label="this.$i18n.t('shopProcess.tel')" prop="tel">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.tel" :placeholder="this.$i18n.t('shopProcess.telInputTips')" />
                  </p>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('shopProcess.email')" prop="email">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.email" :placeholder="this.$i18n.t('shopProcess.emailInputTips')" maxlength="30" />
                  </p>
                </el-form-item>

                <el-form-item :label="this.$i18n.t('shopProcess.addr')" prop="currentAddr">
                  <el-cascader
                    ref="cascaderAddr"
                    v-model="shopBasicInfo.currentAddr"
                    :options="addrList"
                    :props="addrListTreeProps"
                    :placeholder="this.$i18n.t('shopProcess.addrInputTips')"
                    class="addr-select"
                    @change="handleAddrChange"
                  />
                </el-form-item>

                <el-form-item :label="this.$i18n.t('shopProcess.detailAddr')" prop="shopAddress">
                  <el-input
                    v-model="shopBasicInfo.shopAddress"
                    :placeholder="this.$i18n.t('shopProcess.detailAddrInputTips')"
                    maxlength="50"
                    @change="mapLocation"
                    @blur="
                      shopBasicInfo.shopAddress =
                      shopBasicInfo.shopAddress ?
                      removeHeadAndTailSpaces(shopBasicInfo.shopAddress) :
                      shopBasicInfo.shopAddress
                    "
                  >
                    <el-button slot="append" icon="el-icon-location" @click="mapLocation">{{$t("platform.location")}}</el-button>
                  </el-input>
                </el-form-item>
                <!-- 地图 -->
                <el-form-item>
                  <baidu-map
                    class="map"
                    :scroll-wheel-zoom="false"
                    :center="center"
                    @moving="syncCenterAndZoom"
                    @moveend="syncCenterAndZoom"
                    @zoomend="syncCenterAndZoom"
                    :zoom="zoom"
                  >
                    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                    <bm-marker :position="center" :dragging="false" @click="infoWindowOpen">
                      <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">{{$t("shop.storeLocation")}}</bm-info-window>
                    </bm-marker>
                  </baidu-map>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('shopProcess.intro')" prop="intro">
                  <div class="business-license-box">
                    <div class="license-content">
                      <el-input
                        v-model="shopBasicInfo.intro"
                        type="textarea"
                        :rows="4"
                        maxlength="200"
                        :placeholder="this.$i18n.t('shopProcess.introInput')"
                        @blur="
                          shopBasicInfo.intro =
                          shopBasicInfo.intro ?
                          removeHeadAndTailSpaces(shopBasicInfo.intro) :
                          shopBasicInfo.intro
                        "
                      />
                    </div>
                  </div>
                </el-form-item>
              </div>

              <div class="right-info">
                <el-form-item :label="this.$i18n.t('shopProcess.logo')" prop="shopLogo">
                  <div class="business-license-box">
                    <div class="license-content">
                      <img-upload v-model="shopBasicInfo.shopLogo" />
                    </div>
                    <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
                  </div>
                </el-form-item>
                <!-- 背景图 -->
                <!-- <div class="bg-img">
                  <div class="business-license-box">
                    <el-form-item :label="this.$i18n.t('shopProcess.backgroundPic')" prop="mobileBackgroundPic">
                      <div class="license-content">
                        <img-upload v-model="shopBasicInfo.mobileBackgroundPic" />
                      </div>
                      <div class="img-tips">
                        <p>{{ $t('shopProcess.mobileBackgroundPic') }}</p>
                        <p>{{ $t('shopProcess.mobilePicTips') }}</p>
                      </div>
                    </el-form-item>
                  </div>
                  <div class="business-license-box">
                    <el-form-item label-width="0px" prop="pcBackgroundPic">
                      <div class="license-content">
                        <img-upload v-model="shopBasicInfo.pcBackgroundPic" />
                      </div>
                      <div class="img-tips">
                        <p>{{ $t('shopProcess.pcBackgroundPic') }}</p>
                        <p>{{ $t('shopProcess.pcPicTips') }}</p>
                      </div>
                    </el-form-item>
                  </div>
                </div> -->

                <el-form-item :label="this.$i18n.t('shopProcess.businessLicense')" prop="businessLicense">
                  <div class="business-license-box">
                    <div class="license-content">
                      <img-upload v-model="shopBasicInfo.businessLicense" />
                      <div class="example-box">
                        <img src="~@/assets/img/example-img/Business-license.png">
                        <div class="tips">{{ $t('shopProcess.example') }}</div>
                      </div>
                    </div>
                    <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
                  </div>
                </el-form-item>
                <div class="id-box">
                  <div class="upload-content">
                    <div class="upload-img" :class="lang === 'en' ? 'en-upload-img' : 'zh-upload-img'">
                      <el-form-item class="idcard" :label="this.$i18n.t('shopProcess.corporateIdentityCard')" prop="identityCardFront">
                        <img-upload
                          v-model="shopBasicInfo.identityCardFront"
                        />
                      </el-form-item>
                      <el-form-item class="idcard" label-width="0px" prop="identityCardLater">
                        <img-upload
                          v-model="shopBasicInfo.identityCardLater"
                        />
                      </el-form-item>
                    </div>
                    <div class="upload-example">
                      <div class="example-box">
                        <img src="~@/assets/img/example-img/idcard1.png">
                        <div class="tips">{{ $t('shopProcess.identityCardFront') }}</div>
                      </div>
                      <div class="example-box">
                        <img src="~@/assets/img/example-img/idcard2.png">
                        <div class="tips">{{ $t('shopProcess.identityCardLater') }}</div>
                      </div>
                    </div>
                    <div class="upload-tips">{{ $t('shopProcess.identityCardTips') }}</div>
                  </div>
                </div>
              </div>
            </div>

          </el-form>
        </div>

        <div class="default-btn primary-btn foot-btn" @click="updateShopBasicInfo">{{ $t('shopProcess.saveBasicInfo') }}</div>
      </div>
      <!-- /基本信息 -->

      <!-- 工商信息 -->
      <div v-if="navStatus === 1" class="business-info-mod">
        <el-form
          ref="companyInfoForm"
          :model="companyInfoForm"
          :rules="companyInfoRule"
          :label-width="lang === 'en' ? '200px' : '150px'"
          size="small"
        >
          <div class="ci-wrapper">
            <div class="left-info">
              <el-form-item :label="this.$i18n.t('shopProcess.creditCode')" prop="creditCode">
                <el-input v-model="companyInfoForm.creditCode" maxlength="20" :placeholder="this.$i18n.t('shopProcess.creditCodeInputTips')" />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.firmName')" prop="firmName">
                <el-input
                  v-model="companyInfoForm.firmName"
                  maxlength="50"
                  :placeholder="this.$i18n.t('shopProcess.firmNameInputTips')"
                  @blur="
                    companyInfoForm.firmName =
                    companyInfoForm.firmName ?
                    removeHeadAndTailSpaces(companyInfoForm.firmName) :
                    companyInfoForm.firmName
                  "
                />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.residence')" prop="residence">
                <el-input
                  v-model="companyInfoForm.residence"
                  maxlength="50"
                  :placeholder="this.$i18n.t('shopProcess.residenceInputTips')"
                  @blur="
                    companyInfoForm.residence =
                    companyInfoForm.residence ?
                    removeHeadAndTailSpaces(companyInfoForm.residence) :
                    companyInfoForm.residence
                  "
                />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.representative')" prop="representative">
                <el-input
                  v-model="companyInfoForm.representative"
                  prop="representative" maxlength="20"
                  :placeholder="this.$i18n.t('shopProcess.representativeInputTips')"
                  @blur="
                    companyInfoForm.representative =
                    companyInfoForm.representative ?
                    removeHeadAndTailSpaces(companyInfoForm.representative) :
                    companyInfoForm.representative
                  "
                />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.capital')">
                <div class="capital-int">
                  <el-input
                    v-model="companyInfoForm.capital"
                    prop="capital"
                    type="number"
                    :min="0"
                    :max="99999999"
                    @blur="changeNum"
                    @keydown.native="channelInputLimit"
                  >
                    <el-button slot="append">{{$t("shopProcess.tenThousandYuan")}}</el-button>
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.fountTime')" prop="foundTime">
                <el-date-picker
                  v-model="companyInfoForm.foundTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :placeholder="this.$i18n.t('platform.seleData')"
                  :picker-options="pickerOptions"
                />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.businessTime')" prop="timeRange">
                <el-date-picker
                  v-model="companyInfoForm.timeRange"
                  type="daterange"
                  range-separator="至"
                  :start-placeholder="this.$i18n.t('shopProcess.startTime')"
                  :end-placeholder="this.$i18n.t('shopProcess.endTime')"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @input="handleTimeData"
                />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.businessScope')" prop="businessScope">
                <el-input
                  v-model="companyInfoForm.businessScope"
                  type="textarea"
                  resize="none"
                  :rows="4"
                  :placeholder="this.$i18n.t('shopProcess.businessScopeInputTips')"
                  maxlength="500"
                  @blur="
                    companyInfoForm.businessScope =
                    companyInfoForm.businessScope ?
                    removeHeadAndTailSpaces(companyInfoForm.businessScope) :
                    companyInfoForm.businessScope
                  "
                />
              </el-form-item>
            </div>
            <!-- <div class="right-info">
            </div> -->
          </div>
        </el-form>

        <div
          class="default-btn primary-btn"
          :class="lang === 'en' ? 'en-foot-btn' : 'foot-btn'"
          @click="updateCompanyInfo"
        >{{$t('shopProcess.saveCompanyInfo')}}</div>
      </div>
      <!-- /工商信息 -->

      <!-- 签约信息 -->
      <div v-if="navStatus === 2" class="contract-info table-box">
        <!-- 签约类目 -->
        <div class="s-category-item s-item">
          <div class="table-data-title">
            <div class="text"><span class="stress">*</span>{{$t('shopProcess.signingCategory')}}</div>
            <div class="tips">
              {{ $t('shopProcess.preSigned') }}
              <span class="txt-bold">{{ signCategoryList.length }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}，
              {{ $t('shopProcess.application') }}
              <span class="txt-bold">{{ applyingCategoryNum }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}，
              {{ $t('shopProcess.mostAdd') }}
              <span class="txt-bold">200</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}
            </div>
            <div class="edit-btn">
              <div class="default-btn primary-btn" @click="addSigningHandle(0)">{{ $t('shopProcess.addSigningCategory') }}</div>
              <div class="default-btn primary-btn" @click="cateAddOrUpdateHandle(0)">{{$t('shopProcess.editSigningCategory')}}</div>
            </div>
          </div>
          <div class="si-content">
            <el-table
              :data="signCategoryList"
              header-cell-class-name="table-header"
              style="width: 100%"
            >
              <!-- height="306" -->
              <el-table-column
                prop="name"
                :label="this.$i18n.t('shopProcess.categoryName')"
              />
              <el-table-column
                prop="parentName"
                :label="this.$i18n.t('shopProcess.parentCategoryName')"
              />
              <el-table-column
                prop="platformRate"
                :label="this.$i18n.t('shopProcess.categoryRate')"
              >
                <template slot-scope="{ row }">
                  <span v-if="row.platformRate || row.platformRate === 0">{{ row.platformRate }} %</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="customizeRate"
                :label="this.$i18n.t('shopProcess.customRate')"
              >
                <template slot-scope="{ row }">
                  <span v-if="row.customizeRate || row.customizeRate === 0">{{ row.customizeRate }} %</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="qualifications"
                :label="this.$i18n.t('shopProcess.categoryQualifications')"
              >
                <template slot-scope="{row}">
                  <div v-if="row.imgs.length" class="img-box">
                    <el-image
                      v-for="(img,index) in row.imgs"
                      :key="index"
                      class="tab-img"
                      :src="img"
                      :preview-src-list="row.imgs"
                    />
                    <!-- <img
                      v-for="(item, index) in row.imgs"
                      :key="index"
                      :src="item.indexOf('http')===-1 ? resourcesUrl + item : item"
                      @click="picturePreview(item)"
                    > -->
                  </div>
                  <span v-if="!row.imgs.length">--</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="categoryStatus"
                :label="this.$i18n.t('shopProcess.categoryStatus')"
              >
                <template slot-scope="scope">
                  <div v-if="scope.row.categoryStatus === 1" class="tag-txt">{{ $t('publics.normal') }}</div>
                  <div v-if="scope.row.categoryStatus === 0" class="tag-txt red-tag-txt">{{ $t('publics.LowerShelf') }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 签约品牌 -->
        <div class="s-brand-item s-item">
          <div class="table-data-title">
            <div class="text">{{ $t('shopProcess.signingBrand') }}</div>
            <div class="tips">
              {{ $t('shopProcess.preSigned') }}
              <span class="txt-bold">{{ signedBrands.length }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}，
              {{ $t('shopProcess.application') }}
              <span class="txt-bold">{{ applyingBrandNum }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}，
              {{ $t('shopProcess.mostAdd') }}
              <span class="txt-bold">50</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}
            </div>
            <div class="edit-btn">
              <div class="default-btn primary-btn" @click="addSigningHandle(1)">{{ $t('shopProcess.addSigningBrand') }}</div>
              <div class="default-btn primary-btn" @click="cateAddOrUpdateHandle(1)">{{ $t('shopProcess.editSigningBrand') }}</div>
            </div>
          </div>
          <div class="si-content main-container">
            <div class="table-con">
              <el-table
                :data="signedBrands"
                header-cell-class-name="table-header"
                style="width: 100%"
              >
                <!-- height="284" -->
                <el-table-column
                  prop="name"
                  :label="this.$i18n.t('shopProcess.brandName')"
                >
                  <template slot-scope="scope">
                    <span class="table-cell-text">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="firstLetter"
                  :label="this.$i18n.t('shopProcess.firstLetter')"
                />
                <el-table-column
                  prop="platformRate"
                  :label="this.$i18n.t('shopProcess.brandLogo')"
                >
                  <template slot-scope="scope">
                    <div class="brand-logo">
                      <el-image
                        v-if="scope.row.imgUrl"
                        class="tab-img"
                        :src="scope.row.imgUrl.indexOf('http')===-1 ? resourcesUrl + scope.row.imgUrl : scope.row.imgUrl"
                        :preview-src-list="scope.row.imgUrl.indexOf('http')===-1 ? [resourcesUrl + scope.row.imgUrl] : [scope.row.imgUrl]"
                      />
                      <!-- <img v-if="scope.row.imgUrl" :src="scope.row.imgUrl.indexOf('http')===-1 ? resourcesUrl + scope.row.imgUrl : scope.row.imgUrl"> -->
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="imgs"
                  :label="this.$i18n.t('shopProcess.brandQualifications')"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.imgs.length" class="brand-logo">
                      <el-image
                        v-for="(img,index) in row.imgs"
                        :key="index"
                        class="tab-img"
                        :src="img"
                        :preview-src-list="row.imgs"
                      />
                      <!-- <img
                        v-for="(item, index) in row.imgs"
                        :key="index"
                        :src="item.indexOf('http')===-1 ? resourcesUrl + item : item"
                      > -->
                    </div>
                    <div v-if="!row.imgs.length">--</div>
                    <!-- <pics-upload @imgUrl="getImgUrl(arguments, scope.$index)" /> -->
                  </template>
                </el-table-column>
                <el-table-column
                  prop="brandStatus"
                  :label="this.$i18n.t('shopProcess.brandStatus')"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.brandStatus === 1" class="tag-txt">{{ $t('publics.normal') }}</div>
                    <div v-if="scope.row.brandStatus === 0" class="tag-txt red-tag-txt">{{ $t('publics.LowerShelf') }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>

        <!-- 签约有效期 -->
        <div class="s-sign-item s-item">
          <div class="table-data-title">
            <div class="text"><span class="stress">*</span>{{ $t('shopProcess.validityPeriodOfContract') }}</div>
            <div class="tips">{{ $t('shopProcess.validPeriod') }}</div>
          </div>
          <div class="si-content">
            <div>
              <el-date-picker
                v-model="contractTimeRange"
                type="daterange"
                range-separator="至"
                :start-placeholder="this.$i18n.t('shopProcess.startTime')"
                :end-placeholder="this.$i18n.t('shopProcess.endTime')"
                value-format="yyyy-MM-dd HH:mm:ss"
                size="small"
                @change="getContractTimeRange"
                :clearable="false"
              />
            </div>
          </div>
        </div>
        <!-- 商家类型 -->
        <div class="s-sign-item s-item">
          <div class="table-data-title">
            <div class="text"><span class="stress">*</span>{{ $t('shopProcess.shopType') }}</div>
          </div>
          <div class="si-content">
            <div>
              <el-radio v-model="signingInfo.type" :label="0">{{ $t('shopProcess.ordinaryShop') }}</el-radio>
              <el-radio v-model="signingInfo.type" :label="1">{{ $t('shopProcess.preferredGoodShop') }}</el-radio>
            </div>
          </div>
        </div>
        <div class="default-btn primary-btn foot-btn" @click="updateSigningInfo">{{ $t('shopProcess.saveContractInformation') }}</div>
      </div>
      <!-- /签约信息 -->

      <!-- 财务信息 -->
      <div v-if="navStatus === 3" class="financial-info">
        <div class="table-data-title">
          <div class="text"><span class="asterisk">*</span>{{ $t('shopProcess.settlementAccount') }}</div>
          <div class="tips">
            {{ $t('shopProcess.added') }}
            <span class="txt-bold">{{ settlementAccounts.length }}</span>
            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.settlementAccount') }},{{ $t('shopProcess.mostAdd') }}
            <span class="txt-bold">5</span>
            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.settlementAccount') }}
          </div>
        </div>
        <div class="table-box">
          <el-table
            :data="settlementAccounts"
            header-cell-class-name="table-header"
            style="width: 100%"
          >
            <el-table-column
              prop="bankName"
              :label="this.$i18n.t('shopProcess.bankName')"
            />
            <el-table-column
              prop="recipientName"
              :label="this.$i18n.t('shopProcess.recipientName')"
            />
            <el-table-column
              prop="cardNo"
              :label="this.$i18n.t('shopProcess.cardNo')"
            />
            <el-table-column
              prop="openingBank"
              :label="this.$i18n.t('shopProcess.openingBank')"
            />
            <el-table-column
              prop="isDefault"
              :label="this.$i18n.t('shopProcess.masterAccount')"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.isDefault ? $t('shopProcess.yes') : $t('shopProcess.no') }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- /财务信息 -->

    </div>

    <category-add-or-update v-if="cateAddOrUpdateVisible" ref="cateAddOrUpdate" :sign-category-list="signCategoryList" @closePopup="closePopup" />
    <brand-add-or-update v-if="brandAddOrUpdateVisible" ref="brandAddOrUpdate" @closePopup="closePopup" />
    <!-- 类目签约弹窗 -->
    <add-signing-category
      v-if="addSigningCategoryVisible"
      ref="addSigningCategory"
      :applyForSign="true"
      :signingCount="signCategoryList.length"
      @closePopup="closePopup"
    />
    <!-- 品牌签约弹窗 -->
    <add-signing-brand
      v-if="addSigningBrandVisible"
      ref="addSigningBrand"
      :applyForSign="true"
      :signingCount="signedBrands.length"
      @closePopup="closePopup"
    />
  </div>
</template>

<script>
// import * as api from '@/api/platform/audit-shop'
// import * as addrApi from '@/api/delivery/transport'
import addSigningCategory from './signing-components/category-add-or-update'
import addSigningBrand from './signing-components/brand-add-or-update'
import { treeDataTranslate } from '@/utils'
import ImgUpload from '@/components/img-upload'
import { validEmail, isCreditCode, validNoEmptySpace, removeHeadAndTailSpaces } from '@/utils/validate'
import categoryAddOrUpdate from './shopEdit/category-add-or-update'
import brandAddOrUpdate from './shopEdit/brand-add-or-update'
import moment from 'moment'
export default {
  components: {
    ImgUpload,
    categoryAddOrUpdate,
    brandAddOrUpdate,
    addSigningCategory,
    addSigningBrand
  },
  data () {
    const validateMobile = (rule, value, callback) => {
      let phoneReg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/
      let mobile = /^(?:(?:\+|00)86)?1\d{10}$/
      if (phoneReg.test(value) || mobile.test(value)) {
        callback()
      } else {
        callback(new Error(this.$i18n.t('shopProcess.telErrorTips')))
      }
    }
    const validateEmail = (rule, value, callback) => {
      if (!validEmail(value) || value.indexOf(' ') !== -1) {
        callback(new Error(this.$i18n.t('shopProcess.emailErrorTips')))
      } else {
        callback()
      }
    }
    const vaildCreditCode = (rule, value, callback) => {
      if (!isCreditCode(value)) {
        callback(new Error(this.$i18n.t('shopProcess.creditCodeErrorTips')))
      } else {
        callback()
      }
    }
    const validateNotEmpty = (role, value, callback) => {
      if (validNoEmptySpace(value)) {
        callback(new Error(this.$i18n.t('shopProcess.inputAllSpace')))
      } else {
        callback()
      }
    }
    const validateNotEmptyRep = (role, value, callback) => {
      this.companyInfoForm.representative = this.companyInfoForm.representative.trim()
      if (this.companyInfoForm.representative === '' || this.companyInfoForm.representative.indexOf(' ') !== -1) {
        callback(new Error(this.$i18n.t('shopProcess.inputAllSpace')))
      } else {
        callback()
      }
    }
    return {
      removeHeadAndTailSpaces: removeHeadAndTailSpaces,
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      shopId: this.$route.query.shopId || 0,
      isSubmit: false,
      navStatus: 0,

      // 语言
      lang: window.localStorage.getItem('lang'),

      // 店铺审核状态
      shopAuditStatus: {},
      // 店铺状态
      shopStatus: {},

      // 店铺基本信息
      shopBasicInfo: {},
      contractTimeRange: [],
      shopBasicInfoRules: {
        merchantName: [
          { required: true, message: this.$i18n.t('shopProcess.merchantNameNotEmpty'), trigger: 'blur' },
          { min: 2, max: 10, message: this.$i18n.t('shopProcess.merchantNameErrorTips'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }

        ],
        shopName: [
          { required: true, message: this.$i18n.t('shopProcess.shopNameNotEmpty'), trigger: 'blur' },
          { min: 2, max: 20, message: this.$i18n.t('shopProcess.shopNameInputTips'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }
        ],
        // contactName: [
        //   { required: true, message: '联系人不能为空', trigger: 'blur' },
        //   { min: 2, max: 10, message: '联系人长度在2-10个字符之间', trigger: 'blur' },
        //   { validator: validateNotEmpty, trigger: 'blur' }
        // ],
        tel: [
          { required: true, message: this.$i18n.t('shopProcess.telNotEmpty'), trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ],
        email: [
          { required: true, message: this.$i18n.t('shopProcess.emailInputTips'), trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ],
        currentAddr: [
          { required: true, message: this.$i18n.t('shopProcess.addrInputTips'), trigger: ['blur', 'change'] }
        ],
        shopAddress: [
          { required: true, message: this.$i18n.t('shopProcess.detailAddrNotEmpty'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }
        ],
        shopLogo: [
          { required: true, message: this.$i18n.t('shopProcess.logoNotEmpty'), trigger: 'change' }
        ],
        // mobileBackgroundPic: [
        //   { required: true, message: this.$i18n.t('shopProcess.mobilePicNotEmpty'), trigger: 'change' }
        // ],
        // pcBackgroundPic: [
        //   { required: true, message: this.$i18n.t('shopProcess.pcPicNotEmpty'), trigger: 'change' }
        // ],
        businessLicense: [
          { required: true, message: this.$i18n.t('shopProcess.businessLicenseNotEmpty'), trigger: 'change' }
        ],
        identityCardFront: [
          { required: true, message: this.$i18n.t('shopProcess.identityCardFrontNotEmpty'), trigger: 'change' }
        ],
        identityCardLater: [
          { required: true, message: this.$i18n.t('shopProcess.identityCardLaterNotEmpty'), trigger: 'change' }
        ]
      },
      // 省市区
      currentAddr: [], // 选中地址
      addrList: [],
      addrListTreeProps: {
        value: 'areaId',
        label: 'areaName'
      },

      // 店铺工商信息
      companyInfoForm: {
        creditCode: '',
        firmName: '',
        residence: '',
        representative: '',
        capital: '',
        foundTime: '',
        startTime: '',
        endTime: '',
        // businessScope: '',
        // businessLicense: '',
        // identityCardFront: '',
        // identityCardLater: '',
        timeRange: []
      },
      // 店铺签约信息
      signingInfo: {
        contractStartTime: '', // 签约起始时间
        contractEndTime: '', // 签约终止时间
        type: '' // 店铺类型 0普通店铺 1优选好店
      },
      pickerOptions: {
        disabledDate (time) {
          const date = moment().add(0, 'days').startOf('days')
          return (
            time.getTime() >= date.valueOf()
          )
        }
      },
      companyInfoRule: {
        creditCode: [
          { required: true, message: this.$i18n.t('shopProcess.creditCodeInputTips'), trigger: 'blur' },
          { validator: vaildCreditCode, trigger: 'blur' }
        ],
        firmName: [
          { required: true, message: this.$i18n.t('shopProcess.firmNameNotEmpty'), trigger: 'blur' }
        ],
        residence: [
          { validator: validateNotEmpty, trigger: ['blur', 'change'] }
        ],
        businessScope: [
          { required: true, message: this.$i18n.t('shopProcess.businessScopeNotEmpty'), trigger: 'blur' }
        ],
        timeRange: [
          { required: true, message: this.$i18n.t('shopProcess.businessTimeNotEmpty'), trigger: 'change' }
        ],
        // businessLicense: [
        //   { required: true, message: '营业执照需要上传', trigger: 'change' }
        // ],
        representative: [
          { required: true, message: this.$i18n.t('shopProcess.representativeNotEmpty'), trigger: 'blur' },
          { validator: validateNotEmptyRep, trigger: 'blur' }
        ]
        // identityCardFront: [
        //   { required: true, message: '上传法人身份证人像面', trigger: 'change' }
        // ],
        // identityCardLater: [
        //   { required: true, message: '上传法人身份证国徽面', trigger: 'change' }
        // ]
      },

      // 店铺分类签约信息
      signCategoryList: [],
      // 平台品牌签约信息
      signedBrands: [], // 平台品牌+自定义品牌
      // 自增签约品牌信息
      customizeBrandList: [],
      cateAddOrUpdateVisible: false,
      brandAddOrUpdateVisible: false,
      addSigningCategoryVisible: false,
      addSigningBrandVisible: false,

      // 店铺财务信息
      settlementAccounts: [],

      // 定位
      show: false,
      center: {
        lng: 113.327955,
        lat: 23.136783
      },
      zoom: 18,

      applyingCategoryNum: 0, // 申请中类目数量
      applyingBrandNum: 0 // 申请中品牌数量

    }
  },

  mounted () {
    // 查询基本信息
    this.switchNav(0)
    // 获取地址列表
    this.getAddrList()
    // 店铺审核状态
    this.queryShopAuditStatus()
    // 初始化地图数据
    this.setCenter()
  },

  methods: {
    switchNav (value) {
      this.navStatus = value
      if (value === 1) {
        // 查询工商信息
        this.queryShopBusinessInfo()
      } else if (value === 2) {
        // 查询分类签约信息
        this.getSignCategoryList()
        // 查询品牌签约信息
        this.getSignBrandList()

        // 查询分类申请信息
        this.getSignCategoryList(0)
        // 查询品牌申请信息
        this.getSignBrandList(0)
      } else if (value === 3) {
        // 查询财务信息
        this.queryShopFinancialInfo()
      } else {
        // 查询基本信息
        this.queryShopBasicInfo()
      }
      this.$forceUpdate()
    },

    /**
     * 店铺审核状态
     */
    queryShopAuditStatus () {
      this.$http({
        url: this.$http.adornUrl(`/shop/shopAuditing/${this.shopId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.shopAuditStatus = data
        // this.shopStatus = data.shopDetail
      })
      // api.getShopAuditStatus(this.shopId).then(data => {
      //   this.shopAuditStatus = data
      //   this.shopStatus = data.shopDetail
      // })
    },

    /**
     * 查询基本信息
     */
    queryShopBasicInfo () {
      this.$http({
        url: this.$http.adornUrl('/platform/shopDetail/info'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId
        })
      }).then(({ data }) => {
        this.shopBasicInfo = data
        this.signingInfo.type = data.type
        if (data.contractStartTime && data.contractEndTime) {
          this.signingInfo.contractStartTime = data.contractStartTime
          this.signingInfo.contractEndTime = data.contractEndTime
          this.contractTimeRange = [data.contractStartTime, data.contractEndTime]
        }
        this.shopBasicInfo.currentAddr = [
          data.provinceId,
          data.cityId,
          data.areaId
        ]
        if (data.shopLat && data.shopLng) {
          this.center = {
            lng: Number.parseFloat(data.shopLng),
            lat: Number.parseFloat(data.shopLat)
          }
        }
        this.shopStatus.shopStatus = data.shopStatus
      })
    },
    getShopLogoImgUrl (imgUrl) {
      this.shopBasicInfo.shopLogo = imgUrl
    },
    /**
     * 省市区
     */
    getAddrList () {
      // addrApi.listAreaOfEnable({}).then(data => {
      //   this.addrList = treeDataTranslate(data, 'areaId', 'parentId')
      // })
      this.$http({
        url: this.$http.adornUrl(`/admin/area/list`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.addrList = treeDataTranslate(data, 'areaId', 'parentId')
      })
    },
    /**
     * 监听地址改变
     */
    handleAddrChange (value) {
      if (value.length > 0) {
        const labels = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels
        this.shopBasicInfo.province = labels[0]
        this.shopBasicInfo.provinceId = value[0]
        this.shopBasicInfo.city = labels[1]
        this.shopBasicInfo.cityId = value[1]
        this.shopBasicInfo.area = labels[2]
        this.shopBasicInfo.areaId = value[2]
        this.mapLocation(true)
      }
    },

    /**
     * 查询工商信息
     */
    queryShopBusinessInfo () {
      this.$http({
        url: this.$http.adornUrl('/platform/shopCompany'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId
        })
      }).then(({ data }) => {
        this.companyInfoForm = data
        this.companyInfoForm.timeRange = []
        if (data.startTime && data.endTime) {
          this.companyInfoForm.timeRange.push(data.startTime)
          this.companyInfoForm.timeRange.push(data.endTime)
        } else {
          this.companyInfoForm.timeRange = []
        }
      })
    },
    /**
     * 营业时间赋值
     */
    handleTimeData (date) {
      // 单纯视图更新无限改用强制刷新this.$forceUpdate()
      this.$set(this.companyInfoForm, 'timeRange', [date[0], date[1]])
      this.$forceUpdate()
      this.companyInfoForm.startTime = date[0]
      this.companyInfoForm.endTime = date[1]
    },

    /**
     * 注册资本输入框校验
     */
    changeNum () {
      const capital = this.companyInfoForm.capital
      this.companyInfoForm.capital = this.checkInput(capital)
      if (Number.parseFloat(this.companyInfoForm.capital) === 0) {
        this.companyInfoForm.capital = 0
      }
      if (Number.parseFloat(this.companyInfoForm.capital) > 99999999) {
        this.companyInfoForm.capital = 99999999
      }
    },
    /**
     * input输入框只允许输入正数和小数(保留小数点后两位)
     */
    checkInput (num) {
      if (num) {
        var tmpVal = num.replace(/[^\d^\\.]/g, '')
        var reg = /^(0|([1-9]\d*))(\.\d{1,2})?$/ // 最多允许后输入两位小数
        if (!reg.test(tmpVal)) {
          tmpVal = tmpVal + ''
          tmpVal = tmpVal.substring(0, tmpVal.indexOf('.') + 3)
          var n = (tmpVal.split('.')).length - 1
          if (n > 1) {
            tmpVal = tmpVal.substring(0, tmpVal.indexOf('.'))
          }
        }
        return tmpVal
      } else {
        return ''
      }
    },
    /**
     * 输入框不允许输入'-'或'+'
     */
    channelInputLimit (e) {
      const key = e.key
      if (key === '-' || key === '+') {
        e.returnValue = false
        return false
      }
      return true
    },

    /**
     * 签约类目列表
     */
    getSignCategoryList (status = 1) {
      this.$http({
        url: this.$http.adornUrl('/prod/category/signingInfoByShopId'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId,
          status: status // 签约状态：1：已通过 0待审核 -1未通过
        })
      }).then(({ data }) => {
        if (data) {
          if(status ===1) {
            this.signCategoryList = data
            this.signCategoryList.forEach(item => {
              item.imgs = item.qualifications ? item.qualifications.split(',') : []
              if (item.imgs.length) {
                item.imgs.forEach(img => {
                  img = this.getImgSrc(img)
                })
              }
            })
          }else if(status === 0) {
            this.applyingCategoryNum = data.length
          }
        }
      })
    },
    /**
     * 获取签约品牌列表
     */
    getSignBrandList (status = 1) {
      this.$http({
        url: this.$http.adornUrl('/platform/brand/listSigningByShopId'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId,
          status: status // 签约状态：1：已通过 0待审核 -1未通过
        })
      }).then(({ data }) => {
        if(status === 1) {
          // data.platformBrandList.length ? this.signedBrands.push(...data.platformBrandList) : this.signedBrands = []
          this.signedBrands = data.platformBrandList
          this.signedBrands.forEach(el => {
            el.imgs = el.qualifications ? el.qualifications.split(',') : []
            if (el.imgs.length) {
              el.imgs.forEach(img => {
                img = this.getImgSrc(img)
              })
            }
          })
        }else if(status === 0) {
          this.applyingBrandNum = data.platformBrandList.length
        }

      })
    },

    /**
     * 获取图片路径
     */
    getImgSrc (img) {
      if (!img) {
        return ''
      }
      if (img.indexOf('http://') === 0 || img.indexOf('https://') === 0) {
        return img
      }
      return this.resourcesUrl + img
    },

    /**
     * 编辑签约信息弹窗
     */
    addSigningHandle (type) {
      if (type === 0) {
        this.addSigningCategoryVisible = true
        this.$nextTick(() => {
          this.$refs.addSigningCategory.init(this.shopId)
        })
        return
      }
      if (type === 1) {
        this.addSigningBrandVisible = true
        this.$nextTick(() => {
          this.$refs.addSigningBrand.init(this.shopId)
        })
      }
    },
    /**
     * 编辑签约信息弹窗
     * @param {Number} type 签约类型 0:类别 1:品牌
     */
    cateAddOrUpdateHandle (type) {
      if (type === 0) {
        this.cateAddOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.cateAddOrUpdate.init(this.shopId)
        })
      } else if (type === 1) {
        this.brandAddOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.brandAddOrUpdate.init(this.shopId)
        })
      }
    },

    /**
     * 关闭弹窗
     */
    closePopup (val) {
      if (val === 'category') {
        this.addSigningCategoryVisible = false
        this.cateAddOrUpdateVisible = false
        this.getSignCategoryList()

        // 查询分类申请信息
        this.getSignCategoryList(0)
      } else if (val === 'brand') {
        this.addSigningBrandVisible = false
        this.brandAddOrUpdateVisible = false
        this.getSignBrandList()
        
        // 查询品牌申请信息
        this.getSignBrandList(0)
      }
    },

    /**
     * 获取图片路径
     */
    getImgUrl (imgUrl, index) {
      const url = imgUrl[0]
      this.signCategoryList[index].qualifications = this.signCategoryList[index].qualifications === '' ? url : this.signCategoryList[index].qualifications + ',' + url
    },

    /**
     * 查询财务信息
     */
    queryShopFinancialInfo () {
      this.$http({
        url: this.$http.adornUrl('/platform/shopBankCard/listByShopId'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId
        })
      }).then(({ data }) => {
        this.settlementAccounts = data
      })
    },

    // 获取签约有效期
    getContractTimeRange (date) {
      this.signingInfo.contractStartTime = date[0]
      this.signingInfo.contractEndTime = date[1]
    },

    // 更新基本信息
    updateShopBasicInfo () {
      this.$refs['shopBasicInfo'].validate((valid) => {
        if (!valid) {
          return
        }
        this.$http({
          url: this.$http.adornUrl('/platform/shopDetail'),
          method: 'PUT',
          data: this.$http.adornData(this.shopBasicInfo)
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('shopProcess.baseInfoUpdateSuccess'),
            type: 'success',
            duration: 1000
          })
          this.queryShopBasicInfo()
        })
      })
    },

    /**
     * 储存工商信息
     */
    updateCompanyInfo () {
      this.companyInfoForm.shopId = this.shopId
      this.$refs['companyInfoForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.$http({
          url: this.$http.adornUrl('/platform/shopCompany'),
          method: 'PUT',
          data: this.$http.adornData(this.companyInfoForm)
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('shopProcess.businessInfoUpdateSuccess'),
            type: 'success',
            duration: 1000
          })
          this.queryShopBusinessInfo()
        })
      })
    },

    /**
     * 更新签约信息
     */
    updateSigningInfo () {
      if (this.isSubmit) {
        return
      }
      this.isSubmit = true
      this.signingInfo.shopId = this.shopId
      this.$http({
        url: this.$http.adornUrl('/platform/shopDetail/updateSigningInfo'),
        method: 'PUT',
        data: this.$http.adornData(this.signingInfo)
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('shopProcess.contractInfoUpdateSuccess'),
          type: 'success',
          duration: 1000
        })
        this.isSubmit = false
        // 更新签约信息成功后，需要更新店铺基本信息，因为店铺状态有可能发生改变
        this.queryShopBasicInfo()
      }).catch(({ e }) => {
        this.isSubmit = false
      })
    },

    /**
     * 初始化地图数据
     */
    setCenter () {
      this.center = null
      this.center = {
        lng: 113.327955,
        lat: 23.136783
      }
      this.zoom = 18
    },
    /**
     * 获取地图移动后回调的位置参数
     */
    syncCenterAndZoom (e) {
      this.setCenter()
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
      this.shopBasicInfo.shopLng = lng
      this.shopBasicInfo.shopLat = lat
    },
    /**
     * 关闭地图说明标签
     */
    infoWindowClose () {
      this.show = false
    },
    /**
     * 打开地图说明标签
     */
    infoWindowOpen () {
      this.show = true
    },
    // 定位地图
    mapLocation (isTrue) {
      let area = ''
      if (isTrue === true) {
        // 选择省市区时，定位地图
        if (this.shopBasicInfo.provinceId) {
          area = this.shopBasicInfo.province
          this.zoom = 6
          if (this.shopBasicInfo.cityId) {
            area = area + this.shopBasicInfo.city
            this.zoom = 10
            if (this.shopBasicInfo.areaId) {
              area = area + this.shopBasicInfo.area
              this.zoom = 14
              if (this.shopBasicInfo.shopAddress !== null) {
                // 详细地址
                area = this.shopBasicInfo.province + this.shopBasicInfo.city + this.shopBasicInfo.area + this.shopBasicInfo.shopAddress
                this.zoom = 18
              }
            }
          }
        }
      } else {
        this.center = null
        if (!this.shopBasicInfo.provinceId || !this.shopBasicInfo.cityId || !this.shopBasicInfo.areaId) {
          this.shopBasicInfo.shopAddress = null
          this.$message({
            message: this.$i18n.t('admin.selePCD'),
            type: 'error',
            duration: 1000
          })
          return
        }
        area = this.shopBasicInfo.province + this.shopBasicInfo.city + this.shopBasicInfo.area + this.shopBasicInfo.shopAddress
        this.zoom = 18
      }
      this.center = area
      this.isEditAddr = true
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  margin-bottom: 30px;
}
.app-container.shop-detail {
  font-size: 14px;
  color: #333;
  .head-title {
    margin-bottom: 15px;
  }

  .red-tag-txt {
    color: #ff4949;
  }

  // 导航栏
  .nav-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .nav {
      position: relative;
      display: inline-block;
      display: flex;
      white-space: nowrap;
      .nav-item {
        margin: 0;
        font-size: 14px;
        line-height: 1em;
        padding: 15px 20px;
        color: #333;
        cursor: pointer;
      }
      .nav-item.active {
        color: #155BD4;
        // background: rgba(24,144,255, 0.06);
        border-radius: 4px 4px 0 0;
        border-bottom: 2px solid #155bd4;
      }
    }
  }
  .nav-box::before {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    border-bottom: 1px solid #f0f0f0;
    content: '';
  }

  .shop-info-box {
    // 公共
    p {
      margin: 0;
    }
    p.tit {
      display: inline-block;
      text-align: right;
    }
    .txt-bold {
      color: #333;
    }
    .asterisk {
      color: red;
      padding-right: 5px;
    }
    .table-box {
      display: block;
      width: 100%;
      margin: 20px 0;
      & >>> .el-table th, .el-table td {
        border-color: #f0f0f0;
      }
      & >>> .el-table__body-wrapper {
        max-height: 245px;
        overflow-y: scroll;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
      }
      & >>> .el-table__body-wrapper::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      & >>> .el-table__body {
        width: 100%;
      }
    }

    // 图片框大小统一
    & >>> .plugin-images {
      display: block;
      width: auto;
      height: 130px;
      img {
        vertical-align: top;
      }
    }
    & >>> .el-upload--picture-card,
    & >>> .el-upload-list--picture-card .el-upload-list__item {
      width: 130px;
      height: 130px;
      line-height: 130px;
      margin: 0;
    }
    & >>> .el-upload-list--picture-card {
      display: block;
      width: auto;
      height: 100%;
    }

    // 表单项下间距
    .ci-wrapper,
    .basic-info-box {
      .el-form-item {
        margin-bottom: 30px;
      }
    }

    .license-content {
      display: flex;
    }
    // 图片示例
    .upload-example {
      display: flex;
      margin-left: 120px;
      .example-box {
        margin-left: 0;
        &:nth-child(2) {
          margin-left: 30px;
        }
      }
    }
    // 示例框
    .example-box {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 130px;
      height: 130px;
      background: #FFFFFF;
      border: 1px solid #EAEAEA;
      border-radius: 3px;
      box-sizing: border-box;
      margin-left: 30px;
      img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;
      }
      .tips {
        position: absolute;
        left: -1px;
        bottom: 0;
        width: 130px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #fff;
        background: rgba(51, 51, 51, 0.5);
        text-align: center;
        border-radius: 0px 0px 3px 3px;
      }
    }

      // 图片
    .tab-img {
      width: 60px;
      height: 60px;
      margin-right: 5px;
      cursor: pointer;
    }

    // 表格上的标题
    .table-data-title {
      display: flex;
      align-items: center;
      .text {
        font-size: 16px;
        min-width: 80px;
        .stress {
          color: #FF2120;
          padding-right: 5px;
        }
      }
      .tips {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
      .edit-btn {
        margin-left: auto;
        cursor: pointer;
      }
    }

    // 基本信息模块
    .basic-info-mod {
      // 审核状态
      .audit-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: #f7f8fa;
        padding: 20px;
        line-height: 1em;
        margin-top: 20px;
        color: #333;
        p.tit {
          width: 95px;
        }
        .week {
          color: #666;
        }
      }
      .addr-select {
        display: block;
        width: 100%;
      }
      .bg-img {
        display: flex;
        justify-content: flex-start;
        .business-license-box {
          margin-right: 30px;
          .img-tips {
            display: block;
            text-align: center;
            font-size: 12px;
            color: #666;
            line-height: 1.5em;
            margin-top: 8px;
            p  {
              margin: 0;
              padding: 0;
            }
          }
        }
      }
      .id-box {
        margin-bottom: 20px;
        .upload-content {
          .upload-img {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            & >>> .el-form-item {
              margin-bottom: 10px;
            }
            div {
              &:nth-child(2) {
                margin-left: 30px;
              }
            }
            .disabled-upload {
              & >>> .el-upload {
                background: #f5f7fa;
              }
            }
          }
          .upload-img.en-upload-img {
            & >>> .el-form-item.is-error {
              margin-bottom: 45px;
            }
          }
          .upload-img.zh-upload-img {
            & >>> .el-form-item.is-error {
              margin-bottom: 22px;
            }
          }
        }
        .upload-tips {
          margin-left: 120px;
        }
      }
      // 信息
      .basic-info-list {
        margin-top: 30px;
        .basic-info-box {
          display: flex;
          align-items: top;
          justify-content: flex-start;
          width: 100%;
          .left-info {
            width: 40%;
            min-width: 300px;
            margin-right: 80px;
            text-align: left;
          }
          .right-info {
            width: 45%;
            min-width: 300px;
          }
        }
        .basic-info-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 20px 30px;
        }
        .upload-tips {
          font-size: 12px;
          color: #999;
          height: auto;
          line-height: 1.5em;
          margin-top: 5px;
        }
      }
      .foot-btn {
        margin-left: 120px;
      }
    }
    // 工商信息
    .business-info-mod {
      margin-top: 30px;
      .ci-wrapper {
        // display: flex;
        // justify-content: flex-start;
        // width: 100%;
        .capital-int {
          & >>> .el-input__inner {
            padding-right: 0!important;
            border-radius: 2px 0 0 2px!important;
          }
        }
        & >>> .el-date-editor.el-input,
        & >>> .el-date-editor.el-input__inner {
          width: 100%;
        }
        & >>> .el-date-editor .el-range-separator {
          width: auto !important;
        }
        .left-info {
          // width: 504px;
          width: auto;
          min-width: 500px;
          max-width: 40%;
          .btn-box {
            display: flex;
            margin-left: 134px;
            margin-bottom: 40px;
            .prev-btn {
              margin-right: 13px;
            }
          }
        // }
        // .right-info {
          // width: 440px;
          // width: 45%;
          // min-width: 300px;
          // max-width: 500px;
          // margin-left: 30px;
          .business-license-box {
            .license-content {
              display: flex;
            }
          }
          .id-box {
            .upload-content {
              .upload-img {
                display: flex;
                div {
                  &:nth-child(2) {
                    margin-left: 20px;
                  }
                }
              }
              .upload-example {
                display: flex;
                // margin-top: 15px;
                margin-left: 134px;
                .example-box {
                  margin-left: 0;
                  padding: 5px;
                  &:nth-child(2) {
                    margin-left: 20px;
                  }
                }
              }
              .upload-tips {
                margin-left: 120px;
              }
            }
          }
          .img-static {
            display: block;
            width: 120px;
            height: 120px;
          }
          .img-static:not(:first-child) {
            margin-left: 20px;
          }

          // 示例框
          .example-box {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120px;
            height: 120px;
            background: #FFFFFF;
            border: 1px solid #EAEAEA;
            border-radius: 3px;
            box-sizing: border-box;
            margin-left: 20px;
            img {
              display: block;
              width: auto;
              max-width: 100%;
              height: auto;
              max-height: 100%;
            }
            .tips {
              position: absolute;
              left: -1px;
              bottom: 0;
              width: 120px;
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              color: #fff;
              background: rgba(51, 51, 51, 0.5);
              text-align: center;
              border-radius: 0px 0px 3px 3px;
            }
          }

          .upload-tips {
            font-size: 12px;
            color: #999;
            height: auto;
            line-height: 1.5em;
            margin-top: 10px;
          }

          // 图片上传框样式修改
          & >>> .el-upload {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120px;
            height: 121px;
            background: #FFFFFF;
            border: 1px solid #EAEAEA;
            border-radius: 3px;
            box-sizing: border-box;
            // img {
            //   width: 120px;
            // }
            .el-icon-plus {
              font-size: 22px;
              color: #EAEAEA;
            }
          }
        }
      }
      .foot-btn {
        margin-left: 150px;
      }
      .en-foot-btn {
        margin-left: 200px;
      }
    }
    // 签约信息
    .contract-info {
      width: 100%;
      margin-top: 30px;
      margin-bottom: 80px;
      .s-item {
        .si-content {
          margin-top: 12px;
          .img-box {
            display: flex;
            align-items: center;
            // justify-content: center;
            img {
              // 图片自适应
              // width: auto;
              // height: auto;
              // max-width: 57px;
              // max-height: 57px;
              // 固定宽高
              width: 57px;
              height: 57px;
            }
            img:not(:last-child) {
              margin-right: 5px;
            }
          }
          .brand-logo {
            display: flex;
            align-items: flex-start;
            img {
              // 图片自适应
              // width: auto;
              // height: auto;
              // max-width: 57px;
              // max-height: 57px;
              // 固定宽高
              width: 57px;
              height: 57px;
            }
            img:not(:last-child) {
              margin: 5px;
            }
          }
        }
        .table-con {
          padding: 0;
        }
      }
      .s-brand-item {
        margin: 50px 0 40px;
      }
      .s-sign-item {
        margin-bottom: 30px;
      }
      table {
        .table-item {
          .img-item {
            img {
              vertical-align: middle;
              width: 38px;
              height: 38px;
              background: #EBF1FF;
              border-radius: 19px;
              margin: auto;
            }
          }
        }
      }
      .btn-box {
        display: flex;
        justify-content: center;
        margin-bottom: 39px;
        .prev-btn {
          margin-right: 13px;
        }
      }
      & >>> .el-range-editor.el-input__inner {
        width: auto;
      }
    }
    // 财务信息
    .financial-info {
      margin: 30px 0;
      .table-data-title {
        margin-bottom: 20px;
      }
      .table-box {
        margin-top: 10px;
        & >>> .el-table__body-wrapper {
          height: auto;
          max-height: 100%;
        }
      }
    }

  }

  // 地图
  .map {
    width: 100%;
    height: 300px;
  }
}
</style>
