<script setup lang="ts" name="index">
import { ref, reactive, computed, onMounted,watch } from 'vue'
import Tabbar from '@/components/Tabbar.vue'
import { useRouter, useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import useUserStore from '../../store/modules/user'
import { refreshDeptTreeList, refreshPostList, refreshAllUserList, refreshCompanyList } from '../../common/utils/transcoding'
import {getAccessToken} from '../../common/utils/auth'
import { getLatestCheckTime } from '@/api/attendance/recorder'
// import banner01 from '@/static/image/banner_01.jpg'
// import banner02 from '@/static/image/banner_02.jpg'
// import banner03 from '@/static/image/banner_03.png'
import lunbo1 from '@/static/image/stage/lunbo1.png'
import lunbo2 from '@/static/image/stage/lunbo2.png'
import lunbo3 from '@/static/image/stage/lunbo3.png'
import logo from '@/static/image/logo/logo.png'
// import todoLogo from '@/static/image/stage/todo.png'
// import doneLogo from '@/static/image/stage/done.png'
import kaoqindaka from '@/static/image/stage/kaoqindaka.png'
import kaoqinrili from '@/static/image/stage/kaoqinrili.png'
import chuchashenqing from '@/static/image/stage/chuchashenqing.png'
import qingjiashenqing from '@/static/image/stage/qingjiashenqing.png'
import jiabantiaoxiu from '@/static/image/stage/jiabantiaoxiu.png'
import qiankashenqing from '@/static/image/stage/qiankashenqing.png'
import ruzhishenqing from '@/static/image/stage/ruzhishenqing.png'
import hetongqianding from '@/static/image/stage/hetongqianding.png'
import lizhishenqing from '@/static/image/stage/lizhishenqing.png'
import gongzuojiaojie from '@/static/image/stage/gongzuojiaojie.png'
import yuangongbaocan from '@/static/image/stage/yuangongbaocan.png'
import shitangcanpu from '@/static/image/stage/shitangcanpu.png'
import canpinliuyang from '@/static/image/stage/canpinliuyang.png'
import sushepingbi from '@/static/image/stage/sushepingbi.png'
import anquanjianchazhenggai from '@/static/image/stage/anquanjianchazhenggai.png'
import fanghuojiancha from '@/static/image/stage/fanghuojiancha.png'
import gangweifanghuojiancha from '@/static/image/stage/gangweifanghuojiancha.png'
import anbaomanyidudiaocha from '@/static/image/stage/anbaomanyidudiaocha.png'
import renwuzhixing from '@/static/image/stage/sushebaoxiu.png'
import renwujiantao from '@/static/image/stage/sushebaoxiu.png'
import sushebaoxiu from '@/static/image/stage/sushebaoxiu.png'
import changqubaoxiu from '@/static/image/stage/changqubaoxiu.png'
import kehubaocan from '@/static/image/stage/kehubaocan.png'
import carApply from '@/static/image/stage/carApply.png'
import youhao from '@/static/image/stage/youhao.png'
import ruzhushenqingIcon from '@/static/image/stage/ruzhushenqing.png'
import ruzhuquerenIcon from '@/static/image/stage/ruzhuqueren.png'


const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const latestCheckTime = ref({
  flag: true,
  time: ''
})

const imgList = ref([
  lunbo1,
  lunbo2,
  lunbo3
])

const count = reactive({
  todo: 12,
  done: 23
})
// const accessToken = getAccessToken()
// watch(accessToken, (val) => {
//  console.log('监听token变化')

//   // 刷新基础数据

// })

const partList = ref([
  {
    name: '考勤',
    children: [
      {
        name: '考勤打卡',
        type: 'kaoqindaka',
        url: kaoqindaka
      },
      {
        name: '考勤日历',
        type: 'kaoqinrili',
        url: kaoqinrili
      },
      {
        name: '出差申请',
        type: 'chuchashenqing',
        url: chuchashenqing
      },
      {
        name: '请假申请',
        type: 'qingjiashenqing',
        url: qingjiashenqing
      },
      {
        name: '调休申请',
        type: 'jiabantiaoxiu',
        url: jiabantiaoxiu
      },
      {
        name: '签卡记录',
        type: 'qiankashenqing',
        url: qiankashenqing,
        // hide: userInfo.value.companyId !== '18'
      },
      {
        name: '当日外出申请',
        type: 'waichushenqing',
        url: lizhishenqing
      },
      {
        name: '跨天外出申请',
        type: 'outRequest',
        url: lizhishenqing
      },
    ]
  },
  {
    name: '人事',
    children: [
      {
        name: '离职申请',
        type: 'lizhishenqing',
        url: lizhishenqing
      },
      {
        name: '交接确认',
        type: 'gongzuojiaojie',
        url: gongzuojiaojie
      }
    ]
  },
  // {
  //   name: '食堂',
  //   children: [
  //     {
  //       name: '员工报餐',
  //       type: 'yuangongbaocan',
  //       url: yuangongbaocan
  //     },
  //     {
  //       name: '客户报餐',
  //       type: 'kehubaocan',
  //       url: kehubaocan
  //     },
  //     {
  //       name: '食堂餐谱',
  //       type: 'shitangcanpu',
  //       url: shitangcanpu
  //     },
  //     {
  //       name: '餐品留样',
  //       type: 'canpinliuyang',
  //       url: canpinliuyang
  //     }
  //   ]
  // },
  // {
  //   name: '车辆',
  //   children: [
  //     {
  //       name: '用车申请',
  //       type: 'yongcheshenqing',
  //       url: carApply
  //     },
  //     {
  //       name: '车辆油耗',
  //       type: 'cheliangyouhao',
  //       url: youhao
  //     }
  //   ]
  // },
  // {
  //   name: '宿舍',
  //   children: [
  //     {
  //       name: '宿舍入住申请',
  //       type: 'susheruzhushenqing',
  //       url: ruzhushenqingIcon
  //     },
  //     {
  //       name: '宿舍入住确认',
  //       type: 'susheruzhuqueren',
  //       url: ruzhuquerenIcon
  //     }
  //   ]
  // },
  // {
  //   name: '后勤',
  //   children: [
  //     {
  //       name: '宿舍评比',
  //       type: 'sushepingbi',
  //       url: sushepingbi
  //     }
  //   ]
  // }, 
  // {
  //   name: '安全生产环保',
  //   children: [
  //     {
  //       name: '安全检查报告',
  //       type: 'anquanjianchabaogao',
  //       url: anquanjianchazhenggai
  //     },
  //     {
  //       name: '安全隐患管理',
  //       type: 'anquanyinhuanguanli',
  //       url: anquanjianchazhenggai
  //     }
  //   ]
  // },
  {
    name: '问卷调查',
    children: [
      {
        name: '问卷调查',
        type: 'diaochawenquan',
        url: anbaomanyidudiaocha
      }
      // ,
      // {
      //   name: '安保满意度调查',
      //   type: 'anbaomanyidudiaocha',
      //   url: anbaomanyidudiaocha
      // },
      // {
      //   name: '食堂满意度调查',
      //   type: 'shitangmanyidudiaocha',
      //   url: anbaomanyidudiaocha
      // }
    ]
  },
  // {
  //   name: '事务管理',
  //   children: [
  //     {
  //       name: '任务执行',
  //       type: 'renwuzhixing',
  //       url: renwuzhixing
  //     },
  //     {
  //       name: '任务检讨',
  //       type: 'renwujiantao',
  //       url: renwujiantao
  //     },
  //     {
  //       name: '工单管理',
  //       type: 'sushebaoxiu',
  //       url: sushebaoxiu
  //     }
  //   ]
  // }
])

/**
 * 跳转业务列表
 * @param val 0:待处理 1: 已处理
 */
function handlePageTask(val:string) {
  console.log(val)
}
/**
 * 页面跳转
 */
function handleNavPageXitem(val:any) {
// if(userStore.accessToken)
  console.log('userStore.accessToken123',userStore.accessToken)
  if(!userStore.accessToken) {
    uni.showModal({
      title: '提示',
      content: `暂未登录，请先登录`,
      success: (res) => {
        if (res.confirm) {
          uni.switchTab({
            url:'/pages/mine/index',
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
    return
  }

  let pageType = val.type

  switch (pageType) {

    case 'kaoqindaka': // 考勤打卡  涉及到企业微信jssdk  后续完善 临时注释
     uni.navigateTo({
        url: '/attendance/clockIn/index'
      })
      break
    case 'kaoqinrili': // 考勤日历
     uni.navigateTo({
        url: '/attendance/clockinCalendar/index'
      })
      break
    case 'qiankashenqing': // 签卡记录
     uni.navigateTo({
        url: '/attendance/cardSign/index'
      })
      break
    case 'chuchashenqing': // 出差申请
     uni.navigateTo({
        url: '/attendance/trip/list'
      })
      break
    case 'qingjiashenqing': // 请假申请
     uni.navigateTo({
        url: '/attendance/leave/list'
      })
      break
    case 'jiabantiaoxiu': // 调休申请
     uni.navigateTo({
        url: '/attendance/overTimeForLeave/list'
      })
      break
    case 'waichushenqing': // 当日外出申请
     uni.navigateTo({
        url: '/attendance/outside/list'
      })
      break
    case 'outRequest': //跨天
      uni.navigateTo({
        url: '/attendance/outRequest/list'
      })
      break

    // 人事
    case 'lizhishenqing': // 离职申请
     uni.navigateTo({
        url: '/personnel/resignation/list'
      })
      break
    case 'gongzuojiaojie': // 工作交接
     uni.navigateTo({
        url: '/personnel/handoverConfirm/list'
      })
      break
    case 'yuangongbaocan': // 员工报餐
     uni.navigateTo({
        url: '/resturant/employeeMeal/list'
      })
      break
    case 'kehubaocan': // 客户报餐
     uni.navigateTo({
        url: '/resturant/customerMeal/list'
      })
      break
    case 'shitangcanpu': // 食堂餐谱
     uni.navigateTo({
        url: '/resturant/menu/index'
      })
      break
    case 'canpinliuyang': // 餐品留样
     uni.navigateTo({
        url: '/resturant/dishSample/list'
      })
      break
    // 后勤
    case 'sushepingbi': // 宿舍评比
     uni.navigateTo({
        url: '/logistics/dormitoryComparison'
      })
      break
    // 安全
    case 'anquanjianchabaogao': // 安全检查报告
     uni.navigateTo({
        url: '/ehs/security/inspectReport'
      })
      break
    case 'anquanyinhuanguanli': // 安全隐患管理
     uni.navigateTo({
        url: '/ehs/security/inspectDanger'
      })
      break





    case 'diaochawenquan': // 调查问券
     uni.navigateTo({
        url: '/satisfaction/list',
        query: {
          examinationType: '1'
        }
      })
      break

    case 'shitangmanyidudiaocha': // 食堂满意度
     uni.navigateTo({
        url: '/satisfaction/list',
        query: {
          examinationType: '2'
        }
      })
      break
    case 'anbaomanyidudiaocha': // 安保满意度
     uni.navigateTo({
        url: '/satisfaction/list',
        query: {
          examinationType: '3'
        }
      })
      break
    case 'yongcheshenqing': // 用车申请
     uni.navigateTo({
        url: '/carUse/apply/list'
      })
      break
    case 'cheliangyouhao': // 车辆油耗
     uni.navigateTo({
        url: '/carUse/oilConsumption/list'
      })
      break
    case 'susheruzhushenqing': // 宿舍入住申请
     uni.navigateTo({
        url: '/checkIn/apply/applylist'
      })
      break
    case 'susheruzhuqueren': // 宿舍入住确认
     uni.navigateTo({
        url: '/checkIn/confirm/confirmList'
      })
      break
    // 任务
    case 'renwuzhixing': // 任务执行
     uni.navigateTo({
        url: '/task/taskExecution'
      })
      break
    case 'renwujiantao': // 任务检讨
     uni.navigateTo({
        url: '/task/taskReview'
      })
      break
    // 工单
    case 'sushebaoxiu': // 工单管理
     uni.navigateTo({
        url: '/workOrder'
      })
      break
    default:
      uni.showToast({
        message: '敬请期待',
        duration: 1000
      })
      break
  }




}

onMounted(() => { 
  if(userStore.accessToken) {
    // 查询员工的最新打卡记录
    getLatestCheckTime().then(res => {
      console.log(res)
      latestCheckTime.value = res.data
    })

      refreshDeptTreeList()
  refreshPostList()
  refreshAllUserList()
  refreshCompanyList()
  }

})

</script>

<template>
  <div class="wrap">
    <!-- <van-swipe
      class="my-swipe"
      :autoplay="3000"
      lazy-render>
      <template v-for="(item,index) in imgList" :key="index">8
        <van-swipe-item class="swipe-item">
          <img class="list-img" :src="item">
        </van-swipe-item>
      </template>
    </van-swipe> -->

    <swiper id="swiper-view" class="my-swipe swiper"  :indicator-dots="true"
      :autoplay="true"  :interval="3000" :circular="true"
      :duration="500" indicator-color="rgba(255, 255, 255, 0.1)" indicator-active-color="rgba(255, 255, 255, 0.75)"
      >
      <swiper-item class="lunbo-item" v-for="(item,index) in imgList" :key="index" :item-id="index">
         <img class="list-img" :src="item">
      </swiper-item>
      
    </swiper>




    <!-- 上次打卡时间 -->
    <div v-if="latestCheckTime?.time" class="latest-time" :class="{flag: latestCheckTime?.flag}">
      <span>上次打卡时间：</span>
      <span class="time">{{ latestCheckTime?.time }}</span>
    </div>
    <div class="container">
      <!-- 业务待办 -->
      <!-- <div class="task-box">
        <van-row type="flex" align="top" justify="space-between">
          <div class="task-box-item red-box" @click="handlePageTask('0')">
            <img class="task-box-item-logo" :src="todoLogo">
            <div class="task-box-item-content">
              <div class="task-box-item-content-title">
                今日待处理
              </div>
              <div class="task-box-item-content-num">{{ count.todo }}</div>
            </div>
          </div>
          <div class="task-box-item blue-box" @click="handlePageTask('1')">
            <img class="task-box-item-logo" :src="doneLogo">
            <div class="task-box-item-content">
              <div class="task-box-item-content-title">
                今日已处理
              </div>
              <div class="task-box-item-content-num">{{ count.done }}</div>
            </div>
          </div>
        </van-row>
      </div> -->
      <!-- grids -->
      <template v-for="(item,index) in partList" :key="index">
        <div class="part-box">
          <van-row class="part-title">
            <van-row>{{ item.name }}</van-row>
          </van-row>
          <div class="part-box-group">
            <template v-for="(child, indexChild) in item.children" :key="`child${indexChild}`">
              <div v-if="!child.hide" class="part-box-group-item" @click="handleNavPageXitem(child)">
                <img class="part-box-icon" :src="child.url">
                <div class="part-box-name">{{ child.name }}</div>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
  </div>
  <Tabbar :selected="2"/>
</template>

<style lang="scss" scoped>

.wrap {
  padding-top: 30rpx;
  padding-bottom: calc(12rpx + env(safe-area-inset-bottom) + 20rpx + env(safe-area-inset-bottom));
}

.latest-time {
  margin: 24rpx 30rpx 0;
  padding: 30rpx;
  font-size: 32rpx;
  background-color: #fff;
  border-radius: 24rpx;
  background-blend-mode: normal;
  box-shadow: 0 4rpx 40rpx rgba(64, 103, 251, 0.14);
  .time {
    color: #f33;
    font-weight: bold;
  }
  &.flag {
    .time {
      color: #07c160;
    }
  }
}
.container {
  padding-top: 0;
}

.my-swipe {
  .lunbo-item {
    padding: 0 30rpx;
    height: 326rpx;
    box-sizing: border-box;
    .list-img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      border-radius: 20rpx;
    }
  }
  :deep(.van-swipe__indicators) {
    left: calc(30rpx + 70rpx);
    height: 10rpx;
    .van-swipe__indicator {
      &.van-swipe__indicator--active {
        width: 24rpx;
        background-color: #fff;
        border-radius: 10em;
      }
    }
  }
}
.task-box {
  .task-box-item {
    flex: 1;
    position: relative;
    padding: 30rpx 0 0 28rpx;
    height: 180rpx;
    line-height: 1;
    color: rgba(37, 37, 37, 1);
    font-size: 32rpx;
    border-radius: 24rpx;
    border: 2px solid rgba(255, 255, 255, 1);
    &-logo {
      display: block;
      position: absolute;
      right: 24rpx;
      bottom: 22rpx;
      width: 84rpx;
      height: 84rpx;
    }
    &-content {
      &-num {
        margin-top: 36rpx;
      }
    }
  }
  .red-box {
    background: linear-gradient(180deg, rgba(255, 244, 237, 1) 0%, rgba(255, 255, 255, 1) 100%);
  }
  .blue-box {
    margin-left: 16rpx;
    background: linear-gradient(180deg, rgba(235, 247, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
  }
}
.part-box {
  margin-top: 24rpx;
  padding: 30rpx 36rpx;
  background-color: #fff;
  color: #333;
  border-radius: 24rpx;
  background-blend-mode: normal;
  box-shadow: 0 4rpx 40rpx rgba(64, 103, 251, 0.14);
  &-title {

  }
  &-group {
    display: flex;
    flex-wrap: wrap;
    &-item {
      margin-top: 24rpx;
      margin-right: 93.4rpx;
      width: 84rpx;
      @media (max-width: 480px) {
        &:nth-child(5n - 1) {
          margin-right: 0;
        }
        &:nth-child(8){
          margin-right: 0;
        }
      }
      
    }
  }
  &-icon {
    display: block;
    margin-bottom: 12rpx;
    width: 84rpx;
    height: 84rpx;
    border-radius: 16rpx;
  }
  &-name {
    line-height: 24rpx;
    font-size: 20rpx;
    color: rgba(37, 37, 37, 1);
    text-align: center;
    object-fit: cover;
  }
}

</style>
