storevisit-ui-mobile/src/views/storeManagement/storeAdd.vue

<template>
  <div class="storeAdd">
    <div class="navBarTOP">
      <!-- 新建同城分销店必须要下单 -->
      <van-nav-bar class="navBar" title="新增信息" left-arrow @click-left="onClickLeft">
        <template #right>
          <span
            @click="onSubmit"
            v-if="
              verifyStoreType(fromValue.storeCategory) &&
              verifyStoreType(fromValue.storeCategory).type == 'fxd'
            ">
            <span
              @click="onSubmit"
              v-if="
                fromValue.storeCategory == '126565' &&
                fromValue.orgName &&
                fromValue.orgName.indexOf('BMD') != -1
              "
              >提交
            </span>
            <span v-else>去下单</span>
          </span>
          <span v-else @click="onSubmit">保存</span>
        </template>
      </van-nav-bar>
    </div>
    <!--        主体内容-->
    <div style="margin-top: 44px">
      <van-dialog v-model="show" title="位置">
        <mapmarker :info="fromValue"></mapmarker>
      </van-dialog>
      <van-form ref="tabstoreVal" @submit="onSubmit">
        <van-tabs class="myTab" v-model="tabVal" color="#1989fa" @change="tabChange">
          <van-tab title="基础信息" name="insidePlan">
            <van-field
              readonly
              clickable
              name="picker"
              :value="fromValue.storeCategoryName"
              label="类型"
              placeholder="点击选择类型"
              @click="showPicker = true">
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
            </van-field>
            <van-field
              readonly
              clickable
              name="picker"
              :value="fromValue.orgName"
              label="部门名称"
              placeholder="点击选择部门名称"
              @click="PickerDept">
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
            </van-field>
            <div
              style="background-color: white; padding: 0 14px"
              class="morelaji"
              v-if="fromValue.storeCategory != 'C917'">
              <!-- 分销店 -->
              <template
                v-if="
                  verifyStoreType(fromValue.storeCategory) &&
                  verifyStoreType(fromValue.storeCategory).type == 'fxd'
                ">
                <van-row style="border-bottom: 1px solid #ebedf0">
                  <van-col span="24">
                    <van-field label="经销商名称" @click="showPickerChainsListFn" class="TCFXList">
                      <template #left-icon>
                        <span class="van-f-red">*</span>
                      </template>
                      <template #input>
                        <template
                          v-if="sfaStoreChainsContactList && sfaStoreChainsContactList.length">
                          <div
                            class="sfaStoreChainsContactList"
                            v-for="(item, index) in sfaStoreChainsContactList"
                            :key="index">
                            {{ item.categoryDescribe }}
                            {{ item.chainCode }}
                            {{ item.chainName }}
                          </div>
                        </template>
                        <template v-else>
                          <span style="color: rgb(150, 151, 153)"> 点击选择经销商名称 </span>
                        </template>
                      </template>
                    </van-field>
                  </van-col>
                </van-row>
              </template>
              <template v-else>
                <van-row style="border-bottom: 1px solid #ebedf0">
                  <van-col span="20">
                    <van-field
                      rows="1"
                      autosize
                      type="textarea"
                      readonly
                      clickable
                      name="picker"
                      :value="fromValue.chainName"
                      label="经销商名称"
                      placeholder="点击选择经销商名称"
                      @click="showPickerChainsListFn">
                      <template #left-icon>
                        <span
                          v-if="
                            fromValue.ifJzStoreType != 1 &&
                            fromValue.storeCategory != 'C912' &&
                            fromValue.storeCategory != 'C917'
                          "
                          class="van-f-red"
                          >*</span
                        >
                      </template>
                    </van-field>
                  </van-col>
                  <van-col span="4">
                    <van-button
                      size="small"
                      type="info"
                      style="margin-top: 6px"
                      native-type="button"
                      @click="moreTypeShowfn">
                      <van-icon name="list-switching" />更多
                    </van-button>
                  </van-col>
                </van-row>
              </template>
            </div>
            <van-field
              v-model="fromValue.storeName"
              @blur="setStoreNameFn"
              :label="storeName"
              placeholder="请输入">
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
            </van-field>
            <van-field
              readonly
              clickable
              name="picker"
              :value="fromValue.provinceName"
              label="省(州)"
              placeholder="点击选择省(州)"
              @click="showProvincePicker = true">
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
            </van-field>
            <van-field
              readonly
              clickable
              name="picker"
              :value="fromValue.cityName"
              label="城市"
              placeholder="点击选择城市"
              @click="showCityPicker = true">
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
            </van-field>
            <van-field
              readonly
              clickable
              name="picker"
              :value="fromValue.districtName"
              label="区(县)"
              placeholder="点击选择区(县)"
              @click="showDistrictPicker = true">
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
            </van-field>
            <van-field
              readonly
              clickable
              name="picker"
              :value="fromValue.townName"
              label="街道"
              placeholder="点击选择街道"
              @click="showTownPicker = true">
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
            </van-field>
            <van-field
              v-model="fromValue.addressLine"
              label="地址"
              placeholder="地址"
              rows="1"
              autosize
              type="textarea"
              @blur="addressFn">
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
              <template #button>
                <van-button size="small" native-type="button" type="info" @click="fns"
                  ><van-icon name="location-o" />地图</van-button
                >
              </template>
            </van-field>
            <van-field
              readonly
              clickable
              name="picker"
              :value="fromValue.cityLevel"
              label="城市等级"
              placeholder="点击选择城市等级"
              ><template #left-icon><span class="van-f-red"> </span></template>
            </van-field>
            <div v-if="fromValue.storeCategory != 'C917'">
              <van-field
                v-if="fromValue.ifJzStoreType != 1"
                v-model="fromValue.area"
                @input="numberFn"
                type="number"
                label="面积(m²)"
                placeholder="面积"
                ><template #left-icon><span class="van-f-red"> </span></template
              ></van-field>
              <van-field
                v-if="fromValue.ifJzStoreType == 1"
                v-model="fromValue.area"
                @input="numberFn"
                type="number"
                label="家装展厅面积(m²)"
                placeholder="面积">
                <template #left-icon>
                  <span class="van-f-red">*</span>
                </template>
              </van-field>
            </div>
            <van-field
              v-if="fromValue.ifJzStoreType != 1 && fromValue.storeCategory != 'C917'"
              v-model="fromValue.contactName"
              label="联系人"
              placeholder="联系人">
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
            </van-field>
            <van-field
              v-if="fromValue.ifJzStoreType == 1 && fromValue.storeCategory != 'C917'"
              v-model="fromValue.contactName"
              label="老板"
              placeholder="老板"
              ><template #left-icon><span class="van-f-red"> </span></template
            ></van-field>
            <van-field
              v-if="fromValue.storeCategory != 'C917'"
              type="tel"
              v-model="fromValue.telephone"
              label="联系电话"
              placeholder="联系电话"
              @blur="phoneCheck">
              <template #left-icon>
                <span class="van-f-red" v-if="fromValue.ifJzStoreType != 1">*</span>
              </template>
            </van-field>
            <van-field readonly v-model="fromValue.salesmanName" label="销售员" placeholder="销售员"
              ><template #left-icon><span class="van-f-red"> </span></template
            ></van-field>
            <div v-if="GZAttributeFormShow" style="background-color: #ffffff; padding: 10px">
              <p style="color: #666"><span class="van-f-red">*</span>潜在客户类型</p>
              <div style="padding: 4px">
                <van-radio-group v-model="fromValue.potentialCustomerType" class="typeRadioStore1">
                  <van-row gutter="20">
                    <van-col
                      span="12"
                      v-for="(item, index) in potentialCustomerTypeList"
                      :key="index"
                      style="margin-bottom: 10px">
                      <van-radio shape="square" :name="item.dictCode">{{ item.text }}</van-radio>
                    </van-col>
                  </van-row>
                </van-radio-group>
              </div>
            </div>
            <van-field label="是否车铺开店" v-if="typeABshow">
              <template #input>
                <van-radio-group v-model="fromValue.carShop" direction="horizontal">
                  <van-radio name="1">是</van-radio>
                  <van-radio name="0">否</van-radio>
                </van-radio-group>
              </template>
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
            </van-field>
            <van-field label="车铺照片" v-if="fromValue.carShop == 1 && typeABshow">
              <template #input>
                <upload-imgc
                  :uploadid="uploadid2"
                  :imgArr="fromValue.carShopImgList"
                  @newimgarr="newimgarr1"
                  imgText=""
                  :type="3"></upload-imgc>
              </template>
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
            </van-field>
            <div v-if="fromValue.carShop == 1 && typeABshow">
              <p
                style="
                  color: #666;
                  font-size: 14px;
                  margin: 0;
                  background-color: #fff;
                  padding: 6px 18px;
                ">
                注:店招及车铺产品拍在一张照片里
              </p>
              <deleteImgView :imgs="fromValue.carShopImgList"></deleteImgView>
            </div>
            <div v-if="fromValue.storeCategory != 'C917'">
              <div style="padding: 20px; height: 228px; background-color: #f1f1f1" v-if="imgShow">
                <van-row gutter="20">
                  <van-col span="12">
                    <div v-if="!storeTypePOP">
                      <upload-img
                        :uploadid="uploadid2"
                        :imgArr="fromValue.img"
                        @newimgarr="newimgarr1"
                        :imgText="fromValue.storeCategory == 'C912' ? '工地铭牌照片' : '公司照片'"
                        :type="1"></upload-img>
                    </div>
                    <div v-else>
                      <!-- :photoIdentifyType="fromValue.ifJzStoreType != 1 ? '1' : ''" -->
                      <!-- 新建门店 关闭图像识别，如需开启将上面photoIdentifyType 复制到 upload-img  -->
                      <upload-img
                        :uploadid="uploadid2"
                        :imgArr="fromValue.img"
                        @newimgarr="newimgarr1"
                        :imgText="fromValue.ifJzStoreType != 1 ? '门店照' : '家装前台照片'"
                        :type="1"
                        ref="uploadImgVStore"></upload-img>
                    </div>
                  </van-col>
                  <!-- 新建同城分销店不显示陈列照 -->
                  <template v-if="verifyStoreType(fromValue.storeCategory)">
                    <template v-if="!verifyStoreType(fromValue.storeCategory).type == 'fxd'">
                      <van-col span="12" v-if="fromValue.ifJzStoreType != 1">
                        <div v-if="storeTypePOP">
                          <upload-img
                            :uploadid="uploadid2"
                            :imgArr="fromValue.imgSed"
                            @newimgarr="newimgarr1"
                            :type="2"
                            :imgText="
                              fromValue.ifJzStoreType != 1 ? '陈列照' : '立邦展厅照片'
                            "></upload-img>
                        </div>
                      </van-col>
                    </template>
                    <template
                      v-else-if="
                        fromValue.storeCategory == '126565' &&
                        fromValue.orgName &&
                        fromValue.orgName.indexOf('BMD') != -1
                      ">
                      <van-col span="12">
                        <div v-if="storeTypePOP">
                          <upload-img
                            :uploadid="uploadid2"
                            :imgArr="fromValue.imgSed"
                            @newimgarr="newimgarr1"
                            :type="2"
                            :imgText="'陈列照'">
                          </upload-img>
                        </div>
                      </van-col>
                    </template>
                  </template>
                </van-row>
              </div>
              <div style="padding: 20px; height: 228px; background-color: #f1f1f1" v-if="!imgShow">
                <van-row gutter="20">
                  <van-col span="12">
                    <div v-if="!storeTypePOP">
                      <uploadImgView
                        :uploadid="uploadid2"
                        :imgArr="fromValue.img"
                        @newimgarr="newimgarr1"
                        :imgText="fromValue.storeCategory == 'C912' ? '工地铭牌照片' : '公司照片'"
                        :type="1"></uploadImgView>
                    </div>
                    <div v-else>
                      <uploadImgView
                        :uploadid="uploadid2"
                        :imgArr="fromValue.img"
                        @newimgarr="newimgarr1"
                        :imgText="fromValue.ifJzStoreType != 1 ? '门店照' : '家装前台照片'"
                        :type="1"></uploadImgView>
                    </div>
                  </van-col>
                  <!-- 新建同城A、B店不显示陈列照 -->
                  <template
                    v-if="
                      verifyStoreType(fromValue.storeCategory) &&
                      !verifyStoreType(fromValue.storeCategory).type == 'fxd'
                    ">
                    <van-col span="12" v-if="fromValue.ifJzStoreType != 1">
                      <div v-if="storeTypePOP">
                        <uploadImgView
                          :uploadid="uploadid2"
                          :imgArr="fromValue.imgSed"
                          @newimgarr="newimgarr1"
                          :type="2"
                          :imgText="
                            fromValue.ifJzStoreType != 1 ? '陈列照' : '立邦展厅照片'
                          "></uploadImgView>
                      </div>
                    </van-col>
                  </template>
                </van-row>
              </div>
            </div>
          </van-tab>
          <van-tab title="属性信息" name="Planpic">
            <!-- 同城分销店-属性信息 -->
            <div v-if="dictTypeFormShow" style="background-color: #ffffff; padding: 10px">
              <p style="color: #666; font-size: 14px"><span class="van-f-red">*</span>属性</p>
              <div style="padding: 4px">
                <van-radio-group v-model="fromValue.tcfxName" class="typeRadioStore1">
                  <van-row gutter="20">
                    <van-col
                      span="12"
                      v-for="(item, index) in TCFXList"
                      :key="index"
                      style="margin-bottom: 10px"
                      v-if="item.remark == fromValue.storeCategory">
                      <van-radio shape="square" :name="item.dictCode">{{ item.text }}</van-radio>
                    </van-col>
                  </van-row>
                </van-radio-group>
              </div>
              <!-- 主营竞品品牌 -->
              <p style="color: #666; font-size: 14px">
                <span class="van-f-red">*</span>主营竞品品牌
              </p>
              <div style="padding: 4px">
                <van-checkbox-group
                  v-model="storeCompetitorList"
                  direction="horizontal"
                  class="typeRadioStore1">
                  <van-row gutter="24">
                    <van-col
                      span="12"
                      v-for="(item, index) in storeCompetitorlist"
                      style="margin-bottom: 10px">
                      <van-checkbox
                        v-if="item.dictLabel != '其他'"
                        :name="item.dictValue"
                        shape="square"
                        :key="index">
                        {{ item.dictValue }}
                      </van-checkbox>
                    </van-col>
                  </van-row>
                </van-checkbox-group>
                <van-field
                  class="otherCompetitor"
                  v-model="otherCompetitor"
                  label="其他"
                  maxlength="20"
                  autosize
                  type="textarea"
                  placeholder="请输入" />
              </div>
            </div>
            <div v-if="dictTypeAFormShow" style="background-color: #ffffff; padding: 10px">
              <p style="color: #666"><span class="van-f-red">*</span>属性</p>
              <div style="padding: 4px">
                <van-radio-group
                  v-model="fromValue.attribute3"
                  class="typeRadioStore1"
                  @change="attrChange">
                  <van-row gutter="20">
                    <van-col
                      span="12"
                      v-for="(item, index) in brandst"
                      :key="index"
                      style="margin-bottom: 10px">
                      <van-radio shape="square" :name="item.dictCode">{{ item.text }}</van-radio>
                    </van-col>
                  </van-row>
                </van-radio-group>
              </div>
              <van-field
                v-if="attrShow"
                v-model="fromValue.attribute5"
                label="其他品牌"
                placeholder="其他品牌">
                <template #left-icon>
                  <span class="van-f-red">*</span>
                </template>
              </van-field>
            </div>
            <div v-if="dictTypeSJSFormShow" style="background-color: #ffffff; padding: 10px">
              <p style="color: #666"><span class="van-f-red">*</span>属性</p>
              <div style="padding: 4px">
                <van-radio-group v-model="fromValue.tcfxName" class="typeRadioStore1">
                  <van-row gutter="20">
                    <van-col
                      span="12"
                      v-for="(item, index) in SJSList"
                      :key="index"
                      style="margin-bottom: 10px">
                      <van-radio shape="square" :name="item.dictCode">{{ item.text }}</van-radio>
                    </van-col>
                  </van-row>
                </van-radio-group>
              </div>
            </div>
            <div v-if="dictTypeQGJZFormShow" style="background-color: #ffffff; padding: 10px">
              <p style="color: #666"><span class="van-f-red">*</span>属性</p>
              <div style="padding: 4px">
                <van-radio-group v-model="fromValue.tcfxName" class="typeRadioStore1">
                  <van-row gutter="20">
                    <van-col
                      span="12"
                      v-for="(item, index) in QGJZist"
                      :key="index"
                      style="margin-bottom: 10px">
                      <van-radio shape="square" :name="item.dictCode">{{ item.text }}</van-radio>
                    </van-col>
                  </van-row>
                </van-radio-group>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-form>
    </div>
    <!--类型-->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="storeCategoryList"
        @confirm="onConfirm"
        @cancel="showPicker = false" />
    </van-popup>
    <!--经销商-->
    <van-popup
      v-model="showPickerChainsList"
      position="bottom"
      class="agencyBox"
      :close-on-click-overlay="false">
      <!-- 分销店 -->
      <template
        v-if="
          verifyStoreType(fromValue.storeCategory) &&
          verifyStoreType(fromValue.storeCategory).type == 'fxd'
        ">
        <div class="header_btn">
          <div class="cancel" @click="showPickerChainsList = false">取消</div>
          <div class="confirm" @click="treeSelectConfirm">确定</div>
        </div>
        <van-tree-select
          :items="treeSelect"
          :main-active-index.sync="activeIndex"
          @click-nav="clickNav">
          <template #content>
            <div
              class="treeSelectchildren"
              v-if="activeIndex == index"
              v-for="(item, index) in treeSelect"
              :key="index">
              <div
                class="item"
                v-for="(val, ind) in item.children"
                :key="ind"
                @click="treeSelectItemClick(item, index, val, ind)"
                v-if="item.children.length">
                <div
                  :class="{
                    'van-radio__icon': true,
                    'van-radio__icon--round': true,
                    'van-radio__icon--checked': val.Check,
                  }">
                  <i class="van-icon van-icon-success"></i>
                </div>
                <div class="value">{{ val.chainCode }} {{ val.chainName }}</div>
              </div>
              <van-empty description="" v-if="item.children.length == 0" />
            </div>
          </template>
        </van-tree-select>
      </template>
      <template v-else>
        <van-picker
          show-toolbar
          :columns="ChainsList"
          value-key="chainName"
          @confirm="onConfirmChainsList"
          @cancel="showPickerChainsList = false" />
      </template>
    </van-popup>
    <van-popup v-model="moreTypeShow" position="bottom" style="height: 80%; font-size: 14px">
      <van-row style="background-color: #f5f5f5">
        <van-col span="20">
          <van-field
            left-icon="search"
            style="margin-top: 2px; border-radius: 6px; overflow: hidden"
            v-model="chainName"
            label=""
            placeholder="请输入关键词"
            clearable />
        </van-col>
        <van-col
          span="4"
          style="text-align: center; line-height: 48px"
          @click="getChainsByDeptCodesearch">
          <div style="background-color: #0057ba; color: #fff">搜索</div></van-col
        >
      </van-row>
      <van-picker
        show-toolbar
        :columns="chainsData"
        value-key="chainName"
        @confirm="onConfirmChainsList"
        @cancel="moreTypeShow = false" />
    </van-popup>
    <!--同城类型-->
    <van-popup v-model="showTCFXL" position="bottom">
      <van-picker
        show-toolbar
        :columns="TCFXList"
        @confirm="onTCFXLConfirm"
        @cancel="showTCFXL = false" />
    </van-popup>
    <!--省、市、区、街道-->
    <van-popup v-model="showProvincePicker" position="bottom">
      <van-picker
        show-toolbar
        title="省(州)"
        :columns="provinceList"
        @confirm="onProvinceConfirm"
        @cancel="showProvincePicker = false" />
    </van-popup>
    <van-popup v-model="showCityPicker" position="bottom">
      <van-picker
        show-toolbar
        title="城市"
        :columns="cityList"
        @confirm="onCityConfirm"
        @cancel="showCityPicker = false" />
    </van-popup>
    <van-popup v-model="showDistrictPicker" position="bottom">
      <van-picker
        show-toolbar
        title="县区"
        :columns="districtList"
        @confirm="onDistrictConfirm"
        @cancel="showDistrictPicker = false" />
    </van-popup>
    <van-popup v-model="showTownPicker" position="bottom">
      <van-picker
        show-toolbar
        title="街道"
        :columns="townList"
        @confirm="onTownConfirm"
        @cancel="showTownPicker = false" />
    </van-popup>
    <!--    部门数据 -->
    <van-popup v-model="showPickerDept" position="bottom">
      <van-picker
        show-toolbar
        title="部门名称"
        :columns="deptList"
        @confirm="onDeptConfirm"
        @cancel="showPickerDept = false" />
    </van-popup>
    <van-dialog
      v-model="showDialog"
      title="系统提示"
      show-cancel-button
      :show-confirm-button="false">
      <p v-if="!Array.isArray(msgList)" style="padding: 10px 14px; margin: 0">{{ msgList }}</p>
      <div style="max-height: 400px; overflow-y: auto" v-if="Array.isArray(msgList)">
        <p
          style="border-bottom: 1px solid #f5f5f5; padding: 10px 14px; margin: 0"
          v-for="(item, index) in msgList"
          :key="index">
          {{ item }}
        </p>
      </div>
    </van-dialog>
    <div id="allmap"></div>
    <div style="position: fixed; top: 0; height: 100%; z-index: 3000; width: 100%" v-if="showmap">
      <div id="allmap1" style="height: 100%; width: 100%"></div>
      <div style="position: fixed; z-index: 99999; top: 0; width: 100%; background-color: white">
        <van-search
          v-model="search"
          shape="round"
          background="#0057ba"
          @input="searchFn"
          placeholder="请输入搜索关键词" />
        <div style="height: 200px; overflow: hidden" v-if="searchSHow">
          <div style="height: 100px; min-height: 200px; overflow-y: scroll; padding: 12px">
            <div
              v-for="(itme, index) in mapsearchlist"
              style="border-bottom: 1px solid #eee"
              @click="addressFns(itme)">
              <p>{{ itme.title }}</p>
              <p>{{ itme.address }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="mapaddress">
        <div class="title">
          <span @click="showmap = false" style="float: left"
            ><van-icon name="cross" size="16"
          /></span>
          <p class="titleText">附近地址信息</p>
          <span style="float: right" @click="confirmMap">确定</span>
        </div>
        <div class="listBox">
          <van-radio-group v-model="addresssb" @change="mapselect">
            <van-radio :name="index" v-for="(item, index) in maplist" :key="index">
              <p style="margin: 4px 0; font-weight: bold">{{ item.title }}</p>
              <p style="margin: 4px 0">{{ item.address }}</p>
            </van-radio>
          </van-radio-group>
          <br />
          <br />
          <br />
          <br />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getStoreTypeList,
  addStore,
  beforeAdd,
  streetQuery,
  getTCFXList,
  phoneCheck,
  getChainsByDeptCode,
  getSJSList,
  getQGJZist,
  checkVisit,
  getbrands,
  getCustomerInfoList,
  getManagementModelList,
  getMainRelationList,
  getMainProjectList,
  getCustomerNatureList,
  getpotentialCustomerTypeList,
  getDictOption,
} from '@/api/index';
import uploadImg from '@/components/uploadImgVStore';
import uploadImgc from '@/components/uploadImgVStorec';
import uploadImgView from '@/components/ImgView';
import deleteImgView from '@/components/deleteUploadImg3';
import axios from 'axios';
import mapmarker from '@/components/mapMarker';
import { jsonp } from 'vue-jsonp';
import txmapimg1 from '@/assets/txmap1.svg';
import txmapimg2 from '@/assets/txmap2.svg';
import txmapimg3 from '@/assets/marker_blue.png';
import { getPosition, getTicketFun } from '@/utils/TXApiFun';
import { listChainsByCategory, checkStoreBeforeAdd } from '@/api/store';
import store from '@/store';
import { mapState } from 'vuex';
export default {
  name: 'storeAdd',
  components: { uploadImg, uploadImgView, mapmarker, uploadImgc, deleteImgView },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  data() {
    return {
      mapsearchlist: [],
      searchSHow: false,
      search: '',
      showImgs: true,
      typeABshow: false,
      showDialog: false,
      txmapimg1: txmapimg1,
      txmapimg2: txmapimg2,
      txmapimg3: txmapimg3,
      msgList: '',
      deptList: [],
      tabVal: 'insidePlan',
      show: false,
      showPickerChainsList: false,
      showDistribute: false,
      showProvincePicker: false,
      showCityPicker: false,
      showDistrictPicker: false,
      showTownPicker: false,
      dictTypeFormShow: false,
      dictTypeAFormShow: false,
      showPickerDept: false,
      provinceList: [],
      showTCFXL: false,
      cityList: [],
      districtList: [],
      townList: [],
      imgShow: false,
      uploadid2: 'uploadid2',
      dictTypeQGJZFormShow: false,
      attrShow: false,
      moreTypeShow: false,
      chainName: '',
      address: '地址',
      storeName: '名称',
      fromValue: {
        addressLine: '',
        chainCode: '',
        chainName: '',
        telephone: '',
        storeCategoryName: '',
        provinceName: '',
        salesmanName: '',
        orgName: '',
        potentialCustomerType: '',
        lat: '',
        ifJzStoreType: 0,
        lon: '',
        districtName: '',
        contactName: '',
        cityNameOld: '',
        districtNameOld: '',
        cityName: '',
        cityLevel: '',
        storeName: '',
        storeCategory: '',
        area: '',
        img: '',
        imgSed: '',
        townName: '',
        tcfxName: '',
        tcfxCode: '',
        orgId: '',
        carShop: '',
        carShopImgList: [],
        orderProductStoreList: [],
        showroom: '',
        attribute3: '',
        attribute5: '',
        customerInfoFrom: '',
        customerNature: '',
        managementModel: '',
        mainProjectType: '',
        mainRelationFrom: '',
        storeCompetitorList: [],
        otherCompetitor: '', //主营竞品品牌-其他
      },
      location: {
        lat: '34.6174',
        lon: '112.44039',
        lat1: '34.6174',
        lon1: '112.44039',
      },
      checkboxGroup: [],
      ManagementModelList: [],
      MainRelationList: [],
      MainProjectList: [],
      CustomerNatureList: [],
      CustomerInfoList: [],
      potentialCustomerTypeList: [],
      radio: '',
      showPicker: false,
      cityLeveList: [],
      storeTypeList: [],
      storeCategoryList: [],
      ChainsList: [],
      TCFXList: [],
      imgs: '',
      provinceCode: '',
      cityCode: '',
      countyCode: '',
      phoneNumber: true,
      multipleSelection: [],
      sfaOrderProducts: [],
      chainsData: [],
      type: '1',
      deptShow: false,
      dictTypeSJSFormShow: false,
      QGJZist: [],
      SJSList: [],
      mlon: '',
      mlan: '',
      brandst: [],
      storeTypePOP: false,
      GZAttributeFormShow: false,
      addresssb: -1,
      markers: undefined,
      maplist: [],
      showmap: false,
      markers1: undefined,
      marker: undefined,
      pageShow: false,
      map: '',
      activeIndex: 0,
      treeSelectItemInd: 0,
      treeSelect: [],
      sfaStoreChainsContactList: [], //选中确定的经销商
      activatedTCFXList: [], //选中的经销商
      // addStoreType:null, //新增门店类型，TCFX:同城分销(包括分销店和金牌店)；C917:潜在客户；C912:工地
      storeCompetitorlist: [], //主营竞品品牌
      otherCompetitor: '', //主营竞品品牌-其他
      storeCompetitorList: [],
      activatedStoreCompetitor: [],
    };
  },
  created() {
    this.getTCFXList();
    this.getTCompetitiveProduct();
    this.getSJSList();
    this.getQGJZist();
    this.getpotentialCustomerTypeList();
    setTimeout(() => {
      // this.getLocation()
      this.getStreetQuery();
    });
    this.chainName = '';
    this.chainsData = [];
    this.imgShow = false;
    this.fromValue.salesmanName = localStorage.getItem('nickName');
    localStorage.removeItem('chainName');
    this.dictTypeQGJZFormShow = false;
    this.dictTypeSJSFormShow = false;
    this.dictTypeFormShow = false;
    // 拍照次数重置
    store.dispatch('setShotsNum', 0);
  },
  watch: {
    $route(to, from) {
      if (
        to.path == '/storeAdd' &&
        (from.path == '/storemanagement/index' || from.path == '/My/index')
      ) {
        this.showmap = false;
        localStorage.removeItem('chainName');
        this.imgShow = false;
        this.typeABshow = false;
        this.chainName = '';
        this.chainsData = [];
        this.dictTypeQGJZFormShow = false;
        this.dictTypeSJSFormShow = false;
        this.dictTypeFormShow = false;
        this.fromValue = {
          addressLine: '',
          chainCode: '',
          chainName: '',
          telephone: '',
          storeCategoryName: '',
          ifJzStoreType: 0,
          provinceName: '',
          salesmanName: '',
          cityNameOld: '',
          districtNameOld: '',
          orgName: '',
          potentialCustomerType: '',
          lat: '',
          lon: '',
          cont: 0,
          districtName: '',
          contactName: '',
          cityName: '',
          cityLevel: '',
          storeName: '',
          storeCategory: '',
          area: '',
          img: '',
          imgSed: '',
          townName: '',
          tcfxName: '',
          tcfxCode: '',
          orgId: '',
          carShop: '',
          carShopImgList: [],
          orderProductStoreList: [],
          showroom: '',
          attribute3: '',
          attribute5: '',
          customerInfoFrom: '',
          customerNature: '',
          managementModel: '',
          mainProjectType: '',
          mainRelationFrom: '',
          storeCompetitorList: [],
          otherCompetitor: '', //主营竞品品牌-其他
        };
        setTimeout(() => {
          // this.getLocation()
        });
        this.fromValue.salesmanName = localStorage.getItem('nickName');
        this.getTCFXList();
        this.getTCompetitiveProduct();
        this.getpotentialCustomerTypeList();
        this.getSJSList();
        this.getQGJZist();
        this.getStreetQuery();
      }
      if (from.path == '/storeAdd') {
        // 离开当前页面时，关闭弹框
        if (this.$refs.uploadImgVStore) this.$refs.uploadImgVStore.close();
      }
    },
  },
  activated() {
    this.tabVal = 'insidePlan';
    // 授权
    getTicketFun(['getLocation', 'chooseImage', 'uploadImage']).then(() => {
      this.$nextTick(() => {
        this.getLocation();
      });
    });
    // 拍照次数重置
    store.dispatch('setShotsNum', 0);
  },
  methods: {
    addressFns(val) {
      var that = this;
      setTimeout(() => {
        that.searchSHow = false;
        that.map.setCenter(new TMap.LatLng(val.location.lat, val.location.lng));
        that.markers1.updateGeometries([
          {
            id: 'marker',
            styleId: 'marker',
            position: new TMap.LatLng(val.location.lat, val.location.lng),
          },
        ]);
        that.maplist = [];
        jsonp(
          'https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(' +
            val.location.lat +
            ',' +
            val.location.lng +
            ',1000,0)&page_size=20&page_index=1&orderby=_distance&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6',
        ).then((res) => {
          that.maplist = res.data;
          that.marker.setGeometries([]);
          setTimeout(() => {
            for (let p = 0; p < res.data.length; p++) {
              that.marker.updateGeometries([
                {
                  id: res.data[p].id,
                  position: new TMap.LatLng(res.data[p].location.lat, res.data[p].location.lng),
                },
              ]);
            }
          });
        });
        that.addresssb = -1;
      });
    },
    searchFn(val) {
      this.searchSHow = false;
      var that = this;
      jsonp(
        'https://apis.map.qq.com/ws/place/v1/suggestion?keyword=' +
          val +
          '&location=' +
          this.location.lat1 +
          ',' +
          this.location.lon1 +
          '&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6&page_size=20&region_fix=1',
      ).then((res) => {
        this.searchSHow = true;
        that.mapsearchlist = res.data;
      });
    },
    mapselect(val) {
      if (val > -1) {
        this.markers.updateGeometries([
          {
            id: 'markers1',
            styleId: 'abc',
            position: new TMap.LatLng(
              this.maplist[val].location.lat,
              this.maplist[val].location.lng,
            ),
          },
        ]);
      }
    },
    confirmMap() {
      if (this.addresssb > -1) {
        this.fromValue.addressLine = this.maplist[this.addresssb].address;
      }
      this.showmap = false;
    },
    fns() {
      this.search = '';
      this.showmap = true;
      jsonp(
        'https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(' +
          this.location.lat1 +
          ',' +
          this.location.lon1 +
          ',1000,0)&page_size=10&page_index=1&orderby=_distance&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6',
      ).then((res) => {
        this.maplist = res.data;
        setTimeout(() => {
          this.addVisits1();
        });
      });
      this.addresssb = -1;
    },
    addVisits1() {
      var that = this;
      var map = new TMap.Map('allmap1', {
        zoom: 15,
        center: new TMap.LatLng(that.location.lat1, that.location.lon1),
      });
      var markers = new TMap.MultiMarker({
        id: 'markers',
        map: map,
        geometries: [],
        styles: {
          marker: new TMap.MarkerStyle({
            width: 32,
            height: 40,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png',
          }),
        },
      });
      markers.setGeometries([]);
      var location = new TMap.LatLng(that.location.lat1, that.location.lon1);
      map.setCenter(location);
      markers.updateGeometries([
        {
          id: 'marker',
          styleId: 'marker',
          position: location,
        },
      ]);
      var marker = new TMap.MultiMarker({
        map: map,
        styles: {
          default: new TMap.MarkerStyle({
            width: 32,
            height: 40,
            anchor: {
              x: 17,
              y: 21,
            },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
          }),
        },
        geometries: [],
      });
      for (let p = 0; p < this.maplist.length; p++) {
        marker.updateGeometries([
          {
            id: this.maplist[p].id,
            position: new TMap.LatLng(this.maplist[p].location.lat, this.maplist[p].location.lng),
          },
        ]);
      }

      var markers1 = new TMap.MultiMarker({
        map: map,
        mapgeometries: [
          {
            id: 'markers1',
            position: new TMap.LatLng(0, 0),
          },
        ],
        styles: {
          abc: new TMap.MarkerStyle({
            width: 32,
            height: 40,
            anchor: { x: 16, y: 32 },
            src: txmapimg3,
          }),
        },
      });
      markers1.setGeometries([]);
      this.markers = markers1;
      this.map = map;
      this.markers1 = markers;
      this.marker = marker;
      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);
      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
    },
    addressFn() {
      localStorage.setItem('locationRemark', this.fromValue.addressLine);
    },
    PickerDept() {
      if (this.deptShow) {
        this.showPickerDept = true;
      }
    },
    formatter(value) {
      if (value < 1) {
        return '';
      } else {
        return value;
      }
    },
    handleSelectionChange(val) {
      this.fromValue.orderProductStoreList = val;
    },
    getChainsByDeptCode(deptId, ifJzStoreType, type) {
      getChainsByDeptCode({
        cityName: this.fromValue.cityNameOld,
        districtName: this.fromValue.districtNameOld,
        deptId: deptId,
        ifJzStoreType: ifJzStoreType,
        storeCategory: this.fromValue.storeCategory,
      }).then((res) => {
        if (this.ChainsList.length == 1) {
          this.fromValue.chainName = this.ChainsList[0].chainName;
          this.fromValue.chainCode = this.ChainsList[0].chainCode;
        }
        if (res.data.sfaOrderProducts != null) {
          res.data.sfaOrderProducts.forEach((item) => {
            item.orderNum = '';
            item.storeProductId = item.orderProductId;
          });
          this.sfaOrderProducts = res.data.sfaOrderProducts;
        }
        var deptList = [];
        for (var t1 = 0; t1 < res.data.deptList.length; t1++) {
          deptList.push({
            deptId: res.data.deptList[t1].deptId,
            text: res.data.deptList[t1].deptName,
          });
        }
        this.deptList = deptList;
        if (deptList.length == 1) {
          this.fromValue.orgId = deptList[0].deptId;
          this.fromValue.orgName = deptList[0].text;
          localStorage.setItem('orgName', deptList[0].text);
          this.deptShow = false;
          this.ChainsList = res.data.sfaChains;
        } else {
          this.ChainsList = [];
          this.deptShow = true;
        }
      });
    },
    onDeptConfirm(value) {
      this.fromValue.orgName = value.text;
      localStorage.setItem('orgName', value.text);
      this.fromValue.orgId = value.deptId;
      this.fromValue.chainCode = '';
      this.fromValue.chainName = '';
      this.getChainsByDeptId(value.deptId, this.fromValue.ifJzStoreType);
      this.showPickerDept = false;
    },
    setStoreNameFn() {
      if (this.fromValue.storeName.trim() == '') {
        localStorage.removeItem('chainName');
        this.imgShow = false;
      } else {
        localStorage.setItem('chainName', this.fromValue.storeName);
        this.imgShow = true;
      }
    },
    attrChange(val) {
      if (val == '0') {
        this.attrShow = true;
      } else {
        this.attrShow = false;
        this.fromValue.attribute5 = '';
      }
    },
    getStreetQuery(type) {
      var provinceCode = this.fromValue.province;
      var cityCode = this.fromValue.city;
      var countyCode = this.fromValue.district;
      if (type == '1') {
        cityCode = '';
        countyCode = '';
      } else if (type == '2') {
        countyCode = '';
      } else if (type == '3') {
        console.log('ok');
      } else {
        provinceCode = '';
        cityCode = '';
        countyCode = '';
      }
      streetQuery({ provinceCode: provinceCode, cityCode: cityCode, countyCode: countyCode }).then(
        (res) => {
          if (res.code == 200) {
            var provinceList = [];
            var cityList = [];
            var districtList = [];
            var townList = [];
            if (type == '1') {
              for (var z1 = 0; z1 < res.data.length; z1++) {
                cityList.push({ cityCode: res.data[z1].cityCode, text: res.data[z1].cityName });
              }
              this.cityList = cityList;
            } else if (type == '2') {
              for (var z2 = 0; z2 < res.data.length; z2++) {
                districtList.push({
                  countyCode: res.data[z2].countyCode,
                  text: res.data[z2].countyName,
                  countyLevel: res.data[z2].countyLevel,
                });
              }
              this.districtList = districtList;
            } else if (type == '3') {
              for (var z3 = 0; z3 < res.data.length; z3++) {
                townList.push({ townCode: res.data[z3].townCode, text: res.data[z3].townName });
              }
              this.townList = townList;
            } else {
              for (var z = 0; z < res.data.length; z++) {
                provinceList.push({
                  provinceCode: res.data[z].provinceCode,
                  text: res.data[z].provinceName,
                });
              }
              this.provinceList = provinceList;
            }
          } else {
            this.$toast.fail('请求超时');
          }
        },
      );
    },
    newimgarr1(val) {
      if (val.type == '1') {
        this.fromValue.img = val.fileUrl;
      } else if (val.type == '2') {
        this.fromValue.imgSed = val.fileUrl;
      } else {
        this.fromValue.carShopImgList.push(val.fileUrl);
      }
      this.fromValue.businessId = val.businessId ? val.businessId : '';
    },
    getChainsByDeptId(deptCode, ifJzStoreType) {
      getChainsByDeptCode({
        cityName: this.fromValue.cityName,
        districtName: this.fromValue.districtName,
        deptId: deptCode,
        ifJzStoreType: ifJzStoreType,
        storeCategory: this.fromValue.storeCategory,
      }).then((res) => {
        if (res.data.sfaOrderProducts != null) {
          res.data.sfaOrderProducts.forEach((item) => {
            item.orderNum = '';
            item.storeProductId = item.orderProductId;
          });
          this.sfaOrderProducts = res.data.sfaOrderProducts;
        }
        this.ChainsList = res.data.sfaChains;
      });
    },
    beforeAddFn() {
      this.phoneNumber = true;

      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      beforeAdd({
        cityName: this.fromValue.cityNameOld,
        districtName: this.fromValue.districtNameOld,
      }).then((res) => {
        if (res.code == 200) {
          loading1.clear();
          var storeCategory = [];
          var deptList = [];
          for (var j = 0; j < res.data.storeCategoryList.length; j++) {
            storeCategory.push({
              dictValue: res.data.storeCategoryList[j].dictValue,
              ifJzStoreType: res.data.storeCategoryList[j].ifJzStoreType,
              text: res.data.storeCategoryList[j].dictLabel,
            });
          }
          for (var t1 = 0; t1 < res.data.deptList.length; t1++) {
            deptList.push({
              deptId: res.data.deptList[t1].deptId,
              text: res.data.deptList[t1].deptName,
            });
          }
          if (res.data.StreetInfoList != null) {
            for (var j2 = 0; j2 < res.data.StreetInfoList.length; j2++) {
              if (res.data.StreetInfoList[j2].cityName.indexOf(this.fromValue.cityNameOld) != -1) {
                this.fromValue.province = res.data.StreetInfoList[j2].provinceCode;
                this.fromValue.provinceName = res.data.StreetInfoList[j2].provinceName;
                this.fromValue.city = res.data.StreetInfoList[j2].cityCode;
                this.fromValue.cityName = res.data.StreetInfoList[j2].cityName;
                this.cityCode = res.data.StreetInfoList[j2].cityCode;
                this.provinceCode = res.data.StreetInfoList[j2].provinceCode;
                this.fromValue.cityLevel = res.data.StreetInfoList[j2].countyLevel;
              }
              if (
                res.data.StreetInfoList[j2].countyName.indexOf(
                  this.fromValue.districtNameOld + '',
                ) != -1
              ) {
                this.fromValue.district = res.data.StreetInfoList[j2].countyCode;
                this.countyCode = res.data.StreetInfoList[j2].countyCode;
                this.fromValue.districtName = res.data.StreetInfoList[j2].countyName;
              }
            }
          } else {
            this.fromValue.cityName = '';
            this.fromValue.districtName = '';
            this.countyCode = '';
            this.fromValue.district = '';
            this.fromValue.cityLevel = '';
            this.fromValue.province = '';
            this.cityCode = '';
            this.provinceCode = '';
            this.fromValue.provinceName = '';
            this.fromValue.city = '';
          }
          this.storeCategoryList = storeCategory;
          console.log(this.storeCategoryList);
        } else {
          loading1.clear();
          this.$toast.fail('请求超时');
        }
        this.getStreetQuery();
        this.getStreetQuery('1');
        this.getStreetQuery('2');
        this.getStreetQuery('3');
      });
    },
    getChainsByDeptCodesearch(chainName) {
      this.chainsData = [];
      getChainsByDeptCode({
        chainName: this.chainName,
        cityName: this.fromValue.cityNameOld,
        districtName: this.fromValue.districtNameOld,
        deptId: this.fromValue.orgId,
        ifJzStoreType: this.fromValue.ifJzStoreType,
        storeCategory: this.fromValue.storeCategory,
      }).then((res) => {
        this.chainsData = res.data.sfaChains;
        this.chainsData.push({});
        this.chainsData.pop();
      });
    },
    addVisits() {
      // that.beforeAddFn(); //测试使用，，，，，
      var that = this;
      var map = new TMap.Map('allmap', {
        zoom: 15,
        center: new TMap.LatLng(39.986785, 116.301012),
      });
      var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
      var markers = new TMap.MultiMarker({
        map: map,
        geometries: [],
      });
      markers.setGeometries([]);
      var location = new TMap.LatLng(that.location.lat1, that.location.lon1);
      map.setCenter(location);
      markers.updateGeometries([{ id: 'marker', position: location }]);
      geocoder
        .getAddress({ location: location })
        .then(function (result) {
          var addresses = result.result.formatted_addresses;
          that.fromValue.cityNameOld = result.result.ad_info.city;
          that.fromValue.districtNameOld = result.result.ad_info.district;
          that.fromValue.addressLine = addresses.recommend;
          localStorage.setItem('locationRemark', addresses.recommend);
          that.beforeAddFn();
        })
        .catch((error) => console.error('Geocoding error:', error));
    },
    getLocation() {
      if (localStorage.getItem('loginType') == 'cs') {
        this.fromValue.lat = '31.2517820000';
        this.fromValue.lon = '120.5593090000';
        this.addVisits();
      } else {
        getPosition()
          .then((res) => {
            let { TXisBD, resData } = res;
            this.mlon = resData.longitude;
            this.mlan = resData.latitude;
            this.location = TXisBD;
            this.fromValue.lat = TXisBD.lat;
            this.fromValue.lon = TXisBD.lon;
            this.location.lat1 = resData.latitude;
            this.location.lon1 = resData.longitude;
            // this.addVisits();
            this.beforeAddFn();
          })
          .catch((error) => {
            this.beforeAddFn();
            this.$dialog.alert({
              message: error,
            });
          });
      }
    },
    getpotentialCustomerTypeList() {
      getpotentialCustomerTypeList().then((res) => {
        var potentialCustomerTypeList = [];
        for (var t = 0; t < res.data.length; t++) {
          potentialCustomerTypeList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.potentialCustomerTypeList = potentialCustomerTypeList;
      });
    },
    getCustomerInfoList() {
      getCustomerInfoList().then((res) => {
        var CustomerInfoList = [];
        for (var t = 0; t < res.data.length; t++) {
          CustomerInfoList.push({ text: res.data[t].dictLabel, dictCode: res.data[t].dictValue });
        }
        this.CustomerInfoList = CustomerInfoList;
      });
    },
    getCustomerNatureList() {
      getCustomerNatureList().then((res) => {
        var CustomerNatureList = [];
        for (var t = 0; t < res.data.length; t++) {
          CustomerNatureList.push({ text: res.data[t].dictLabel, dictCode: res.data[t].dictValue });
        }
        this.CustomerNatureList = CustomerNatureList;
      });
    },
    getMainProjectList() {
      getMainProjectList().then((res) => {
        var MainProjectList = [];
        for (var t = 0; t < res.data.length; t++) {
          MainProjectList.push({ text: res.data[t].dictLabel, dictCode: res.data[t].dictValue });
        }
        this.MainProjectList = MainProjectList;
      });
    },
    getMainRelationList() {
      getMainRelationList().then((res) => {
        var MainRelationList = [];
        for (var t = 0; t < res.data.length; t++) {
          MainRelationList.push({ text: res.data[t].dictLabel, dictCode: res.data[t].dictValue });
        }
        this.MainRelationList = MainRelationList;
      });
    },
    getManagementModelList() {
      getManagementModelList().then((res) => {
        var ManagementModelList = [];
        for (var t = 0; t < res.data.length; t++) {
          ManagementModelList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.ManagementModelList = ManagementModelList;
      });
    },
    // 同城分销-属性信息
    getTCFXList() {
      getTCFXList({}).then((res) => {
        var TCFXList = [];
        for (var t = 0; t < res.data.length; t++) {
          TCFXList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
            remark: res.data[t].remark,
          });
        }
        this.TCFXList = TCFXList;
      });
    },
    // 竞品品牌
    getTCompetitiveProduct() {
      getDictOption({}, 'main_competitor_brands').then((res) => {
        this.storeCompetitorlist = res.data;
      });
    },
    getSJSList() {
      getSJSList({}).then((res) => {
        var SJSList = [];
        for (var t = 0; t < res.data.length; t++) {
          SJSList.push({ text: res.data[t].dictLabel, dictCode: res.data[t].dictValue });
        }
        this.SJSList = SJSList;
      });
    },
    getQGJZist() {
      getQGJZist({}).then((res) => {
        var QGJZist = [];
        for (var t = 0; t < res.data.length; t++) {
          QGJZist.push({ text: res.data[t].dictLabel, dictCode: res.data[t].dictValue });
        }
        this.QGJZist = QGJZist;
      });
    },
    getbrands() {
      getbrands({}).then((res) => {
        var brandst = [];
        for (var t = 0; t < res.data.length; t++) {
          brandst.push({ text: res.data[t].dictLabel, dictCode: res.data[t].dictValue });
        }
        this.brandst = brandst;
      });
    },
    getStoreTypeList() {
      getStoreTypeList({}).then((res) => {
        this.storeTypeList = res.data;
      });
    },
    zSelectVal(value) {
      this.fromValue[value.type] = value.value;
    },
    afterRead(file) {
      console.log(file);
    },
    onProvinceConfirm(value) {
      this.fromValue.provinceName = value.text;
      this.fromValue.province = value.provinceCode;
      this.fromValue.cityName = '';
      this.fromValue.city = '';
      this.fromValue.districtName = '';
      this.fromValue.countyCode = '';
      this.fromValue.townName = '';
      this.fromValue.townCode = '';
      this.countyCode = '';
      this.cityCode = '';
      this.provinceCode = value.provinceCode;
      this.getStreetQuery('1');
      this.showProvincePicker = false;
    },
    onCityConfirm(value) {
      this.fromValue.cityName = value.text;
      this.fromValue.city = value.cityCode;
      this.fromValue.districtName = '';
      this.fromValue.district = '';
      this.fromValue.townName = '';
      this.fromValue.townCode = '';
      this.countyCode = '';
      this.cityCode = value.cityCode;
      this.getStreetQuery('2');
      this.showCityPicker = false;
    },
    onDistrictConfirm(value) {
      this.fromValue.districtName = value.text;
      this.fromValue.district = value.countyCode;
      this.fromValue.townName = '';
      this.fromValue.townCode = '';
      this.countyCode = value.countyCode;
      this.fromValue.cityLevel = value.countyLevel;
      this.getStreetQuery('3');
      this.showDistrictPicker = false;
    },
    onTownConfirm(value) {
      this.fromValue.townName = value.text;
      this.fromValue.townCode = value.townCode;
      this.showTownPicker = false;
    },
    onTCFXLConfirm(value) {
      this.fromValue.tcfxName = value.text;
      this.fromValue.tcfxCode = value.dictCode;
      this.showTCFXL = false;
    },

    onConfirm(value) {
      this.fromValue.storeCategoryName = value.text;
      this.fromValue.storeCategory = value.dictValue;
      if (
        this.verifyStoreType(this.fromValue.storeCategory) &&
        this.verifyStoreType(this.fromValue.storeCategory).type == 'fxd'
      ) {
        this.getbrands();
        // 是否车铺开店
        this.typeABshow = true;
        // 属性信息
        this.dictTypeFormShow = true;
      } else {
        this.typeABshow = false;
        this.fromValue.carShop = '';
        this.fromValue.carShopImgList = [];
        this.fromValue.tcfxName = '';
        this.fromValue.tcfxCode = '';
        this.dictTypeFormShow = false;
      }

      if (value.dictValue == 'C917') {
        this.GZAttributeFormShow = true;
        this.dictTypeSJSFormShow = false;
        this.dictTypeQGJZFormShow = false;
        this.dictTypeFormShow = false;
        this.dictTypeAFormShow = false;
        this.typeABshow = false;
      } else {
        this.fromValue.tcfxName = '';
        this.fromValue.tcfxCode = '';
        this.GZAttributeFormShow = false;
      }
      if (value.dictValue == 'sjs61') {
        this.dictTypeSJSFormShow = true;
      } else {
        this.dictTypeSJSFormShow = false;
      }
      if (value.dictValue == 'zyjz63') {
        this.dictTypeQGJZFormShow = true;
      } else {
        this.dictTypeQGJZFormShow = false;
      }

      if (value.dictValue == 'C912') {
        this.storeTypePOP = false;
        this.storeName = '铭牌上项目名称';
        this.address = '地址';
      } else if (value.dictValue == 'C917') {
        this.storeTypePOP = false;
        this.storeName = '名称';
        this.address = '地址';
      } else {
        this.storeTypePOP = true;
        this.storeName = '名称';
        this.address = '地址';
      }
      this.fromValue.chainName = '';
      this.fromValue.chainCode = '';
      this.fromValue.orgName = '';
      this.fromValue.orgId = '';
      this.fromValue.ifJzStoreType = value.ifJzStoreType;
      // 重置拍摄照片
      this.fromValue.img = '';
      this.getChainsByDeptCode(null, value.ifJzStoreType);
      // 切换门店类型删除选定经销商
      this.treeSelect = [];
      this.sfaStoreChainsContactList = []; //选中确定的经销商
      this.activatedTCFXList = []; //选中的经销商
      this.fromValue.img == ''; // 清空上传的门店照
      this.showPicker = false;
    },
    numberFn() {
      if (Number(this.fromValue.area) < 0) {
        this.fromValue.area = '';
      } else {
        this.fromValue.area = this.fromValue.area.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1');
      }
    },
    showPickerChainsListFn() {
      if (this.fromValue.storeCategoryName == '') {
        this.$toast('类型未选择');
        return;
      } else if (this.fromValue.orgName == '') {
        this.$toast('部门未选择');
        return;
      } else {
        this.showPickerChainsList = true;
        // 分销店
        if (
          this.verifyStoreType(this.fromValue.storeCategory) &&
          this.verifyStoreType(this.fromValue.storeCategory).type == 'fxd'
        ) {
          this.getStoreChainsContact();
        }
      }
    },
    moreTypeShowfn() {
      if (this.fromValue.storeCategoryName == '') {
        this.$toast('类型未选择');
        return;
      } else if (this.fromValue.orgName == '') {
        this.$toast('部门未选择');
        return;
      } else {
        this.chainsData = [];
        this.moreTypeShow = true;
      }
    },
    onConfirmChainsList(value) {
      this.fromValue.chainName = value.chainName;
      this.fromValue.chainCode = value.chainCode;
      this.showPickerChainsList = false;
      this.moreTypeShow = false;
    },
    onSubmit() {
      var that = this;
      var arrList = [];
      for (var n2 = 0; n2 < this.sfaOrderProducts.length; n2++) {
        if (this.sfaOrderProducts[n2].orderNum != '') {
          arrList.push(this.sfaOrderProducts[n2]);
        }
      }
      this.fromValue.orderProductStoreList = arrList;
      this.toastLoading(0, '上传中...', true);
      var fromValue = this.fromValue;
      var telrg = /^1[123456789]\d{9}$/;
      if (
        this.fromValue.storeCompetitorList == null ||
        this.fromValue.storeCompetitorList == undefined
      ) {
        this.fromValue.storeCompetitorList = [];
      }
      this.activatedStoreCompetitor = [];
      if (fromValue.orgId == '') {
        this.$toast('部门未选择');
        return;
      } else if (fromValue.storeName == '') {
        if (fromValue.storeCategory == 'C912') {
          this.$toast('铭牌上项目名称未填写');
        } else if (fromValue.storeCategory == 'C917') {
          this.$toast('名称未填写');
        } else {
          this.$toast('名称未填写');
        }
        return;
      } else if (fromValue.addressLine == '') {
        if (fromValue.storeCategory == 'C912') {
          this.$toast('地址未填写');
        } else if (fromValue.storeCategory == 'C917') {
          this.$toast('地址未填写');
        } else {
          this.$toast('地址未填写');
        }
        return;
      } else if (fromValue.storeCategoryName == '') {
        this.$toast('类型未填写');
        return;
      } else if (fromValue.provinceName == '') {
        this.$toast('所在省份未填写');
        return;
      } else if (fromValue.cityName == '') {
        this.$toast('所在城市未填写');
        return;
      } else if (fromValue.districtName == '') {
        this.$toast('所在县区未填写');
        return;
      } else if (fromValue.townName == '') {
        this.$toast('所在街道未填写');
        return;
      } else if (
        fromValue.contactName == '' &&
        fromValue.ifJzStoreType != 1 &&
        fromValue.storeCategory != 'C917'
      ) {
        this.$toast('联系人未填写');
        return;
      } else if (
        fromValue.telephone.trim() == '' &&
        fromValue.ifJzStoreType != 1 &&
        fromValue.storeCategory != 'C917'
      ) {
        this.$toast('联系电话未填写');
        return;
      } else if (fromValue.telephone.trim() != '' && !telrg.test(fromValue.telephone)) {
        this.$toast('手机号格式错误');
        return;
      } else if (
        !this.phoneNumber &&
        fromValue.ifJzStoreType != 1 &&
        fromValue.storeCategory != 'C917'
      ) {
        this.$toast('不能填写业务员手机号');
        return;
      } else if (fromValue.img == '' && fromValue.storeCategory != 'C917') {
        if (this.storeTypePOP) {
          if (fromValue.ifJzStoreType != 1) {
            this.$toast('图片未上传');
          } else {
            this.$toast('家装前台照片未上传');
          }
        } else {
          this.$toast('照片未上传');
        }
        return;
      } else if (fromValue.lon == '') {
        this.$toast('请获取定位坐标');
        return;
      } else if (
        (fromValue.storeCategory == 'sjs61' || fromValue.storeCategory == 'zyjz63') &&
        fromValue.tcfxName == ''
      ) {
        this.$toast('属性未填写');
        return;
      }
      if (fromValue.area.trim() == '' && fromValue.ifJzStoreType == 1) {
        this.$toast('家装展厅面积未填写');
        return;
      }
      // 同城分销类型门店
      if (
        this.verifyStoreType(this.fromValue.storeCategory) &&
        this.verifyStoreType(this.fromValue.storeCategory).type == 'fxd'
      ) {
        // 同城分销多经销商
        this.fromValue.sfaStoreChainsContactList = this.sfaStoreChainsContactList;
        if (!this.sfaStoreChainsContactList || !this.fromValue.sfaStoreChainsContactList.length) {
          this.$toast('经销商未填写');
          return;
        }
        if (fromValue.carShop == '') {
          this.$toast('请选择是否车铺开店');
          return;
        } else if (fromValue.carShop == '1' && fromValue.carShopImgList.length < 1) {
          this.$toast('请上传车铺开店照片');
          return;
        }
        if (fromValue.tcfxName == '') {
          this.$toast('属性未填写');
          return;
        }
        if (!this.storeCompetitorList.length && !this.otherCompetitor) {
          this.$toast('主营竞品品牌未填写');
          return;
        }
        this.activatedStoreCompetitor = JSON.parse(JSON.stringify(this.storeCompetitorList));
        if (this.otherCompetitor) {
          if (this.otherCompetitor.length < 2) {
            this.$toast('主营竞品品牌其他文本信息最少2个字');
            return;
          } else {
            this.activatedStoreCompetitor.push(this.otherCompetitor);
          }
        }
        this.fromValue.storeCompetitorList = JSON.parse(
          JSON.stringify(this.activatedStoreCompetitor),
        );
        // BMD-专业五金店-陈列照必须上传
        if (
          this.fromValue.storeCategory == '126565' &&
          this.fromValue.orgName &&
          this.fromValue.orgName.indexOf('BMD') != -1
        ) {
          if (!this.fromValue.imgSed && this.fromValue.imgSed.length == 0) {
            this.$toast('陈列照未上传');
            return;
          }
        }
      } else {
        // 非同城分销店 经销商必填校验
        if (
          fromValue.chainName == '' &&
          fromValue.ifJzStoreType != 1 &&
          fromValue.storeCategory != 'C912' &&
          fromValue.storeCategory != 'C917'
        ) {
          this.$toast('经销商未填写');
          return;
        }
      }
      if (this.GZAttributeFormShow && fromValue.potentialCustomerType == '') {
        this.$toast('潜在客户类型未填写');
        return;
      }
      // 同城分销建店添加去下单提示
      if (
        this.verifyStoreType(this.fromValue.storeCategory) &&
        this.verifyStoreType(this.fromValue.storeCategory).type == 'fxd'
      ) {
        // 门店重复判断
        checkStoreBeforeAdd(this.fromValue).then((res) => {
          this.toastLoading().clear();
          // type	1=不重复；2=重复不让修改；3=重复可扩展
          // store type=3时有值
          if (res.data.type == 3) {
            this.$dialog
              .confirm({
                title: '门店已存在',
                message: res.msg,
                confirmButtonText: '维护',
                cancelButtonText: '取消',
              })
              .then(() => {
                // 重复门店增加经销商
                this.$router.push({
                  path: '/storeDetail',
                  query: { id: res.data.store.storeId, type: 'chainMaintain' },
                });
              });
          } else if (res.data.type == 2 || res.data.type == 1) {
            this.$dialog
              .confirm({
                title: '系统提示',
                message: `该门店类型为<span style="color:red">同城分销店</span>，<br/>首笔订单最低金额：<span style="color:red">1000元</span>`,
                confirmButtonText: '去下单',
                cancelButtonText: '修改门店信息',
              })
              .then(() => {
                this.toastLoading(0, '上传中...', true);
                this.addStoreFun();
              });
          }
        });
      } else {
        this.addStoreFun();
      }
    },
    // 添加门店
    addStoreFun() {
      addStore(this.fromValue).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          if (res.data.serverCode) {
            this.fromValue.storeCode = res.data.sfaStore.storeCode;
            this.fromValue.storeId = res.data.sfaStore.storeId;
            if (
              res.data.orderUrl != null &&
              (res.data.orderUrl != '') & (res.data.orderUrl != undefined)
            ) {
              window.location.replace(res.data.orderUrl);
            } else {
              this.$dialog
                .confirm({
                  title: '系统提示',
                  message: '建店成功，是否立即拜访？',
                  confirmButtonText: '立即拜访',
                  cancelButtonText: '返回上一页',
                })
                .then(() => {
                  checkVisit({ storeId: res.data.sfaStore.storeId }).then((response) => {
                    localStorage.setItem('startTime', new Date());
                    localStorage.setItem('ORGName', this.fromValue.deptName);
                    localStorage.setItem('chainNameR', this.fromValue.storeName);
                    if (response.code == 200) {
                      localStorage.setItem('startTime', new Date());
                      localStorage.setItem('ORGName', res.data.sfaStore.deptName);
                      localStorage.setItem('chainNameR', res.data.sfaStore.storeName);
                      window.location.replace(
                        window.location.origin +
                          this.locationOrigin +
                          '/suishenbangOutstoreVisit?PointSum=0&visitModel=1&tabVal=1&hisTime=null&pageType=out&visitId=null&rdId=null&storeId=' +
                          res.data.sfaStore.storeId +
                          '&lat=' +
                          this.fromValue.lat +
                          '&lon=' +
                          this.fromValue.lon +
                          '&addressLine=' +
                          this.fromValue.addressLine +
                          '&storeCategory=' +
                          res.data.sfaStore.storeCategory +
                          '&storeName=' +
                          this.fromValue.storeName +
                          '&contactName=' +
                          this.fromValue.contactName +
                          '&storeCode=' +
                          res.data.sfaStore.storeCode +
                          '&latNew=' +
                          this.fromValue.lat +
                          '&lonNew=' +
                          this.fromValue.lon +
                          '&marklat=' +
                          this.mlan +
                          '&marklon=' +
                          this.mlon,
                      );
                    } else {
                      this.$dialog
                        .alert({
                          title: '系统提示',
                          message: response.msg,
                        })
                        .then((res) => {
                          this.$router.go(-1);
                        });
                    }
                  });
                })
                .catch(() => {
                  this.$router.go(-1);
                });
            }
          } else {
            this.fromValue.storeCode = res.data.sfaStore.storeCode;
            this.fromValue.storeId = res.data.sfaStore.storeId;
            this.$dialog.alert({
              title: '系统提示',
              message: res.data.serverMsg,
            });
          }
        } else {
          this.$dialog.alert({
            title: '系统提示',
            message: res.msg,
            messageAlign: 'left',
          });
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    tabChange(name, title) {
      console.log(name, title);
    },
    phoneCheck() {
      var telrg = /^1[123456789]\d{9}$/;
      if (this.fromValue.telephone.trim() == '') {
        return;
      } else if (!telrg.test(this.fromValue.telephone)) {
        this.$toast('手机号格式错误');
        return;
      } else {
        if (this.fromValue.ifJzStoreType != 1) {
          phoneCheck({ phoneNumber: this.fromValue.telephone }).then((res) => {
            if (res.code == 200) {
              this.phoneNumber = true;
            } else {
              this.phoneNumber = false;
            }
          });
        }
      }
    },
    //获取经销商
    async getStoreChainsContact() {
      // 打开select，上次选中确认数据赋值给选中待确认，回显使用
      this.activatedTCFXList = JSON.parse(JSON.stringify(this.sfaStoreChainsContactList));
      if (!this.treeSelect.length) {
        this.toastLoading(0, '加载中...', true);
        listChainsByCategory({ orgId: this.fromValue.orgId }).then((res) => {
          this.toastLoading().clear();
          // 初始化数据
          res.data.forEach((val) => {
            val.dot = false;
          });
          this.treeSelect = res.data;
        });
      }
      for (let x = 0; x < this.treeSelect.length; x++) {
        // 设置左侧选中图标
        let activate = this.activatedTCFXList.find((item) => {
          return item.categoryCode == this.treeSelect[x].code;
        });
        this.treeSelect[x].dot = activate ? true : false;
        // 反显右侧选中
        let children = this.treeSelect[x].children;
        if (children && this.treeSelect[x].dot) {
          for (let y = 0; y < children.length; y++) {
            let activate = this.activatedTCFXList.find((item) => {
              return (
                children[y].categoryCode == item.categoryCode &&
                children[y].chainCode == item.chainCode
              );
            });
            if (activate) {
              children[y].Check = true;
            } else {
              children[y].Check = false;
            }
          }
        }
      }
      this.$forceUpdate();
      this.activeIndex = 0;
    },
    // 左侧数据点击
    clickNav(index) {
      // this.treeSelect[index].children.forEach((val) => {
      //   // 回显右侧选中
      //   let activate = this.activatedTCFXList.find((item) => item.code == val.code);
      //   val.Check = activate ? true : false;
      // });
    },
    // 右侧数据点击
    treeSelectItemClick(itemData, index, val, ind) {
      itemData.children.forEach((item) => {
        if (val.chainCode == item.chainCode) {
          item.Check = !item.Check;
          // 设置左侧选中图标
          itemData.dot = item.Check;
        } else {
          item.Check = false;
        }
      });
      this.$forceUpdate();
    },
    // 分销店 确认
    treeSelectConfirm() {
      let treeSelectArr = [];
      this.treeSelect.forEach((item) => {
        if (item.dot) {
          let childrenData = item.children.find((val) => val.Check);
          treeSelectArr.push(childrenData);
        }
      });
      if (!treeSelectArr.length) {
        this.$toast('请选择至少选择一个经销商');
        return false;
      }
      console.log(treeSelectArr);
      this.sfaStoreChainsContactList = treeSelectArr;
      this.showPickerChainsList = false;
    },
  },
};
</script>
<style scoped>
.myTab .van-tabs__nav--card {
  margin: 0 !important;
  border-left: 0;
  border-right: 0;
}

.myTab .van-tabs__wrap,
.myTab .van-tabs__nav--card {
  height: 40px;
}

.myTab .van-tab {
  line-height: 40px;
}

.van-f-red {
  color: red;
  width: 4px;
  display: inline-block;
}
</style>
<style lang="scss">
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #0057ba;
}

.navBarTOP {
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
}
#allmap {
  width: 100px;
  height: 100px;
  position: fixed;
  left: -2000px;
}
.typeRadioStore .van-radio {
  margin: 10px;
}
.typeRadioStore .van-radio__icon .van-icon {
  border: 0 !important;
}
.typeRadioStore .van-radio__icon--checked .van-icon {
  color: #1989fa;
  background-color: transparent;
  border-color: transparent;
}
.typeRadioStore .van-cell {
  padding: 0 16px;
  line-height: 40px;
}
.container .typeRadioStore .van-cell__title {
  height: 40px;
}
.typeRadioStore1 .van-radio__icon .van-icon {
  border-radius: 2px;
  border-color: #ccc !important;
}
.typeRadioStore1 .van-radio__icon--checked .van-icon {
  background-color: transparent;
  color: #1989fa;
  border-color: #1989fa !important;
}
.typeRadioStore1 .van-radio .van-radio__label {
  font-size: 14px;
}
.typeRadioStore1 .van-radio[aria-checked='true'] .van-radio__label {
  color: #1989fa;
}
.typeRadioStore1 .van-checkbox__icon .van-icon {
  border-color: #ccc !important;
}
.typeRadioStore1 .van-checkbox__icon--checked .van-icon {
  background-color: transparent;
  color: #1989fa;
  border-color: #1989fa !important;
}
.typeRadioStore1 .van-checkbox .van-checkbox__label {
  font-size: 14px;
}
.typeRadioStore1 .van-checkbox[aria-checked='true'] .van-checkbox__label {
  color: #1989fa;
}
.morelaji .van-cell {
  padding: 10px 0;
}
.storeAdd {
  .agencyBox {
    .header_btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      div {
        padding: 3px;
      }
    }
    .van-sidebar {
      width: 100px;
      text-align: center;
      flex: none;
    }
    .treeSelectchildren {
      .item {
        display: flex;
        align-items: center;
        padding: 5px;
        .value {
          margin-left: 15px;
        }
      }
    }
  }
  .TCFXList {
    .van-field__control--custom {
      flex-direction: column;
      align-items: self-start;
      .sfaStoreChainsContactList {
        padding: 3px;
      }
    }
  }
  .otherCompetitor {
    padding: 10px 0px;
    border-bottom: 1px solid #b6b6b6;
    .van-cell__title {
      width: 50px;
    }
  }
}
</style>