<template>
  <view class="oa_home" style="oaColor">
    <!-- <image class="header_bg" src="../../static/img/home/head-bg.png"></image> -->
    
    <view class="home_header">
      <!-- #ifdef APP-PLUS||H5 -->
      <view style="height: var(--status-bar-height);"></view>
      <view style="height: 100rpx"></view>
      <!-- #endif -->
      <view class="my_info flex_a_c">
        <view class="">
          <u--image :showLoading="true" :src="myOaInfo.avatar||'../../static/img/public/avatar.png'" width="112.28rpx" height="112.28rpx" shape="circle"></u--image>
        </view>
        <view v-if="!$store.state.app.token" @click="login" class="mesg_box">
          <view class="name">
            <text class="nickname">立即登录</text>
          </view>
          <view class="duty">
            登录后可查看更多
          </view>
        </view>
        <view v-else class="mesg_box">
          <view class="name"><text class="nickname">{{ myOaInfo.nickname }}</text> {{ myOaInfo.mobile }}</view>
          <view class="duty">({{ myOaInfo.did_name }}){{myOaInfo.label_name}}</view>
        </view>
      </view>
      <view class="task_panel">
        <block v-for="(item,index) in assessData" :key="index">
          <view class="task_item">
            <view class="plan">{{ item.num }}</view>
            <view class="">{{ item.name }}</view>
          </view>
        </block>
      </view>
      <!-- <view class="backlog">
        <view class="">待办事项</view>
        <block v-for="(item,index) in ApproveList.slice(0,2)" :key="index">
          <view class="backlog_item flex_a_c_j_sb" @click="backlogDetails">
            <view class="text">{{ item.content }}</view>
            <i class="iconfont icon-you"></i>
          </view>
        </block>
      </view> -->
      <view class="backlog">
        <view class="head_title flex_a_c_j_sb">
          <view class="title">公告列表</view>
          <view class="flex_a_c" @click="navTo('')">更多 <view class="iconfont icon-you">
              <uni-icons type="forward"></uni-icons>
            </view>
          </view>
        </view>
        <block v-for="(item,index) in ApproveList.slice(0,2)" :key="index">
          <view class="backlog_item flex_a_c_j_sb" @click="clickNotice(item.id)">
            <view class="text">{{ item.title }}</view>
            <i class="iconfont icon-you"><uni-icons type="forward"></uni-icons></i>
          </view>
        </block>
      </view>
    </view>

    <view class="fast_track">
      <block v-for="(item,index) in oaHomeData" :key="index">
        <view class="track_item" @click="navTo(item.url)">
          <u--image :showLoading="true" :src="item.icon" width="77.19rpx" height="77.19rpx"></u--image>
          <view class="title">{{ item.text }}</view>
        </view>
      </block>
    </view>

    <view class="my_task">
      <view class="task_title flex_a_c_j_sb">
        <view class="title">我的任务</view>
        <view class="flex_a_c" @click="navTo('')">更多 <view class="iconfont icon-you">
            <uni-icons type="forward"></uni-icons>
          </view>
        </view>
      </view>
      <!-- <taskCard></taskCard> -->
      <!-- <view class="head_title flex_a_c_j_sb">
        <view class="">我的任务</view>
        <view class="flex_a_c" @click="test">更多 <view class="iconfont icon-you"></view>
        </view>
      </view>
      <block v-for="(item,index) in myTaskList" :key="index">
        <view class="task_list" @click="naviTaskDetails(item.id)">
          <view class="title flex_a_c_j_sb">
            <view class="flex_a_c">
              <view v-if="item.priority==4" class="tag">{{ item.priority_name }}</view>
              <view v-else class="tag1">{{ item.priority_name }}</view>
              <view class="text">{{ item.title }}</view>
            </view>
            <view v-if="item.flow_status==1" class="if_take take1">{{ item.flow_name }}</view>
            <view v-else-if="item.flow_status==2" class="if_take take2">{{ item.flow_name }}</view>
            <view v-else="item.flow_status==3" class="if_take take3">{{ item.flow_name }}</view>
          </view>
          <view class="describe">{{ item.content }}</view>
          <view class="task_deta flex_a_c_j_sb">
            <view class="">任务性质：{{ item.is_bug }}</view>
            <view class="">计划完成日期：{{ item.end_time }}</view>
          </view>
        </view>
      </block> -->
    </view>

    <!-- <tabbar></tabbar> -->
  </view>
</template>

<script>
  import { Toast } from '@/libs/uniApi.js'
  import { oaHomeData } from '@/static/server/server.js'
  import { noticeList } from "@/api/notice.js"
  // import tabbar from '../components/tabbar'
  import { getIndexListAPI, getTaskListAPI, getMyTaskListAPI, getApproveListAPI, getUserIndexAPI } from '@/api/oaApi.js'
  export default {
    components: {
      // tabbar
    },
    data() {
      return {
        oaHomeData: oaHomeData,
        src: 'https://cdn.uviewui.com/uview/album/1.jpg',
        assessData: [{
            num: '0',
            name: '任务'
          },
          {
            num: '0',
            name: '已完成'
          },
          {
            num: '0',
            name: '未完成'
          },
          {
            num: '0%',
            name: '完成率'
          },
        ],
        project: {},
        task: {},
        page: 1,
        myTaskList: [],
        flowState: '#47B347', // 任务状态
        priority: '', // 任务紧急度
        myOaInfo: {
          avatar: '',
          nickname: '',
          mobile: '',
          did_name: '',
          label_name: '',
        },
        ApproveList: []
      }
    },
    onReady() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#3175f9'
      })
    },
    onLoad() {},
    onShow() {
      // this.getUserIndex()
      // this.getIndexList()
      this.getApproveList()
      this.initUserInfo()
      this.showToask()
    },
    computed: {},
    methods: {
      // test() {
      //   wx.chooseMessageFile({
      //     count: 1, //限制选择的文件数量
      //     type: 'all', //非图片和视频的文件,不选默认为all
      //     //type:'video',//视频
      //     //type:'image',//图片
      //     success(res) {
      //       const tempFilePaths = res.tempFiles
      //       console.log(res);
      //     }
      //   })
      // },
      initUserInfo(){
        this.$store.state.app.userInfo ? this.myOaInfo = this.$store.state.app.userInfo : this.myOaInfo.avatar = '';
      },
      async getApproveList() {
        const res = await noticeList({
          cid: 1,
          sort: 'new',
          keyword: '',
        })
        this.ApproveList = res.data.lists
      },
      async getIndexList() {
        const { project, task } = await getIndexListAPI()
        console.log(task, '222');
        this.assessData[0].num = project.count
        this.assessData[1].num = project.count_ok
        this.assessData[2].num = project.count_no
        this.assessData[3].num = project.count_lv + '%'
        this.assessData[4].num = task.count
        this.assessData[5].num = task.count_ok
        this.assessData[6].num = task.count_no
        this.assessData[7].num = task.count_lv + '%'
        this.myTaskList = task.list
      },
      async getMyTask() {
        let data = {
          page: this.page,
          limit: 10
        }
        const res = getMyTaskListAPI(data)
      },
      naviTaskDetails(id) {
        uni.navigateTo({
          url: `/pages/views/task_details?id=${id}`
        })
      },
      navTo(url) {
        url ?
          uni.navigateTo({
            url: url,
          }) : Toast('暂未开放')
      },
      // 点击公告
      clickNotice(e){
        uni.navigateTo({
          url: `/pages/oaNews/oaNews?id=${e}`
        })
      },
      // 判断当前是否登录,显示任务及完成率
      showToask(){
        if(!this.$store.state.app.token){
          this.assessData = this.assessData.map(item=>{
            item.num = '*';
            return item;
          })
        }
      },
      login() {
        uni.navigateTo({
          url:'/pages/oaLogin/oaLogin'
        })
      },
      async getUserIndex() {
        const res = await getUserIndexAPI()
        this.myOaInfo = res
      }
    },
    onPullDownRefresh() {
      // this.getIndexList()
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .oa_home {
    padding-bottom: 120rpx;
  }

  .header_bg {
    position: absolute;
    width: 100%;
    // z-index: -1;
  }

  .home_header {
    position: relative;
    padding: 28.07rpx;
    // height: 607.02rpx;
    // height: 480.02rpx;
    width: 100%;
    // background-color: $theme-oa-color;
    margin-bottom: 133.33rpx;
    background-image: url('../../static/img/home/head-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .my_info {
      .mesg_box {
        color: #fff;
        margin-left: 31.58rpx;
        .nickname{
          font-size: 32rpx;
          font-weight: 500;
          margin-right: 30rpx;
        }

        .duty {
          margin-top: 10.53rpx;
        }
      }
    }

    .task_panel {
      color: #fff;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: space-between;
      text-align: center;
      padding-bottom: 110rpx;

      .task_item {
        margin-top: 42.11rpx;

        .plan {
          width: 173.68rpx;
          font-size: 38.6rpx;
          margin-bottom: 21.05rpx;
        }
      }
    }

    .backlog {
      position: absolute;
      left: 50%;
      bottom: -121.75rpx;
      transform: translate(-50%);
      width: 694.74rpx;
      min-height: 221.05rpx;
      background: #FFFFFF;
      border-radius: 12px;
      padding: 28.07rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 25rpx;
      font-weight: 400;

      .title {
        font-size: 32rpx;
        font-weight: 500;
      }

      &_item {
        margin-top: 19.3rpx;
        color: #666666;

        .text {
          font-size: 28.04rpx;
          white-space: nowrap; /* 禁止换行 */
          overflow: hidden; /* 溢出隐藏 */
          text-overflow: ellipsis; /* 使用省略号代表被截断的文本 */
          width: 580rpx; /* 设置元素宽度，根据需要进行调整 */

          &::before {
            content: '提醒';
            display: inline-block;
            color: #FF8C1A;
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid #FF8C1A;
            margin-right: 14.04rpx;
          }
        }
      }
    }
  }

  .fast_track {
    width: 694.74rpx;
    height: 361.4rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    margin: 0 auto;
    padding: 28.07rpx 38.6rpx;
    background-color: #fff;
    border-radius: 12px;

    .track_item {
      width: 154.39rpx;
      font-size: 24.56rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        margin-top: 14.04rpx;
      }
    }
  }

  .my_task {
    width: 694.74rpx;
    margin: 0 auto;
    // margin-top: 31.58rpx;
    // background-color: #fff;
    border-radius: 12px;
    // padding: 28.07rpx;
    
    
    .task_title{
      font-size: 25rpx;
      font-weight: 400;
      padding: 28rpx;
      .title {
        font-size: 32rpx;
        font-weight: 500;
      }
    }

    

    .task_list {
      height: 196.49rpx;
      border-bottom: 1px solid #CCCCCC;
      padding: 21.05rpx 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        .tag {
          color: #F24848;
          font-size: 24.56rpx;
          padding: 0 7.02rpx;
          margin-right: 14.04rpx;
          background: #FFE4E4;
          border-radius: 4px;
        }

        .tag1 {
          color: #3274F9;
          font-size: 24.56rpx;
          padding: 0 7.02rpx;
          margin-right: 14.04rpx;
          background: #E4EDFF;
          border-radius: 4px;
        }

        .text {
          font-size: 28.07rpx;
          width: 403.51rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .if_take {
          font-size: 28.07rpx;
          text-align: center;
          line-height: 49.12rpx;
          width: 115.79rpx;
          height: 49.12rpx;
          border-radius: 100px;
        }

        .take1 {
          color: #47B347;
          background: #DFFCDF;
        }

        .take2 {
          color: #3274F9;
          background: #E4EDFF;
        }

        .take3 {
          color: #999999;
          background: #F5F5F5;
        }
      }

      .describe {
        font-size: 24.56rpx;
      }

      .task_deta {
        color: #999;
        font-size: 24.56rpx;
      }
    }
  }
</style>