<template>
    <div
        class="home"
        v-if="category"
    >
        <div class="categorytab">
            <!-- <div class="category-ico" @click="$router.push('/editcategory')"><van-icon name="setting-o" /></div> -->
            <div class="user_header">
                <div><img
                        src="../assets/img/icon_hp_kqdk.png"
                        alt=""
                    ></div>
                <div class="userheader_one">
                    <p>李鑫</p>
                    <p>所在部门：市监局</p>
                </div>
            </div>
            <div class="imkjimg">
              <img
                        src="../assets/img/icon_mine_setting.png"
                        alt=""
                    >
            </div>
            <div class="user_nicti">

                <van-swipe
                    vertical
                    class="notice-swipe"
                    :autoplay="3000"
                    :show-indicators="false"
                >
                    <van-swipe-item>
                        <div class="nsernictiv_nav">
                            <img
                                src="../assets/img/icon_tsxx.png"
                                alt=""
                            >
                            <p>你有四条待审批申请，请前往首页待审批进行……</p>
                            <span>2021-04-24</span>
                        </div>
                    </van-swipe-item>
                    <van-swipe-item>
                        <div class="nsernictiv_nav">
                            <img
                                src="../assets/img/icon_tsxx.png"
                                alt=""
                            >
                            <p>你有四条待审批申请，请前往首页待审批进行……</p>
                            <span>2021-04-24</span>
                        </div>
                    </van-swipe-item>
                    <van-swipe-item>
                        <div class="nsernictiv_nav">
                            <img
                                src="../assets/img/icon_tsxx.png"
                                alt=""
                            >
                            <p>你有四条待审批申请，请前往首页待审批进行……</p>
                            <span>2021-04-24</span>
                        </div>
                    </van-swipe-item>
                </van-swipe>
            </div>

        </div>
        <div class="index_nav">
            <p @click="dance">

                <img
                    src="../assets/img/icon_mine_kqjl.png"
                    alt=""
                >
                <span>考勤记录</span>
                <img
                    src="../assets/img/icon_back_enter.png"
                    alt=""
                >
            </p>
            <p @click="ave">

                <img
                    src="../assets/img/icon_mine_qjjl.png"
                    alt=""
                >
                <span>请假记录</span>
                <img
                    src="../assets/img/icon_back_enter.png"
                    alt=""
                >
            </p>
            <p @click="oval">

                <img
                    src="../assets/img/icon_mine_spjl.png"
                    alt=""
                >
                <span>审批记录</span>
                <img
                    src="../assets/img/icon_back_enter.png"
                    alt=""
                >
            </p>

        </div>
        <nav-bar v-bind:active=2></nav-bar>
    </div>
</template>

<script>
import NavBar from "@/components/common/Navbar.vue";
import cover from "./cover";
export default {
  data() {
    return {
      category: [],
      active: 2
    };
  },
  components: {
    NavBar,
    cover
  },
  activated() {
    if (localStorage.getItem("newCat")) {
      let newCat = JSON.parse(localStorage.getItem("newCat"));
      this.category = this.changeCategory(newCat);
      this.selectArticle();
    }
  },
  methods: {
    async selectCategory() {
      if (localStorage.getItem("newCat")) {
        return;
      }
      const res = await this.$http.get("/category");
      this.category = this.changeCategory(res.data);
      this.selectArticle();
    },
    changeCategory(data) {
      const category1 = data.map((item, index) => {
        item.list = [];
        item.page = 0;
        item.finished = false;
        item.loading = true;
        item.pagesize = 10;
        return item;
      });
      return category1;
    },
    async selectArticle() {
      const categoryitem = this.categoryItem();
      const res = await this.$http.get("/detail/" + categoryitem._id, {
        params: {
          page: categoryitem.page,
          pagesize: categoryitem.pagesize
        }
      });
      categoryitem.list.push(...res.data);
      categoryitem.loading = false;
      if (res.data.length < categoryitem.pagesize) {
        categoryitem.finished = true;
      }
    },
    onLoad() {
      const categoryitem = this.categoryItem();
      setTimeout(() => {
        categoryitem.page += 1;
        this.selectArticle();
      }, 1000);
    },
    categoryItem() {
      const categoryitem = this.category[this.active];
      return categoryitem;
    },
    // 考勤记录
    dance(){
      this.$router.push("/record");
    },
    //  请假记录 
    ave(){
      this.$router.push("/ecord");
    },
    // 审批记录
    oval(){
     this.$router.push("/proval");
    }
  },
  watch: {
    active() {
      const categoryitem = this.categoryItem();
      if (!categoryitem.list.length) {
        this.selectArticle();
      }
    }
  },
  created() {
    console.log(3)
    this.selectCategory();
  }
};
</script>

<style lang="less" scoped>
.home {
  //   background-color: #fff;
  .categorytab {
    width: 100%;
    height: 100%;
    background-color: #fff;
    .user_header {
      height: 40.533vw;
      background: url("../assets/img/pic_mine_tbbg.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      padding: 4.533vw;
      align-items: center;
      div:nth-child(2) {
        flex: 1;
        p:nth-child(1) {
          margin-bottom: 1.333vw;
          font-size: 17px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }
        p:nth-child(2) {
          font-size: 2.933vw;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
      }
      div:nth-child(1) {
        display: flex;
        width: 16.8vw;
        height: 16.8vw;
        border-radius: 16.8vw;
        overflow: hidden;
        margin-right: 6.133vw;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    //   第二部分样式
    .user_nicti {
      height: 10.667vw;
      padding: 0 16px;
      margin-bottom: 5.333vw;
      .notice-swipe {
        height: 10.667vw;
        line-height: 10.667vw;
        .nsernictiv_nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 2.933vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ff6108;
          }
          span {
            width: 18.667vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 2.667vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #aaaaaa;
          }
          img {
            width: 2.667vw;
            height: 3.467vw;
            margin-right: 1.333vw;
          }
        }
      }
    }
  }
  //  第三部分样式
  .index_nav {
    background-color: #fff;
    p {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 6.667vw;
      height: 14.933vw;
      span {
        font-size: 3.733vw;
        font-family: PingFang SC;
        font-weight: 400;
        color: #343434;
        flex: 1;
        margin-left: 2.667vw;
      }
      img:nth-child(1){
        width: 7.467vw;
        height: 7.467vw;
      }
      img:nth-child(3){
        width: 1.333vw;
        height: 2.4vw;
      }
    }
  }
}
.imkjimg{
  position: fixed;
  top: 50px;
  right: 16px;
  img{
    width: 17px;
    height: 17px;
  }
}
</style>