<template>
  <div class="mobile-page-container">
    <!-- 任务列表 -->
    <van-nav-bar left-arrow
      @click-left="router.back()">
    </van-nav-bar>
    <van-list v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多结果了"
      class="result-list">
      <van-cell-group inset>
        <van-cell v-for="(item, index) in resultList"
          :key="index"
          class="result-item"
          @click="handleClickStore(item)">
          <template #title>
            <div class="item-title">
              <span>{{ item.name }}</span>
              <span>{{ item.code }}</span>
            </div>
          </template>
          <template #label>
            <div class="item-company">{{ item.company }}</div>
            <div class="item-address">{{ item.address }}</div>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script setup>
const router = useRouter();
const resultList = ref([
  {
    name: '门店1',
    code: '123456',
    company: '公司1',
    address: '地址1'
  },
  {
    name: '门店2',
    code: '123457',
    company: '公司2',
    address: '地址2'
  },
  {
    name: '门店3',
    code: '123458',
    company: '公司3',
    address: '地址3'
  },
])
const loading = ref(false);
const finished = ref(true);
const showEmpty = ref(false);
// 搜索处理
const handleSearch = () => {
  if (!searchVal.value.trim()) {
    resultList.value = mockData;
    showEmpty.value = false;
    return;
  }

  // 模拟加载状态
  loading.value = true;

  // 模拟接口请求延迟
  setTimeout(() => {
    const filtered = mockData.filter(item => {
      const matchStr = `${item.name}${item.code}${item.company}${item.address}`;
      return matchStr.includes(searchVal.value);
    });

    resultList.value = filtered;
    loading.value = false;
    finished.value = true;
  }, 500);
};

// 门店点击
const handleClickStore = (item) => {
  router.push({
    path: '/inspectionTask',
    query: {
      storeName: item.name,
      storeCode: item.code
    }
  })
}
</script>

<style scoped
  lang="scss">

  .mobile-page-container {
    margin: 0 auto;
    font-size: 16px;
    box-sizing: border-box;
    padding-bottom: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;

    .result-list {
      background-color: transparent;
      padding: 0 20px;
      margin-top: 10px;

      .van-cell-group {
        margin: 0;
        background-color: transparent;

        .result-item {
          background-color: white;
          margin-bottom: 10px;

          .item-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
            display: flex;
            justify-content: space-between;
          }

          .item-company {
            font-size: 14px;
            color: #a6a4a4;
            margin-bottom: 2px;
          }

          .item-address {
            font-size: 13px;
            color: #a6a4a4;
            line-height: 1.4;
          }
        }
      }

    }
  }
</style>