<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '我的商家',
  },
}
</route>

<template>
  <view class="bg-white min-h-screen p-4 !pt-0">
    <!-- 页面标题 -->
    <!-- <view class="text-xl font-bold text-center py-3">农机销售网点</view> -->

    <!-- 搜索框 -->
    <view class="mb-4">
      <wd-search
        placeholder="搜索网点名称"
        cancel-txt="搜索"
        @search="handleSearch"
        @clear="handleClear"
        @change="handleSearchChange"
      />
    </view>

    <!-- 网点列表 -->
    <view v-if="filteredLocationList.length > 0">
      <view v-for="(item, index) in filteredLocationList" :key="index" class="merchant-card">
        <view class="merchant-header">
          <text class="merchant-name">{{ item.name }}</text>
          <wd-tag type="success" custom-class="merchant-tag">推荐</wd-tag>
        </view>

        <view class="merchant-content">
          <view class="merchant-info-item">
            <wd-icon name="location" class="text-green-500" />
            <text class="merchant-info-text">{{ item.address }}</text>
          </view>

          <view class="merchant-info-item mt-2">
            <wd-icon name="phone" class="text-green-500" />
            <text class="merchant-info-text">{{ item.phone }}</text>
          </view>
        </view>

        <view class="merchant-footer">
          <wd-button
            type="success"
            size="small"
            @tap="handleCall(item.phone)"
            custom-class="merchant-btn"
          >
            拨打电话
          </wd-button>

          <wd-button
            type="primary"
            size="small"
            @tap="handleGoods(item)"
            custom-class="merchant-btn"
          >
            立即申请
          </wd-button>
        </view>
      </view>
    </view>

    <!-- 暂无数据 -->
    <view v-else>
      <wd-status-tip image="comment" tip="暂无网点数据" />
    </view>

    <!-- loading -->
    <wd-overlay :show="loading">
      <view class="wrapper w-full h-full flex items-center justify-center">
        <wd-loading />
      </view>
    </wd-overlay>
  </view>
</template>

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

const userStore = useUserStore()
const loading = ref(false)
const locationList = ref([])
const searchValue = ref('')

// 筛选后的网点列表
const filteredLocationList = computed(() => {
  if (!searchValue.value) return locationList.value

  return locationList.value.filter(
    (item) => item.name.includes(searchValue.value) || item.address.includes(searchValue.value),
  )
})

// 获取销售点列表
const getUserList = async () => {
  loading.value = true
  try {
    const userList = await userStore.getSellUserList()

    locationList.value = userList.map((item: any) => ({
      name: item.usersname,
      address: item.usersaddress,
      phone: item.usersphone,
      usersid: item.usersid,
    }))
  } catch (error) {
    console.error('获取网点列表失败', error)
    uni.showToast({
      title: '获取网点列表失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}

// 搜索相关
function handleSearch(e: any) {
  searchValue.value = e.value
}

function handleClear() {
  searchValue.value = ''
}

const handleSearchChange = useThrottleFn((e: any) => {
  searchValue.value = e.value
}, 300)

// 处理拨打电话
function handleCall(phone: string) {
  uni.makePhoneCall({
    phoneNumber: phone,
  })
}

// 跳转到申请页面
function handleGoods(location: any) {
  uni.navigateTo({
    url: `/pages/form/formStep2?usersid=${location.usersid}`,
  })
}

onLoad(() => {
  getUserList()
})
</script>

<style lang="scss" scoped>
.merchant-card {
  padding: 16px;
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.merchant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}

.merchant-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.merchant-tag {
  flex-shrink: 0;
}

.merchant-content {
  padding: 12px 0;
}

.merchant-info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

.merchant-info-text {
  margin-left: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

.merchant-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.merchant-btn {
  min-width: 90px;
}
</style>
