<template>
  <div class="contentBody" v-if="learnChildList.length > 0">
    <van-tabs
      :active="active"
      type="line"
      line-height="0px"
      @click="childChange"
    >
      <!-- 子目录 -->
      <van-tab
        v-for="(tabItem, tabIndex) in learnChildList"
        :key="tabIndex"
        :title="tabItem.name"
        :title-style="titleStyle"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            v-for="(contentItem, contentIndex) in contentList"
            :key="contentIndex"
            @click="chooseContent(contentIndex)"
          >
            <div slot="default" class="contentItemDiv">
              <div class="contentItemTitleTitleRow">
                <div class="contentItemTitle">{{ contentItem.name }}</div>
                <div
                  v-if="contentItem.isNeedStudyToday"
                  class="contentItemstates"
                >
                  今日必学
                </div>
              </div>
              <div class="contentItemDescription">
                <div class="contentItemDescriptionTime">
                  {{
                    formateDatesFun(contentItem.createdTime) ||
                      contentItem.createdTime
                  }}
                </div>
                <div class="contentItemDescriptionStudyNeedTime">
                  所需学习时间：{{
                    getTimeHoursMinuteSecondsFun(contentItem.readTimeInSec)
                  }}
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from "vant";
import { getTodayStr } from "@/utils/date";
import { mapState } from "vuex";
export default {
  name: "page-learn-child",
  components: {},
  props: {
    // 分组的数据列表
    parentId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      active: 0,
      titleStyle: {
        fontSize: "10px"
      },
      choosedChildIndex: 0,
      contentList: [],
      loading: false,
      finished: false,
      learnChildList: [],
      learnPage: 0,
      learnSize: 10
    };
  },
  computed: {
    ...mapState({
      chooseEngneeringWork: state => state.user.chooseEngneeringWork
    })
  },
  created() {},
  mounted() {
    this.getChildList();
  },
  destroyed() {},
  watch: {
    // 监听：工种
    chooseEngneeringWork(value) {
      if (value.value) {
        this.getContentList(); // 查询：考试的场次列表信息
      }
    }
  },
  methods: {
    //   查询子目录
    getChildList() {
      this.$store.commit("toggleLoading", true);
      let path = {
        categoryId: this.parentId
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_CATEGORIES_CATEGROYID, path))
        .then(res => {
          this.learnChildList = res.data;
          this.$store.commit("toggleLoading", false);
          this.learnPage = 0;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    childChange(index) {
      this.choosedChildIndex = index;
      this.learnPage = 0;
      this.getContentList();
    },
    //   查询子目录
    getContentList() {
      this.$store.commit("toggleLoading", true);
      let path = {
        categoryId: this.learnChildList[this.choosedChildIndex].id
      };
      let params = {
        engineertypeid: this.chooseEngneeringWork.id,
        page: this.learnPage,
        size: this.learnSize
      };
      this.$_http
        .get(
          this.$pathParams(
            this.$_API.JTXT_GET_CATEGORIES_CATEGROYID_MATERIALS,
            path
          ),
          { params }
        )
        .then(res => {
          this.formatNeedStudyTodayFun(res.data.content);
          // 分页到底了
          this.finished = res.data.last;
          this.learnPage++;
          this.$store.commit("toggleLoading", false);
        })
        .catch(() => {
          Toast("系统异常");
          this.$store.commit("toggleLoading", false);
        });
    },
    // 判断是否今日必学
    formatNeedStudyTodayFun(datas) {
      let todayStr = getTodayStr();
      datas.forEach(item => {
        item.tags.forEach(itemChild => {
          if (itemChild === todayStr) {
            item.isNeedStudyToday = true;
          }
        });
      });
      this.contentList = datas;
    },
    onLoad() {
      this.getContentList();
    },
    chooseContent(index) {
      this.$router.push({
        name: "learn-content",
        params: { materialId: this.contentList[index].id }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin";
.contentBody {
  background-color: #fff;
  .contentItemDiv {
    width: 100%;
    .contentItemTitle {
      font-size: 0.65rem;
    }

    .contentItemTitleTitleRow {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .contentItemTitle {
        text-align: left;
        font-size: 0.65rem;
        color: #000;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-wrap:break-word;
        white-space:pre-wrap;
        display: -webkit-box;
        -webkit-box-orient: ho;
        -webkit-line-clamp:10;
      }
      .contentItemstates {
        font-size: 0.6rem;
        color: #f56c6c;
        border-radius: 0.2rem;
        margin-left: 0.5rem;
        flex-wrap: nowrap;
        white-space: nowrap;
      }
    }
    .contentItemDescription {
      margin-top: 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .contentItemDescriptionTime {
        color: #696969;
        font-size: 0.55rem;
      }
      .contentItemDescriptionStudyNeedTime {
        color: #0088e9;
        font-size: 0.55rem;
      }
    }
  }
  .my-swipe .van-swipe-item {
    background-color: #7cc8ff;
    height: 10rem;
  }
}
</style>