<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    //navigationStyle: 'custom',  // 用来隐藏顶部 首页 的导航
    navigationBarBackgroundColor: '#c08e10',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="containe">
    <!-- 搜索框 -->
    <view class="header header-fixed header-bg">
      <view class="input-box" @click="handleSerch">
        <wd-icon name="search" />
        请输入牛号
      </view>
    </view>
    <!-- 菜单悬浮按钮  -->
    <wd-fab v-model:active="active"></wd-fab>
    <!-- 弹出层导航 -->
    <wd-popup v-model="active" position="right" custom-style="padding:40rpx 20rpx  ;width:90%">
      <view v-for="item in navList" :key="item.id">
        <view class="mt-4 mb-4 px-2 title">{{ item.name }}</view>
        <view class="work-box-t flex justify-left flex-row flex-wrap">
          <view class="work-item mb-4 px-2" v-for="(child, index) in item.children" :key="index">
            <navigator :url="child.url">
              <i class="iconfont icon" :class="child.icon"></i>
              <view class="item-title mt-2">
                {{ child.title }}
              </view>
            </navigator>
          </view>
        </view>
      </view>
    </wd-popup>
    <!-- 标签页 -->
    <wd-tabs v-model="tab" class="pt-3 overflow-hiddren">
      <wd-tab title="工作台(待办20)">
        <Works></Works>
      </wd-tab>
      <wd-tab title="分析">
        <view>hhh</view>
      </wd-tab>
    </wd-tabs>
    <!-- 加载 -->
    <!-- <Loading></Loading> -->
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getConfigSys } from '@/service/index/common'
import Works from './components/works.vue'

defineOptions({
  name: 'Home',
})

// 请求事件列表接口
async function getConfigSysList() {
  const { data } = await getConfigSys({
    option_name: 'eventType',
  })
  console.log(data, '事件列表')
}
const tab = ref<number>(0)
const active = ref<boolean>(false)

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const navList = ref([
  {
    id: '1',
    name: '牛只事件',
    children: [
      {
        id: '1-1',
        img: '../../static/images/work/jinchang.png',
        title: '购牛',
        url: '/pages/purchase/purchase',
        icon: 'icon-maijin',
      },
      {
        id: '1-2',
        img: '../../static/images/work/lichang.png',
        title: '肉牛进场',
        url: '/pages/approach/approach',
        icon: 'icon-jinchang1',
        value: 1,
        label: '入场',
      },

      {
        id: '1-3',
        img: '../../static/images/work/bohuan1.png',
        title: '脖环绑定',
        url: '/pages/neckRing/neckRing',
        icon: 'icon-bohuanbangding',
      },
      {
        id: '1-5',
        img: '../../static/images/work/weight.png',
        title: '称重',
        url: '/pages/weight/weight',
        icon: 'icon-chengzhong',
      },
      {
        id: '1-6',
        img: '../../static/images/work/bohuan1.png',
        title: '脖环解绑',
        url: '/pages/untyNeckRing/untyNeckRing',
        icon: 'icon-bohuanjiechu',
      },
      {
        id: '1-2',
        img: '../../static/images/work/lichang.png',
        title: '繁殖进场',
        url: '/pages/approach/approach',
        icon: 'icon-jinchang',
      },
    ],
  },
  {
    id: '2',
    name: '兽医事件',
    children: [
      {
        id: '2-1',
        img: '../../static/images/work/fabing.png',
        title: '发病',
        url: '/pages/illness/illness',
        icon: 'icon-fabingjizhi',
        value: 9,
        label: '发病',
      },
      {
        id: '2-2',
        img: '../../static/images/work/zhiliao.png',
        title: '去势',
        url: '',
        icon: 'icon-fengebujian',
      },
      {
        id: '2-2',
        img: '../../static/images/work/zhiliao.png',
        title: '检疫',
        url: '',
        icon: 'icon-a-1form-insert',
      },
      {
        id: '2-2',
        img: '../../static/images/work/zhiliao.png',
        title: '驱虫',
        url: '',
        icon: 'icon-quchongdengji',
      },
      {
        id: '2-2',
        img: '../../static/images/work/zhiliao.png',
        title: '免疫',
        url: '',
        icon: 'icon-yimiaoguanli',
      },
    ],
  },
])

// 工作待办跳转
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(() => {
  getConfigSysList()
})

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

<style lang="scss" scoped>
.containe {
  height: 100%;
  // overflow: hidden;
}
.item-title {
  font-size: 30rpx;
}
.work-item {
  // border: 1px solid red;
  width: 20%;
  height: 200rpx;
  font-size: 32rpx;
  text-align: center;
}
.header {
  padding: 32rpx 54rpx;
  margin-right: -32rpx;
  margin-left: -32rpx;
}
.header-fixed {
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-bg {
  // background: linear-gradient(180deg, #e3b655 0%, #d4a017 50%, #c08e10 100%);
  background: linear-gradient(180deg, #c08e10 0%, #d4a017 50%, #e3b655 100%);
}
.icon {
  font-size: 36px !important;
  color: #d4a017;
}

.input-box {
  height: 80rpx;
  // margin-top: 10rpx;
  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: 222rpx;
  text-align: center;
  // background: linear-gradient(to bottom, #D4A017, #fffbeb);
  background: linear-gradient(180deg, #e3b655 0%, #d4a017 50%, #c08e10 100%);
}
.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: #d4a017;
  }
}
</style>
