<template>
  <div class="mobile-page-container">
    <van-nav-bar left-arrow
      @click-left="router.back()">
      <template #right>
        <van-tag type="primary"
        round
        size="medium"
        @click="router.push({ path: '/taskList' })">稽查记录</van-tag>
      </template>
    </van-nav-bar>
    <!-- 头部区域 -->
    <div class="header-wrap">
      <span>终端门店列表</span>
      <!-- 搜索区域 -->
      <van-search v-model="searchVal"
        placeholder="请输入勤策终端编码/名称"
        @search="handleSearch"
        @clear="handleClear"
        class="search-bar">
        <template #action>
          <van-button round
            type="primary"
            size="small"
            @click="handleSearch">
            搜索
          </van-button>
        </template>
      </van-search>
    </div>
    <!-- 结果列表 -->
    <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">{{ item.name }}（{{ item.code }}）</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>

    <!-- 无结果提示 -->
    <van-empty v-if="showEmpty"
      description="未找到匹配的结果"
      class="empty-tip" />

    <van-floating-bubble icon="plus"
      @click="addNewTerminal" />
  </div>
</template>

<script setup>
// 模拟数据
const mockData = [
  {
    name: '世纪港湾广缘超市',
    code: 'POS00052306',
    company: '秦皇岛洪朗森商贸有限公司',
    address: '河北省秦皇岛市海港区北环路街道秦皇东大街辅路'
  },
  {
    name: '711浦东南路地铁站店',
    code: 'POS00048465',
    company: '上海星甲商贸有限公司',
    address: '上海市浦东新区浦东南路浦东金融广场'
  },
  {
    name: '嘉兴大桥瑞洲',
    code: 'POS00052360',
    company: '嘉兴凯鸣商贸有限公司',
    address: '浙江省湖州市吴兴区康山街道兴业路'
  }
];

// 响应式数据
const searchVal = ref('');
const resultList = ref(mockData);
const loading = ref(false);
const finished = ref(true);
const showEmpty = ref(false);

const router = useRouter();

// 监听结果列表变化，控制空状态显示
watch(resultList, (newVal) => {
  showEmpty.value = newVal.length === 0 && searchVal.value.trim() !== '';
});

/*******新增终端********/
const addNewTerminal = () => {
  router.push({
    path: '/newTerminal'
  })
}

// 搜索处理
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 handleClear = () => {
  resultList.value = mockData;
  showEmpty.value = false;
};


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

<style lang="scss"
  scoped>
  // 基础样式设置
  $base-width: 375px;
  $base-font-size: 16px;


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

    .header-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      border-bottom: 2px solid #e5e5e5;

      span {
        font-size: 14px;
      }

      .search-bar {
        padding: 10px;
        height: auto !important;
        background-color: transparent;

        ::v-deep(.van-search__content) {
          background-color: white;

          .van-cell {
            height: auto;
          }
        }
      }

    }



    .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;
          }

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

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


    }

    .empty-tip {
      margin-top: 40px;
      padding: 0 12px;
    }
  }
</style>
