<template>
  <view style="background-color: #fff">
    <view class="fillert-search-root">
      <picker @change="changeStatus" :value="status" :range="pickerDataList">
        <view class="fillter-btn">{{ pickerDataList[+status] }}</view>
      </picker>
      <view class="search-root">
        <uni-search-bar
          v-model="keyword"
          @confirm="searchStore(keyword)"
          @clear="clearInput"
          cancelButton="none"
          clearButton="auto"
          placeholder="请输入关键字"
        ></uni-search-bar>
      </view>
    </view>

    <view class="store-item-list">
      <view
        class="item"
        v-for="(item, i) in filterStoreDataList"
        :key="i"
        @tap="switchStore(item.id, item.name)"
        v-if="filterStoreDataList?.length != 0"
      >
        <view class="city-name">
          <text class="city">{{ item.cityName }}</text>
          <text class="name">{{ item.name }}</text>
        </view>
        <text class="status" :class="{ 'status-waring': item.status != 1 }">{{
          (configCms as AnyObject).storeStatus[item.status]
        }}</text>
      </view>

      <jx-empty title="暂无门店信息" v-else />
    </view>

    <jx-loading />
  </view>
</template>

<script lang="ts" setup>
import jxEmpty from '@/components/jx-empty/jx-empty.vue'
import switchStoreFn from './switchStore'
import configCms from '@/utils/configCms'
const {
  filterStoreDataList,  // 过滤过后的门店
  switchStore,          // 进入门店
  status,               // 门店状态
  changeStatus,         // 选择框过滤门店
  keyword,              // 搜索框关键词
  searchStore,          // 搜索框搜索门店
  clearInput,           // 清空文本框操作
  pickerDataList,       // 筛选框 存储
} = switchStoreFn()
</script>

<style lang="scss" scoped>
@import './switchStore.scss';
</style>