<route lang="json5">
{
  style: {
    navigationBarTitleText: '选择销售网点',
  },
}
</route>

<template>
  <!-- 总体流程：选网点，选择机器型号，输入SN号，下订单 -->
  <view class="bg-white min-h-screen">
    <view class="space-y-4">
      <wd-sticky-box>
        <!-- 销售点选择 -->
        <view class="sticky-box-content w-100vw">
          <wd-search
            placeholder="请输入销售网点名称"
            cancel-txt="搜索"
            @blur="blur"
            @search="search"
            @clear="clear"
            @change="change"
          />
        </view>
      </wd-sticky-box>

      <!-- 销售网点列表 -->
      <view class="sticky-box-content w-100vw">
        <wd-cell-group>
          <wd-cell
            v-for="item in sellUserListShow"
            :key="item.usersid"
            :title="item.usersname"
            :label="item.usersaddress"
            is-link
            @click="handleClick(item)"
          />
        </wd-cell-group>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { useThrottleFn } from '@vueuse/core'

const userStore = useUserStore()
const sellUserListAll = ref([])
const sellUserListShow = ref([])

function handleClick(item: any) {
  uni.navigateTo({
    url: `/pages/form/formStep2?usersid=${item.usersid}`,
  })
}

function blur(e: any) {
  const filters = sellUserListAll.value.filter((item: any) => item.usersname.includes(e.value))
  sellUserListShow.value = filters
}

function search(e: any) {
  const filters = sellUserListAll.value.filter((item: any) => item.usersname.includes(e.value))
  sellUserListShow.value = filters
}

function clear() {
  sellUserListShow.value = sellUserListAll.value
}

const handleChange = useThrottleFn(({ value }) => {
  const filters = sellUserListAll.value.filter((item: any) => item.usersname.includes(value))
  sellUserListShow.value = filters
}, 500) // 500ms 的节流时间

function change(e: any) {
  handleChange(e)
}

onShow(async () => {
  sellUserListAll.value = await userStore.getSellUserList()
  sellUserListShow.value = sellUserListAll.value
})
</script>

<style lang="scss" scoped>
.form-item {
  @apply mb-6;
  .form-label {
    @apply block text-gray-700 mb-2 text-base;
  }
}
</style>
