<script src="../../../../vue.config.js"></script>
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      class="zForm"
      ref="queryForm"
      size="mini"
      :inline="true"
      v-show="showSearch"
      label-width="88px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="编号" prop="storeCode">
            <el-input
              v-model="queryParams.storeCode"
              placeholder="请输入编号"
              clearable
              @input="onInput" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名称" prop="storeName">
            <el-input
              v-model="queryParams.storeName"
              placeholder="请输入名称"
              clearable
              @input="onInput" />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="height: 47px">
          <el-form-item label="是否关店" prop="validFlag">
            <el-select
              v-model="queryParams.validFlag"
              clearable
              placeholder="请选择是否关店"
              @change="onInput">
              <el-option
                v-for="item in isNotOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门店类型" prop="storeCategoryList">
            <el-select
              v-model="queryParams.storeCategoryList"
              clearable
              placeholder="请选择门店类型"
              multiple
              collapse-tags
              @change="onInput">
              <el-option
                v-for="item1 in storeCategoryOptions"
                :key="item1.dictValue"
                :label="item1.dictLabel"
                :value="item1.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            class="treeselectForm treeselectForm2 treeselectFormz treeselectFormNew"
            label="组织架构"
            prop="orgIds">
            <tree @treeselectFn="treeselectFn" :treeval="queryParams.orgIds"></tree>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="省" prop="province">
            <el-select
              v-model="queryParams.province"
              clearable
              placeholder="请选择省(州)"
              @change="provinceChange">
              <el-option
                v-for="item in provinceOptions"
                :key="item.provinceCode"
                :label="item.provinceName"
                :value="item.provinceCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="市" prop="city">
            <el-select
              size="mini"
              v-model="queryParams.city"
              clearable
              placeholder="请选择市"
              @change="cityChange">
              <el-option
                v-for="item in cityOptions"
                :key="item.cityCode"
                :label="item.cityName"
                :value="item.cityCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item size="mini" label="县(区)" prop="district">
            <el-select
              v-model="queryParams.district"
              clearable
              placeholder="请选择县(区)"
              @change="districtChange">
              <el-option
                v-for="item in districtOptions"
                :key="item.countyCode"
                :label="item.countyName"
                :value="item.countyCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item size="mini" label="乡镇街道" prop="townName">
            <el-select
              v-model="queryParams.townName"
              clearable
              placeholder="请选择乡镇街道"
              @change="townChange">
              <el-option
                v-for="item in townOptions"
                :key="item.townName"
                :label="item.townName"
                :value="item.townName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="城市等级" prop="countyLevel">
            <el-select
              v-model="queryParams.countyLevel"
              clearable
              placeholder="请选择城市等级"
              @change="onInput">
              <el-option
                v-for="item in cityLevelOptions"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictLabel">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门店标签" prop="storeLabelTypes">
            <el-select
              filterable
              v-model="queryParams.storeLabelTypes"
              clearable
              placeholder="请选择门店标签"
              @change="onInput"
              multiple
              collapse-tags>
              <el-option
                v-for="item in storeLabelsOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="8">-->
        <!--          <el-form-item label="经销商编号" prop="chainCode">-->
        <!--            <el-input-->
        <!--              v-model="queryParams.chainCode"-->
        <!--              placeholder="请输入经销商编号"-->
        <!--              clearable-->
        <!--              @input="onInput"-->
        <!--            />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="经销商名称" prop="chainCode">
            <!--            <el-select-->
            <!--              v-model="queryParams.chainCode"-->
            <!--              filterable-->
            <!--              clearable-->
            <!--              reserve-keyword-->
            <!--              placeholder="请选择经销商"-->
            <!--              @change="onInput">-->
            <!--              <el-option-->
            <!--                v-for="item in chainsList"-->
            <!--                :key="item.chainCode"-->
            <!--                :label="item.chainName"-->
            <!--                :value="item.chainCode">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
            <el-select
              v-model="queryParams.chainCode"
              clearable
              filterable
              :filter-method="filterMethod"
              v-el-select-loadmore="loadMore()"
              @visible-change="visibleChange">
              <el-option
                v-for="(item, index) in chainsList.slice(0, rangeNumber)"
                :key="item.chainCode"
                :label="item.chainName"
                :value="item.chainCode">
                <span style="float: left">{{ item.chainName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.chainCode
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审批状态" prop="processApprovalStatus">
            <el-select
              v-model="queryParams.processApprovalStatus"
              clearable
              placeholder="请选择审批状态"
              @change="onInput">
              <el-option
                v-for="item in processApprovalStatusList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否结案" prop="approvalStatus">
            <el-select
              v-model="queryParams.approvalStatus"
              clearable
              placeholder="请选择是否结案"
              @change="onInput">
              <el-option
                v-for="item in isNotOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label=" ">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['sfa:store:add']"
          >新增</el-button
        >
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="success"-->
      <!--          plain-->
      <!--          icon="el-icon-edit"-->
      <!--          size="mini"-->
      <!--          :disabled="single"-->
      <!--          @click="handleUpdate"-->
      <!--          v-hasPermi="['sfa:store:edit']"-->
      <!--        >修改</el-button>-->
      <!--      </el-col>-->
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="danger"-->
      <!--          plain-->
      <!--          icon="el-icon-delete"-->
      <!--          size="mini"-->
      <!--          :disabled="multiple || deleteMultiple == '-1'"-->
      <!--          @click="handleDelete"-->
      <!--          v-hasPermi="['sfa:store:remove']"-->
      <!--        >无效</el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['sfa:store:export']"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExportDJXS"
          v-hasPermi="['sfa:store:export']"
          >导出门店经销商关系</el-button
        >
      </el-col>
      <!--      <el-col :span="1.5" style="position: absolute;right: 296px;">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="initPositionFn"
          :disabled="multiple"
        >坐标初始化</el-button>
      </el-col>-->
      <el-col :span="1.5" style="position: absolute; right: 96px">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="initUpdateStoreNum"
          :disabled="multiple"
          v-hasPermi="['sfa:store:resetUpdateStoreNum']"
          >重置门店地址修改次数</el-button
        >
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="storeList"
      @selection-change="handleSelectionChange"
      @row-dblclick="storeRowClick"
      height="460">
      <el-table-column type="selection" width="45" align="center" />
      <el-table-column label="编号" align="center" prop="storeCode" width="110">
        <template slot-scope="scope">
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            @click="storeRowClick(scope.row)"-->
          <!--            type="text"-->
          <!--          >{{scope.row.storeCode}}</el-button>-->
          <span
            style="color: #1890ff; font-size: 12px"
            class="btn"
            :data-clipboard-text="scope.row.storeCode"
            >{{ scope.row.storeCode }}&nbsp;&nbsp;<i class="el-icon-document-copy"></i
          ></span>
        </template>
      </el-table-column>
      <el-table-column
        label="名称"
        align="center"
        prop="storeName"
        width="200px"
        :show-overflow-tooltip="true" />
      <el-table-column label="门店标签" align="center" prop="orgName" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.storeLabels">
            <el-popover popper-class="zpover zpover6" placement="bottom-start" trigger="hover">
              <div>
                <p>本店{{ timeData }}下单SKU数</p>
              </div>
              <div
                class="visitStoreIco"
                v-if="scope.row.storeLabels.zysslNums"
                style="background-color: #fff; position: relative"
                slot="reference">
                <p
                  style="
                    width: 100%;
                    position: absolute;
                    z-index: 1;
                    top: 0.2px;
                    width: 22px;
                    margin: 0;
                    margin-left: 3.6px;
                    text-align: center;
                    font-size: 12px;
                  ">
                  {{ scope.row.storeLabels.zysslNums }}
                </p>
                <img src="./../../../assets/images/ord.png" class="storeicon" />
              </div>
            </el-popover>
            <el-popover
              popper-class="zpover zpover5"
              placement="bottom"
              width="200"
              trigger="hover">
              <div>
                <p>已参加:</p>
                <p v-for="tt in (scope.row.storeLabels.targetOne + '').split(';')">{{ tt }}</p>
              </div>
              <div
                class="visitStoreIco"
                v-if="scope.row.storeLabels.targetOne"
                style="background-color: #fff"
                slot="reference">
                <img src="./../../../assets/images/targetOne.png" class="storeicon" />
              </div>
            </el-popover>
            <el-popover
              popper-class="zpover"
              placement="bottom"
              width="120"
              trigger="hover"
              content="调色机5天未联网">
              <div
                v-if="scope.row.storeLabels.ccmOffline"
                class="visitStoreIco"
                style="background-color: #fff"
                slot="reference">
                <img src="./../../../assets/images/Network.png" class="storeicon" />
              </div>
            </el-popover>
            <el-popover
              popper-class="zpover"
              placement="bottom"
              width="200"
              trigger="hover"
              content="同城店近60天未下单">
              <div
                v-if="scope.row.storeLabels.fxNoOrder"
                class="visitStoreIco"
                style="background-color: #fff"
                slot="reference">
                <img src="./../../../assets/images/order60.png" class="storeicon" />
              </div>
            </el-popover>
            <el-popover
              popper-class="zpover"
              placement="bottom"
              width="200"
              trigger="hover"
              content="金牌店近30天未下单">
              <div
                v-if="scope.row.storeLabels.noOrder"
                class="visitStoreIco"
                style="background-color: #fff"
                slot="reference">
                <img src="./../../../assets/images/order.png" class="storeicon" />
              </div>
            </el-popover>
            <el-popover
              popper-class="zpover"
              placement="bottom"
              width="200"
              trigger="hover"
              content="本店本月进过专业时时丽">
              <div
                v-if="scope.row.storeLabels.zyssl"
                class="visitStoreIco"
                style="background-color: #ed5c68"
                slot="reference">
                专
              </div>
            </el-popover>
            <el-popover
              popper-class="zpover zpover1"
              placement="bottom"
              width="200"
              trigger="hover"
              content="本店本月进过超好贴">
              <div
                v-if="scope.row.storeLabels.chtczj"
                class="visitStoreIco"
                style="background-color: #0057ba"
                slot="reference">
                超
              </div>
            </el-popover>
            <el-popover
              placement="bottom"
              popper-class="zpover zpover1"
              trigger="hover"
              :content="'本店本月已拜访过' + scope.row.storeLabels.visitTimes + '次'">
              <div
                v-if="scope.row.storeLabels.visitTimes && scope.row.storeLabels.visitTimes > 0"
                class="visitStoreIco"
                slot="reference"
                style="background-color: #fff; position: relative">
                <p
                  style="
                    width: 100%;
                    position: absolute;
                    z-index: 1;
                    top: -2px;
                    margin: 0;
                    text-align: center;
                    font-size: 12px;
                  ">
                  {{ scope.row.storeLabels.visitTimes }}
                </p>
                <img src="./../../../assets/images/ordernum.png" class="storeicon" />
              </div>
              <el-table :data="scope.row.userVisitTimesMap" style="width: 500px" max-height="300px">
                <el-table-column prop="userName" label="业务员"> </el-table-column>
                <el-table-column prop="visitTimes" label="拜访次数"> </el-table-column>
              </el-table>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否关店" align="center" prop="validFlag" width="80px">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.store_valid_flag" :value="scope.row.validFlag" />
        </template>
      </el-table-column>
      <el-table-column label="门店类型" align="center" prop="storeCategory" width="140px">
        <template slot-scope="scope">
          {{ storeCategoryFormatter(scope.row, scope.column) }}
        </template>
      </el-table-column>

      <!--      <el-table-column label="组织架构" align="center" prop="orgName" ></el-table-column>-->
      <el-table-column
        label="公司"
        align="center"
        prop="salesCompanyName"
        width="160px"></el-table-column>
      <el-table-column
        label="销售大区"
        align="center"
        prop="salesDqName"
        width="160px"></el-table-column>
      <el-table-column
        label="销售部"
        align="center"
        prop="salesDeptName"
        width="160px"></el-table-column>
      <el-table-column label="省" align="center" prop="provinceName" width="110px" />
      <el-table-column label="市" align="center" prop="cityName" width="110px" />
      <el-table-column label="县（区）" align="center" prop="districtName" width="110px" />
      <el-table-column label="乡镇街道" align="center" prop="townName" width="160px" />
      <el-table-column label="城市等级" align="center" prop="countyLevel" width="80px">
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{cityLevelsFormat(scope.row,scope.column)}}</span>-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column label="联系人" align="center" prop="contactName" width="110px" />
      <el-table-column label="电话号码" align="center" prop="telephone" width="140" />
      <el-table-column
        label="地址"
        align="center"
        prop="addressLine"
        width="110"
        :show-overflow-tooltip="true" />
      <!--      <el-table-column label="未知保留" align="center" prop="attribute5" />-->
      <el-table-column label="经销商" align="center" prop="chainInfo" width="210px">
        <template slot-scope="scope">
          <el-tooltip
            placement="top"
            :popper-class="scope.row.sfaStoreType.type == 'fxd' ? 'width600' : ''">
            <div slot="content">
              <el-table
                v-if="scope.row.sfaStoreType && scope.row.sfaStoreType.type == 'fxd'"
                :data="scope.row.sfaStoreChainsContactList">
                <el-table-column prop="categoryCode" label="品类编码" align="center">
                </el-table-column>
                <el-table-column prop="categoryDescribe" label="品类名称" align="center">
                </el-table-column>
                <el-table-column prop="chainCode" width="120" align="center" label="经销商编码">
                </el-table-column>
                <el-table-column prop="chainName" width="300" align="center" label="经销商名称">
                </el-table-column>
              </el-table>
              <div v-else>{{ chainInfoFormatter(scope.row) }}</div>
            </div>
            <span>{{ chainInfoFormatter(scope.row) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <!--      <el-table-column label="经销商编号" align="center" prop="chainCode" width="110px" />-->
      <!--      <el-table-column-->
      <!--        label="经销商名称"-->
      <!--        align="center"-->
      <!--        prop="chainName"-->
      <!--        width="260px"-->
      <!--        :show-overflow-tooltip="true" />-->
      <el-table-column label="面积" align="center" prop="area" />
      <el-table-column label="升级前门店编号" align="center" prop="oldStoreCode" width="130px" />
      <el-table-column label="厨卫关联门店编号" align="center" prop="kbStoreCode" width="130px" />
      <el-table-column label="厨卫关联门店名称" align="center" prop="kbStoreName" width="160px" />
      <el-table-column label="同城分销类型" align="center" prop="tcfxName" width="120px" />
      <el-table-column label="销售员工号" align="center" prop="workCode" width="130px" />
      <el-table-column
        label="销售员"
        align="center"
        prop="salesmanName"
        width="90px"
        :show-overflow-tooltip="true" />
      <el-table-column
        label="DIY门店编号"
        align="center"
        prop="attribute1"
        width="96px"
        v-if="isYSL" />
      <el-table-column label="门店创建时间" align="center" prop="shopCreateDate" width="116px" />
      <el-table-column label="审批状态" align="center" prop="processApprovalStatus" width="80px">
        <template slot-scope="scope">
          <span v-if="scope.row.processApprovalStatus == 0">未提交</span>
          <span v-if="scope.row.processApprovalStatus == 1">已提交</span>
          <span v-if="scope.row.processApprovalStatus == 2">审批通过</span>
          <span v-if="scope.row.processApprovalStatus == 3">审批拒绝</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center" prop="applicationTime" width="116px" />
      <el-table-column label="是否结案" align="center" prop="approvalStatus" width="80px">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.store_valid_flag" :value="scope.row.approvalStatus" />
        </template>
      </el-table-column>
      <el-table-column label="门店结案时间" align="center" prop="approvalDate" width="116px" />
      <el-table-column label="门店信息修改时间" align="center" prop="updateTime" width="170px" />
      <!--      <el-table-column label="用户登录编号" align="center" prop="personCode" />-->
      <!--      <el-table-column label="用户名" align="center" prop="personName" />-->
      <el-table-column
        label="经度"
        align="center"
        prop="lon"
        width="110px"
        :show-overflow-tooltip="true" />
      <el-table-column
        label="纬度"
        align="center"
        prop="lat"
        width="110px"
        :show-overflow-tooltip="true" />
      <el-table-column label="是否车铺开店" align="center" prop="carShop" width="170px">
        <template slot-scope="scope">
          <span v-if="scope.row.carShop == 1">是</span>
          <span v-if="scope.row.carShop == 0">否</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="260px"
        fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            :disabled="!scope.row.updatable"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="handleDetail(scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleValid(scope.row)"
            :disabled="!scope.row.updatable || scope.row.validFlag == 1"
            >无效</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="resetLon(scope.row)"
            :disabled="!scope.row.updateAddress"
            >坐标初始化</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改门店对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="85%" append-to-body>
      <el-form
        ref="form"
        size="mini"
        :model="form"
        :inline="true"
        :rules="rules"
        label-width="124px">
        <el-row>
          <el-col :span="8" v-if="title != '添加门店'">
            <el-form-item label="门店编号" prop="storeCode">
              <el-input
                v-model="form.storeCode"
                placeholder="请输入编号"
                disabled
                style="width: 193px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" prop="storeName">
              <el-input
                v-model="form.storeName"
                :disabled="formIsDisabled"
                placeholder="请输入名称"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="height: 47px">
            <el-form-item label="是否关店" prop="validFlag">
              <el-radio-group
                v-model="form.validFlag"
                @change="onInput()"
                :disabled="formIsDisabled">
                <el-radio
                  :label="item.dictValue"
                  :key="index"
                  v-for="(item, index) in isNotOptions"
                  >{{ item.dictLabel }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门店类型" prop="storeCategory">
              <el-select
                v-model="form.storeCategory"
                :disabled="formIsDisabled"
                placeholder="请选择门店类型"
                @change="onInputs"
                v-if="title != '门店详情' && $store.state.user.type != '2'">
                <el-option
                  v-for="item in storeCategoryForm"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                  <!-- v-if="storeCategoryIsAdd(item.remark)"> -->
                </el-option>
              </el-select>
              <el-select
                v-model="form.storeCategory"
                :disabled="formIsDisabled"
                placeholder="请选择门店类型"
                @change="onInputs"
                v-else>
                <el-option
                  v-for="item in storeCategoryForm"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :style="{ height: title == '添加门店' ? '47px' : '46px' }">
            <el-form-item
              :class="[
                'treeselectForm',
                'treeselectForm3',
                { borderRed: !validTree },
                { isDisabled: formIsDisabled },
              ]"
              label="组织架构"
              prop="orgId">
              <!--              <tree-single @treeselectFn="treeselectFnSingle" :treeval="form.abc" :isDisabled="formIsDisabled" :ismultiple="false" style="width:193px;"></tree-single>-->
              <treeselect
                class="treePopup"
                v-model="form.orgId"
                :multiple="false"
                :disable-branch-nodes="true"
                value-consists-of="LEAF_PRIORITY"
                :options="menuOptions"
                :normalizer="normalizer1"
                placeholder="选择组织架构"
                noOptionsText="暂无数据"
                :clearable="false"
                @select="treeselectFnSingle" />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="8">-->
          <!--            <el-form-item label="国家" prop="country">-->
          <!--              <el-select v-model="form.country" :disabled="formIsDisabled" clearable placeholder="请选择国家" @change="onInput()">-->
          <!--                <el-option-->
          <!--                  v-for="item in countryOptions"-->
          <!--                  :key="item.regionId"-->
          <!--                  :label="item.regionName"-->
          <!--                  :value="item.regionId">-->
          <!--                </el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="8">
            <el-form-item label="省" prop="province">
              <el-select
                v-model="form.province"
                :disabled="formAddressIsDisabled"
                clearable
                placeholder="请选择省(州)"
                @change="provinceChange2">
                <el-option
                  v-for="item in provinceOptions2"
                  :key="item.provinceCode"
                  :label="item.provinceName"
                  :value="item.provinceCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市" prop="city">
              <el-select
                size="mini"
                v-model="form.city"
                :disabled="formAddressIsDisabled"
                clearable
                placeholder="请选择市"
                @change="cityChange2">
                <el-option
                  v-for="item in cityOptions2"
                  :key="item.cityCode"
                  :label="item.cityName"
                  :value="item.cityCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="县（区）" prop="district">
              <el-select
                v-model="form.district"
                clearable
                :disabled="formAddressIsDisabled"
                placeholder="请选择县(区)"
                @change="districtChange2">
                <el-option
                  v-for="item in districtOptions2"
                  :key="item.countyCode"
                  :label="item.countyName"
                  :value="item.countyCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="乡镇街道" prop="townName">
              <el-select
                v-model="form.townName"
                clearable
                :disabled="formAddressIsDisabled"
                placeholder="请选择乡镇街道"
                @change="townChange2">
                <el-option
                  v-for="item in townOptions2"
                  :key="item.townName"
                  :label="item.townName"
                  :value="item.townName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="城市等级" prop="countyLevel">
              <el-select
                v-model="form.countyLevel"
                disabled
                placeholder="请选择城市等级"
                @change="onInput()">
                <el-option
                  v-for="item in cityLevelOptions"
                  :key="item.dictLabel"
                  :label="item.dictLabel"
                  :value="item.dictLabel">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="老板"
              v-if="form.ifJzStoreType == 1 && form.storeCategory != 'C917'">
              <el-input
                v-model="form.contactName"
                :disabled="formIsDisabled"
                placeholder="请输入老板"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
            <el-form-item
              label="联系人"
              prop="contactName"
              v-if="form.ifJzStoreType != 1 && form.storeCategory != 'C917'">
              <el-input
                v-model="form.contactName"
                :disabled="formIsDisabled"
                placeholder="请输入联系人姓名"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="电话号码"
              prop="telephone"
              v-if="form.ifJzStoreType == 1 && form.storeCategory != 'C917'">
              <el-input
                v-model.number="form.telephone"
                :disabled="formIsDisabled"
                maxlength="11"
                placeholder="请输入联系人手机"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
            <el-form-item
              label="电话号码"
              prop="telephone"
              v-if="form.ifJzStoreType != 1 && form.storeCategory != 'C917'"
              :rules="[
                { required: true, message: '电话号码不能为空', trigger: 'blur' },
                {
                  required: true,
                  pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                  message: '请输入正确的手机号',
                  trigger: 'blur',
                },
              ]">
              <el-input
                v-model.number="form.telephone"
                :disabled="formIsDisabled"
                maxlength="11"
                placeholder="请输入联系人手机"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址" prop="addressLine">
              <el-input
                v-model="form.addressLine"
                :disabled="formAddressIsDisabled"
                placeholder="请输入地址"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="8" v-show="title == '门店详情' && form.storeCategory != 'C917'">-->
          <!--            <el-form-item label="经销商编号" prop="chainCode">-->
          <!--              <el-input-->
          <!--                v-model="form.chainCode"-->
          <!--                placeholder="请输入经销商编号"-->
          <!--                disabled-->
          <!--                style="width: 193px" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <el-col :span="8">
            <el-form-item v-if="form.ifJzStoreType != 1" label="面积（㎡）" prop="area">
              <el-input
                v-model="form.area"
                :disabled="formIsDisabled"
                placeholder="请输入面积"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
            <el-form-item
              v-if="form.ifJzStoreType == 1"
              label="家装展厅面积（㎡）"
              prop="area"
              :rules="[
                { required: true, message: '面积不能为空', trigger: 'blur' },
                { required: true, pattern: /^\d+$/, message: '请输入大于0的数值', trigger: 'blur' },
              ]">
              <el-input
                v-model="form.area"
                :disabled="formIsDisabled"
                placeholder="请输入家装展厅面积"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="title != '添加门店'">
            <el-form-item label="升级前门店编号" prop="oldStoreCode">
              <el-input
                v-model="form.oldStoreCode"
                disabled
                placeholder="请输入升级前门店编号"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="title != '添加门店'">
            <el-form-item label="厨卫关联门店编号" prop="kbStoreCode">
              <el-input
                v-model="form.kbStoreCode"
                disabled
                placeholder="请输入厨卫关联门店编号"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="title != '添加门店'">
            <el-form-item label="厨卫关联门店名称" prop="kbStoreName">
              <el-input
                v-model="form.kbStoreName"
                disabled
                placeholder="请输入厨卫关联门店名称"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="title != '添加门店'">
            <el-form-item label="厨卫关联门店状态" prop="kbStoreState">
              <el-input
                v-model="form.kbStoreState"
                disabled
                placeholder="请输入厨卫关联门店状态"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="title != '添加门店'">
            <el-form-item label="销售员工号" prop="workCode">
              <el-input
                v-model="form.workCode"
                placeholder="请输入销售员工号"
                disabled
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="title != '添加门店'">
            <el-form-item label="销售员" prop="salesmanName">
              <el-input
                v-model="form.salesmanName"
                placeholder="请输入销售员姓名"
                disabled
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>

          <!--          <el-col :span="8">-->
          <!--            <el-form-item label="邮编" prop="postalCode">-->
          <!--              <el-input v-model="form.postalCode" placeholder="请输入邮编" style="width:193px;" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="8" v-show="title != '添加门店'">
            <el-form-item label="经度" prop="lon">
              <el-input
                v-model="form.lon"
                disabled
                placeholder="请输入经度"
                style="width: 143px"
                @input="onInput()" />
              <el-button type="text" @click="locationFn()">地图定位</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="title != '添加门店'">
            <el-form-item label="纬度" prop="lat">
              <el-input
                v-model="form.lat"
                disabled
                placeholder="请输入纬度"
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="title != '添加门店' && isYSL">
            <el-form-item label="DIY门店编号" prop="attribute1">
              <el-input
                v-model="form.attribute1"
                placeholder="请输入DIY门店编号"
                disabled
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="title == '门店详情'">
            <el-form-item label="门店创建时间" prop="shopcreatetime">
              <el-input
                v-model="form.shopCreateDate"
                placeholder="请输入门店创建时间"
                disabled
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="title == '门店详情'">
            <el-form-item label="门店信息修改时间" prop="updatetime">
              <el-input
                v-model="form.updateTime"
                placeholder="请输入门店信息修改时间"
                disabled
                style="width: 193px"
                @input="onInput()" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="title == '门店详情' || title == '修改门店'">
            <el-form-item label="是否车铺开店" prop="carShop">
              <span v-if="form.carShop == 1">是</span>
              <span v-if="form.carShop == 0">否</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="经销商名称"
              prop="chainCode"
              class="per100"
              v-if="form.ifJzStoreType != 1 && form.storeCategory != 'C917'"
              :rules="[{ required: true, message: '经销商名称不能为空' }]">
              <!--              <el-select-->
              <!--                v-model="form.chainCode"-->
              <!--                filterable-->
              <!--                reserve-keyword-->
              <!--                clearable-->
              <!--                placeholder="请选择经销商"-->
              <!--                :disabled="formIsDisabled"-->
              <!--                @change="onInput()"-->
              <!--                style="width: 545px;">-->
              <!--                <el-option-->
              <!--                  v-for="item in chainsList2"-->
              <!--                  :key="item.chainCode"-->
              <!--                  :label="item.chainName"-->
              <!--                  :value="item.chainCode">-->
              <!--                </el-option>-->
              <!--              </el-select>-->
              <el-select
                v-model="form.chainCode"
                prop="chainCode"
                clearable
                filterable
                :filter-method="filterMethod2"
                v-el-select-loadmore="loadMore2()"
                @visible-change="visibleChange2"
                :disabled="formIsDisabled"
                clearable
                @change="onInput()"
                v-if="!isTcfx"
                style="width: 100%">
                <el-option
                  v-for="(item, index) in chainsList2.slice(0, rangeNumber2)"
                  :key="item.chainCode"
                  :label="item.chainName"
                  :value="item.chainCode">
                  <span style="float: left">{{ item.chainName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.chainCode
                  }}</span>
                </el-option>
              </el-select>
              <el-input
                readonly
                type="textarea"
                :disabled="formIsDisabled"
                v-else
                @focus="cascaderClick()"
                placeholder="请选择"
                style="width: 545px"
                v-model="form.chainCode"></el-input>
              <el-dialog title="请选择" :visible.sync="cascaderDialog" width="50%" append-to-body>
                <el-tabs tab-position="left">
                  <el-tab-pane v-for="item in chainOptions" :key="item.code">
                    <span slot="label"
                      ><span class="dot" v-if="cascader[item.code]"></span> {{ item.text }}</span
                    >
                    <el-radio-group
                      v-model="cascader[item.code]"
                      :key="item.code + 'R'"
                      @change="$forceUpdate()"
                      style="height: 400px; width: 100%; overflow: auto"
                      v-if="item.children.length > 0">
                      <el-radio
                        :label="child.chainCode"
                        v-for="child in item.children"
                        :key="child.chainCode"
                        @click.native.prevent="radioClick(child.chainCode, item.code)"
                        style="display: block; height: 28px"
                        >{{ child.chainName }}</el-radio
                      >
                    </el-radio-group>
                    <div style="text-align: center; line-height: 200px" v-else>暂无数据</div>
                  </el-tab-pane>
                </el-tabs>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="cascaderCancel">取 消</el-button>
                  <el-button type="primary" @click="cascaderSubmit">确 定</el-button>
                </span>
              </el-dialog>
            </el-form-item>
            <el-form-item
              label="经销商名称"
              v-if="form.ifJzStoreType == 1 && form.storeCategory != 'C917'">
              <!--              <el-select-->
              <!--                v-model="form.chainCode"-->
              <!--                filterable-->
              <!--                reserve-keyword-->
              <!--                clearable-->
              <!--                placeholder="请选择经销商"-->
              <!--                :disabled="formIsDisabled"-->
              <!--                @change="onInput()"-->
              <!--                style="width: 545px;">-->
              <!--                <el-option-->
              <!--                  v-for="item in chainsList2"-->
              <!--                  :key="item.chainCode"-->
              <!--                  :label="item.chainName"-->
              <!--                  :value="item.chainCode">-->
              <!--                </el-option>-->
              <!--              </el-select>-->
              <el-select
                v-model="form.chainCode"
                clearable
                filterable
                :filter-method="filterMethod2"
                v-el-select-loadmore="loadMore2()"
                @visible-change="visibleChange2"
                :disabled="formIsDisabled"
                clearable
                @change="onInput()"
                style="width: 100%">
                <el-option
                  v-for="(item, index) in chainsList2.slice(0, rangeNumber2)"
                  :key="item.chainCode"
                  :label="item.chainName"
                  :value="item.chainCode">
                  <span style="float: left">{{ item.chainName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.chainCode
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <el-col  v-show="title=='门店详情'||formIsDisabled">-->
          <!--            <el-table :data="form.orderProductStoreList" style="width: 100%">-->
          <!--              <el-table-column prop="productName" label="产品名称" />-->
          <!--              <el-table-column prop="orderNum" label="数量" width="100">-->
          <!--              </el-table-column>-->
          <!--            </el-table>-->
          <!--          </el-col>-->
          <!--          <el-col :span="8" v-show="moreZiduanFn()">-->
          <!--            <el-form-item label="备用1" prop="attribute1">-->
          <!--              <el-input v-model="form.attribute1" :disabled="formIsDisabled" placeholder="请输入内容" style="width:193px;"  @input="onInput()"/>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="8" v-show="moreZiduanFn()">-->
          <!--            <el-form-item label="备用2" prop="attribute2">-->
          <!--              <el-input v-model="form.attribute2" :disabled="formIsDisabled" placeholder="请输入内容" style="width:193px;"  @input="onInput()"/>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="8" v-show="moreZiduanFn()">-->
          <!--            <el-form-item label="备用3" prop="attribute3">-->
          <!--              <el-input v-model="form.attribute3" :disabled="formIsDisabled" placeholder="请输入内容" style="width:193px;" @input="onInput()" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col  v-if="title=='添加门店'&&(form.storeCategory == '10131'|| form.storeCategory == '129081')">-->
          <!--            <p style="font-weight: bold;font-size: 14px;" class="van-f-red"><span >*</span>&nbsp;&nbsp;建店即下单的产品（至少选择一个）</p>-->
          <!--            <el-table :data="ProductList" style="width: 100%">-->
          <!--              <el-table-column prop="productName" label="产品名称" />-->
          <!--              <el-table-column prop="orderNum" label="数量" width="200">-->
          <!--                <template slot-scope="scope">-->
          <!--                  <el-input  type="number" min="1" v-model="scope.row.orderNum" placeholder="请输入数量" @input="orderNumFn(scope.row.orderNum,scope.$index)" onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))" @keydown.native="limitInputValue"></el-input>-->
          <!--                </template>-->
          <!--              </el-table-column>-->
          <!--            </el-table>-->
          <!--          </el-col>-->
          <!--          <el-col  v-if="(title=='门店详情'||title=='修改门店')&&(form.storeCategory == '10131'|| form.storeCategory == '129081')">-->
          <!--            <p style="font-weight: bold;font-size: 14px;color:red" ><span >*</span>&nbsp;&nbsp;建店即下单的产品（至少选择一个）</p>-->
          <!--                    <el-table :data="form.orderProductStoreList" style="width: 100%">-->
          <!--                      <el-table-column prop="productName" label="产品名称" />-->
          <!--                      <el-table-column prop="orderNum" label="数量" width="100">-->
          <!--                      </el-table-column>-->
          <!--                    </el-table>-->
          <!--          </el-col>-->
        </el-row>
        <!--        || form.storeCategory == '129081'-->

        <el-row v-if="form.storeCategory == '10131'">
          <el-divider>属性</el-divider>
          <el-col :span="24">
            <el-form-item label="同城分销类型" prop="tcfxName">
              <el-radio-group
                v-model="form.tcfxName"
                :disabled="formIsDisabled"
                @change="onInput()">
                <el-radio :label="item.dictValue" v-for="item in tcfxOptions">{{
                  item.dictLabel
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.storeCategory == 'C917'">
          <el-divider>属性</el-divider>
          <el-col :span="24">
            <el-form-item label="潜在客户类型" prop="potentialCustomerType">
              <el-radio-group
                v-model="form.potentialCustomerType"
                :disabled="formIsDisabled"
                @change="onInput()">
                <el-radio :label="item.dictValue" v-for="item in customerInfoOptions">{{
                  item.dictLabel
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!--            <el-col :span="24">-->
          <!--            <el-form-item label="客户性质" prop="customerNature">-->
          <!--              <el-radio-group v-model="form.customerNature" :disabled="formIsDisabled"  @change="onInput()">-->
          <!--                <el-radio :label="item.dictValue" v-for="item in natureOptions">{{item.dictLabel}}</el-radio>-->
          <!--              </el-radio-group>-->
          <!--            </el-form-item>-->
          <!--            </el-col>-->
          <!--              <el-col :span="24">-->
          <!--            <el-form-item label="经营模式" prop="managementModel">-->
          <!--              <el-radio-group v-model="form.managementModel" :disabled="formIsDisabled"  @change="onInput()">-->
          <!--                <el-radio :label="item.dictValue" v-for="item in managementOptions">{{item.dictLabel}}</el-radio>-->
          <!--              </el-radio-group>-->
          <!--            </el-form-item>-->
          <!--              </el-col>-->
          <!--                <el-col :span="24">-->
          <!--            <el-form-item label="主要项目类型" prop="mainProjectType">-->
          <!--              <el-radio-group v-model="form.mainProjectType" :disabled="formIsDisabled"  @change="onInput()">-->
          <!--                <el-radio :label="item.dictValue" v-for="item in projectOptions">{{item.dictLabel}}</el-radio>-->
          <!--              </el-radio-group>-->
          <!--            </el-form-item>-->
          <!--                </el-col>-->
          <!--                  <el-col :span="24">-->
          <!--            <el-form-item label="主要关系来源" prop="mainRelationFrom">-->
          <!--              <el-radio-group v-model="form.mainRelationFrom" :disabled="formIsDisabled"  @change="onInput()">-->
          <!--                <el-radio :label="item.dictValue" v-for="item in relationOptions">{{item.dictLabel}}</el-radio>-->
          <!--              </el-radio-group>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
        <el-row v-if="form.storeCategory == '129081' && title == '门店详情'">
          <el-divider>属性</el-divider>
          <el-col :span="24">
            <el-form-item label="属性" prop="attribute3">
              <span v-if="form.attribute3 != 0">{{ form.attribute3 }}</span>
              <span v-else>{{ form.attribute5 }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="title == '门店详情' || title == '修改门店'" :gutter="20">
          <div v-if="form.carShop == 1">
            <el-divider v-if="form.carShopImgList">车铺照片</el-divider>
            <el-col :span="3" v-for="(item, index) in form.carShopImgList" :key="index">
              <el-image
                style="width: 100%; height: 150px; border-radius: 6px"
                :src="item"
                :preview-src-list="form.carShopImgList">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture" style="font-size: 170px; color: #eff2f6"></i>
                </div>
              </el-image>
            </el-col>
          </div>
        </el-row>
        <el-row v-if="title == '门店详情' && form.storeCategory != 'C917'">
          <el-divider>门店照片</el-divider>
          <el-col :span="8" :offset="3">
            <div class="imgTitle" v-if="form.ifJzStoreType == 1">家装前台照片</div>
            <div class="imgTitle" v-else>门店照</div>
            <el-image
              style="width: 100%; height: 200px"
              :src="form.img"
              :preview-src-list="[form.img]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture" style="font-size: 170px; color: #eff2f6"></i>
              </div>
            </el-image>
          </el-col>
          <el-col :span="1" class="border-r" style="height: 260px"></el-col>
          <el-col :span="8" :offset="1" v-if="form.ifJzStoreType != 1">
            <div class="imgTitle">陈列照</div>
            <el-image
              style="width: 100%; height: 200px"
              :src="form.imgSed"
              :preview-src-list="[form.imgSed]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture" style="font-size: 170px; color: #eff2f6"></i>
              </div>
            </el-image>
          </el-col>
          <!-- 标准店招（最新） -->
          <el-col :span="8" :offset="1" v-if="form.standardStorePhoto">
            <div class="imgTitle">标准店招（最新）</div>
            <el-image
              style="width: 100%; height: 200px"
              :src="form.standardStorePhoto"
              :preview-src-list="[form.standardStorePhoto]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture" style="font-size: 170px; color: #eff2f6"></i>
              </div>
            </el-image>
          </el-col>
          <!-- 最近一次拜访店照 -->
          <el-col :span="8" :offset="1" v-if="form.newStoreSignPhoto">
            <div class="imgTitle">最近拜访店招（截止当天0点）</div>
            <el-image
              style="width: 100%; height: 200px"
              :src="form.newStoreSignPhoto"
              :preview-src-list="[form.newStoreSignPhoto]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture" style="font-size: 170px; color: #eff2f6"></i>
              </div>
            </el-image>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="title != '门店详情'"
          type="primary"
          @click="submitForm"
          :disabled="formIsDisabled"
          >确 定</el-button
        >
        <el-button v-if="title != '门店详情'" @click="cancel" :disabled="formIsDisabled"
          >取 消</el-button
        >
        <el-button v-if="title == '门店详情'" @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
    <!--    地图预览-->
    <el-dialog title="地图定位" :visible.sync="mapVisible" width="90%" append-to-body>
      <mymap :center="mapcenter" :mapVisible="mapVisible" @centerFn="centerFn"></mymap>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="surePosition">确 定</el-button>
        <el-button @click="cancelPosition">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listStore,
  getStore,
  delStore,
  beforeAdd,
  addStore,
  updateStore,
  storeValid,
  getSelectRegionsList,
  initPosition,
  resetUpdateStoreNum,
  getOrderProductListByDeptId,
  listChainsByCategory,
} from '@/api/sfa/store';
import { listChains } from '@/api/sfa/chains';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { listDept } from '@/api/system/dept';
import tree from '@/views/components/sfa/treeselect';
import treeSingle from '@/views/components/sfa/treeselectSingle';
import mymap from '@/views/components/sfa/mapPosition';
import { _debounce } from '@/utils/debounce.js';
export default {
  name: 'Store',
  dicts: ['store_valid_flag'],
  components: { Treeselect, tree, treeSingle, mymap },
  data() {
    var validatorPhone = function (rule, value, callback) {
      if (value === '') {
        callback(new Error('手机号不能为空'));
      } else if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'));
      } else if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
        callback(new Error('手机号格式错误'));
      } else {
        callback();
      }
    };
    var validatorArea = function (rule, value, callback) {
      let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
      if (value === '') {
        callback(new Error('请输入内容'));
      } else if (!reg.test(value)) {
        callback(new Error('请输入数字'));
      } else if (value < 0) {
        callback(new Error('请输入0及0以上的数'));
      } else {
        callback();
      }
    };
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      deleteMultiple: -1,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 门店表格数据
      storeList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeCode: null,
        storeName: null,
        storeCategory: null,
        storeCategoryList: null,
        orgIds: [],
        addressLine: null,
        postalCode: null,
        district: null,
        city: null,
        province: null,
        contactName: null,
        telephone: null,
        countyLevel: null,
        attribute5: null,
        chainCode: null,
        chainName: null,
        personCode: null,
        personName: null,
        lon: null,
        lat: null,
        validFlag: '0',
      },
      // 表单参数

      form: {
        orgId: null,
      },
      // 表单校验
      rules: {
        storeCode: [{ required: true, message: '请输入门店编号', trigger: 'blur' }],
        storeName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        country: [{ required: true, message: '请选择国家', trigger: 'change' }],
        province: [{ required: true, message: '请选择省', trigger: 'change' }],
        city: [{ required: true, message: '请选择市', trigger: 'change' }],
        district: [{ required: true, message: '请选择县（区）', trigger: 'change' }],
        townName: [{ required: true, message: '请选择乡镇街道', trigger: 'change' }],
        orgId: [{ required: true, message: '请选择组织架构', trigger: 'change' }],
        storeCategory: [{ required: true, message: '请选择门店分类', trigger: 'change' }],
        addressLine: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        // chainCode:[ { required: true, message: '请输入经销商编号', trigger: 'blur' }],
        chainName: [{ required: true, message: '请输入经销商名称', trigger: 'blur' }],
        contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        // telephone:[ { required: true, validator: validatorPhone, trigger: 'blur' }],
        // area:[ { required: true, validator: validatorArea, trigger: 'blur' }],
        tcfxName: [{ required: true, message: '请选择同城分销类型', trigger: 'change' }],
        customerInfoFrom: [{ required: true, message: '请选择潜在客户类型', trigger: 'change' }],
        // customerNature:[ { required: true, message: '请选择客户性质', trigger: 'change' }],
        // managementModel:[ { required: true, message: '请选择经营模式', trigger: 'change' }],
        // mainProjectType:[ { required: true, message: '请选择主要项目类型', trigger: 'change' }],
        // mainRelationFrom:[ { required: true, message: '请选择主要关系来源', trigger: 'change' }],
      },
      // 门店类型
      storeCategoryOptions: [],
      storeCategoryForm: [],
      // 省
      provinceOptions: [],
      provinceOptions2: [],
      // 市
      cityOptions: [],
      cityOptions2: [],
      // 区
      districtOptions: [],
      districtOptions2: [],
      timeData: '',
      townOptions: [],
      townOptions2: [],
      cityLevelOptions: [],
      validTree: true,
      formIsDisabled: false,
      formAddressIsDisabled: false,
      chainsList: [],
      chainsList2: [],
      isNotOptions: [],
      tcfxOptions: [],
      countryOptions: [
        {
          regionId: '0',
          regionName: '中国',
        },
      ],
      mapVisible: false,
      mapcenter: {
        lng: null,
        lat: null,
      },
      isInit: false,
      menuOptions: [],
      isYSL: false,
      rangeNumber: 10,
      rangeNumber2: 10,
      resOptions: [],
      resOptions2: [],
      ProductList: [],
      customerInfoOptions: [],
      natureOptions: [],
      managementOptions: [],
      projectOptions: [],
      relationOptions: [],
      storeLabelsOptions: [],
      processApprovalStatusList: [],
      isTcfx: false,
      chainOptions: [],
      cascader: {},
      cascaderDialog: false,
    };
  },
  created() {
    if (this.$store.state.user.type == '2') {
      this.getDicts('ysl_store_type').then((response) => {
        this.storeCategoryOptions = response.data;
      });
      this.getDicts('ysl_store_type').then((response) => {
        this.storeCategoryForm = response.data;
      });
      this.isYSL = true;
    } else {
      this.getDicts('sfa_store_type').then((response) => {
        this.storeCategoryOptions = response.data;
      });
      beforeAdd().then((response) => {
        this.storeCategoryForm = response.data.storeCategoryList;
      });
      this.isYSL = false;
    }
    // 城市等级
    this.getDicts('sfa_city_level').then((response) => {
      this.cityLevelOptions = response.data;
    });
    // 是否
    this.getDicts('store_valid_flag').then((response) => {
      this.isNotOptions = response.data;
    });
    // 同城分销类型
    this.getDicts('TCFX').then((response) => {
      this.tcfxOptions = response.data;
    });
    this.getDicts('potential_customer_type').then((response) => {
      this.customerInfoOptions = response.data;
    });
    this.getDicts('store_labels').then((response) => {
      this.storeLabelsOptions = response.data;
    });
    this.getDicts('process_approval_status').then((response) => {
      this.processApprovalStatusList = response.data;
    });
    // // 	客户信息来源
    // this.getDicts("customer_info_from").then(response => {
    //   this.customerInfoOptions = response.data;
    // });
    // // 	客户性质
    // this.getDicts("customer_nature").then(response => {
    //   this.natureOptions = response.data;
    // });
    // // 	经营模式
    // this.getDicts("management_model").then(response => {
    //   this.managementOptions = response.data;
    // });
    // // 主要项目类型
    // this.getDicts("main_project_type").then(response => {
    //   this.projectOptions = response.data;
    // });
    // // 主要关系来源
    // this.getDicts("main_relation_from").then(response => {
    //   this.relationOptions = response.data;
    // });
    this.getSelectRegionsListData('', '');
    this.getChainList();
    this.getTreeselect();
    this.getList();
    this.getMonth();
  },
  directives: {
    'el-select-loadmore': (el, binding) => {
      // 获取element-ui定义好的scroll盒子
      const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
      if (SELECTWRAP_DOM) {
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          /**
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,
           *  常用于:计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const condition = this.scrollHeight - this.scrollTop - 20 <= this.clientHeight;
          if (condition) binding.value();
        });
      }
    },
  },
  methods: {
    getMonth() {
      // 获取当前日期
      var currentDate = new Date();

      // 获取当前月份
      var currentMonth = currentDate.getMonth();

      // 获取当前年份
      // var currentYear = currentDate.getFullYear();

      var previousMonthDate1 = new Date();
      if (currentDate.getDate() == 1) {
        previousMonthDate1.setMonth(currentMonth - 1);
      } else {
      }
      var previousMonth1 = previousMonthDate1.getMonth();
      var previousYear1 = previousMonthDate1.getFullYear();

      // 计算前三个月的年份和月份
      var previousMonthDate = new Date();
      if (currentDate.getDate() == 1) {
        previousMonthDate.setMonth(currentMonth - 3);
      } else {
        previousMonthDate.setMonth(currentMonth - 2);
      }
      1;
      var previousMonth = previousMonthDate.getMonth();
      var previousYear = previousMonthDate.getFullYear();

      //前三个月
      if (previousYear1 == previousYear) {
        var formattedPreviousMonth1 = previousYear1 + '-' + (previousMonth1 + 1);
        // 格式化年份和月份
        var formattedPreviousMonth = previousYear + '-' + (previousMonth + 1);
        this.timeData =
          formattedPreviousMonth.split('-')[1] + '-' + formattedPreviousMonth1.split('-')[1] + '月';
      } else {
        var formattedPreviousMonth1 = previousYear1 + '年' + (previousMonth1 + 1) + '月';
        // .toString().padStart(2, '0');
        // 格式化年份和月份
        var formattedPreviousMonth = previousYear + '年' + (previousMonth + 1) + '月';
        this.timeData = formattedPreviousMonth + '-' + formattedPreviousMonth1;
      }
    },
    onInputs(val) {
      console.log('val');
      this.storeCategoryForm.forEach((item) => {
        if (item.dictValue == this.form.storeCategory) {
          this.form.ifJzStoreType = item.ifJzStoreType;
          let remark = JSON.parse(item.remark);
          if (remark.tcfx == true) {
            this.isTcfx = true;
            this.getListChainsByCategory();
          } else {
            this.isTcfx = false;
            this.getChainList2();
          }
        }
      });
      this.form.chainCode = '';
      this.$set(this, 'cascader', {});
    },
    getListChainsByCategory(storeId = null) {
      listChainsByCategory({ deptId: this.form.orgId }).then((response) => {
        this.chainOptions = response.data;
      });
    },
    cascaderClick() {
      if (this.form.sfaStoreChainsContactList && this.form.sfaStoreChainsContactList.length > 0) {
        this.form.sfaStoreChainsContactList.forEach((a, i) => {
          // this.cascader[a.categoryCode] = a.chainCode;
          this.$set(this.cascader, a.categoryCode, a.chainCode);
        });
        this.$forceUpdate();
      }
      this.cascaderDialog = true;
      this.$forceUpdate();
    },
    cascaderCancel() {
      this.cascaderDialog = false;
      this.cascader = {};
    },
    cascaderSubmit() {
      this.form.sfaStoreChainsContactList = [];
      this.form.chainCode = '';
      let chainArr = [];
      this.chainOptions.forEach((item) => {
        for (let key in this.cascader) {
          if (this.cascader.hasOwnProperty(key)) {
            if (item.code == key) {
              item.children.forEach((child) => {
                if (child.chainCode == this.cascader[key]) {
                  child.categoryCode = item.code;
                  child.categoryDescribe = item.text;
                  chainArr.push(child.chainName);
                  this.form.sfaStoreChainsContactList.push(child);
                }
              });
            }
          }
        }
      });
      this.form.chainCode = chainArr.join(',');
      this.cascaderDialog = false;
    },
    orderNumFn(val, i) {
      if (val < 1) {
        this.ProductList[i].orderNum = '';
      }
      this.ProductList[i].orderNum = val.replace(/e|E/g, '');
    },
    getOrderProductListByDeptId() {
      getOrderProductListByDeptId({ deptId: this.form.orgId }).then((response) => {
        var datap = response.data;
        datap.forEach((item) => {
          item.productId = item.orderProductId;
        });
        this.ProductList = datap;
      });
    },
    onInput() {
      this.$forceUpdate();
    },
    treeselectFn(val) {
      this.queryParams.orgIds = val;
      this.getChainList();
      this.queryParams.chainCode = '';
      this.filterMethod();
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      listDept().then((response) => {
        this.menuOptions = this.handleTree(response.data, 'deptId', 'parentId');
        if (
          this.menuOptions.length == 1 &&
          (this.menuOptions[0].children == null ||
            this.menuOptions[0].children == undefined ||
            (this.menuOptions[0].children != undefined &&
              this.menuOptions[0].children != null &&
              this.menuOptions[0].children.length == 0))
        ) {
          this.form.orgId = this.menuOptions[0].deptId;
        }
      });
    },
    /** 转换菜单数据结构 */
    normalizer1(node) {
      let that = this;
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
        isDisabled: that.isDisabled,
      };
    },
    limitInputValue(e) {
      let key = e.key;
      if (key === 'e' || key === 'E') {
        e.returnValue = false;
        return false;
      }
      return true;
    },
    treeselectFnSingle(val) {
      if (val.deptId != undefined && val.deptId != '' && val.deptId != null) {
        this.form.orgId = val.deptId;
        this.$set(this, 'cascader', {});
        this.getChainList2();
        this.form.chainCode = '';
        this.form.chainName = '';
        this.form.sfaStoreChainsContactList = [];
        this.getOrderProductListByDeptId();
        this.getListChainsByCategory();
      }
    },
    userIdFocus() {
      if (this.queryParams.orgIds == null) {
        this.$refs['queryParams'].validate((valid) => {
          if (valid) {
            this.validTree = true;
          } else {
            if (this.queryParams.orgIds == null) {
              this.validTree = false;
            } else {
              this.validTree = true;
            }
          }
        });
      } else {
        this.validTree = true;
      }
    },
    // 获取经销商列表
    getChainList() {
      listChains({ orgIds: this.queryParams.orgIds }).then((response) => {
        this.resOptions = response.rows;
      });
    },
    getChainList2(callback) {
      this.resOptions2 = [];
      // 组织架构和门店类型不为空
      if (
        this.form.orgId &&
        this.form.orgId != '' &&
        this.form.storeCategory &&
        this.form.storeCategory != ''
      ) {
        let obj = {
          orgIds: [this.form.orgId],
        };
        if (this.title == '添加门店') {
          obj.freeze = '否';
          obj.close = '否';
        } else {
          obj = {
            orgIds: [this.form.orgId],
          };
        }

        obj.storeCategory = this.form.storeCategory;
        listChains(obj).then((response) => {
          this.resOptions2 = response.rows;
          callback && callback(this.resOptions2);
          this.filterMethod2();
          if (this.title == '修改门店' || this.title == '门店详情') {
            this.rangeNumber2 = response.total;
            this.loadMore2();
          }
        });
      }
    },
    loadMore() {
      // n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看
      // elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法
      return () => (this.rangeNumber += 5); // 每次滚动到底部可以新增条数  可自定义
    },
    loadMore2() {
      // n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看
      // elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法
      // console.log(this.rangeNumber2);
      return () => (this.rangeNumber2 += 5); // 每次滚动到底部可以新增条数  可自定义
    },
    // 筛选方法
    filterMethod: _debounce(function (filterVal) {
      if (filterVal) {
        let filterArr = this.resOptions.filter((item) => {
          return (
            item.chainName.toLowerCase().includes(filterVal.toLowerCase()) ||
            item.chainCode.toLowerCase().includes(filterVal.toLowerCase())
          );
        });
        this.chainsList = filterArr;
      } else {
        this.chainsList = this.resOptions;
      }
    }, 500),
    filterMethod2: _debounce(function (filterVal) {
      if (filterVal) {
        let filterArr = this.resOptions2.filter((item) => {
          return (
            item.chainName.toLowerCase().includes(filterVal.toLowerCase()) ||
            item.chainCode.toLowerCase().includes(filterVal.toLowerCase())
          );
        });
        this.chainsList2 = filterArr;
      } else {
        this.chainsList2 = this.resOptions2;
      }
    }, 500),
    // 下拉框出现时，调用过滤方法
    visibleChange(flag) {
      if (flag) {
        this.filterMethod();
      }
    },
    visibleChange2(flag) {
      if (flag) {
        this.filterMethod2();
      }
    },
    // chainChange2(){
    //     this.getChainList2();
    // },
    /** 查询门店列表 */
    getList() {
      this.storeList = [];
      this.loading = true;
      if (this.queryParams.storeCategoryList != null) {
        if (this.queryParams.storeCategoryList.length < 1) {
          this.queryParams.storeCategoryList = null;
        }
      }
      listStore(this.queryParams).then((response) => {
        this.storeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    chainInfoFormatter(row) {
      let str = '';
      if (row.sfaStoreType && row.sfaStoreType.type == 'fxd') {
        if (row.sfaStoreChainsContactList && row.sfaStoreChainsContactList.length > 0) {
          str = row.sfaStoreChainsContactList.map((item) => item.categoryDescribe).join(',');
        }
      } else {
        if (row.chainCode && row.chainName) {
          str = `${row.chainCode},${row.chainName}`;
        }
      }
      return str;
    },
    // 门店类型
    storeCategoryFormatter(row, column) {
      return this.selectDictLabel(this.storeCategoryOptions, row.storeCategory);
    },
    // 城市等级
    cityLevelsFormat(row, column) {
      return this.selectDictLabel(this.cityLevelOptions, row.countyLevels);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.resetForm('form');
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.storeLabelTypes = undefined;
      this.queryParams.chainCode = undefined;
      this.queryParams.storeCode = undefined;
      this.queryParams.storeName = undefined;
      this.queryParams.validFlag = '0';
      this.queryParams.storeCategoryList = undefined;
      this.queryParams.province = undefined;
      this.queryParams.city = undefined;
      this.queryParams.district = undefined;
      this.queryParams.townName = undefined;
      this.queryParams.countyLevel = undefined;
      this.queryParams.storeCategoryList = undefined;
      this.queryParams.orgIds = [];
      this.handleQuery();
      this.resetForm('queryForm');
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.storeId);
      let isDisableds = selection.map((item) => item.updatable);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
      this.deleteMultiple = isDisableds.findIndex((item) => item === true);
    },
    // 门店表格行点击事件
    storeRowClick(row) {
      this.handleUpdate(row);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.form = {
        chainCode: undefined,
      };
      this.isTcfx = false;
      this.open = true;
      this.formIsDisabled = false;
      this.formAddressIsDisabled = false;
      this.reset();
      this.$forceUpdate();
      this.title = '添加门店';
      this.form.validFlag = '0';
      this.getChainList2();
      this.getSelectRegionsListData('', '2');
      if (this.$store.state.user.type == '2') {
        this.getDicts('ysl_store_type').then((response) => {
          this.storeCategoryOptions = response.data;
        });
        this.getDicts('ysl_store_type').then((response) => {
          this.storeCategoryForm = response.data;
        });
        this.isYSL = true;
      } else {
        this.getDicts('sfa_store_type').then((response) => {
          this.storeCategoryOptions = response.data;
        });
        beforeAdd().then((response) => {
          this.storeCategoryForm = response.data.storeCategoryList;
        });
        this.isYSL = false;
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.form.chainCode = '';
      this.$set(this, 'cascader', {});
      this.reset();
      this.form = {};
      this.title = '修改门店';
      // this.getSelectRegionsListData("","2");
      this.formIsDisabled = !row.updatable;
      this.formAddressIsDisabled = !row.updateAddress;
      // this.remoteMethod(row.chainName);
      const storeId = row.storeId || this.ids;
      getStore(storeId).then((response) => {
        this.loading = false;
        this.form = response.data;
        if (response.data.telephone != null && response.data.telephone != '') {
          this.form.telephone = parseInt(response.data.telephone);
        } else {
          this.form.telephone = null;
        }
        // this.provinceChange2(this.form.province);
        // this.cityChange2(this.form.city)
        //   this.districtChange2(this.form.district);

        // this.getSelectRegionsListData(this.form.province,'province2');
        // setTimeout(()=>{
        //     this.getSelectRegionsListData(this.form.city,'city2');
        // },1000 );
        // setTimeout(()=>{
        //     this.getSelectRegionsListData(this.form.district,'district2');
        // },2000 );
        this.provinceOptions2 = response.data.provinceList;
        this.cityOptions2 = response.data.cityList;
        this.districtOptions2 = response.data.countyList;
        this.townOptions2 = response.data.townList;
        this.mapcenter.lng = this.form.lon;
        this.mapcenter.lat = this.form.lat;
        if (this.$store.state.user.type == '2') {
          this.getDicts('ysl_store_type').then((response) => {
            this.storeCategoryForm = response.data;
            this.$nextTick(() => {
              this.getChainList2((resOptions2) => {
                let activaChain = resOptions2.find((val) => val.chainCode == this.form.chainCode);
                if (!activaChain) this.form.chainCode = null;
              });
            });
          });
        } else {
          if (response.data.ifJzStoreType == 1) {
            beforeAdd({ ifJzStoreType: 1, storeId: storeId }).then((response) => {
              this.storeCategoryForm = response.data.storeCategoryList;
              this.$nextTick(() => {
                this.getChainList2((resOptions2) => {
                  let activaChain = resOptions2.find((val) => val.chainCode == this.form.chainCode);
                  if (!activaChain) this.form.chainCode = null;
                });
              });
            });
          } else {
            //2024年8月29日修改 同城店字典数据未转换问题
            beforeAdd({ ifJzStoreType: 0, storeId: storeId }).then((response) => {
              this.storeCategoryForm = response.data.storeCategoryList;
              this.storeCategoryForm.forEach((item) => {
                if (item.dictValue == this.form.storeCategory) {
                  this.form.ifJzStoreType = item.ifJzStoreType;
                  let remark = JSON.parse(item.remark);
                  if (remark.tcfx == true) {
                    this.isTcfx = true;
                    if (
                      this.form.sfaStoreChainsContactList &&
                      this.form.sfaStoreChainsContactList.length > 0
                    ) {
                      let chainCode = [];
                      this.form.sfaStoreChainsContactList.forEach((a, i) => {
                        chainCode.push(a.chainCode + '/' + a.chainName);
                        this.cascader[a.categoryCode] = a.chainCode;
                      });
                      this.form.chainCode = chainCode.join(',');
                      this.$forceUpdate();
                    }
                    this.getListChainsByCategory(storeId);
                  } else {
                    this.isTcfx = false;
                    this.$nextTick(() => {
                      this.getChainList2((resOptions2) => {
                        let activaChain = resOptions2.find(
                          (val) => val.chainCode == this.form.chainCode
                        );
                        if (!activaChain) this.form.chainCode = null;
                      });
                    });
                  }
                }
              });
            });

            // this.getDicts('sfa_store_type').then((response) => {
            //   this.storeCategoryForm = response.data;
            // });
          }
        }
        this.$forceUpdate();
        this.open = true;
      });
    },
    handleDetail(row) {
      this.form.chainCode = '';
      this.$set(this, 'cascader', {});
      this.reset();
      this.form = {};
      if (this.$store.state.user.type == '2') {
        this.getDicts('ysl_store_type').then((response) => {
          this.storeCategoryForm = response.data;
        });
        this.isYSL = true;
      } else {
        this.getDicts('sfa_store_type').then((response) => {
          this.storeCategoryForm = response.data;
        });
        this.isYSL = false;
      }
      this.title = '门店详情';
      // this.getSelectRegionsListData("","2");
      const storeId = row.storeId || this.ids;
      getStore(storeId).then((response) => {
        this.form = response.data;
        if (response.data.telephone != null && response.data.telephone != '') {
          this.form.telephone = parseInt(response.data.telephone);
        } else {
          this.form.telephone = '';
        }
        // this.getSelectRegionsListData(this.form.province,'province2');
        // this.getSelectRegionsListData(this.form.city,'city2');
        // this.getSelectRegionsListData(this.form.district,'district2');
        this.form.country = '0';
        this.formIsDisabled = true;
        this.formAddressIsDisabled = true;
        this.provinceOptions2 = response.data.provinceList;
        this.cityOptions2 = response.data.cityList;
        this.districtOptions2 = response.data.countyList;
        this.townOptions2 = response.data.townList;
        this.storeCategoryForm.forEach((item) => {
          if (item.dictValue == this.form.storeCategory) {
            this.form.ifJzStoreType = item.ifJzStoreType;
            let remark = JSON.parse(item.remark);
            if (remark.type == 'fxd') {
              this.isTcfx = true;
              if (
                this.form.sfaStoreChainsContactList &&
                this.form.sfaStoreChainsContactList.length > 0
              ) {
                let chainCode = this.form.sfaStoreChainsContactList.map(
                  (item) => item.chainCode + '/' + item.chainName
                );
                this.form.chainCode = chainCode.join(',');
              }
              this.getListChainsByCategory(storeId);
            } else {
              this.isTcfx = false;
            }
          }
        });
        this.$nextTick(() => {
          if (!this.isTcfx) {
            this.getChainList2();
          }
        });

        this.mapcenter.lng = this.form.lon;
        this.mapcenter.lat = this.form.lat;
        this.open = true;

        this.$refs['form'].clearValidate();
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.storeId != null) {
            updateStore(this.form).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess('修改成功');
                this.open = false;
                this.getList();
              }
            });
          } else {
            var list = [];
            for (var i = 0; i < this.ProductList.length; i++) {
              if (this.ProductList[i].orderNum != undefined) {
                list.push(this.ProductList[i]);
              }
            }
            this.form.orderProductStoreList = list;
            if (
              list.length < 1 &&
              (this.form.storeCategory == '10131' || this.form.storeCategory == '129081')
            ) {
              this.$modal.alertWarning('至少输入一个产品');
              return;
            }
            addStore(this.form).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess('新增成功');
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const storeIds = row.storeId || this.ids;
      // this.$modal.confirm('是否确认删除门店编号为"' + storeIds + '"的数据项？').then(function() {
      this.$modal
        .confirm('是否确认删除选中信息？')
        .then(function () {
          return delStore(storeIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess('删除成功');
        })
        .catch(() => {});
    },
    handleValid(row) {
      const storeIds = row.storeId || this.ids;
      // this.$modal.confirm('是否确认删除门店编号为"' + storeIds + '"的数据项？').then(function() {
      this.$modal
        .confirm('是否确认将店铺设置为无效？')
        .then(function () {
          return storeValid({ storeIds: storeIds }).then((response) => {
            // console.log(response);
          });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess('设置成功');
        })
        .catch(() => {});
    },
    resetLon(row) {
      const storeIds = row.storeId || this.ids;
      this.$modal
        .confirm('是否确认初始化店铺坐标？')
        .then(function () {
          return initPosition({ storeIds: storeIds }).then((response) => {
            // console.log(response);
          });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess('初始化成功');
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.queryParams.storeCategoryList != null) {
        if (this.queryParams.storeCategoryList.length < 1) {
          this.queryParams.storeCategoryList = null;
        }
      }
      this.download(
        'sfa/store/export',
        {
          ...this.queryParams,
        },
        `store_${new Date().getTime()}.xlsx`
      );
    },
    /** 导出多经销商按钮操作 */
    handleExportDJXS() {
      if (this.queryParams.storeCategoryList != null) {
        if (this.queryParams.storeCategoryList.length < 1) {
          this.queryParams.storeCategoryList = null;
        }
      }
      this.download(
        'sfa/store/exportStoreAndChains',
        {
          ...this.queryParams,
        },
        `storeAndChains_${new Date().getTime()}.xlsx`
      );
    },
    // 查询省市区（县）
    getSelectRegionsListData(val, type) {
      let that = this;
      if (type == 'province') {
        if (val != '') {
          getSelectRegionsList({ provinceCode: val }).then((response) => {
            that.cityOptions = response.rows;
            that.districtOptions = [];
            that.townOptions = [];
            that.queryParams.city = '';
            that.queryParams.district = '';
            that.queryParams.townName = '';
          });
        } else {
          that.cityOptions = [];
          that.districtOptions = [];
          that.townOptions = [];
          that.queryParams.city = '';
          that.queryParams.district = '';
          that.queryParams.townName = '';
        }
      } else if (type == 'city') {
        if (val != '') {
          getSelectRegionsList({ cityCode: val }).then((response) => {
            that.districtOptions = response.rows;
            that.townOptions = [];
            that.queryParams.townName = '';
          });
        } else {
          that.districtOptions = [];
          that.townOptions = [];
          that.queryParams.district = '';
          that.queryParams.townName = '';
        }
      } else if (type == 'district') {
        if (val != '') {
          getSelectRegionsList({ countyCode: val }).then((response) => {
            that.townOptions = response.rows;
          });
        } else {
          that.townOptions = [];
          that.queryParams.townName = '';
        }
      } else if (type == '') {
        getSelectRegionsList().then((response) => {
          that.provinceOptions = response.rows;
          that.cityOptions = [];
          that.districtOptions = [];
          that.townOptions = [];
          that.queryParams.district = '';
          that.queryParams.townName = '';
        });
      } else if (type == 'province2') {
        if (val != '') {
          getSelectRegionsList({ provinceCode: val }).then((response) => {
            that.cityOptions2 = response.rows;
            that.districtOptions2 = [];
            that.townOptions2 = [];
          });
        } else {
          that.cityOptions2 = [];
          that.districtOptions2 = [];
          that.townOptions2 = [];
          that.form.city = '';
          that.form.district = '';
          that.form.townName = '';
          that.form.countyLevel = '';
        }
      } else if (type == 'city2') {
        if (val != '') {
          getSelectRegionsList({ cityCode: val }).then((response) => {
            // console.log(response.rows);
            that.districtOptions2 = response.rows;
            that.townOptions2 = [];
          });
        } else {
          that.districtOptions2 = [];
          that.form.district = '';
          that.townOptions2 = [];
          that.form.townName = '';
          that.form.countyLevel = '';
        }
      } else if (type == 'district2') {
        if (val != '') {
          getSelectRegionsList({ countyCode: val }).then((response) => {
            that.townOptions2 = response.rows;
            // console.log(that.townOptions2);
            this.districtOptions2.forEach((item, index) => {
              if (this.form.district != '' && this.form.district == item.countyCode) {
                this.form.countyLevel = item.countyLevel;
              }
            });
          });
        } else {
          that.townOptions2 = [];
          that.form.townName = '';
        }
      } else if (type == '2') {
        getSelectRegionsList().then((response) => {
          that.provinceOptions2 = response.rows;
          that.cityOptions2 = [];
          that.districtOptions2 = [];
          that.townOptions2 = [];
        });
      }
      that.form.country = '0';
    },
    provinceChange(val) {
      this.getSelectRegionsListData(val, 'province');
      this.$forceUpdate();
      if (this.queryParams.province == '') {
        this.cityOptions = [];
        this.districtOptions = [];
      }
    },
    cityChange(val) {
      // console.log(val);
      this.getSelectRegionsListData(val, 'city');
      this.$forceUpdate();
      if (this.queryParams.city == '') {
        this.districtOptions2 = [];
      }
      this.queryParams.district = '';
    },
    districtChange(val) {
      this.getSelectRegionsListData(val, 'district');
      this.$forceUpdate();
    },
    townChange(val) {
      this.getSelectRegionsListData(val, 'town');
      this.$forceUpdate();
    },
    provinceChange2(val) {
      let that = this;
      this.$set(this.form, 'province', val);
      that.$set(this.form, 'city', '');
      that.$set(this.form, 'district', '');
      that.$set(this.form, 'townName', '');
      that.$set(this.form, 'countyLevel', '');
      that.districtOptions2 = [];
      that.townOptions2 = [];
      this.$forceUpdate();
      this.getSelectRegionsListData(val, 'province2');
      if (this.form.province == '') {
        this.cityOptions2 = [];
        this.districtOptions = [];
      }
    },
    cityChange2(val) {
      let that = this;
      that.$set(this.form, 'city', val);
      that.$set(this.form, 'district', '');
      that.$set(this.form, 'townName', '');
      that.$set(this.form, 'countyLevel', '');
      that.townOptions2 = [];
      this.$forceUpdate();
      this.getSelectRegionsListData(val, 'city2');
      if (this.form.city == '') {
        this.districtOptions2 = [];
      }
    },
    districtChange2(val) {
      this.$set(this.form, 'district', val);
      this.districtOptions2.forEach((item, index) => {
        if (val == item.countyCode) {
          this.form.countyLevel = item.countyLevel;
        }
      });
      this.$forceUpdate();
      this.getSelectRegionsListData(val, 'district2');
    },
    townChange2(val) {
      this.$set(this.form, 'townName', val);
      this.$forceUpdate();
      this.getSelectRegionsListData(val, 'town2');
    },
    storeCategoryIsAdd(val) {
      if (val && JSON.parse(val).add == true) {
        return true;
      } else {
        return false;
      }
    },
    moreZiduanFn() {
      //同城分销不显示备用字段 '10131','129081',
      let storeCategoryArr = ['126562', '126560', '126545', '126544', '126561', '126546', '10131'];
      let index = storeCategoryArr.indexOf(this.form.storeCategory);
      if (index == -1) {
        return false;
      } else {
        return true;
      }
    },
    initPositionFn() {
      const storeIds = this.ids;
      this.$modal
        .confirm('是否初始化选中项坐标？')
        .then(function () {
          return initPosition({ storeIds: storeIds }).then((response) => {
            // console.log(response);
          });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess('初始化成功');
        })
        .catch(() => {});
    },
    initUpdateStoreNum() {
      const storeIds = this.ids;
      // console.log('选择门店ID数据' + storeIds);
      this.$modal
        .confirm('是否重置选中项门店地址修改次数？')
        .then(function () {
          return resetUpdateStoreNum(storeIds).then((response) => {
            // console.log(response);
          });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess('重置成功');
        })
        .catch(() => {});
    },
    locationFn() {
      this.mapVisible = true;
      this.mapcenter.lng = this.form.lon;
      this.mapcenter.lat = this.form.lat;
    },
    centerFn(val) {
      this.mapcenter = val;
    },
    surePosition() {
      this.form.lon = this.mapcenter.lng;
      this.form.lat = this.mapcenter.lat;
      this.mapVisible = false;
    },
    cancelPosition() {
      this.mapcenter = {
        lng: null,
        lat: null,
      };
      this.mapVisible = false;
    },
    radioClick(val1, val2) {
      console.log(val1);
      console.log(this.cascader[val2]);
      if (this.cascader[val2] == val1) {
        console.log('===');
        this.cascader[val2] = null;
      } else {
        this.cascader[val2] = val1;
      }
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="scss">
.imgTitle {
  line-height: 40px;
  font-size: 14px;
  color: #8492a6;
  text-align: center;
}
.border-r {
  border-right: 1px solid #eff2f6;
}
.image-slot {
  text-align: center;
}
.treePopup {
  .vue-treeselect__menu {
    overflow-x: auto !important;
  }

  .vue-treeselect__label {
    overflow: unset;
    text-overflow: unset;
  }
}
.per100 {
  width: 100%;
  .el-form-item__content {
    width: calc(100% - 150px);
  }
}
.dot {
  width: 4px;
  height: 4px;
  background: #00afff;
  border-radius: 50%;
  display: inline-block;
}
.width600 {
  width: 600px !important;
  max-width: 600px !important;
}
</style>
