storevisit-ui-mobile/src/views/deviceOutside/rangeStore.vue

<template>
  <div class="rangeStore">
    <div id="container"></div>
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="附近客户信息" left-arrow @click-left="onClickLeft">
        <template #right>
          <span v-if="tabVal == 6 || tabVal == 0 || tabVal == 1" @click="searchFn"
            >筛选<van-icon name="arrow-down"
          /></span>
        </template>
      </van-nav-bar>
      <van-checkbox-group
        v-model="resultmap"
        direction="horizontal"
        class="mapCheckbox"
        @change="selectMapIco">
        <van-grid :column-num="5" class="icoImgMAP">
          <van-grid-item>
            <div slot="text" class="titleico">
              <van-checkbox name="jinpai_ccm">
                <van-icon :name="storeCCMmap" size="32" />
                <p class="p">有布机</p>
                <p>金牌店</p>
              </van-checkbox>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div slot="text" class="titleico">
              <van-checkbox name="jinpai">
                <van-icon :name="storeGoldmap" size="32" />
                <p class="p">无布机</p>
                <p>金牌店</p>
              </van-checkbox>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div slot="text" class="titleico">
              <van-checkbox name="tcfx_tl">
                <van-icon :name="storeAmap" size="32" />
                <p class="p">非金牌</p>
                <p>涂料店</p>
              </van-checkbox>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div slot="text" class="titleico">
              <van-checkbox name="tcfx_cw">
                <van-icon :name="storeBCZmap" size="32" />
                <p class="p">非金牌</p>
                <p>厨卫店</p>
              </van-checkbox>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div slot="text" class="titleico">
              <van-checkbox name="qita">
                <van-icon :name="othermap" size="32" />
                <p class="p">非金牌</p>
                <p>其他店</p>
              </van-checkbox>
            </div>
          </van-grid-item>
          <!-- <van-grid-item v-if="filterTCFX(item)" v-for="(item, index) in storeType" :key="index">
            <div slot="text" class="titleico">
              {{ index }}
              <van-checkbox :name="'TCFX_' + index" v-if="index == 0">
                <van-icon :name="require('@/assets/' + 'TCFX_' + index)" size="32" />
                <p class="p">{{ item.dictLabel }}</p>
              </van-checkbox>
            </div>
          </van-grid-item> -->
          <!-- <van-grid-item>
            <div slot="text" class="titleico">
              <van-checkbox name="tcfx_B_fs">
                <van-icon :name="storeBFSmap" size="32" />
                <p class="p">瓷砖店</p>
              </van-checkbox>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div slot="text" class="titleico">
              <van-checkbox name="tcfx_B_cz">
                <van-icon :name="storeBCZmap" size="32" />
                <p class="p">防水店</p>
              </van-checkbox>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div slot="text" class="titleico">
              <van-checkbox name="tcfx_B_qt">
                <van-icon :name="storeBOthermap" size="32" />
                <p class="p">黄沙</p>
                <p>水泥店</p>
              </van-checkbox>
            </div>
          </van-grid-item> -->
        </van-grid>
      </van-checkbox-group>
      <div class="searchDiv">
        <van-search
          v-model="storeName"
          left-icon="search"
          show-action
          placeholder="搜索名称/编号/地址">
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    <!--        主体内容-->
    <div class="container">
      <div class="lineGrey"></div>
      <baidu-map
        @touchend="end"
        @dragend="dragend"
        @touchmove="touchmove"
        class="map"
        :style="{ height: heifhgts }"
        :center="{ lng: lon1, lat: lat1 }"
        :zoom="zoom"
        :dragging="dragging"
        :scroll-wheel-zoom="true"
        ak="n4CW0ajDw1LBUIj1RTlwd1bbTTXuN8v6"
        @zoomend="zoomend"
        :min-zoom="12"
        @ready="handler"
        @reload="reload"
        :key="baiduMapKey"
        ref="myMap">
        <!--        :minClusterSize="minClusterSize"-->
        <bml-marker-clusterer :averageCenter="false" :styles="styless">
          <bm-marker
            v-for="(marker, index) of listData"
            :key="new Date().getTime() + index"
            :position="{ lng: marker.lon, lat: marker.lat }"
            @click="infoShow(marker, index)"
            :icon="{ url: mpFn(marker, 2), size: { width: 34, height: 40 } }"></bm-marker>
        </bml-marker-clusterer>
        <bm-marker :position="{ lng: lonmy, lat: latmy }"></bm-marker>
        <!--        +0.00003-->
        <bm-marker
          :position="{ lng: info.lon, lat: info.lat }"
          :top="true"
          :icon="{ url: checkIco, size: { width: 34, height: 40 } }"
          @click="infoShow(info)"></bm-marker>
        <bm-label
          @click="zoomFn(marker, index)"
          v-for="(marker, index) of poINData"
          :key="index"
          :content="marker.childrenStoreCount"
          :position="{ lng: marker.lon, lat: marker.lat }"
          :labelStyle="{
            color: '#fff',
            borderColor: 'rgba(0,0,255)',
            fontSize: '14px',
            borderRadius: '1000px',
            background: 'rgba(0,0,255,0.5)',
            width: '50px',
            height: '50px',
            textAlign: 'center',
            lineHeight: '50px',
          }"
          :offset="{ width: -10, height: -10 }" />
        <!--        <bm-geolocation @locationSuccess="locationSuccess" anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" :offset="{width:5,height:280}"></bm-geolocation>-->
      </baidu-map>
      <img src="./../../assets/list.png" @click="onClickLeft" class="mapimg" />
      <img src="./../../assets/sbpm.png" @click="onMaps" class="mapimg" style="bottom: 286px" />
      <div v-if="show" class="mapStoreList">
        <van-icon
          name="close"
          style="float: right; padding: 10px; top: -6px"
          size="20"
          @click="closeFn" />
        <div class="maplit" :class="{ maplitactive: listpoint.length > 1 }">
          <div v-for="(info, index) in listpoint" :key="index" class="maplistitem">
            <p style="font-weight: bold; font-size: 16px">
              <template v-if="info.storeLabels">
                <!-- 金牌店ABC -->
                <img
                  class="JPABC"
                  :src="require('@/assets/Icon/storeA.png')"
                  v-if="info.storeLabels.storeA" />
                <img
                  class="JPABC"
                  :src="require('@/assets/Icon/storeB.png')"
                  v-if="info.storeLabels.storeB" />
                <img
                  class="JPABC"
                  :src="require('@/assets/Icon/storeC.png')"
                  v-if="info.storeLabels.storeC" />
                <img
                  class="JPABC"
                  :src="require('@/assets/Icon/storeD.png')"
                  v-if="info.storeLabels.storeD" />
                <img
                  class="JPABC"
                  :src="require('@/assets/Icon/storeE.png')"
                  v-if="info.storeLabels.storeE" />
              </template>
              <span @click="goOtherSystem(info)" :style="setStroeNameStyle(info)">
                <span>{{ info.storeName }}</span>
                (<span> {{ info.storeCode }} </span>)
                <!-- <span @click="checkfn(info)">{{ info.storeName }}</span>
                (<span @click="checkfn(info)"> {{ info.storeCode }} </span>) -->
              </span>
              <span class="btn" :data-clipboard-text="info.storeCode">
                <van-icon
                  :name="paste"
                  color="#ee0a24"
                  size="20"
                  style="top: 6px; margin-left: 4px" />
              </span>
            </p>
            <p class="text">
              <span v-if="tabVal == 3 || tabVal == 4">类型:{{ info.storeCategoryName }}</span>
              <span v-if="tabVal == 0 || tabVal == 1 || tabVal == 6"
                >类型:{{ info.storeCategory }}</span
              >
              &nbsp;
              <el-popover popper-class="zpover zpover6" placement="bottom-start" trigger="click">
                <div>
                  <p>
                    本店经营品项指导:
                    <a @click="linkimg(info)" style="text-decoration: underline">点击查看</a>
                  </p>
                </div>
                <van-icon name="question-o" size="18" slot="reference" />
              </el-popover>
            </p>
            <div class="text" style="position: relative">
              联系人:{{ info.contactName }}
              <div style="position: absolute; bottom: 0px; right: 10px; display: inline-block">
                <el-popover
                  popper-class="zpover"
                  placement="bottom"
                  width="120"
                  trigger="click"
                  content="该客户为凤凰客户">
                  <div
                    v-if="info.storeLabels.fhCustomer"
                    class="visitStoreIco"
                    style="background-color: #fff"
                    slot="reference">
                    <van-icon :name="require('@/assets/Icon/fenghuangjihua.png')" size="26" />
                  </div>
                </el-popover>
                <el-popover popper-class="zpover zpover6" placement="top-start" trigger="click">
                  <div>
                    <p>
                      本店{{ timeData }}下单SKU数<a
                        @click="linkList(info)"
                        style="text-decoration: underline"
                        >点击查看详情</a
                      >
                    </p>
                  </div>
                  <div
                    class="visitStoreIco"
                    v-if="info.storeLabels.zysslNums !== false"
                    style="background-color: #fff; position: relative"
                    slot="reference">
                    <p
                      style="
                        width: 100%;
                        position: absolute;
                        z-index: 9999;
                        top: 0.2px;
                        width: 22px;
                        margin: 0;
                        margin-left: 3.6px;
                        text-align: center;
                        font-size: 12px;
                      ">
                      {{ info.storeLabels.zysslNums }}
                    </p>
                    <van-icon :name="ord" size="26" />
                  </div>
                </el-popover>
                <el-popover
                  popper-class="zpover zpover5"
                  placement="top"
                  width="200"
                  trigger="click">
                  <div v-if="info.storeLabels">
                    <p>已参加:</p>
                    <p v-for="tt in (info.storeLabels.targetOne + '').split(';')">
                      {{ tt }}
                    </p>
                  </div>
                  <div
                    class="visitStoreIco"
                    v-if="info.storeLabels.targetOne"
                    style="background-color: #fff"
                    slot="reference">
                    <van-icon :name="targetOne" size="26" />
                  </div>
                </el-popover>
                <el-popover
                  popper-class="zpover"
                  placement="top"
                  width="120"
                  trigger="click"
                  content="调色机5天未联网">
                  <div
                    v-if="info.storeLabels.ccmOffline"
                    class="visitStoreIco"
                    style="background-color: #fff"
                    slot="reference">
                    <van-icon :name="Network" size="26" />
                  </div>
                </el-popover>
                <el-popover
                  popper-class="zpover"
                  placement="top"
                  width="200"
                  trigger="click"
                  content="同城店近60天未下单">
                  <div
                    v-if="info.storeLabels.fxNoOrder"
                    class="visitStoreIco"
                    style="background-color: #fff"
                    slot="reference">
                    <van-icon :name="order60" size="26" />
                  </div>
                </el-popover>
                <el-popover
                  popper-class="zpover"
                  placement="top"
                  width="200"
                  trigger="click"
                  content="金牌店近30天未下单">
                  <div
                    v-if="info.storeLabels.noOrder"
                    class="visitStoreIco"
                    style="background-color: #fff"
                    slot="reference">
                    <van-icon :name="order" size="26" />
                  </div>
                </el-popover>
                <el-popover
                  popper-class="zpover"
                  placement="top"
                  width="200"
                  trigger="click"
                  content="本店本月进过专业时时丽">
                  <div
                    class="visitStoreIco"
                    v-if="info.storeLabels.zyssl"
                    style="background-color: #ed5c68"
                    slot="reference">
                    专
                  </div>
                </el-popover>
                <el-popover
                  popper-class="zpover zpover1"
                  placement="top"
                  width="200"
                  trigger="click"
                  content="本店本月进过超好贴">
                  <div
                    v-if="info.storeLabels.chtczj"
                    class="visitStoreIco"
                    style="background-color: #0057ba"
                    slot="reference">
                    超
                  </div>
                </el-popover>
                <!--                  <el-popover-->
                <!--                      placement="bottom"-->
                <!--                      width="200"-->
                <!--                      popper-class="zpover zpover2"-->
                <!--                      trigger="click"-->
                <!--                      content="本月未被拜访的信息">-->
                <!--                    <div v-if="item.storeLabels.noVisit" class="visitStoreIco" style="background-color: #fff" slot="reference">-->
                <!--                      <van-icon :name="visitTimess" size="26" /></div>-->
                <!--                  </el-popover>-->
                <el-popover
                  placement="top"
                  width="200"
                  popper-class="zpover zpover2 zpover1sb"
                  trigger="click"
                  :disabled="!info.userVisitTimesMap"
                  :content="'本店本月已拜访过' + info.storeLabels.visitTimes + '次'">
                  <div
                    v-if="info.storeLabels.visitTimes && info.storeLabels.visitTimes > 0"
                    class="visitStoreIco"
                    slot="reference"
                    style="background-color: #fff; position: relative">
                    <p
                      style="
                        width: 100%;
                        position: absolute;
                        z-index: 9999;
                        top: -2px;
                        margin: 0;
                        text-align: center;
                        font-size: 12px;
                      ">
                      {{ info.storeLabels.visitTimes }}
                    </p>
                    <!-- A级金牌店拜访次数少于2 -->
                    <van-icon
                      :name="require('@/assets/ordernumRed.png')"
                      size="26"
                      v-if="
                        info.storeLabels.storeA &&
                        info.needVisitNum &&
                        info.storeLabels.visitTimes < info.needVisitNum
                      " />
                    <van-icon :name="require('@/assets/ordernum.png')" size="26" v-else />
                  </div>
                  <p style="text-align: center; background: #fff; color: #000; padding: 5px 0">
                    本店本月已拜访过{{ info.storeLabels.visitTimes }}次
                  </p>
                  <p
                    v-if="info.storeLabels.storeA && info.needVisitNum"
                    style="text-align: center; background: #fff; color: red; padding: 5px 0">
                    A级金牌店拜访标准：1月{{ info.needVisitNum }}次
                  </p>
                  <el-table :data="info.userVisitTimesMap" border max-height="180px">
                    <el-table-column label="业务员" prop="userName" />
                    <el-table-column label="拜访次数" prop="visitTimes" width="90px" />
                  </el-table>
                </el-popover>
              </div>
            </div>
            <p class="text" @click="buryingPointFn(info)">
              电&nbsp;话：<a
                style="color: #0057ba; font-weight: bold; text-decoration: underline"
                :href="'tel:' + info.telephone"
                >{{ info.telephone }}</a
              ><van-icon name="phone" size="16" color="#1989fa" />
            </p>
            <!-- 潜在店不显示经销商 -->
            <template v-if="info.sfaStoreType.type != 'qzd'">
              <!-- 分销店 -->
              <template
                v-if="
                  info.sfaStoreType &&
                  info.sfaStoreType.type == 'fxd' &&
                  info.sfaStoreChainsContactList
                ">
                <div class="text">
                  经销商：
                  <div class="TCFXListItem" v-for="(item, index) in info.sfaStoreChainsContactList">
                    <el-popover
                      popper-class="zpover zpoverStoreztype"
                      placement="bottom-start"
                      trigger="click">
                      <div>
                        <div>{{ item.chainCode }}</div>
                        <div>{{ item.chainName }}</div>
                      </div>
                      <div slot="reference" :key="index">
                        {{ item.categoryDescribe }}
                      </div>
                    </el-popover>
                  </div>
                </div>
              </template>
              <template v-else>
                <p class="text">经销商:{{ info.chainName }}</p>
              </template>
            </template>
            <p class="text">地址:{{ info.addressLine }}</p>
            <div class="text" style="height: 24px">
              <!--          <van-button @click="linkapp(info)" style="float: right;margin-top: -36px;" type="info" size="small" plain  class="centerBtn centerBtn1">-->
              <!--            <van-icon :name="mapzb" size="22" /><span style="float: right;margin-top: 6px;">导航</span></van-button> margin-right:76px-->
              <div v-if="tabVal == 0 || tabVal == 1 || tabVal == 6" style="float: right">
                <van-button
                  v-if="customerVisits && info.stateString != '已拜访'"
                  :disabled="!customerVisits"
                  type="info"
                  size="small"
                  plain
                  class="centerBtn centerBtn1"
                  @click="storeVisit(info)"
                  >进入拜访</van-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="
        position: fixed;
        top: 192px;
        width: 310px;
        left: 50%;
        background-color: black;
        border-radius: 100px;
        color: rgb(255, 255, 255);
        padding: 6px 12px;
        margin-left: -155px;
        text-align: center;
      "
      v-if="msgshow">
      {{ msg }}
    </div>
    <van-popup v-model="showPicker" position="bottom" class="textsize">
      <van-row
        style="
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 998;
          background-color: #fff;
          border-bottom: 1px solid #ccc;
        ">
        <van-col span="3" style="text-align: center; margin: 14px 0" @click="showPicker = false">
          <van-icon name="cross" size="20" color="#909399" />
        </van-col>
        <van-col span="13">
          <!--          <van-field style="    margin-top: 2px;-->
          <!--    border-radius: 6px;-->
          <!--    overflow: hidden;" v-model="serachstype" label="" placeholder="请输入关键词" clearable @input="searchType"/>-->
        </van-col>
        <van-col span="4" style="text-align: center; line-height: 36px" @click="onConfirm">
          <div style="color: #0057ba">
            <van-button type="info" size="small" color="#0057ba">筛选</van-button>
          </div></van-col
        >
        <van-col span="4" style="text-align: center; line-height: 36px" @click="onsets">
          <van-button type="default" size="small" style="height: 28px">重置</van-button>
        </van-col>
      </van-row>
      <div style="height: 48px; width: 100%"></div>
      <!--      <van-picker show-toolbar :columns="storeTypeLists" value-key="dictLabel" @confirm="onConfirm" @cancel="showPicker = false"/> -->
      <div class="searchcheck">
        <p class="searchchecktitle">&nbsp;经销商</p>
        <van-row>
          <van-col span="24">
            <div @click="moreTypeShowFn">
              <van-field
                style="
                  margin-top: -6px;
                  border-radius: 6px;
                  border: 1px solid #ccc;
                  overflow: hidden;
                "
                readonly
                v-model="chainName"
                label=""
                placeholder="请选择经销商" />
            </div>
          </van-col>
          <!--         <van-col span="4"><van-button type="default" native-type="button" @click="moreTypeShowclearableFn">清空</van-button></van-col>-->
        </van-row>
        <p class="searchchecktitle" @click="otherbqShow = !otherbqShow">
          &nbsp;门店标签<van-icon name="arrow-down" style="float: right" />
        </p>
        <van-checkbox-group v-model="storeLabelTypes" direction="horizontal">
          <div v-if="otherbqShow" style="width: 100%">
            <div class="checkbox" v-for="(item, index) in StoreLabels" :key="index">
              <van-checkbox :name="item.dictValue">{{ item.dictLabel }}</van-checkbox>
            </div>
            <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
          </div>
        </van-checkbox-group>
        <van-checkbox-group v-model="result" direction="horizontal">
          <p class="searchchecktitle" @click="otherkkdShow = !otherkkdShow">
            &nbsp;可控店<van-icon name="arrow-down" style="float: right" />
          </p>
          <div v-if="otherkkdShow">
            <div v-for="(item, index) in storeTypeLists" :key="index" class="checkbox1">
              <div v-if="item.groupType == 'kkd'" class="child">
                <van-checkbox :name="item.dictValue">{{ item.dictLabel }}</van-checkbox>
              </div>
            </div>
          </div>
          <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
          <p class="searchchecktitle" @click="otherfxdShow = !otherfxdShow">
            &nbsp;分销店<van-icon name="arrow-down" style="float: right" />
          </p>
          <div v-if="otherfxdShow" style="margin: 0 14px; width: 100%">
            <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
            <p class="searchchecktitle1" @click="otherfxdShow1 = !otherfxdShow1">
              金牌店<van-icon name="arrow-down" style="float: right" />
            </p>
            <div v-if="otherfxdShow1">
              <div v-for="(item1, index1) in storeTypeLists" :key="200 + index1" class="checkbox1">
                <div v-if="item1.groupType == 'fxd' && item1.remark == 'jp'" class="child">
                  <van-checkbox :name="item1.dictValue">{{ item1.dictLabel }}</van-checkbox>
                </div>
              </div>
              <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
            </div>
            <p class="searchchecktitle1" @click="otherfxdShow2 = !otherfxdShow2">
              同城分销店<van-icon name="arrow-down" style="float: right" />
            </p>
            <div v-if="otherfxdShow2">
              <div
                v-for="(itemlj, indexlj) in storeTypeLists"
                :key="400 + indexlj"
                class="checkbox1">
                <div v-if="itemlj.groupType == 'fxd' && itemlj.remark == 'tcfx'" class="child">
                  <van-checkbox :name="itemlj.dictValue">{{ itemlj.dictLabel }}</van-checkbox>
                </div>
              </div>
              <div style="clear: both"></div>
            </div>
          </div>
          <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
          <template v-if="postType != 'GZ' && postType != 'JZ'">
            <p class="searchchecktitle" @click="isCompetingStores = !isCompetingStores">
              &nbsp;竞品店<van-icon name="arrow-down" style="float: right" />
            </p>
            <div v-if="isCompetingStores" style="width: 100%">
              <div class="checkbox1" v-for="(item, index) in storeTypeLists" :key="index">
                <div v-if="item.groupType == 'qzd'" class="child">
                  <van-checkbox :name="item.dictValue">{{ item.dictLabel }}</van-checkbox>
                </div>
              </div>
              <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
            </div>
            <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
          </template>
          <p class="searchchecktitle" @click="otherShow = !otherShow">
            &nbsp;其他 <van-icon name="arrow-down" style="float: right" />
          </p>
          <div v-if="otherShow">
            <div v-for="(item2, index2) in storeTypeLists" :key="100 + index2" class="checkbox1">
              <div v-if="item2.groupType == 'other'" class="child">
                <van-checkbox :name="item2.dictValue">{{ item2.dictLabel }}</van-checkbox>
              </div>
            </div>
          </div>
        </van-checkbox-group>
      </div>
    </van-popup>
    <van-popup v-model="moreTypeShow" position="bottom" style="height: 80%">
      <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="CustomerName"
            label=""
            placeholder="请输入关键词"
            clearable />
        </van-col>
        <van-col span="4" style="text-align: center; line-height: 48px" @click="getCustomer">
          <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"
        visible-item-count="10" />
    </van-popup>
  </div>
</template>

<script>
import {
  BaiduMap,
  BmLabel,
  BmMarker,
  BmlMarkerClusterer,
  BmInfoWindow,
  BmGeolocation,
} from 'vue-baidu-map';
import mapzb from './../../assets/mapzb.png';
import other from './../../assets/other.svg';
import othermap from './../../assets/othermap.png';
import storeA from './../../assets/storeA.svg';
import storeBCZ from './../../assets/storeBCZ.svg';
import storeBFS from './../../assets/storeBFS.svg';
import storeBOther from './../../assets/storeBOther.svg';
import storeGold from './../../assets/storeGold.svg';
import storeCCM from './../../assets/storeCCM.svg';
import storeAactive from './../../assets/storeAactive.svg';
import storeBCZactive from './../../assets/storeBCZactive.svg';
import storeBFSactive from './../../assets/storeBFSactive.svg';
import storeBOtheractive from './../../assets/storeBOtheractive.svg';
import storeGoldactive from './../../assets/storeGoldactive.svg';
import storeCCMactive from './../../assets/storeCCMactive.svg';
import otheractive from './../../assets/otheractive.svg';
import storeAmap from './../../assets/storeAmap.png';
import storeBCZmap from './../../assets/storeBCZmap.png';
import storeBFSmap from './../../assets/storeBFSmap.png';
import storeBOthermap from './../../assets/storeBOthermap.png';
import storeGoldmap from './../../assets/storeGoldmap.png';
import storeCCMmap from './../../assets/storeCCMmap.png';
import positinon from './../../assets/positinon.svg';
import times from '@/assets/Icon/times.png';
import order60 from '@/assets/order60.png';
import targetOne from '@/assets/targetOne.png';
import Network from '@/assets/Network.png';
import timeico from '@/assets/Icon/datatims.png';
import paste from '@/assets/paste.png';
import visitTimes from '@/assets/visitTimes.png';
import mpimg from '@/assets/mpimg.png';
import mapmarker from '@/components/mapMarkerDouble';
import order from '@/assets/order.png';
import mp from './../../assets/mp.png';
import mp1 from './../../assets/mp1.png';
import {
  addVisitsPosition,
  buryingPoint,
  checkVisit,
  getCustomerList,
  getStoreLabels,
  getStoreMapInfo,
  getStoreTypeListlp,
  getUserOrgStoreList,
  getUserOutPlaList,
  mobileReposition,
  ProductItemImge,
  storeList,
  storeMyList,
  getDictOption,
} from '@/api';
import axios from 'axios';
import ord from '@/assets/ord.png';

import check from './../../assets/check.svg';
import { topStore } from '@/api/inventory';
import { gcj02BD } from '@/utils';
import { checkStoreAddressByStoreCode } from '@/api/visitstore';
import { mapState } from 'vuex';
export default {
  name: 'rangeStore',
  components: {
    BaiduMap,
    BmMarker,
    BmLabel,
    BmlMarkerClusterer,
    BmInfoWindow,
    BmGeolocation,
  },
  computed: {
    ...mapState({
      storeType: (state) => state.user.storeType,
    }),
  },
  data() {
    return {
      moreTypeShow: false,
      chainsData: [],
      result: [],
      resultmap: [],
      check: check,
      mp1: mp1,
      times: times,
      msg: '',
      msgshow: false,
      mapmarker: mapmarker,
      paste: paste,
      visitTimess: visitTimes,
      timeico: timeico,
      mpimg: mpimg,
      order: order,
      mapShow: false,
      otherShow: false,
      Network: Network,
      order60: order60,
      ord: ord,
      targetOne: targetOne,
      other: other,
      othermap: othermap,
      storeA: storeA,
      storeBCZ: storeBCZ,
      storeBFS: storeBFS,
      storeBOther: storeBOther,
      positinon: positinon,
      storeCCM: storeCCM,
      storeGold: storeGold,
      storeCCMmap: storeCCMmap,
      storeGoldmap: storeGoldmap,
      storeAmap: storeAmap,
      storeBCZmap: storeBCZmap,
      storeBFSmap: storeBFSmap,
      storeBOthermap: storeBOthermap,
      storeBOtheractive: storeBOtheractive,
      storeCCMactive: storeCCMactive,
      storeGoldactive: storeGoldactive,
      storeAactive: storeAactive,
      storeBCZactive: storeBCZactive,
      storeBFSactive: storeBFSactive,
      otheractive: otheractive,
      checkIco: otheractive,
      minClusterSize: 5,
      mp: mp,
      mapzb: mapzb,
      info: {
        lon: 0,
        lat: 0,
        storeName: '',
        storeCategory: '',
        chainName: '',
        addressLine: '',
      },
      show: false,
      first: 1,
      text: '3000米',
      zoom: 18,
      storeName: '',
      showMap: true,
      timeData: '',
      styless: [
        {
          url: positinon,
          size: {
            width: 48,
            height: 48,
          },
          textColor: '#fff',
          textSize: 18,
          opt_textSize: '200px',
        },
      ],
      range: 10000,
      lon1: '112.45359397440227',
      lat1: '34.62171814576471',
      lon: '112.45359397440227',
      lat: '34.62171814576471',
      showTownPicker: false,
      list: [],
      listData: [],
      cont: 0,
      shows: false,
      indexs: 0,
      flag: true,
      tabVal: 4,
      dragging: true,
      poINData: [],
      isZoom: true,
      geocoder: '',
      lonsave: '112.45359397440227',
      latsave: '34.62171814576471',
      latmy: '34.62171814576471',
      lonmy: '112.45359397440227',
      mapk: '',
      mapks: '',
      customerVisits: true,
      StoreLabels: [],
      chainName: '',
      chainCode: '',
      otherbqShow: true,
      otherkkdShow: true,
      otherfxdShow: true,
      otherfxdShow2: true,
      otherfxdShow1: true,
      storeTypeList: [],
      storeTypeLists: [],
      storeLabelTypes: [],
      showPicker: false,
      CustomerName: '',
      listpoint: [],
      heifhgts: '200px',
      mapRange: [], //地图范围
      baiduMapKey: new Date().getTime(),
      isCompetingStores: true,
      postType: '',
    };
  },
  created() {
    this.heifhgts = window.innerHeight - 190 + 'px';
    // 好邦手接入拜访系统地图功能
    // 获取url参数 userId
    let userId = this.$route.query.userId || '';
    console.log(this.$route);
    console.log(window.location.href);
    if (userId) {
      localStorage.setItem('loginName', userId);
    }
  },
  activated() {
    this.postType = localStorage.getItem('postType');
    this.listData = [];
    this.baiduMapKey = new Date().getTime();
    this.closeFn();
    // 获取地图范围 字典
    this.getMapRange();
    this.resultmap = [];
    this.tabVal = this.$route.query.tabVal;
    this.customerVisits = localStorage.getItem('customerVisits');
    this.initialize();
    this.range = 10000;
    this.zoom = 20;
    this.first = 1;
    this.msg = '';
    this.msgshow = false;
    this.storeName = localStorage.getItem('outvstoreName');
    if (localStorage.getItem('outvchainName') && localStorage.getItem('outvchainName') != 'null') {
      this.chainName = localStorage.getItem('outvchainName');
    }
    if (localStorage.getItem('outvstoreLabelTypes') != null) {
      this.storeLabelTypes = localStorage.getItem('outvstoreLabelTypes').split(',');
    } else {
      this.storeLabelTypes = [];
    }
    if (localStorage.getItem('outvstoreCategoryList') != null) {
      this.result = localStorage.getItem('outvstoreCategoryList').split(',');
      this.storeCategoryList = localStorage.getItem('outvstoreCategoryList');
    } else {
      this.result = [];
    }
    this.chainCode = localStorage.getItem('outvchainCode');
    this.storeName = localStorage.getItem('outvstoreName');
    this.getMonth();
    this.getStoreTypeList();
    this.getStoreLabels();
    this.getposition();
  },
  methods: {
    setStroeNameStyle(item) {
      // 家装或工装 approvalStatus:是否结案 0：未结案，1：已结案
      if (
        (item.sfaStoreType && (item.sfaStoreType.jz || item.sfaStoreType.gz)) ||
        item.approvalStatus == null ||
        item.approvalStatus == 0
      ) {
        return {};
      } else {
        return { color: '#0057ba', 'text-decoration': 'underline' };
      }
    },
    async getMapRange() {
      let mapRangeOption = await getDictOption({}, 'out_plan_map_range');
      this.mapRange = mapRangeOption.data || [];
      // dictValue
    },
    // 设置地图获取范围提示文字
    setMapRangeTitle(total) {
      let leftRange = this.mapRange[0] ? (this.mapRange[0].dictValue / 1000).toFixed(1) : '10';
      let rightRange = this.mapRange[1] ? (this.mapRange[1].dictValue / 1000).toFixed(1) : '5';
      let msg =
        '当前区域' +
        leftRange +
        '公里内共' +
        total +
        '家门店，展示附近' +
        rightRange +
        '公里的门店';
      console.log(msg);
      return msg;
    },
    closeFn() {
      this.show = false;
      // this.info.lon=0
      // this.info.lat=0
    },
    closeFns() {
      this.show = false;
      this.info.lon = 0;
      this.info.lat = 0;
    },
    linkList(val) {
      this.$router.push({
        path: '/pItem',
        query: {
          id: val.storeId,
          detilId: 'a',
          from: 'outPlan',
          storeCode: val.storeCode,
          showOrderButton: val.showOrderButton,
        },
      });
    },
    linkimg(val) {
      ProductItemImge({ storeId: val.storeId }).then((response) => {
        if (response.code == 200) {
          if (response.data != undefined) {
            window.open(response.data);
          } else {
            this.$toast(response.msg);
          }
        }
      });
    },
    onMaps() {
      this.closeFns();
      // this.mapk.clearOverlays()
      this.getposition();
    },
    getStoreTypeList() {
      getStoreTypeListlp({}).then((res) => {
        this.storeTypeLists = res.data;
        this.storeTypeList = res.data;
      });
    },
    onsets() {
      this.result = [];
      this.resultmap = [];
      this.zyssl = [];
      this.chtczj = [];
      this.noVisit = [];
      this.noOrder = [];
      this.fxNoOrder = [];
      this.storeLabelTypes = [];
      this.storeCategoryList = this.result.join(',');
      this.chainName = '';
      this.chainCode = '';
      // this.typeName=value.dictLabel
      this.onSearch();
    },
    searchFn() {
      this.showPicker = true;
      this.CustomerName = '';
    },
    moreSearch() {
      this.onSearch();
      this.$refs.item.toggle();
    },
    onConfirmChainsList(value) {
      if (value.chainName != undefined) {
        this.chainName = value.chainName;
        this.chainCode = value.chainCode;
      }
      this.showPickerChainsList = false;
      this.moreTypeShow = false;
    },
    getStoreLabels() {
      getStoreLabels().then((res) => {
        this.StoreLabels = res.data;
      });
    },
    onConfirm(value) {
      this.storeCategoryList = this.result.join(',');
      // this.typeName=value.dictLabel
      this.showPicker = false;
      this.onSearch();
    },
    moreTypeShowFn() {
      this.moreTypeShow = true;
      // this.CustomerName=""
      // this.chainsData=[]
      this.getCustomer();
    },
    getCustomer() {
      var name = '';
      if (this.tabVal != 1) {
        name = 'org';
      } else {
        name = 'my';
      }
      getCustomerList({ name: this.CustomerName, from: name }).then((request) => {
        this.chainsData = request.data;
        this.chainsData.push({});
        this.chainsData.pop();
      });
    },
    getMonth() {
      var currentDate = new Date();
      var currentMonth = currentDate.getMonth();
      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);
      }
      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) + '月';
        var formattedPreviousMonth = previousYear + '年' + (previousMonth + 1) + '月';
        this.timeData = formattedPreviousMonth + '-' + formattedPreviousMonth1;
      }
    },
    selectMapIco() {
      if (this.resultmap.length > 0) {
        this.closeFn();
        this.listData = [];
        var listData = [];
        this.list.forEach((item) => {
          if (this.resultmap.indexOf(item.iconName) != -1) {
            listData.push(item);
          }
        });
        this.listData = listData;
        if (listData.length < 1) {
          this.$toast('暂无客户信息');
        }
      } else {
        this.listData = [];
        this.listData = this.list;
      }
    },
    reload() {
      debugger;
    },
    handler({ BMap, map }) {
      this.mapk = map;
      this.mapks = BMap;
    },
    zoomFn(val, index) {
      this.lat1 = val.lat;
      this.lon1 = val.lon;
      if (val.level == 1) {
        this.zoom = 8;
      } else if (val.level == 2) {
        this.zoom = 10;
      } else if (val.level == 3) {
        this.zoom = 20;
      }
    },
    initialize() {
      this.isZoom = true;
      var map = new TMap.Map('container', {
        zoom: this.zoom,
        center: new TMap.LatLng(39.986785, 116.301012),
      });
      this.geocoder = new TMap.service.Geocoder();
    },
    dragend(e) {
      this.getMapposition(e, '2', this.$route.query.tabVal);
    },
    zoomend(e) {
      this.getMapposition(e, '1', this.$route.query.tabVal);
    },
    getMapposition(e, type, listType) {
      debugger;
      var that = this;
      var typeList = -1;
      var input = [e.target.re.lat, e.target.re.lng];
      var location = new TMap.LatLng(Number(input[0]), Number(input[1]));

      var Zoom = e.target.getZoom();
      if (listType == 1) {
        typeList = 1;
      } else if (listType == 3) {
        typeList = 4;
      } else if (listType == 4) {
        typeList = 3;
      } else {
        typeList = 2;
      }
      // that.latsave=input[0]
      // that.lonsave=input[1]
      if (Zoom > 5 && this.isZoom && type != 2) {
        this.isZoom = false;
        this.range = 10000;
        this.getUserOutPlaList();
      }

      if (type == 2) {
        var lon = this.mapk.getCenter().lng;
        var lat = this.mapk.getCenter().lat;
        var PointSum = that.twoPointSum(lat, lon, that.latsave, that.lonsave).toFixed(2);
        this.lon = this.mapk.getCenter().lng;
        this.lat = this.mapk.getCenter().lat;
        if (PointSum > 3000) {
          setTimeout(() => {
            this.getUserOutPlaList();
          }, 1000);
        }
      }
    },
    getStoreMapInfo(val) {
      this.poINData = [];
      this.list = [];
      this.listData = [];
      getStoreMapInfo(val).then((res) => {
        if (res.code == 200) {
          this.poINData = res.data;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    touchmove() {
      this.dragging = true;
    },
    end(e) {
      this.dragging = false;
    },
    mpFn(row, tyle) {
      if (row.iconName == 'qita') {
        // 非金牌-其他
        if (tyle == 1) {
          this.checkIco = otheractive;
        } else {
          return this.other;
        }
      } else if (row.iconName == 'tcfx_tl') {
        // 非金牌-涂料店
        if (tyle == 1) {
          this.checkIco = storeAactive;
        } else {
          return this.storeA;
        }
      } else if (row.iconName == 'tcfx_cw') {
        // 非金牌-厨卫
        if (tyle == 1) {
          this.checkIco = storeBCZactive;
        } else {
          return this.storeBCZ;
        }
      } else if (row.iconName == 'tcfx_B_fs') {
        // 同城分销-瓷砖店
        if (tyle == 1) {
          this.checkIco = storeBFSactive;
        } else {
          return this.storeBFS;
        }
      } else if (row.iconName == 'tcfx_B_qt') {
        // 同城分销-黄沙-水泥
        if (tyle == 1) {
          this.checkIco = storeBOtheractive;
        } else {
          return this.storeBOther;
        }
      } else if (row.iconName == 'jinpai') {
        // 无布机-金牌店
        if (tyle == 1) {
          this.checkIco = storeGoldactive;
        } else {
          return this.storeGold;
        }
      } else if (row.iconName == 'jinpai_ccm') {
        if (tyle == 1) {
          this.checkIco = storeCCMactive;
        } else {
          return this.storeCCM;
        }
      } else {
        if (tyle == 1) {
          this.checkIco = mpactive;
        } else {
          return this.mp;
        }
      }
    },
    storeDetails(val) {
      // designerStore 是否为设计师招募门店，true-是，false-否
      if (val.designerStore) {
        this.$router.push({
          path: '/addDesignerDetail',
          query: { id: val.storeId },
        });
        return;
      } else {
        this.$router.push({
          path: '/storeDetail',
          query: { id: val.storeId },
        });
      }
    },
    locationSuccess(point) {
      this.lon1 = point.point.lng;
      this.lat1 = point.point.lat;
      this.lon = point.point.lng;
      this.lat = point.point.lat;
      this.zoom = 19;
      this.onSearch();
    },
    onSearch() {
      // this.getposition()
      this.resultmap = [];
      this.closeFns();
      this.lon = this.mapk.getCenter().lng;
      this.lat = this.mapk.getCenter().lat;
      this.getUserOutPlaList('1');
    },
    getposition() {
      this.resultmap = [];
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      let url = window.location.href;
      let wx = this.wx;
      var that = this;
      let qiyeData;
      const instance = axios.create();
      instance.defaults.headers.common['userId'] = localStorage.getItem('loginName');
      instance
        .get(process.env.VUE_APP_BASE_API + 'mobile/wx/ticket', {
          params: {
            url: url,
          },
        })
        .then((response) => {
          if (response.status == 200) {
            this.cont = 3;
            var flat = true;
            var times = setInterval(() => {
              this.cont--;
              if (this.cont == '0') {
                if (flat) {
                  loading1.clear();
                  clearInterval(times);
                  that.$dialog
                    .alert({
                      message: '定位失败，请开启企微定位权限',
                    })
                    .then(() => {});
                } else {
                  clearInterval(times);
                }
              }
            }, 1000);
            qiyeData = response.data.data;
            wx.config({
              beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: qiyeData.appId, // 必填，企业微信的corpID
              timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
              nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
              signature: qiyeData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
              jsApiList: ['ready', 'getLocation'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
            });
            wx.ready(function () {
              wx.getLocation({
                type: 'gcj02',
                success: function (res) {
                  flat = false;
                  loading1.clear();
                  var location = that.CJ02BD(res.latitude, res.longitude);
                  that.lat = location.lat;
                  that.lon = location.lon;
                  that.latsave = location.lat;
                  that.lonsave = location.lon;
                  that.lat1 = location.lat;
                  that.lon1 = location.lon;
                  that.latmy = location.lat;
                  that.lonmy = location.lon;
                  that.mapk.centerAndZoom(new BMap.Point(location.lon, location.lat), 18);
                  that.onSearch();
                  // that.getUserOutPlaList('2');
                  // setTimeout(()=>{
                  //   that.getUserOutPlaList()
                  // },2000)
                },
              });
            });
          }
        });
    },
    onClickLeft1() {
      this.lon1 = '0';
      this.lat1 = '0';
    },
    checkfn(row) {
      this.info = row;
      this.mpFn(row, 1);
    },
    infoShow(row, index) {
      // for(var i=0;i<this.listData.length;i++){
      //   this.listData[i].select=false
      // }
      // this.listData[index].select=true
      this.mpFn(row, 1);
      this.info = row;
      this.listpoint = [];
      this.show = false;
      var name = '我的';
      var title = '客户信息';
      var storeCategory = row.storeCategoryName;
      if (this.tabVal != 1 && this.tabVal != 4) {
        name = '销售部';
      }
      if (this.tabVal != 3 && this.tabVal != 4) {
        storeCategory = row.storeCategory;
        title = '计划外';
      }
      buryingPoint({
        systemModel: title + name,
        buryingPointType: 4,
        buryingPointValue: storeCategory,
        buryingPointName: row.storeCode,
        buryingPointPosition: '地图',
      });
      this.getpointList(row);
    },
    getpointList(val) {
      debugger;
      var that = this;
      let loading3 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      if (this.$route.query.tabVal == 1) {
        getUserOutPlaList({
          storeCode: val.storeCode,
          type: 1,
          lon: val.lon,
          lat: val.lat,
          range: 20,
          storeName: this.storeName.trim(),
          chainCode: this.chainCode,
          storeLabelTypes: this.storeLabelTypes.join(','),
          pageNum: this.pageNum,
          storeCategoryList: this.storeCategoryList,
        }).then((res) => {
          if (res.code == 200) {
            loading3.clear();
            this.listpoint = res.rows;
            this.show = true;
          } else {
            this.$toast(res.msg);
          }
        });
      } else if (this.$route.query.tabVal == 3) {
        storeList({
          storeCode: val.storeCode,
          type: 4,
          lon: val.lon,
          lat: val.lat,
          range: 20,
          storeName: this.storeName.trim(),
        }).then((res) => {
          if (res.code == 200) {
            loading3.clear();
            this.listpoint = res.rows;
            this.show = true;
          } else {
            this.$toast(res.msg);
          }
        });
      } else if (this.$route.query.tabVal == 4) {
        storeMyList({
          storeCode: val.storeCode,
          type: 3,
          lon: val.lon,
          lat: val.lat,
          range: 20,
          storeName: this.storeName.trim(),
        }).then((res) => {
          if (res.code == 200) {
            loading3.clear();
            this.listpoint = res.rows;
            this.show = true;
          } else {
            this.$toast(res.msg);
          }
        });
      } else if (this.$route.query.tabVal == 6) {
        topStore({
          storeCode: val.storeCode,
          lon: val.lon,
          lat: val.lat,
          range: 20,
          storeName: this.storeName.trim(),
          chainCode: this.chainCode,
          storeLabelTypes: this.storeLabelTypes.join(','),
          pageNum: this.pageNum,
          storeCategoryList: this.storeCategoryList,
        }).then((res) => {
          if (res.code == 200) {
            loading3.clear();
            this.listpoint = res.data.storeList;
            this.show = true;
          } else {
            this.$toast(res.msg);
          }
        });
      } else {
        getUserOrgStoreList({
          storeCode: val.storeCode,
          type: 2,
          lon: val.lon,
          lat: val.lat,
          range: 20,
          storeName: this.storeName.trim(),
          chainCode: this.chainCode,
          storeLabelTypes: this.storeLabelTypes.join(','),
          pageNum: this.pageNum,
          storeCategoryList: this.storeCategoryList,
        }).then((res) => {
          if (res.code == 200) {
            loading3.clear();
            this.listpoint = res.rows;
            this.show = true;
          } else {
            this.$toast(res.msg);
          }
        });
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    buryingPointFn(val) {
      buryingPoint({
        systemModel: '地图',
        buryingPointType: 4,
        buryingPointValue: val.telephone,
        buryingPointName: '点击电话',
        buryingPointPosition: val.storeName + '(' + val.storeCode + ')',
      });
    },
    onTownConfirm(val, zoom) {
      this.range = val;
      this.zoom = zoom;
      this.getUserOutPlaList('1');
    },
    getUserOutPlaList(val) {
      this.poINData = [];
      var that = this;
      this.list = [];
      this.listData = [];
      var types = '';
      if (val == 1) {
        types = '1';
      } else {
        types = '';
      }
      let loading3 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      if (this.$route.query.tabVal == 1) {
        getUserOutPlaList({
          type: 1,
          lon: this.lon,
          lat: this.lat,
          range: this.range,
          storeName: this.storeName.trim(),
          chainCode: this.chainCode,
          storeLabelTypes: this.storeLabelTypes.join(','),
          pageNum: this.pageNum,
          storeCategoryList: this.storeCategoryList,
        }).then((res) => {
          if (res.code == 200) {
            loading3.clear();

            this.listData = res.rows;
            setTimeout(() => {
              this.list = res.rows;
            }, 2000);
            // if(res.rows.length>0&&types==1){
            //   if(res.rows[0].lon!=null&&res.rows[0].lon!=""&&res.rows[0].lon!=undefined){
            //     this.lon1="";
            //     this.lat1="";
            //     setTimeout(()=>{
            //       this.lon1=res.rows[0].lon;
            //       this.lat1=res.rows[0].lat;
            //     })
            //   }
            // }
            if (res.rows.length < 1) {
              this.$toast('附近无客户信息');
              this.show = false;
            }
            if (res.total > 50) {
              this.msg = this.setMapRangeTitle(res.total);
              this.msgshow = true;
              this.show = false;
            }
            if (this.first < 2) {
              this.zoom = 18;
              this.first = 2;
            }
          } else {
            this.$toast(res.msg);
          }
        });
      } else if (this.$route.query.tabVal == 3) {
        storeList({
          type: 4,
          lon: this.lon,
          lat: this.lat,
          range: this.range,
          storeName: this.storeName.trim(),
        }).then((res) => {
          if (res.code == 200) {
            loading3.clear();
            // this.list = res.rows
            this.listData = res.rows;
            setTimeout(() => {
              this.list = res.rows;
            }, 2000);
            // if(res.rows.length>0&&types==1){
            //   if(res.rows[0].lon!=null&&res.rows[0].lon!=""&&res.rows[0].lon!=undefined){
            //     this.lon1="";
            //     this.lat1="";
            //     setTimeout(()=>{
            //       this.lon1=res.rows[0].lon;
            //       this.lat1=res.rows[0].lat;
            //     })
            //   }
            // }
            if (res.rows.length < 1) {
              this.$toast('附近无客户信息');
              this.show = false;
            }
            if (res.total > 50) {
              this.msg = this.setMapRangeTitle(res.total);
              this.msgshow = true;
              this.show = false;
            }
            if (this.first < 2) {
              this.zoom = 18;
              this.first = 2;
            }
          } else {
            this.$toast(res.msg);
          }
        });
      } else if (this.$route.query.tabVal == 4) {
        storeMyList({
          type: 3,
          lon: this.lon,
          lat: this.lat,
          range: this.range,
          storeName: this.storeName.trim(),
        }).then((res) => {
          if (res.code == 200) {
            loading3.clear();
            // this.list = res.rows
            this.listData = res.rows;
            setTimeout(() => {
              this.list = res.rows;
            }, 2000);
            // if(res.rows.length>0&&types==1){
            //   if(res.rows[0].lon!=null&&res.rows[0].lon!=""&&res.rows[0].lon!=undefined){
            //     this.lon1="";
            //     this.lat1="";
            //     setTimeout(()=>{
            //       this.lon1=res.rows[0].lon;
            //       this.lat1=res.rows[0].lat;
            //     })
            //   }
            // }
            if (res.rows.length < 1) {
              this.$toast('附近无客户信息');
              this.show = false;
            }
            if (res.total > 50) {
              this.msg = this.setMapRangeTitle(res.total);
              this.msgshow = true;
              this.show = false;
            }
            if (this.first < 2) {
              this.zoom = 18;
              this.first = 2;
            }
          } else {
            this.$toast(res.msg);
          }
        });
      } else if (this.$route.query.tabVal == 6) {
        topStore({
          lat: this.lat,
          lon: this.lon,
          range: this.range,
          storeName: this.storeName.trim(),
          chainCode: this.chainCode,
          storeLabelTypes: this.storeLabelTypes.join(','),
          pageNum: this.pageNum,
          storeCategoryList: this.storeCategoryList,
        }).then((res) => {
          if (res.code == 200) {
            loading3.clear();

            this.listData = res.data.storeList;
            setTimeout(() => {
              this.list = res.data.storeList;
            }, 2000);
            // if(res.data.storeList.length>0&&types==1){
            //   if(res.data.storeList[0].lon!=null&&res.data.storeList[0].lon!=""&&res.data.storeList[0].lon!=undefined){
            //     this.lon1=res.data.storeList[0].lon
            //     this.lat1=res.data.storeList[0].lat
            //   }
            // }
            if (res.data.storeList.length < 1) {
              this.$toast('附近无客户信息');
              this.show = false;
            }
            if (this.first < 2) {
              this.zoom = 18;
              this.first = 2;
            }
          } else {
            this.$toast(res.msg);
          }
        });
      } else {
        debugger;
        getUserOrgStoreList({
          type: 2,
          lon: this.lon,
          lat: this.lat,
          range: this.range,
          storeName: this.storeName.trim(),
          chainCode: this.chainCode,
          storeLabelTypes: this.storeLabelTypes.join(','),
          pageNum: this.pageNum,
          storeCategoryList: this.storeCategoryList,
        }).then((res) => {
          if (res.code == 200) {
            loading3.clear();
            // this.list = res.rows
            this.listData = res.rows;
            setTimeout(() => {
              this.list = res.rows;
            }, 2000);
            // if(res.rows.length>0&&types==1){
            //   if(res.rows[0].lon!=null&&res.rows[0].lon!=""&&res.rows[0].lon!=undefined){
            //     this.lon1="";
            //     this.lat1="";
            //     setTimeout(()=>{
            //       this.lon1=res.rows[0].lon;
            //       this.lat1=res.rows[0].lat;
            //     })
            //   }
            // }
            if (res.rows.length < 1) {
              this.$toast('附近无客户信息');
              this.show = false;
            }
            if (res.total > 50) {
              this.msg = this.setMapRangeTitle(res.total);
              this.msgshow = true;
              this.show = false;
            }
            if (this.first < 2) {
              this.zoom = 18;
              this.first = 2;
            }
          } else {
            this.$toast(res.msg);
          }
        });
      }
    },

    storeVisit(val) {
      // localStorage.setItem("tabVal",this.tabVal)
      if (val.visitSource && val.visitSource == 2) {
        this.$toast('请先取消异常拜访后再进入正常拜访！');
        return;
      }
      localStorage.removeItem('visitId');
      var rdId = val.rdId;
      var that = this;
      if (this.$route.query.tabVal != 3 || this.$route.query.tabVal != 4) {
        rdId = null;
      }

      checkVisit({ storeId: val.storeId }).then((res) => {
        buryingPoint({
          systemModel: val.storeCategory,
          buryingPointType: 5,
          buryingPointValue: val.storeName + '(' + val.storeCode + ')',
          buryingPointName: '进店拜访',
          buryingPointPosition: '地图客户信息',
        });
        if (res.code == 200 || val.stateString.indexOf('拜访中') != -1) {
          if (localStorage.getItem('loginType') == 'cs') {
            var lat = '';
            var lon = '';
            if (val.lat == '' || val.lat == null) {
              lat = '31.2517820000';
              lon = '120.5593090000';
            } else {
              lat = val.lat;
              lon = val.lon;
            }
            this.$router.push({
              path: '/suishenbangOutstoreVisit',
              query: {
                storeId: val.storeId,
                rdId: val.rdId,
                lat: lat,
                lon: lon,
                visitId: val.visitId,
                pageType: 'out',
                addressLine: val.addressLine,
                storeCategory: val.storeCategory,
                storeName: val.storeName,
                hisTime: val.hisTime,
                contactName: val.contactName,
                storeCode: val.storeCode,
                tabVal: that.$route.query.tabVal,
                visitModel: '1',
                latNew: '31.2517820000',
                lonNew: '120.5593090000',
                PointSum: 0,
                marklat: lat,
                marklon: lon,
                linkType: that.$route.query.tabVal,
                from: 'outPlan',
              },
            });
            localStorage.setItem('startTime', new Date());
            localStorage.setItem('ORGName', val.deptName);
            localStorage.setItem('chainNameR', val.storeName);
          } else {
            if (this.flag) {
              this.flag = false;
              this.timer = null;
              let that = this;
              this.timer = setTimeout(() => {
                this.flag = true;
              }, 2000);
              if (val.stateString.indexOf('拜访中') != -1) {
                localStorage.setItem('startTime', new Date());
                localStorage.setItem('ORGName', val.deptName);
                localStorage.setItem('chainNameR', val.storeName);
                that.$router.push({
                  path: '/suishenbangOutstoreVisit',
                  query: {
                    storeId: val.storeId,
                    rdId: rdId,
                    lat: val.lat,
                    lon: val.lon,
                    visitId: val.visitId,
                    pageType: 'out',
                    addressLine: val.addressLine,
                    storeCategory: val.storeCategory,
                    storeName: val.storeName,
                    hisTime: val.hisTime,
                    contactName: val.contactName,
                    storeCode: val.storeCode,
                    tabVal: that.$route.query.tabVal,
                    visitModel: '1',
                    latNew: val.lat,
                    lonNew: val.lon,
                    PointSum: '0',
                    marklat: val.lat,
                    marklon: val.lon,
                    linkType: that.$route.query.tabVal,
                    from: 'outPlan',
                  },
                });
              } else {
                let loading1 = this.$toast.loading({
                  duration: 0,
                  message: '加载中...',
                  forbidClick: true,
                });
                let url = window.location.href;
                let wx = this.wx;
                let qiyeData;
                const instance = axios.create();
                instance.defaults.headers.common['userId'] = localStorage.getItem('loginName');
                instance
                  .get(process.env.VUE_APP_BASE_API + 'mobile/wx/ticket', {
                    params: {
                      url: url,
                    },
                  })
                  .then((response) => {
                    if (response.status == 200) {
                      this.cont = 3;
                      var flat = true;
                      var times = setInterval(() => {
                        this.cont--;
                        if (this.cont == '0') {
                          if (flat) {
                            loading1.clear();
                            clearInterval(times);
                            that.$dialog
                              .alert({
                                message: '定位失败，请开启企微定位权限',
                              })
                              .then(() => {});
                          } else {
                            clearInterval(times);
                          }
                        }
                      }, 1000);
                      qiyeData = response.data.data;
                      wx.config({
                        beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: qiyeData.appId, // 必填，企业微信的corpID
                        timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
                        nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
                        signature: qiyeData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
                        jsApiList: ['ready', 'getLocation'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
                      });
                      wx.ready(() => {
                        wx.getLocation({
                          type: 'gcj02',
                          success: (res) => {
                            flat = false;
                            var location = that.CJ02BD(res.latitude, res.longitude);

                            checkStoreAddressByStoreCode({
                              storeCode: val.storeCode,
                              lon: location.lon,
                              lat: location.lat,
                            }).then((response) => {
                              loading1.clear();
                              if (val.lat == '' || val.lat == null) {
                                that.lat = location.lat;
                                that.lon = location.lon;
                              } else {
                                that.lat = val.lat;
                                that.lon = val.lon;
                              }
                              let PointSum = that
                                .twoPointSum(that.lat, that.lon, location.lat, location.lon)
                                .toFixed(2);
                              let PointSumval = that
                                .twoPointSum(location.lat, location.lon, location.lat, location.lon)
                                .toFixed(2);
                              // GZ:工装店铺 直接进入拜访
                              if (localStorage.getItem('postType') == 'GZ') {
                                localStorage.setItem('startTime', new Date());
                                localStorage.setItem('ORGName', val.deptName);
                                localStorage.setItem('chainNameR', val.storeName);
                                this.toSuishenbangOutstoreVisit(res, val, location, PointSumval);
                                return;
                              }
                              // 门店编码校验门店地址不通过
                              if (response.code != 200) {
                                // updateAddress : ，1：同城AB+金牌,去修改地址;2:非金牌店铺，非同城店铺偏差过大不允许拜访，可以重置定位;0非金牌店铺，非同城店铺 位置信息不存在 可以继续拜访
                                if (response.data.updateAddress == 0) {
                                  // 非金牌店铺，非同城店铺 位置信息不存在 可以继续拜访
                                  this.$dialog
                                    .confirm({
                                      confirmButtonText: '确定拜访',
                                      cancelButtonText: '取消拜访',
                                      title: '系统提示',
                                      message:
                                        '该客户没有经纬度，此次拜访会保存定位点作为客户经纬度，下次拜访时判断是否偏差过大。',
                                      closeOnClickOverlay: true,
                                    })
                                    .then(() => {
                                      this.toSuishenbangOutstoreVisit(
                                        res,
                                        val,
                                        location,
                                        PointSumval
                                      );
                                    });
                                } else if (response.data.updateAddress == 1) {
                                  // 同城AB+金牌,去修改地址
                                  // addressUpdateTimesOver: true=已经达到最大次数，不让修改; false=没有达到可以修改
                                  if (!response.data.addressUpdateTimesOver) {
                                    this.$dialog
                                      .confirm({
                                        title: '系统提示',
                                        message: response.msg + '请立即修改后再拜访',
                                        messageAlign: 'left',
                                        confirmButtonText: '立即修改',
                                        cancelButtonText: '取消',
                                      })
                                      .then(() => {
                                        this.$router.push({
                                          path: '/storeDetail',
                                          query: {
                                            id: val.storeId,
                                            type: 'address',
                                            storeAddressId: val.storeAddressId,
                                          },
                                        });
                                      });
                                  } else {
                                    this.$dialog.confirm({
                                      title: '系统提示',
                                      message: '已经达到最大修改次数',
                                      messageAlign: 'left',
                                      confirmButtonText: '确定',
                                    });
                                  }
                                } else if (response.data.updateAddress == 2) {
                                  // 1.非金牌店铺，非同城店铺 位置偏差过大 重置经纬度
                                  this.resetCoord(res, val, location, PointSumval);
                                  return;
                                }
                              } else {
                                // 门店编码校验门店地址通过 进入拜访
                                this.toSuishenbangOutstoreVisit(res, val, location, PointSumval);
                              }
                            });
                          },
                          fail: function () {
                            loading1.clear();
                            that.$dialog.alert({
                              message: 'GPS未开启',
                            });
                          },
                        });
                      });
                      wx.error(function (res) {
                        loading1.clear();
                        that.$dialog
                          .alert({
                            message: '定位失败，请开启企微定位权限',
                          })
                          .then(() => {});
                      });
                    }
                  });
              }
            }
          }
        } else if (res.code == 500) {
          this.$dialog
            .alert({
              message: res.msg,
            })
            .then(() => {});
        }
      });
    },
    // 重置经纬度
    resetCoord(res, val, location, PointSumval) {
      this.$dialog
        .confirm({
          confirmButtonText: '初始化定位',
          cancelButtonText: '取消拜访',
          title: '系统提示',
          message: '偏差过大，不允许拜访。可修改本店定位.',
          closeOnClickOverlay: true,
        })
        .then(() => {
          mobileReposition({
            storeId: val.storeId,
            lat: location.lat,
            lon: location.lon,
          }).then((response) => {
            if (response.code == 200) {
              this.$dialog
                .alert({
                  title: '系统提示',
                  message: '本信息定位已更新成功!',
                })
                .then(() => {
                  this.toSuishenbangOutstoreVisit(res, val, location, PointSumval);
                });
              localStorage.setItem('startTime', new Date());
              localStorage.setItem('ORGName', val.deptName);
              localStorage.setItem('chainNameR', val.storeName);
            } else {
              this.$toast(response.msg);
            }
          });
        });
    },
    // 进入拜访 router.push
    toSuishenbangOutstoreVisit(res, val, location, PointSumval) {
      addVisitsPosition({
        storeId: val.storeId,
        visitsId: '',
        lon: res.longitude,
        lat: res.latitude,
        sourceLon: location.lon,
        sourceLat: location.lat,
        positionDesc: '',
        accuracy: res.accuracy,
      });
      this.$router.push({
        path: '/suishenbangOutstoreVisit',
        query: {
          storeId: val.storeId,
          rdId: val.rdId,
          lat: location.lat,
          lon: location.lon,
          visitId: val.visitId,
          pageType: 'out',
          addressLine: val.addressLine,
          storeCategory: val.storeCategory,
          storeName: val.storeName,
          hisTime: val.hisTime,
          contactName: val.contactName,
          storeCode: val.storeCode,
          tabVal: this.$route.query.tabVal,
          visitModel: '1',
          latNew: location.lat,
          lonNew: location.lon,
          PointSum: PointSumval,
          marklat: res.latitude,
          marklon: res.longitude,
          linkType: this.$route.query.tabVal,
          from: 'outPlan',
        },
      });
    },
    linkapp(val) {
      var poind = this.gcj02BD(val.lat, val.lon);
      let url = window.location.href;
      let that = this;
      let wx = this.wx;
      let qiyeData;
      const instance = axios.create();
      instance.defaults.headers.common['userId'] = localStorage.getItem('loginName');
      instance
        .get(process.env.VUE_APP_BASE_API + 'mobile/wx/ticket', {
          params: {
            url: url,
            agent: 1,
          },
        })
        .then((response) => {
          if (response.status == 200) {
            qiyeData = response.data.data;
            // wx.config({
            //   beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            //   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            //   appId: qiyeData.appId, // 必填，企业微信的corpID
            //   timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
            //   nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
            //   signature: qiyeData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
            //   jsApiList: ["ready", "invoke"]
            // });
            // wx.ready(function() {
            //   wx.checkJsApi({
            //     jsApiList: ["agentConfig", "launchMiniprogram"], // 需要检测的JS接口列表
            //     success: function(res) {}})})
            wx.agentConfig({
              corpid: qiyeData.appId, // 必填，企业微信的corpid，必须与当前登录的企业一致
              agentid: qiyeData.agentId, // 必填，企业微信的应用id （e.g. 1000247）
              timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
              nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
              signature: qiyeData.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
              jsApiList: ['launchMiniprogram'], //必填，传入需要使用的接口名称
              success: function (res) {
                wx.invoke(
                  'launchMiniprogram',
                  {
                    appid: 'wx238bbb5f6d958414',
                    path:
                      'pages/relayStation/relayStation?latitude=' +
                      poind.lat +
                      '&longitude=' +
                      poind.lon +
                      '&name=' +
                      val.addressLine,
                  },
                  function (res) {
                    if (res.err_msg == 'launchMiniprogram:ok') {
                    } else {
                    }
                  }
                );
              },
              fail: function (res) {
                if (res.errMsg.indexOf('function not exist') > -1) {
                  alert('版本过低请升级');
                }
              },
            });
          }
        });
    },
    // 跳转好帮手门店详情
    goOtherSystem(item) {
      // 家装或工装 approvalStatus:是否结案 0：未结案，1：已结案
      if (
        (item.sfaStoreType && (item.sfaStoreType.jz || item.sfaStoreType.gz)) ||
        item.approvalStatus == null ||
        item.approvalStatus == 0
      ) {
        return false;
      }
      if (item.storeCode) {
        window.location.href =
          process.env.VUE_APP_SSB_LINK + '/order/storeDetail/index?shopCode=' + item.storeCode;
      } else {
        this.$dialog.alert({
          message: '缺少门店code',
        });
      }
    },
    filterTCFX(item) {
      if (!item.remark) return false;
      let remark = JSON.parse(item.remark);
      return remark.tcfx ? true : false;
    },
  },
};
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 79.3vh;
  margin-top: 180px;
}
.text {
  font-size: 14px;
  color: #909090;
  margin: 6px 0;
}
#container {
  width: 20px;
  height: 20px;
  position: fixed;
  left: -888px;
}
.mapimg {
  position: fixed;
  bottom: 235px;
  right: 2px;
  width: 38px;
}
.mapStoreList {
  position: fixed;
  width: 96%;
  bottom: 10px;
  background-color: white;
  border-radius: 6px;
  padding: 10px 0 14px;
  overflow: hidden;
  margin: 0 2%;
  max-height: 330px;
}
.maplit {
  width: 100%;
  margin-top: -10px;
  overflow-y: auto;
  border-top: 1px solid #eeeeee;
  padding: 0 14px;
}
.maplitactive {
  height: 270px;
}
.maplistitem {
  padding-bottom: 14px;
  border-bottom: 1px solid #eeeeee;
  .JPABC {
    width: 20px;
    position: relative;
    top: 4px;
    margin-right: 3px;
  }
}
.maplistitem:last-child {
  border: 0;
}
.tipsTitle {
  padding: 5px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}
</style>
<style lang="scss">
.icoImgMAP {
  background-color: #fff;
  text-align: center;
  padding: 0 2px;
}
.icoImgMAP .van-grid-item__icon {
  font-size: 40px;
  margin: 0 auto;
}
.icoImgMAP .van-grid-item__content {
  font-size: 10px;
  margin: 0;
  padding: 0;
  color: #666;
  justify-content: normal;
}
.icoImgMAP .van-grid-item__content:after {
  border: 0;
}
.icoImgMAP .van-grid-item__text {
  font-size: 14px;
  width: 48px;
}
.icoImgMAP .titleico {
  margin-top: 8px;
}
.icoImgMAP .titleico p {
  font-size: 14px;
  margin: 0;
}
.icoImgMAP .titleico .p {
  margin-top: -4px;
}
.textc .van-grid-item__content,
.textc .van-grid-item__text {
  color: red;
}
.visitStoreIco {
  float: left;
  float: left;
  width: 26px;
  text-align: center;
  background-color: #ffba13;
  color: #fff;
  border-radius: 100%;
  margin-left: 14px;
  line-height: 26px;
  height: 26px;
}
.van-tabs__nav--card .van-tab.van-tab--active {
  background-color: #0057ba !important;
}
.visitSearch {
  width: 68px;
  color: #0057ba;
  font-size: 14px;
}
.visitSearch .van-dropdown-menu__bar {
  box-shadow: 0 0 0 #fff;
  height: 52px;
}
.visitSearch .van-dropdown-menu__item {
  justify-content: normal;
}
.visitSearch .van-dropdown-menu__title {
  border-left: 1px solid #ccc;
}
.visitSearch .van-cell {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 6px;
}
.positionContent {
  position: fixed;
  color: #666;
  display: inline-block;
  box-shadow: 0px 2px 7px -5px #000;
  border-radius: 100px;
  overflow: hidden;
  right: 14px;
  cursor: pointer;
  bottom: 96px;
  background-color: white;
}
.positionContent .img {
  border-radius: 100px;
  float: left;
}
.positionContent .img .van-icon__image {
  border-radius: 100px;
}
.zDialog .van-dialog__header {
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;
}
.zDialog .infoText {
  margin: 10px;
  font-size: 14px;
  color: #909090;
  width: 98%;
}
.visitStoreIco {
  float: right;
  width: 26px;
  text-align: center;
  background-color: #ffba13;
  color: #fff;
  border-radius: 100%;
  margin-left: 10px;
  line-height: 26px;
  height: 26px;
}
.searchcheck {
  padding: 0 10px 10px;
}
.searchcheck .van-checkbox {
  /*width: 44%;*/
  padding-bottom: 10px;
}
.searchcheck .checkbox {
  font-size: 14px;
  display: inline-block;
  width: 50%;
  line-height: 28px;
}
.searchcheck .checkbox .van-checkbox {
  margin-bottom: 2px;
}
.searchcheck .checkbox1 {
  font-size: 14px;
  float: left;
  line-height: 28px;
  width: 50%;
}
.searchcheck .checkbox1 .child {
  width: 100%;
}
.searchcheck {
  height: 93vh;
  overflow-y: auto;
}
.searchchecktitle {
  width: 100%;
  margin: 20px 0;
  font-size: 16px;
  border-left: 3px solid #0057ba;
  line-height: 18px;
}
.searchchecktitle1 {
  width: 100%;
  margin: 20px 0;
  font-size: 16px;
  line-height: 18px;
}
.textsize {
  font-size: 14px;
}
.rangeStore {
  .JPVisitNum {
    position: relative;
    top: -26px;
    font-size: 10px;
  }
  .TCFXListItem {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 3px 5px;
    margin: 0 5px;
    border-radius: 6px;
  }
}
</style>