<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" v-if="productListShow.length">
        <wd-cell-group>
          <wd-cell
            v-for="item in productListShow"
            :key="item.productsid"
            :title="item.productsname"
            is-link
            @click="handleClick(item)"
            custom-class="product-cell"
          >
            <template #label>
              <p class="text-gray-500">分类:{{ item.productsfl1 }} - {{ item.productsfl2 }}</p>
              <p class="text-gray-500">生产厂家:{{ item.scqyinfomc || '未知' }}</p>
            </template>
          </wd-cell>
        </wd-cell-group>
      </view>
      <view class="sticky-box-content w-100vw" v-else>
        <wd-status-tip image="content" tip="暂无内容" />
      </view>
    </view>
  </view>
</template>

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

const productStore = useProductStore()
const productListAll = ref([])
const productListShow = ref([])
const usersid = ref('') // 销售网点id

function blur(e: any) {
  const filters = productListAll.value.filter((item: any) => item.productsname.includes(e.value))
  productListShow.value = filters
}

function search(e: any) {
  const filters = productListAll.value.filter((item: any) => item.productsname.includes(e.value))
  productListShow.value = filters
}

function clear() {
  productListShow.value = productListAll.value
}

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

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

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

onLoad((query) => {
  usersid.value = query.usersid
  productStore.getProductList(query.usersid).then((res) => {
    productListAll.value = res
    productListShow.value = res
  })
})
</script>

<style lang="scss" scoped>
::v-deep(.product-cell) {
  .wd-cell__right {
    flex: inherit !important;
    width: 50px !important;
  }
}
</style>
