<wrapper>
  <view class="merchant-map-component">
    <adc-map-marker
      a:if="{{footer}}"
      marginTop="{{titleBarHeight}}px"
      simpleMarkers="{{simpleMarkers}}"
      showSearchMap="{{isShowMap}}"
      onMarkerTap="onMarkerTap"
      onSearchMap="onSearchMap"
      useDefaultScrollView="{{false}}"
      enableScroll="{{enableScroll}}"
      showMap="{{isShowMap}}"
      enableTouchMove="{{isShowMap && enableTouchMove}}"
      showDirectionBtn="{{isShowMap}}"
      showFooter="{{isShowList}}"
      footer="{{footer}}"
      autoToBottom="{{autoToBottom}}"
      ref="saveMapRef"
    >
      <view slot="footer-fixed">
        <view class="header">
          <view class="search-box">
            <view class="search">
              <search-bar
                value="{{searchName}}"
                onChange="onChangeSearchName"
                onConfirm="onConfirmSearchName"
              />
            </view>
            <view class="business-box">
              <view class="business" onTap="onShowPopup" style="color: {{regionNameColor}};">
                <block>{{regionName}}<am-icon type="down" /></block>
              </view>
            </view>
          </view>
          <view>
            <scroll-view
              class="scroll-view"
              scroll-x="{{true}}"
              style="width: 100%"
              onScroll="onScroll"
            >
              <view class="items" style="width: {{117 * serviceTypes.length}}rpx;">
                <view
                  class="item"
                  a:for="{{serviceTypes}}"
                  key="*this"
                  data-record="{{item}}"
                  onTap="onChangeServiceTypeCode"
                >
                  <image src="{{item.serviceTypeIcon}}" />
                  <view>{{item.serviceTypeName}}</view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
      <view slot="footer" class="bj" slot-scope="markerProps">
        <view class="list-box">
          <view class="list">
            <adc-flat-list
              list="{{list}}"
              onFetchData="onFetchData"
              ref="saveRef"
              scroll-into-view="{{scrollIntoView}}"
              scroll-with-animation="{{true}}"
              scroll-animation-duration="{{300}}"
              style="height: calc(100vh - {{titleBarHeight + 'px'}} - 308rpx);"
              scrollY="{{markerProps.scrollY}}"
              disable-lower-scroll="out-of-bounds"
              disable-upper-scroll="out-of-bounds"
             >
              <view slot="empty">
                <page-result
                  type="empty"
                  title="您周边暂无优惠"
                  brief="请尝试切换其他区域"
                  local="{{false}}"
                  footer="{{emptyFooter}}"
                  onTapLeft="onRefreshList"
                />
              </view>
              <view slot-scope="props" id="{{props.item.id}}">
                <view
                  class="item"
                  onTap="toDetail"
                  data-record="{{props.item}}"
                  style="border-bottom: {{props.index === list.length - 1 ? 'none' : '1rpx solid #eee'}};"
                >
                  <image src="{{props.item.merchantStorePic}}" class="image" />
                  <view class="desc">
                    <view class="name">{{props.item.merchantStoreName}}</view>
                    <view class="tags">
                      <view
                        a:for="{{props.item.discountStoreRules}}"
                        key="*this"
                        a:for-item="tag"
                      >
                        {{tag.ruleName}}
                      </view>
                    </view>
                    <view class="type">
                      {{props.item.merchantStoreType}}
                    </view>
                    <view class="map">
                      <view>{{props.item.merchantStoreAddress}}</view>
                      <view>{{props.item.distance}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </adc-flat-list>
          </view>
        </view>
      </view>
    </adc-map-marker>
    <view class="business-box">
      <popup
        show="{{showPopup}}"
        position="bottom"
        onClose="onHidePopup"
        zIndex="{{1000}}"
        disableScroll="{{false}}"
      >
        <scroll-view class="filter-scroll-view" scroll-y="{{true}}">
          <view a:for="{{regions}}" key="*this" class="item" data-record="{{item}}" onTap="onChangeRegionName">
            {{item.regionName}}
            <am-icon type="check" a:if="{{regionName === item.regionName}}" />
          </view>
        </scroll-view>
      </popup>
    </view>
  </view>
</wrapper>
