<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="clickRecord">稽查记录</van-tag>
      </template>
    </van-nav-bar>
    <!-- 头部区域 -->
    <div class="header-wrap">
      <span>终端门店列表</span>
      <!-- 搜索区域 -->
      <van-search v-model="query.col"
        placeholder="请输入勤策终端编码/名称"
        @update:model-value="handlerSearch"
        class="search-bar" />
    </div>
    <!-- 结果列表 -->
    <van-pull-refresh v-model="refreshLoading"
      :pull-distance="100"
      success-text="刷新成功"
      @refresh="onRefresh">
      <van-list v-model:loading="loading"
        :finished="finished"
        @load="loadMore"
        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.storeName }}（{{ item.storeCode }}）</div>
            </template>
            <template #label>
              <div class="item-company">{{ item.dealersName }}</div>
              <div class="item-address">{{ item.storeAddr }}</div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </van-pull-refresh>

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

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

<script setup>
import { getTerminalStoreListAPI } from '@/api'
defineOptions({
  name: 'Sales_point_inspection'
})

const router = useRouter();

/*************** 终端门店列表 ***************/
const query = reactive({
  col: '',
  pageNum: 1,
  pageSize: 10
})
const resultList = ref([]);
const loading = ref(false);
const refreshLoading = ref(false);
const finished = ref(true);
const showEmpty = ref(false); // 无数据显示图状态

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

const getTerminalStoreListFn = async () => {
  const res = await getTerminalStoreListAPI(query)
  resultList.value = [...resultList.value, ...res.data.rows]
  finished.value = res.data.total === resultList.value.length
  loading.value = false
  refreshLoading.value = false
}
getTerminalStoreListFn()


const onRefresh = () => {
  resultList.value = []
  query.pageNum = 1
  refreshLoading.value = true
  getTerminalStoreListFn()
}

const loadMore = () => {
  loading.value = true
  query.pageNum++
  getTerminalStoreListFn()
}

const handlerSearch = () => {
  query.pageNum = 1
  resultList.value = []
  getTerminalStoreListFn()
}

/*************** 跳转路由 ***************/
// 稽查记录
const clickRecord = () => {
  router.push({
    path: '/taskList'
  })
}

// 门店点击
const handleClickStore = (item) => {
  // 确实提示
  showConfirmDialog({
    title: '提示',
    message: '是否创建/查看本店稽查任务？',
    confirmButtonText: '前往',
    cancelButtonText: '取消'
  }).then(() => {
    router.push({
      path: '/inspectionTask',
      query: {
        storeName: item.storeName,
        storeCode: item.storeCode,
        storePicture: item.storePictures?.split(",")[0],
        dealersName: item.dealersName,
        dealerCode: item.dealerId,
        storeAddr: item.storeAddr,
      }
    })
  })
}

// 新建终端
const addNewTerminal = () => {
  router.push({
    path: '/newTerminal'
  })
}
</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 {
        flex: 1;
        padding: 10px;
        padding-right: 0;
        height: auto !important;
        background-color: transparent;

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

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

    }

    .van-pull-refresh {
      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;
            }

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