<template>
  <div class="saveInfoList">
    <van-tabs
      v-model="active"
      title-active-color="#1D18BC"
      color="#1D18BC"
      title-inactive-color="#666666"
      line-width="100px"
      @change="changeTab"
    >
      <van-tab
        v-for="(item, index) in dictValue"
        :key="item.value"
        :title="item.label"
      >
        <div class="placeBox">
          <van-collapse v-model="activeNames">
            <van-collapse-item name="1">
              <template #title>
                <div>{{ year }}年</div>
              </template>
              <ul>
                <li
                  v-for="(item, index) in yearList"
                  :key="index"
                  style="padding: 2vw 0"
                  @click="selectYear(item)"
                >
                  {{ item }}
                </li>
              </ul>
            </van-collapse-item>
          </van-collapse>
          <van-collapse v-model="activeNames">
            <van-collapse-item name="2">
              <template #title>
                <div>{{ read }}</div>
              </template>
              <ul>
                <li
                  v-for="(item, index) in ydList"
                  :key="index"
                  style="padding: 2vw 0"
                  @click="selectYd(item)"
                >
                  {{ item }}
                </li>
              </ul>
            </van-collapse-item>
          </van-collapse>
        </div>
        <ul>
          <van-pull-refresh
            v-model="isDownLoading"
            @refresh="onDownRefresh"
            success-text="加载成功"
          >
            <van-list
              ref="vanList"
              v-model="isUpLoading"
              :finished="upFinished"
              :immediate-check="false"
              :offset="10"
              finished-text="加载完成"
              @load="onLoadList"
              v-if="isRef"
            >
              <li
                v-for="(item, index) in saveList"
                :key="index"
                class="saveLi"
                @click="toDetail(item)"
              >
                <div class="saveLiTit">
                  <div class="tt">{{ item.title }}</div>
                  <div :class="item.isRead == 1 ? 'isRe' : 'unRe'">
                    {{ item.isRead == 1 ? "已阅" : "未阅" }}
                  </div>
                </div>
                <div class="msg">
                  {{ item.info }}
                </div>
                <div class="line"></div>
                <div class="itemYear">{{ item.createdAt }}</div>
              </li>
            </van-list>
          </van-pull-refresh>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from "vant";
import auth from "@/service/auth";
import { findSafetyKnowledgeAppInOutList } from "@/service/api_savety";
import { getByCodes } from "@/service/api_settle_out";
export default {
  components: {},
  data() {
    return {
      active: 0,
      dictValue: [{ label: "全部", value: 0 }],
      activeNames: ["0"],
      year: "2024",
      read: "未阅",
      yearList: [],
      ydList: ["未阅", "已阅"],
      saveList: [
        // { tit: '年度安全计划', isRead: false, msg: '美国是一个由移民组成的多种族、多元文化的国家，种族歧视一直深深植根于美国的历史与现…', year: '2024-06-21 ' },
        // { tit: '年度安全计划', isRead: true, msg: '美国是一个由移民组成的多种族、多元文化的国家，种族歧视一直深深植根于美国的历史与现…', year: '2024-06-21 ' }
      ],
      pages: {
        pageNum: 1,
        pageSize: 10,
        companyId: auth.currUser().id,
        knowledgeType: "",
        attributiveYear: 2024,
        isRead: 0,
      },
      isUpLoading: false,
      isDownLoading: false,
      upFinished: false,
      total: 0,
      isRef: false,
    };
  },
  mounted() {
    console.log("auth", auth.currUser());
    this.getTabTit();
    this.getYear();
    this.getList();
  },
  methods: {
    getTabTit() {
      getByCodes({ codes: JSON.stringify(["knowledge_type"]) }).then((res) => {
        // console.log(JSON.parse(res.knowledge_type.dictValue))
        this.dictValue.push(...JSON.parse(res.knowledge_type.dictValue));
        // console.log(this.dictValue)
      });
    },
    getList() {
      findSafetyKnowledgeAppInOutList(this.pages).then((res) => {
        console.log(res);
        if (res.rows.length) {
          this.isDownLoading = false;
          this.saveList.push(...res.rows);
          this.isUpLoading = false;
          if (this.saveList.length >= res.total) {
            this.upFinished = true;
          }
        } else if (res.errno == 426) {
          Toast(res.errmsg);
          this.$router.push("/login");
        } else {
          this.saveList = [];
          this.isDownLoading = false;
          this.isUpLoading = false;
          this.upFinished = true;
        }
        this.isRef = true;
      });
    },
    getYear() {
      const year = new Date().getFullYear();
      for (let j = 2020; j <= year; j++) {
        this.yearList.push(j);
      }
    },
    selectYear(item) {
      this.year = item;
      this.pages.attributiveYear = item;
      this.onDownRefresh();
      this.activeNames = ["0"];
    },
    selectYd(item) {
      this.read = item;
      if (item === "未阅") {
        this.pages.isRead = 0;
        this.onDownRefresh();
      } else if (item === "已阅") {
        this.pages.isRead = 1;
        this.onDownRefresh();
      }
      this.activeNames = ["0"];
    },
    toDetail(item) {
      this.$router.push({
        path: "/saveInfo",
        query: { info: JSON.stringify(item) },
      });
    },
    onDownRefresh: function () {
      this.saveList = [];
      this.pages.pageNum = 1;
      this.isUpLoading = true;
      this.upFinished = false;
      this.getList();
    },
    onLoadList() {
      this.pages.pageNum++;
      this.isDownLoading = true;
      this.getList();
    },
    changeTab(item) {
      console.log(item);
      this.pages.knowledgeType = item;
      this.onDownRefresh();
    },
  },
};
</script>

<style lang="scss" >
.saveInfoList {
  /deep/.van-tabs__wrap {
    height: 100px;
    background: #ffffff;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
    //margin-bottom: 10px;
  }
  .placeBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5vw 5vw 4vw 5vw;
    background: white;
    height: 15vw;
    .van-cell {
      background-color: rgba(29, 24, 188, 0.05) !important;
      color: rgba(29, 24, 188, 1);
      width: 95%;
      margin-left: 2.5%;
      border-radius: 1vw;
    }
  }
  .van-hairline--top-bottom:after,
  .van-hairline-unset--top-bottom:after {
    border: none !important;
  }
  .saveLi {
    background: white;
    margin: 5vw 5vw;
    padding: 5vw 4vw;
    font-size: 4vw;
    border-radius: 2vw;
    .saveLiTit {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 0 2vw 0;
      .tt {
        font-size: 4.2vw;
        color: rgba(51, 51, 51, 1);
      }
      .isRe {
        background: rgba(221, 153, 50, 0.15);
        color: rgba(221, 153, 50, 1);
        padding: 2vw 4vw;
        border-radius: 1vw;
      }
      .unRe {
        background: rgba(45, 178, 112, 0.15);
        color: rgba(45, 178, 112, 1);
        padding: 2vw 4vw;
        border-radius: 1vw;
      }
    }
    .msg {
      font-size: 3.8vw;
      color: rgba(119, 119, 119, 1);
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      diplay: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      margin: 3vw 0;
      line-height: 5.5vw;
    }
    .itemYear {
      margin: 3vw 0 0 0;
      color: rgba(170, 170, 170, 1);
    }
  }
  .van-collapse-item__content {
    position: relative !important;
    z-index: 10 !important;
    width: 95%;
    margin-left: 2.5%;
  }
  .van-tab {
    font-size: 3.5vw !important;
  }
  .van-tabs__wrap {
    overflow: hidden;
    overflow-x: scroll;
  }
  .van-tabs__nav:first-child {
    width: 130vw !important;
  }
}
</style>
