<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="containe px-4">
    <!-- 渐变色 -->
    <view class="top-content"></view>
    <view
      class="overflow-hidden header header-fixed header-bg"
      :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
    >
      <wd-badge modelValue="12" @click="watchNotice">
        <wd-icon name="dong" size="48rpx" />
      </wd-badge>
      <view class="input-box mt-2" @click="handleSerch">
        <wd-icon name="search" />
        请输入牛号
      </view>
    </view>
    <!-- 进度 -->
    <view class="work shadow-xl">
      <view class="mt-4 mb-4 px-2 pb-2 title">工作进度</view>
      <view class="work-box flex justify-around">
        <wd-circle
          customClass="z-index: -1; position: reletive;"
          v-model="current"
          color="#f59e0b"
          :strokeWidth="15"
          :text="`已完成${current}%`"
        ></wd-circle>
        <view class="do-work" @click="switchPage">
          <text>待办事件:</text>
          <text class="num">{{ 4 }}/</text>
          <text class="num1">{{ 20 }}</text>
        </view>
      </view>
    </view>
    <!-- 常用工具 -->
    <view class="work mt-4 shadow-xl work-t">
      <view class="mt-4 mb-4 px-2 title">常用工具</view>
      <view class="work-box-t flex justify-left flex-row flex-wrap">
        <view class="work-item mb-4 px-2" v-for="item in workList" :key="item.id">
          <navigator :url="item.url">
            <image :src="item.img" mode="scaleToFill" class="image" />
            <view class="item-title">
              {{ item.title }}
            </view>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 加载 -->
    <!-- <Loading></Loading> -->
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const workList = reactive([
  {
    id: '1-1',
    img: '../../static/images/work/jinchang.png',
    title: '购牛',
    url: '/pages/purchase/purchase',
  },
  {
    id: 1,
    img: '../../static/images/work/weight.png',
    title: '称重登记',
    url: '',
  },
  {
    id: 2,
    img: '../../static/images/work/zhiliao.png',
    title: '登记治疗',
    url: '',
  },
  {
    id: 3,
    img: '../../static/images/work/fabing.png',
    title: '诊断',
    url: '',
  },
  {
    id: 4,
    img: '../../static/images/work/liuchan.png',
    title: '流产登记',
    url: '',
  },
  {
    id: 5,
    img: '../../static/images/work/bohuan1.png',
    title: '脖环制定',
    url: '',
  },
  {
    id: 6,
    img: '../../static/images/work/result.png',
    title: '治疗结果',
    url: '',
  },
  {
    id: 7,
    img: '../../static/images/work/faqing.png',
    title: '发情',
    url: '',
  },
  {
    id: 8,
    img: '../../static/images/work/peizhong.png',
    title: '配种',
    url: '',
  },
  {
    id: 9,
    img: '../../static/images/work/yunjian.png',
    title: '孕检登记',
    url: '',
  },
  {
    id: 10,
    img: '../../static/images/work/jinweichan.png',
    title: '进围产',
    url: '',
  },
])
const current = ref(20)
let earTag = ref<string | null>(null)

// 工作待办跳转
const switchPage = () => {
  uni.switchTab({ url: '/pages/about/about' })
}
// 搜索页面跳转
const handleSerch = () => {
  uni.navigateTo({ url: '/pages/serch/serch' })
}

// 常用工具页面跳转
const addBattle = (val) => {
  console.log(val, '工具类型')
  uni.navigateTo({ url: '/pages/battleForm/battleForm?type=1' })
}

// 查看消息
const watchNotice = () => {
  uni.$emit('pageSwitch', true)
  uni.navigateTo({ url: '/pages/notice/notice' })
}

onMounted(() => {})

// 测试 uni API 自动引入
onLoad(() => {
  console.log('onload')
})
</script>

<style lang="scss" scoped>
.item-title {
  font-size: 28rpx;
}
.work-item {
  // border: 1px solid red;
  width: 20%;
  height: 200rpx;
  font-size: 32rpx;
  text-align: center;
}
.header {
  padding: 32rpx;
  margin-right: -32rpx;
  margin-left: -32rpx;
}
.header-fixed {
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-bg {
  background: linear-gradient(to bottom, #f59e0b, #f5d198);
  // background-color: #fafafa;
}
.image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 30rpx;
}
.containe {
  // background: #fafafa;
  // position: relative;
}
.input-box {
  height: 80rpx;
  margin-top: 44rpx;
  line-height: 80rpx;
  color: #6b7280;
  text-align: center;
  background: #fff;
  border-radius: 44rpx;
}
.top-content {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: 422rpx;
  text-align: center;
  background: linear-gradient(to bottom, #f59e0b, #fffbeb);
}
.inputs {
  border-radius: 10%;
}
.cards {
  margin: 10rpx 0;
}
.work {
  padding: 10rpx;
  font-size: 28rpx;
  color: $uni-text-color;
  background-color: $uni-text-color-inverse;
  border-radius: 28rpx;
  // box-shadow: 8rpx 16rpx 32rpx 0 $uni-bg-color-grey;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
}
.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.work-box {
  .do-work {
    margin-top: 74rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: #ea580c;
  }
  .num {
    padding-left: 14rpx;
    font-size: 36rpx;
    color: #ea580c;
  }
  .num1 {
    font-size: 28rpx;
    color: #f59e0b;
  }
}
</style>
