<template>
  <view class="store-wrapper global-wrapper bgF2">
    <view class="mch-header">
      <JHeaderTitle title="门店管理" bgColor="#f2f2f2" />
      <JSearchInput @search="searchList" @resetSearch="searchList" ref="search" place="搜索门店名称、ID">
      </JSearchInput>
    </view>

    <block v-for="v in useDataResult.dataList" :key="v.agentNo">
      <JPreview
        :title="v.storeName"
        :qrcId="v.storeId"
        :img="imgList[1]"
        :isLast="useDataResult.dataList.length - 1 == i"
        @tap="toStoreDetails(v.storeId)"
      ></JPreview>
    </block>
    <jeepayListNull :isShow="true" :list="useDataResult.dataList.length" />
    <view class="button-block"></view>
    <view class="mch-footers ButtonBor">
      <JButton pd="30rpx 30rpx 50rpx 30rpx" pdTop="0" @HandleTouch="addOrEditStore">创建门店</JButton>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue"
import { onBackPress, onShow } from "@dcloudio/uni-app"
import { $getMchStoreList } from "@/http/apiManager.js"
import useGetList from "@/hooks/useList.js"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue" //自定义导航栏
import JSearchInput from "@/components/newComponents/JSearchInput/JSearchInput.vue" //自定义搜索框
import JButton from "@/components/newComponents/JButton/JButton.vue" //自定义按钮
import JPreview from "@/components/newComponents/JPreview/JPreview.vue" //列表展示
import jeepayListNull from "@/components/jeepayListNull/jeepayListNull" //最后一条数据提示
const { useDataResult, getList } = useGetList({
  requestFun: $getMchStoreList,
})

// 图片列表
const imgList = reactive(["/static/navImg/disable-mendian.svg", "/static/navImg/nav-mendian.svg"])

// 返回前清除搜索数据
const search = ref()

onBackPress(() => {
  if (search.value.searchText != "") {
    search.value.searchText = ""
    list(search.value.searchText)
    return true
  } else {
    return false
  }
})
// 搜索回调
const searchList = (data) => {
  if (data === "reset") data = ""
  getList({ unionStoreInfo: data })
}
const addOrEditStore = () => {
  uni.navigateTo({
    url: "./addOrEditStore",
  })
}
const toStoreDetails = (storeId) => {
  uni.navigateTo({
    url: "./storeDetails?id=" + storeId,
  })
}
</script>

<style lang="scss" scoped>
.store-wrapper {
  .mch-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #f2f2f2;
  }
  .button-block {
    height: 210rpx;
  }
  .mch-footers {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(30px);
    border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
  }
}
</style>
