<route lang="yaml">
style:
  navigationBarTitleText: 全部设计师
  navigationBarBackgroundColor: '#fff'
</route>

<script setup lang="ts">
import Card from '@/components/card.vue'
import DataForm from '@/components/data-form.vue'
import { vipIcon, rightArrowIcon, filterIcon } from '@designer-hub/assets/src/svgs'
const searchText = ref('')
const publishState = ref(false)

const msgs = ref([
  {
    title: '王磊回复了你',
    createdAt: Date.now(),
    content: '设计师李家豪刚刚点赞了你的设计圈点击前往查看',
  },
  {
    title: '李琳赞了你的设计圈',
    createdAt: Date.now(),
    content: '设计师李家豪刚刚点赞了你的设计圈点击前往查看',
  },
])
const schema = ref({
  user: {
    type: 'TextField',
    label: '设计师',
  },
  dateTime: {
    type: 'TextField',
    label: '时间',
  },
  type: {
    type: 'TextField',
    label: '类型',
  },
  remark: {
    type: 'TextField',
    label: '备注',
  },
  location: {
    type: 'TextField',
    label: '地址',
  },
  images: {
    type: 'ImageUploader',
    label: '图片',
    max: 9,
  },
})
const searchFocus = () => {
  console.log('focus')
}
const searchBlur = () => {
  console.log('focus')
}
const search = () => {
  console.log('search')
}
const cancelSearch = () => {
  console.log('cancel')
}
const searchChange = (e: any) => {
  console.log(e)
}
const toDetail = async () => {
  await uni.navigateTo({ url: '/pages/designer/detail' })
}
const callPhone = (phoneNumber) => {
  const link = document.createElement('a')
  link.href = 'tel:' + phoneNumber
  link.click()
}
const filterData = () => {
  console.log('filter')
}
</script>

<template>
  <view class="flex-grow">
    <div class="flex items-center justify-between bg-white pr-3.5">
      <div class="flex-1">
        <wd-search
          v-model="searchText"
          @focus="searchFocus"
          @blur="searchBlur"
          @search="search"
          @cancel="cancelSearch"
          @change="searchChange"
          hide-cancel
        />
      </div>
      <wd-img :src="filterIcon" width="22px" height="22px" @click="filterData"></wd-img>
    </div>
    <div class="p-3.5 gap-3.5 flex flex-col">
      <template v-for="({ title, createdAt, content }, i) in msgs" :key="i">
        <Card>
          <div class="items-center">
            <div class="">
              <div class="flex items-center">
                <div
                  class="w-[55px] h-[55px] bg-neutral-100 rounded-full mr-2 flex items-center justify-center"
                >
                  <wd-img src=""></wd-img>
                </div>
                <div class="flex flex-col flex-1">
                  <div class="flex-row flex items-center justify-between w-full">
                    <div class="flex-row flex items-center">
                      <div
                        class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]"
                      >
                        苏小萌
                      </div>

                      <div
                        class="h-4 bg-neutral-100 rounded-[20px] justify-start items-center inline-flex flex-row ml-[9px]"
                      >
                        <wd-img width="17" height="17" :src="vipIcon"></wd-img>

                        <div
                          class="text-black/40 text-[10px] font-normal font-['PingFang SC'] px-[7px] leading-none"
                        >
                          白银会员
                        </div>
                      </div>
                    </div>
                    <div
                      class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-snug flex items-center"
                      @click="toDetail"
                    >
                      <div>分享主页</div>
                      <wd-img width="13" height="13" :src="rightArrowIcon"></wd-img>
                    </div>
                  </div>
                  <div class="flex items-center gap-2 mt-[18px]">
                    <div
                      class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-none"
                    >
                      2天前访问
                    </div>
                    <div class="bg-[#eeeeee] w-[2px] h-[10px]"></div>
                    <div
                      class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-none"
                    >
                      积分：0
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-start-2 col-start-2 col-end-4">
              <div class="flex items-center justify-between w-full mt-[20px]">
                <div class="flex items-center">
                  <div class="w-2 h-2 bg-[#89f4e2] rounded-full mr-[7px]"></div>
                  <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-snug">
                    30天未跟进
                  </div>
                </div>
                <div class="flex items-center">
                  <div class="w-2 h-2 bg-[#ffb96a] rounded-full mr-[7px]"></div>
                  <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-snug">
                    60天未产生积分
                  </div>
                </div>
                <div class="flex items-center">
                  <div class="w-2 h-2 bg-[#c493ff] rounded-full mr-[7px]"></div>
                  <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-snug">
                    60天未消耗积分
                  </div>
                </div>
              </div>
            </div>
            <div
              class="row-start-5 col-start-2 col-end-4 flex items-center mt-[26px] justify-around"
            >
              <div
                class="px-3 py-1.5 rounded-[30px] border border-[#ff2d2d] justify-center items-center gap-1 flex"
                style="border: 1px solid #ff2d2d"
              >
                <span style="color: #ff2d2d" class="flex items-center">+</span>
                <div class="text-[#ff2d2d] text-xs font-normal font-['PingFang SC'] leading-none">
                  重点跟进
                </div>
              </div>
              <div
                class="px-5 py-1 bg-[#e1ecff] rounded-[30px] border border-[#2357e9] justify-center items-center gap-1 inline-flex"
                @click="callPhone('13700000000')"
              >
                <div
                  class="text-center text-[#2357e9] text-sm font-normal font-['PingFang SC'] leading-normal"
                >
                  打电话
                </div>
              </div>
              <div
                class="px-5 py-1 bg-[#0052d9] rounded-[30px] justify-center items-center gap-1 inline-flex"
              >
                <div
                  class="text-center text-white text-sm font-normal font-['PingFang SC'] leading-normal"
                  @click="publishState = true"
                >
                  写跟进
                </div>
              </div>
            </div>
          </div>
        </Card>
      </template>
    </div>
  </view>
  <wd-action-sheet v-model="publishState" title="创建跟进" @close="publishState = false">
    <view class="flex flex-col p-4">
      <div><DataForm :schema="schema" direction="horizontal"></DataForm></div>
      <div><wd-button block :round="false">提交</wd-button></div>
    </view>
  </wd-action-sheet>
</template>

<style scoped lang="scss"></style>
