<!-- 健康视频首页 -->
<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <main class="main">
      <!-- 搜索 -->
      <van-search
        v-model="searchValue"
        placeholder="搜药品、疾病、症状"
        show-action
        shape="round"
        readonly
        class="search"
        @click="bottomShow=true;"
      >
        <div slot="action" @click="popupShow=true">
          <van-icon name="apps-o" />
        </div>
      </van-search>

      <!-- 分类 -->
      <div class="classify">
        <van-tabs
          v-model="active"
          title-active-color="#0691f9"
          color="#0691f9"
          animated
          swipeable
          sticky
        >
          <van-tab v-for="item in tabOption" :title="item.title" :key="item.name" :name="item.name">
            <WaterfallFlow
              :videoList="item.videoList"
              @load="loadVideo"
              :options="{
                            isLoading:loading,
                            finished:item.finished
                        }"
              @click="jumpTo"
            ></WaterfallFlow>
          </van-tab>
        </van-tabs>
      </div>

      <!-- 侧边栏 -->
      <van-popup v-model="popupShow" position="right" :style="{ maxHeight: '100vh' ,width:'40vw'}">
        <div
          class="van-hairline--bottom diseases"
          :class="{active:item.active}"
          v-for="item in typeList"
          :key="item.ID"
          @click="chooseType(item.ID,item.active)"
        >{{item.CourseTypeName}}</div>
      </van-popup>

      <!-- 搜索组件 -->
      <van-popup v-model="bottomShow" position="bottom" :style="{ height: '100vh'}">
        <VideoSearch @search="search" @clear="_=>{}" @close="bottomShow=false;"></VideoSearch>
      </van-popup>
    </main>
  </van-pull-refresh>
</template>
<script>
import WaterfallFlow from "@/components/WaterfallFlow"; //瀑布流
import VideoSearch from "../components/VideoSearch"; //搜索组件
export default {
  name: "healthyVideo",
  components: { WaterfallFlow, VideoSearch },
  data() {
    return {
      active: "-1", //tab切换
      tabOption: [
        {
          name: "-1",
          title: "全部",
          videoList: [], //视频列表
          pageIndex: 1, // 页码
          finished: false //是否已加载完成，加载完成后不再触发load事件
        },
        {
          name: "0",
          title: "免费",
          videoList: [],
          pageIndex: 1, // 页码
          finished: false //是否已加载完成，加载完成后不再触发load事件
        },
        {
          name: "1",
          title: "精品",
          videoList: [],
          pageIndex: 1, // 页码
          finished: false //是否已加载完成，加载完成后不再触发load事件
        }
      ],
      typeList: [{ CourseTypeName: "全部", ID: "", active: true }], //疾病种类列表
      loading: false, //加载中
      searchValue: "", //搜索关键字
      popupShow: false, // 右侧弹出框
      bottomShow: false, //底部弹出框
      pageSize: 10,
      pageIndex: 1,
      isLoading: false //下拉刷新状态
    };
  },
  created() {
    // 获取疾病分类
    this.VideoGetItemizeList();
  },
  methods: {
    // 页面搜索
    search(value) {
      this.bottomShow = false;
      this.searchValue = value;
      this.onSearch(value);
    },
    // 搜索方法
    onSearch(value) {
      // 设置页面
      let status = this.active;
      let index = +status + 1;
      this.$set(this.tabOption[index], "finished", false);
      this.$set(this.tabOption[index], "videoList", []);
      this.$set(this.tabOption[index], "pageIndex", 1);
      this.loadVideo();
    },
    // 加载视频数据
    loadVideo() {
      let status = this.active;
      let index = +status + 1;
      if (this.tabOption[index].finished) return (this.isLoading = false);
      if (this.loading) return (this.isLoading = false);
      this.loading = true;

      let obj = {
        typeid: this.typeList.filter(v => v.active)[0]["ID"], // (string, optional): 分类id , -1 全部
        status, // (integer, optional): -1 全部 0不收费 1收费 ,
        doctorid: null, // (string, optional), '' 全部
        pageIndex: this.tabOption[index]["pageIndex"]++, // (integer, optional): 页码 ,
        pageSize: this.pageSize, // (integer, optional): 页大小 ,
        name: this.searchValue // (string, optional): 关键词
      };
      this.$http
        .VideoGetList(obj)
        .then(res => {
          this.loading = false;
          this.isLoading = false;
          if (res.data.IsSuccess) {
            // 设置视频列表
            this.$set(this.tabOption[index], "videoList", [
              ...this.tabOption[index]["videoList"],
              ...res.data.ResultObject
            ]);

            // 加载完成
            if (res.data.ResultObject.length < this.pageSize) {
              this.$set(this.tabOption[index], "finished", true);
            }
          } else {
            this.$toast(res.data.ResultMsg);
          }
        })
        .catch(err => {
          this.isLoading = false;
          this.$toast("网络错误,请刷新重试！");
        });
    },
    // 获取疾病分类
    VideoGetItemizeList() {
      this.$http.VideoGetItemizeList().then(res => {
        if (res.data.IsSuccess) {
          this.typeList = [...this.typeList, ...res.data.ResultObject];
          this.typeList = this.typeList.map(v => {
            v.active = v.ID == "";
            return v;
          });
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    },
    // 点击视频跳转
    jumpTo(id) {
      this.$router.push({ name: "healthCourse", query: { id } });
    },
    // 选择疾病种类
    chooseType(id, active) {
      console.log("id---active: ", id, active);
      if (active) return (this.popupShow = false);    // 满足此条件就不会再往下走了
      // 设置active
      console.log(this.typeList);
      this.typeList = this.typeList.map(v => {
        if (v.ID == id) {
          v.active = true;
        } else {
          v.active = false;
        }
        return v;
      });

      // 设置页面
      let status = this.active;
      let index = +status + 1;
      this.$set(this.tabOption[index], "pageIndex", 1);
      this.$set(this.tabOption[index], "videoList", []);
      this.$set(this.tabOption[index], "finished", false); //设置为false  让loadVideo 函数重新加载

      // 关闭侧边栏
      this.popupShow = false;
      this.loadVideo();
    },
    // 刷新
    onRefresh() {
      this.onSearch(this.searchValue);
    }
  },
  watch: {
    bottomShow(newValue, old) {
      if (newValue) {
        document.title = "搜索";
      } else {
        document.title = "健康视频首页";
      }
    }
  }
};
</script>
<style lang='less' scoped>
.main {
  min-height: 100vh;
  padding-bottom: 1rem;
  .search {
    /deep/ .van-search__action > div {
      display: flex;
      align-items: center;
    }

    .van-icon {
      font-size: 20px;
    }
  }

  // 疾病种类
  .diseases {
    font-size: 0.3rem;
    line-height: 0.5rem;
    padding: 0.2rem;
    color: #969696;

    &:active {
      color: #00a4ff;
    }

    &.active {
      color: #00a4ff;
    }
  }
}
</style>