<template>
  <div class="search-video-wrap">
    <!-- 搜索部分 start -->
    <div class="search-input-wrap">
      <div class="left">
        <!-- <select @change="changeSearchType($event)" >
          <option value="video">视频</option>
          <option value="doctor">医生</option>
        </select> -->

        <div class="category" @click="popupShow=true">{{selectName}}</div>
      </div>
      <input
        class="middle"
        type="text"
        maxlength="14"
        v-model="userKey"
      />
      <div
        class="right"
        @click="handleSearchBtn"
      >搜索</div>
    </div>
    <!-- <div @click="popupShow=true">
      <van-icon name="apps-o" />
    </div> -->
    <van-overlay :show="loadingShow">
    <van-loading
      class="loading-icon"
      size="24px"
      vertical
      type="spinner"
      v-show="loadingShow"
    >加载中...</van-loading>
    </van-overlay>
    <!-- 搜索部分 end -->

    <!-- 搜索的视频部分 start -->
    <ShortWaterfallFlow
      v-if="searchType==='video'"
      :videoList="VideoList"
      @onload="GetVideoList"
      :options="{
       isLoading:loading,
       finished:finished,
      }"
      @click="jumpTo"
    ></ShortWaterfallFlow>
    <!-- 搜索的视频部分 end -->

    <!-- 搜索的医生部分 start -->
    <attentionDoctor
      :attentionData="DoctorList"
      v-else
      @load="GetDoctorList"
      :options="{
      isLoading: loadingDoct,
      finished: finishedDoct
    }"
    ></attentionDoctor>
    <!-- 搜索的医生部分 end -->

    <!-- 侧边栏 -->
    <van-popup v-model="popupShow" position="left" :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.departmentname,item.active)"
      >{{item.departmentname}}</div>
    </van-popup>
  </div>

</template>

<script>
import ShortWaterfallFlow from '@/components/ShortWaterfallFlow.vue';
import card from '@/components/common/Card.vue'
import attentionDoctor from '@/components/shortVideo/AttentionDoctor.vue'
import { searchVideo, searchDoctor, getSecondDepartmentList, getDepartmentListByEr } from '../../api/ShortVideo/ShortVideo'
export default {
  name: "SearchVideo",
  components: { ShortWaterfallFlow, card, attentionDoctor },
  data() {
    return {
      selectName: '全部科室',
      active: -1,
      typeList: [{ departmentname: "全部", id: "", active: true }], //疾病种类列表
      popupShow: false,       // 右侧弹出框
      loadingShow: false,      // 是否显示加载按钮
      // isRequest: false,    // 是否正在发请求
      searchType: 'video',   // 搜索类型
      userKey: '',      // 用户输入的内容
      DoctorList: [],   // 搜索的医生数据
      VideoList: [],    // 搜索的视频数据
      videoTotal: 0,    // 视频分页总数
      loading: true,
      finished: false,
      videoParams: {
        pageIndex: 1,
        pageSize: 10,
        name: "",
      },
      doctorParams: {
        pageIndex: 1,
        pageSize: 10,
        name: ""
      },
      loadingDoct: true,
      finishedDoct: false
    }
  },
  created() {
    console.log(this.$route.params)
    var DepartmentName = this.$route.params.departmentName
    if(DepartmentName!== undefined){
      this.chooseType(DepartmentName)
    }
  },
  methods: {
    // 获取二级科室分类列表数据
    getSecondList(){
      getDepartmentListByEr({pageIndex: 1, pageSize: 100})
      .then(({data})=>{
        console.log('科室列表', data)
        if(data.success) {
          this.typeList = [...this.typeList, ...data.items];
          this.typeList = this.typeList.map(v => {
            // v.
            v.active = v.id == "";
            return v;
          })
          console.log('typeList',this.typeList)
        }else {
          this.$toast(data.message);
        }
      })
      .catch(err=>{err});
    },

    // 选择疾病种类
    chooseType(DepartmentName, active) {
      this.selectName = DepartmentName;
      if (active) return (this.popupShow = false);
      // 设置active
      this.typeList = this.typeList.map(v => {
        if (v.departmentName == DepartmentName) {
          v.active = true;
        } else {
          v.active = false;
        }
        return v;
      });

      // 设置页面
      /* if(DepartmentName === '全部') {
        DepartmentName = ""
      } */

      if(DepartmentName === "全部") DepartmentName = "";
      let status = this.active;
      this.videoParams.departmentName = DepartmentName;
      let index = +status + 1;
      this.videoParams.pageIndex = 1;
      this.videoParams.name = this.userKey;
      this.videoParams.pageSize = 10;
      this.VideoList.length = 0;
      this.videoTotal = 0;
      this.finished = false;

      // 关闭侧边栏
      this.popupShow = false;
      this.GetVideoList();
    },

    changeSearchType(e) {
      this.searchType = e.target.value
    },

    // 搜索医生列表数据
    GetDoctorList() {
      this.loadingDoct = true;
      searchDoctor(this.doctorParams)
        .then((res) => {
          console.log('医生列表', res)
          this.loadingShow = false
          if (res.data.isSuccess) {
            this.DoctorList = [...this.DoctorList, ...res.data.resultObject];
            this.doctorParams.pageIndex++;
            this.loadingDoct = false;
            if (res.data.resultObject.length < this.doctorParams.pageSize) {
              this.finishedDoct = true
            }
          } else {
            this.$toast(res.data.resultMsg)
            this.loading = false
          }
        })
        .catch(error => {
          console.log(error);
        })
    },

    // 搜索视频列表数据
    GetVideoList() {
      this.loading = true
      searchVideo(this.videoParams)
        .then((res) => {
          console.log('视频列表',res)
          this.loadingShow = false
          if (res.data.isSuccess) {
            this.videoTotal = res.data.pager.totalItemCount
            console.log('totalcount', this.videoTotal)
            this.VideoList = [...this.VideoList, ...res.data.resultObject];
            this.videoParams.pageIndex++;
            this.loading = false;
            if (this.VideoList.length === this.videoTotal) {
              this.finished = true;
            }
          } else {
            this.$toast(res.data.resultObject)
            this.loading = false
          }
        })
        .catch(error => {
          console.log(error)
        })
    },

    // 跳转
    jumpTo(currentVideoIndex, currentVideoList, currentPageIndex) {
      console.log(currentVideoIndex, currentVideoList, currentPageIndex)
      localStorage.setItem("currentVideoList", JSON.stringify(currentVideoList) )


      this.$router.push({ name: "videoPlay", query: { currentVideoIndex, 
      // currentVideoList, 
      currentPageIndex, source: "searchVideo", userKey: this.userKey, videoTotal: this.videoTotal } })
    },

    // 点击搜索
    handleSearchBtn() {
      // this.videoParams.DepartmentName = "";
      this.loadingShow = true;
      this.videoParams.pageIndex = 1;
      this.finished = false;
      this.finishedDoct = false;
      this.doctorParams.pageIndex = 1;
      this.VideoList.length = 0;
      this.DoctorList.length = 0;
      if (this.searchType === 'video') {
        this.videoParams.name = this.userKey;
        this.GetVideoList();

      } else {
        this.doctorParams.name = this.userKey;
        this.GetDoctorList();
      }
    },
    // 获取疾病分类
    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);
        }
      });
    },
  },
  mounted() {
    this.GetVideoList()
    // this.VideoGetItemizeList();
    // this.GetDoctorList();
    this.getSecondList();
  }
}
</script>

<style lang="less" scoped>
.search-video-wrap {
  padding: 0.18rem 0.2rem 0;
  height: 100%;
  background-color: #fefefe;

  .search-input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    height: 0.7rem;
    background-color: #fff;
    border: 1px solid #b9b9b9;
    border-right: none;
    border-radius: 0.2rem;

    .left {
      position: relative;
      border-right: 1px solid #e4e4e4;
      .category {
        border: none;
        background-color: #fff;
        outline: none;
        // min-width: 1rem;
        width: 2rem;
        padding: 0 0.4rem;
        /* //隐藏select的下拉图标 */
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
      }
      &::before {
        position: absolute;
        content: "";
        width: 0.21rem;
        height: 0.16rem;
        background: url("../../static/imgs/arrow-down.png") no-repeat center
          center / 100%;
        top: 36%;
        right: 6%;
      }
    }

    .middle {
      flex: 1;
      height: 100%;
      text-indent: 0.2rem;
    }

    .right {
      // margin-left: 2rem;
      width: 1.12rem;
      line-height: 0.7rem;
      text-align: center;
      background-color: #4c95fb;
      border-top-right-radius: 0.15rem;
      border-bottom-right-radius: 0.15rem;
      color: #fff;
      font-size: 0.3rem;
    }
  }
}

.loading-icon {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}

.van-overlay {
  background-color: rgba(0, 0, 0, 0.1);
}


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

  &:active {
    color: #00a4ff;
  }

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