<route lang="json">
{ "style": { "navigationBarTitleText": "客服", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import Card from '@/components/card.vue'
import { phone } from '../../../core/libs/svgs'
import { getAgents } from '../../../core/libs/requests'
import { handleCall } from '../../../core/utils/common'

const { data: agents, run: setAgents } = useRequest(() => getAgents())
const handleClick = () => {
  uni.navigateTo({ url: '/pages/mine/orders/detail/index' })
}
onMounted(async () => {
  await setAgents()
})
</script>
<template>
  <div class="flex-grow flex flex-col gap-4 px-3.5 py-6">
    <template v-for="(it, i) in agents" :key="i">
      <div>
        <Card>
          <div class="flex gap-4">
            <wd-img
              round
              width="63"
              height="63"
              :src="
                it.headImgUrl ||
                'https://image.zhuchaohui.com/zhucaohui/d3a335ede20d72ebf873e1b2ebd4835749dde2b694a08dfdffd1781973e3df21.png'
              "
            />
            <div class="flex flex-col flex-1 justify-around">
              <div
                class="text-start text-black/40 text-lg font-normal font-['PingFang_SC'] leading-normal"
              >
                <!-- 王玉辉 -->
                {{ it.brokerName }}
              </div>
              <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal">
                <!-- 平台客服 -->
                {{ it.customerName }}
              </div>
            </div>
            <div class="flex items-center">
              <wd-button
                type="text"
                size="small"
                custom-class=" bg-[#f2f2f2]! p-0! ml-4"
                @click="handleCall(it.mobile)"
              >
                <wd-img width="28" height="28" :src="phone"></wd-img>
              </wd-button>
            </div>
          </div>
        </Card>
      </div>
    </template>
  </div>
</template>
