<template>
  <div id="userCenter">
    <Header :searchBarState="false" />
    <div class="main">
      <Title :tagData="personalTagData" @getPerListData="getPerListData" />
      <Items class="item" 
      :itemData="personalListData_"/>
      <Pagination 
      ref="pag"
      :personalListData="personalListData_" 
      id="pagination"/>
    </div>
    <div class="right-btnlist">
      <button class="top" @click="toTop">
        <img src="../../assets/images/systemNav/top.png" alt="">
      </button>
    </div>
  </div>
</template>

<script>
import '../systemNavComponents/js'

import Header from '../systemNavComponents/Header'
import Title from './userCenterComponents/Title'
import Items from './userCenterComponents/Items'
import Pagination from './userCenterComponents/Pagination'

export default {
  components: {
    Header,
    Title,
    Items,
    Pagination
  },
  data () {
    return {
      personalTagData: ['全部', '待办', '已办', '办结', '邮件'],
      // lists: ['默认', '最新'],
      personalListData_: [],
      // startPage: 0,
      // endPage: 1,
      lists_: [],
      startPage: 0,
      endPage: 5,
      itemData: [
        {
          type: '1',
          statu: '待办',
          source: '人力资源管理系统',
          typeContent: '员工转正申请',
          readState: 1,
          infor: '请提交转正申请相关材料',
          name: '系统自动发送',
          time: '2022-02-18',
          content:
            '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。'
          // details: '查看详情'
        },
        {
          type: '2',
          statu: '已办',
          source: 'OA系统',
          typeContent: '督办流程',
          readState: 0,
          infor: '成立新天公司数智化建设委员会的报告',
          name: '程晓静',
          time: '2022-01-25',
          content:
            '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。'
          // details: '查看详情'
        },
        {
          type: '1',
          statu: '待办',
          source: 'OA系统',
          typeContent: '内部邮件',
          readState: 1,
          infor: '关于开展2021年度智黄仓评先洗优工作的通知',
          name: '尚一婓',
          time: '2022-01-20',
          content:
            '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。'
          // details: '查看详情'
        },
        {
          type: '1',
          statu: '待办',
          source: 'OA系统',
          typeContent: '内部邮件',
          readState: 1,
          infor: '关于开展2021年度智黄仓评先洗优工作的通知',
          name: '尚一婓',
          time: '2022-01-20',
          content:
            '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。'
          // details: '查看详情'
        },
        {
          type: '3',
          statu: '办结',
          source: 'OA系统',
          typeContent: '新闻发布',
          readState: 0,
          infor: '服务数字新天新发展 启肮数智转型新征程——新天…',
          name: '李少辉',
          time: '2022-01-10',
          content:
            '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。'
          // details: '查看详情'
        },
        {
          type: '4',
          statu: '邮件',
          source: '企业邮箱',
          typeContent: '外部邮件',
          readState: 0,
          infor: '主数据项目周报（第7周）',
          name: 'liyuerui',
          time: '2022-12-25',
          content:
            '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。'
          // details: '查看详情'
        }
      ]
    }
  },
  mounted () {
    this.getPerListData('全部')
  },
  methods: {
    getPerListData (i) {
      // console.log('i >> ', i)
      // this.endPage = this.$refs.pag.params.pageSize * 1
      this.personalListData_ = []
      this.itemData.forEach((item, index) => {
        if (item.statu === i.toString()) {
          this.personalListData_.push(item)
        }
        if (i === '全部') {
          this.personalListData_ = this.itemData
        }
      })
    },
    // pageChange(a,b) {
    //   this.startPage=a
    //   this.endPage=b
    // },
    toTop () {
      let top = document.documentElement.scrollTop || document.body.scrollTop
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 10)
    },
    // getSelectList (i) {
    //   // console.log('i >> ', typeof(i))
    //   // if(i===1) {
    //   //   // console.log('21234568 >> ', 21234568)
    //   //   for(let j = 0; j < this.personalListData_.length; j++) {
    //   //     console.log('this.personalListData_ :>> ', j, this.personalListData_[j])
    //   //     console.log('this.personalListData_ :>> ', j+1, this.personalListData_[j+1])
    //   //     if(this.personalListData_[j].time <= this.personalListData_[j+1].time){
    //   //       this.personalListData_[this.personalListData_.length] = this.personalListData_[j]
    //   //       this.personalListData_[j] = this.personalListData_[j+1]
    //   //       this.personalListData_[j+1] = this.personalListData_[this.personalListData_.length]
    //   //     }
    //   //   }
    //   //   this.personalListData_.pop()
    //   // }
    // }
  }
}
</script>
<style scoped lang="less">
#userCenter {
  .item {
    margin-top: 5rem;
  }
  .main {
    margin-top: -3rem;
    padding: 0 8rem;
  }
}

.right-btnlist {
  position: fixed;
  right: 0;
  bottom: 20%;
  z-index: 99;

  & > button {
    width: 5rem;
    height: 5rem;
    background: none;
    border: none;
    padding: 0;
    display: block;
    margin-top: 1.5rem;
    position: relative;
    & > img {
      display: block;
      width: 5rem;
      height: 5rem;
    }
    &.feedback:hover {
      & > div {
        display: block;
      }
    }
  }
}
</style>
<style>
#pagination {
  width: 100%;
  margin: 5rem auto;
  padding-bottom: 5rem;
  text-align: center;
}
</style>
