<template>
  <div class="mobile-page-container">
    <!-- 任务列表 -->
    <van-nav-bar left-arrow
      @click-left="router.back()">
      <template #right>
        <span class="search-text"
          @click="showSearch = true">搜索</span>
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="refreshLoading"
      :pull-distance="100"
      success-text="刷新成功"
      @refresh="onRefresh">
      <van-list v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多结果了"
        class="result-list"
        @load="onLoadMore">
        <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.storeName }}</span>
                <span>{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</span>
              </div>
            </template>
            <template #label>
              <div class="item-company">{{ item.storeCode }}</div>
              <div class="item-address">{{ item.address }}</div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </van-pull-refresh>
    <!-- 搜索 -->
    <van-popup v-model:show="showSearch"
      position="right"
      class="wrap">
      <van-nav-bar title="筛选条件" />
      <van-field type="text"
        label="任务名称"
        label-align="left"
        label-width="1.5rem"
        placeholder="请输入">
        <template #input>
          <van-search v-model="query.storeName"
            placeholder="请输入勤策终端编码/名称"
            @update:model-value="getInspectionTaskListFn"
            class="search-bar" />
        </template>
      </van-field>
      <!-- 日期区间 -->
      <van-field type="text"
        label="任务日期"
        label-align="left"
        label-width="1.5rem"
        placeholder="请输入">
        <template #input>
          <el-date-picker v-model="query.operDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
            @change="getInspectionTaskListFn" />
        </template>
      </van-field>
      <!-- 重置按钮 -->
      <van-button icon="replay"
        class="reset-btn"
        block
        @click="resetFn">重置</van-button>
    </van-popup>
  </div>
</template>

<script setup>

import { getInspectionTaskListAPI } from '@/api'
import { parseTime } from '@/utils'

defineOptions({
  name: 'Sales_point_inspection'
})

const router = useRouter();

// 搜索
const showSearch = ref(false)

// 获取列表
const query = reactive({
  pageNum: 1,
  pageSize: 10
})
const resultList = ref([])
const loading = ref(false);
const finished = ref(true);
const refreshLoading = ref(false)
const getInspectionTaskListFn = async () => {
  const res = await getInspectionTaskListAPI(query)
  resultList.value = [...resultList.value, ...res.data.rows]
  finished.value = res.data.total <= resultList.value.length
}
getInspectionTaskListFn()

// 刷新
const onRefresh = async () => {
  refreshLoading.value = true
  query.pageNum = 1
  resultList.value = []
  await getInspectionTaskListFn()
  refreshLoading.value = false
}
// 更多
const onLoadMore = async () => {
  query.pageNum++
  await getInspectionTaskListFn()
  loading.value = false
}

// 搜索中重置
const resetFn = () => {
  query.pageNum = 1
  query.storeName = ''
  query.operDate = ''
  resultList.value = []
  getInspectionTaskListFn()
}

// 门店点击
const handleClickStore = (item) => {
  router.push({
    path: '/inspectionTask',
    query: {
      storeName: item.storeName,
      storeCode: item.storeCode,
      storePicture: item.storePictures?.split(",")[0]
    }
  })
}
</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;

    .search-text {
      color: var(--main-color);
    }

    .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;
              display: flex;
              justify-content: space-between;

              span:last-child {
                width: 100px;
                text-align: right;
                display: inline-block;
              }
            }

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

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

      }
    }

    /* 搜索 */
    .wrap {
      --van-field-label-width: 80px;
      height: 100vh;
      width: 85% !important;

      .van-cell {
        align-items: center;

        .search-bar {
          padding: 0;
        }

        ::v-deep(.el-input) {
          width: 100%;
        }

      }

    }
  }
</style>