<!-- 专家到家 -->
<template>
  <div class="main">
    <!-- 搜索 -->
    <van-search
      v-model="searchValue"
      placeholder="请输入视频标题"
      shape="round"
      readonly
      class="search"
      @click="$router.push({ name: 'SearchVideo' })"
    ></van-search>
    <!-- banner -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#00a4ff">
        <van-swipe-item @click="jumpTo('//v.360lj.com/source.html?keyword=https://ue.github.com')">
          <img :src="require('../../../assets/images/specialist/swiper.jpg')" />
        </van-swipe-item>
      </van-swipe>
      <!-- <van-image :src="require('../../../assets/images/banner/banner1.png')" v-if="!images.length" />
      <van-swipe :autoplay="3000" indicator-color="#00a4ff" v-else>
        <van-swipe-item
          v-for="(item, index) in images"
          :key="index"
          style="display: flex;align-items: center;justify-content: center"
        >
          <a
            :href="
              item.AccessoryJosn ? item.AccessoryJosn : 'javascript:void(0);'
            "
          >
            <van-image fit="cover" :src="item.AccessoryUrl.replace(/(http:|https:)/, '')">
              <template v-slot:error>图片加载失败...</template>
              <template v-slot:loading>
                <van-loading type="circular" size="40" />
              </template>
            </van-image>
          </a>
        </van-swipe-item>
      </van-swipe>-->
    </div>

    <!-- 科室分类 -->
    <div class="nav">
      <div class="nav_box">
        <div class="item" @click="getData('内科')"></div>
        <div class="item" @click="getData('男科')"></div>
        <div class="item" @click="getData('妇科')"></div>
        <div class="item" @click="getData('妇产科')"></div>
        <div class="item" @click="getData('骨科')"></div>
        <div class="item" @click="getData('儿科')"></div>
        <div class="item" @click="getData('康复科')"></div>
        <div class="item" @click="$router.push({ name: 'SearchVideo' })"></div>
      </div>
    </div>
    <!-- 热门活动 -->
    <div class="activity">
      <div class="act_title">热门活动</div>
      <div class="act_center">
        <!-- 糖尿专场 -->
        <div
          class="act_1"
          @click="jumpTo('//v.360lj.com/custom/tn.html?keyword=https://ue.github.com')"
        ></div>
        <!-- 神经专场 -->
        <div
          class="act_2"
          @click="jumpTo('//v.360lj.com/custom/sj.html?keyword=https://ue.github.com')"
        ></div>
        <!-- 呼吸专场 -->
        <div
          class="act_3"
          @click="jumpTo('//v.360lj.com/custom/hx.html?keyword=https://ue.github.com')"
        ></div>
      </div>
    </div>
    <!-- 推荐视频 -->
    <div class="recommends">
      <div @click="$router.push({ name: 'SearchVideo' })"></div>
    </div>
    <ShortWaterfallFlow
      style="padding: .1rem .36rem"
      :isShow="true"
      :videoList="VideoList"
      @onload="GetVideoList"
      finishedText
      :options="{
        isLoading: loading,
        finished: finished
      }"
      @click="jumpToVideoDetail"
    ></ShortWaterfallFlow>

    <div v-if="VideoList.length" class="more" @click="$router.push({ name: 'SearchVideo' })">更多 >></div>
  </div>
</template>
<script>
import WaterfallFlow from "@/components/WaterfallFlow.vue";
import ShortWaterfallFlow from "@/components/ShortWaterfallFlow.vue";
import { getVideoByHomePage } from "@/api/ShortVideo/ShortVideo";
export default {
  name: "specialist",
  data() {
    return {
      searchValue: "",
      videoTotal: 0, // 分页数据总数
      images: [],
      doctorList: [],
      // 上拉加载on
      // loading: true,
      // finished: false
      // 上拉加载end
      loading: false,
      finished: false,
      VideoList: [],
      params: {
        pageIndex: 1,
        pageSize: 10,
        name: ""
      }
    };
  },
  components: {
    WaterfallFlow,
    ShortWaterfallFlow
    /**TabBar*/
  },
  methods: {
    getData(value) {
      // console.log(value);
      this.$router.push({
        name: "SearchVideo",
        params: { DepartmentName: value }
      });
    },
    //跳转到小程序
    tiaozhuan(url) {
      if (!url) {
        return this.$toast("因疫情问题，暂不提供服务");
      }
    },
    //跳转到home组件的已结束
    goHome() {
      this.$router.push({ name: "home", params: { index: 2 } });
    },
    jumpTo(url, query = {}) {
      // url  => 字符串
      if (!url) {
        return this.$toast("功能正在开发中，敬请期待~~~");
      }
      if (url.search("http") >= 0) {
        return (location.href = url);
      }
      this.$router.push({ name: url, query: query });
    },
    // 获取首页轮播图
    GetRotationChartList() {
      this.$http.GetRotationChartList(1).then(({ data }) => {
        if (data.IsSuccess) {
          var arr = data.ResultObject.filter(a => !a.IsDelete);
          this.images = arr;
        } else {
          // 失败
        }
      });
    },
    // 获取推荐视频列表
    GetVideoList() {
      this.isRequest();
      this.loading = true;
      // 使用本地医生数据
      // let VideoList = JSON.parse(sessionStorage.getItem("VideoList"));
      // if (VideoList) {
      //   this.VideoList = VideoList;
      //   return;
      // }

      // var obj = {
      //   pageIndex: 1,
      //   pageSize: 20
      // };
      /*       this.loading = true;
      this.$http.VideoGetList(obj).then(({ data }) => {
        this.loading = false;
        if (data.IsSuccess) {
          this.VideoList = data.ResultObject;
          // 本地缓存
          sessionStorage.setItem("VideoList", JSON.stringify(this.VideoList));
          this.finished = true;
        } else {
          this.$toast(data.ResultMsg);
        }
      }); */

      getVideoByHomePage(this.params)
        .then(({ data }) => {
          this.$toast.clear();
          this.loading = false;
          if (data.IsSuccess) {
            this.videoTotal = data.Pager.TotalItemCount;
            if (this.VideoList.length >= data.Pager.TotalItemCount) {
              // 没有更多数据了
              this.finished = true;
              return;
            }
            this.VideoList = [...this.VideoList, ...data.ResultObject];
            this.params.pageIndex++;
          } else {
            this.$toast.clear();
          }
        })
        .catch(err => {
          this.$toast.clear();
        });
    },
    // 点击视频跳转
    jumpToVideoDetail(currentVideoIndex, currentVideoList, currentPageIndex) {
      // this.$router.push({ name: "healthCourse", query: { id } });
      console.log(currentVideoIndex, currentVideoList, currentPageIndex);
      this.$router.push({
        name: "videoPlay",
        query: {
          currentVideoIndex,
          currentVideoList,
          currentPageIndex,
          videoTotal: this.videoTotal,
          source: "specialist"
        }
      });
    }
  },
  created() {
    this.GetVideoList();
    // 获取轮播图数据
    this.GetRotationChartList();
  }
  // activated() {
  //   console.log("缓存");
  //   // 因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的
  //   if (this.$route.meta.isUseCache) {
  //     // this.list = []; // 清空原有数据
  //     // this.onLoad(); // 这是我们获取数据的函数
  //   }
  //   this.$route.meta.isUseCache = false;
  // }

  // 从Detail页面到list页面才刷新数据
  // beforeRouteLeave(to, from, next) {
  //   if (to.name == "Detail") {
  //     from.meta.isUseCache = true;
  //   }
  //   next();
  // }
};
</script>
<style lang="less" scoped>
img {
  width: 100%;
  height: 100%;
}

/** 字体隐藏 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.main {
  .swiper {
    padding-top: 0.1rem;
    padding-left: 0.36rem;
    padding-right: 0.36rem;
    height: 3rem;
    border-radius: 0.1rem;
    overflow: hidden;

    /deep/ .van-swipe {
      height: 100%;
    }
  }
  .nav {
    background: url("../../../assets/images/specialist/nav.png") no-repeat
      center/100%;
    height: 3.5rem;
    .nav_box {
      width: 6.94rem;
      height: 3.18rem;
      margin-left: 0.28rem;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 1.735rem;
        height: 1.59rem;
      }
    }
  }
  .activity {
    width: 6.94rem;
    margin-left: 0.28rem;
    .act_title {
      text-align: left;
      font-size: 0.3rem;
      font-weight: bold;
      line-height: 0.4rem;
    }
    .act_center {
      display: flex;
      width: 100%;
      .act_1 {
        flex: 1;
        background: url("../../../assets/images/specialist/activity_01.png")
          no-repeat center/100%;
        height: 2.53rem;
      }
      .act_2 {
        flex: 1;
        background: url("../../../assets/images/specialist/activity_02.png")
          no-repeat center/100%;
        height: 2.53rem;
        margin-left: 0.2rem;
        margin-right: 0.2rem;
      }
      .act_3 {
        flex: 1;
        background: url("../../../assets/images/specialist/activity_03.png")
          no-repeat center/100%;
        height: 2.53rem;
      }
    }
  }

  .recommends {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    background: url("../../../assets/images/specialist/home.png") no-repeat
      center/100%;
    height: 1.28rem;
    div {
      width: 1.3rem;
      height: 0.94rem;
      margin-left: 5.8rem;
      margin-top: 0.14rem;
    }
  }
  .partition {
    width: 100%;
    height: 0.1rem;
    background-color: #f4f4f4;
  }

  // 推荐医生
  .recommend {
    display: flex;
    align-items: center;
    padding: 0.2rem;
    border-radius: 0.1rem;
    font-size: 0.28rem;
    margin-bottom: -0.3rem;
    justify-content: space-between;
    align-items: center;
    > div {
      display: flex;
      align-items: center;
      color: #333333;
      font-size: 0.28rem;
    }
    .star {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffd352;
      width: 0.35rem;
      height: 0.35rem;
      border-radius: 50%;
      margin-right: 0.2rem;
    }
  }

  .doctor-list {
    padding: 0.2rem 0;
    .list {
      margin-top: 0.2rem;
      padding: 0.15rem 0.15rem 0;
      border-radius: 0.1rem;
      background: #fff;

      // 医生信息
      .patientInfo {
        display: flex;

        .img {
          margin-right: 0.28rem;
          flex-shrink: 0;
        }

        .name-info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 0.26rem;
          text-align: left;

          .name {
            font-size: 0.3rem;
            span {
              font-size: 0.26rem;
            }
          }

          > div {
            line-height: 0.45rem;
            color: #4c4c4c;
            font-weight: 600;
            span {
              margin-right: 0.1rem;
            }
          }
        }

        .amend {
          flex: 1;
          text-align: right;
          line-height: 1rem;
        }
      }

      // 出诊安排
      .plan {
        font-size: 0.28rem;
        margin: 0.1rem 0;
        text-align: left;
        .recently {
          display: flex;
          color: #999;
          height: 0.4rem;
          line-height: 0.4rem;
          font-size: 0.26rem;
          text-align: left;
          span {
            flex-shrink: 0;
          }
          .ellips {
            color: #4ca0ff;
          }

          &.number {
            font-size: 0.24rem;
          }
        }

        .order-btn {
          display: flex;
          flex-direction: row-reverse;
          border-top: solid #f6f6f6 0.01rem;
          padding: 0.2rem;

          .btn {
            width: 1.6rem;
            height: 0.5rem;
            line-height: 0.5rem;
            text-align: center;
            background-color: #4ca0ff;
            box-shadow: 0.01rem 0.02rem 0.09rem 0rem rgba(76, 160, 255, 0.35);
            border-radius: 0.25rem;
            color: #fff;
            margin: 0 0.2rem;
            &.yellow {
              background-color: #ffb00f;
            }
          }
        }
      }
    }
  }

  // 更多
  .more {
    font-size: 0.3rem;
    color: #00a4ff;
    line-height: 0.4rem;
    margin-bottom: 1rem;
    margin-top: 0.4rem;
  }
}
</style>
