<!-- 找专家 -->
<template>
  <div class="searchExpert">
    <!-- 搜索框 -->
    <div class="search">
      <van-search placeholder="搜索医生" v-model="searchValue" @search="search" />
    </div>

    <!-- 筛选 -->
    <van-dropdown-menu class="filtrate">
      <!-- 科室 -->
      <van-dropdown-item :title="departmentTitle" ref="department">
        <ChooseDepartment @confirm="departmentConfirm" @reset="resetConfirm"></ChooseDepartment>
      </van-dropdown-item>
      <!-- 医生职称 -->
      <van-dropdown-item
        :title="value2==0?'医生职称':''"
        v-model="value2"
        :options="option2"
        @change="search"
      />
      <!-- 医院等级 -->
      <van-dropdown-item
        :title="value3==-1?'医院等级':''"
        v-model="value3"
        :options="option3"
        @change="search"
      />
    </van-dropdown-menu>

    <!-- 医生专场列表 -->
    <van-skeleton title avatar :row="3" :loading="pageLoading">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="doctor-list"
        v-if="doctorList.length"
      >
        <van-cell v-for="(item,index) in doctorList" :key="index" class="list shadow">
          <div class="patientInfo" @click="$router.push({name:'doctorDetail',query:{id:item.ID}})">
            <van-image
              :src="item.HeadImg?item.HeadImg:require('@/assets/images/doctor.png')"
              width="1.2rem"
              height="1.2rem"
              fit="cover"
              round
              class="img"
            ></van-image>

            <div class="name-info">
              <div class="name">
                {{item.DoctorName}}
                <span>{{item.PositionalTitles | filterDoctorTitles}}</span>
              </div>
              <div>
                <span>{{item.HospitalDepartments}}</span>
              </div>
              <div class="sex">{{item.HospitalName}}</div>
            </div>

            <div class="amend">
              <van-icon name="arrow" />
            </div>
          </div>
          <div
            class="description"
            @click="$router.push({name:'doctorDetail',query:{id:item.ID}})"
          >擅长：{{item.Skill?item.Skill:'暂无'}}</div>
          <!-- 问诊 -->
          <div class="consult">
            <div class="price">暂未开通</div>
            <div class="btn" @click="goConsult">发起问诊</div>
          </div>
        </van-cell>
      </van-list>

      <van-loading v-else-if="searchLoading" size="24px" style="padding-top: 2.6rem">加载中...</van-loading>
      <div v-else style="padding-top: 2.6rem ;font-size:.4rem;">暂无结果</div>
    </van-skeleton>
    <van-skeleton title avatar :row="3" :loading="pageLoading" v-for="num in 5" :key="num"></van-skeleton>
  </div>
</template>
<script>
import ChooseDepartment from "../components/ChooseDepartment.vue"; //选择科室
export default {
  name: "searchExpert",
  data() {
    return {
      searchValue: "", //搜索内容
      /** 筛选参数on  */
      departmentTitle: "科室",
      departmentId: 0, //科室id
      value2: 0, //医生职称
      option2: [
        {
          text: "医生职称",
          value: 0
        },
        {
          text: "主任医生",
          value: 1
        },
        {
          text: "副主任医生",
          value: 2
        },
        {
          text: "主治医生",
          value: 3
        },
        {
          text: "医师",
          value: 4
        }
      ],
      value3: -1, //医院等级
      option3: [
        { text: "医院等级", value: -1 },
        { text: "三级特等", value: 0 },
        { text: "三级甲等", value: 1 },
        { text: "三级乙等", value: 2 },
        { text: "三级丙等", value: 3 },
        { text: "二级甲等", value: 4 },
        { text: "二级已等", value: 5 },
        { text: "二级丙等", value: 6 },
        { text: "一级甲等", value: 7 },
        { text: "一级已等", value: 8 },
        { text: "一级丙等", value: 9 }
      ],
      /** 筛选参数end  */
      /** 医生专场列表 */
      doctorList: [],
      // 上拉加载on
      loading: false,
      finished: false,
      // 上拉加载end
      pageIndex: 1,
      // isLoading: false, //页面是否刷新
      pageLoading: true, // 页面是否第一次进来
      searchLoading: false //是否正在搜索
    };
  },
  components: {
    ChooseDepartment
  },
  methods: {
    init() {
      // if (this.$route.query.departmentId) {
      //     let text = {
      //         5004: "肝胆"
      //     };
      //     this.departmentId = this.$route.query.departmentId;
      //     this.departmentTitle = text[this.departmentId];
      // }

      this.GetDoctorList();
    },
    // 科室确认事件
    departmentConfirm(data) {
      setTimeout(() => {
        this.departmentTitle = data.text;
        this.departmentId = data.id;
        this.$refs.department.toggle(false);
        this.search();
      }, 300);
    },
    // 科室重置按钮
    resetConfirm() {
      setTimeout(() => {
        this.departmentTitle = "科室";
        this.departmentId = 0;
        this.$refs.department.toggle(false);
        this.search();
      }, 200);
    },
    //搜索事件
    search(value) {
      this.pageIndex = 1;
      this.doctorList = [];
      this.searchLoading = true;
      this.GetDoctorList();
    },
    // 触底事件
    onLoad() {
      this.pageIndex++;
      this.GetDoctorList();
    },
    // 获取医生列表
    GetDoctorList() {
      this.loading = true;

      let obj = {
        name: this.searchValue,
        pageIndex: this.pageIndex,
        pageSize: 10,
        hospitalDepartmentId:
          this.departmentTitle === "科室" ? "" : this.departmentId + "", //科室
        positionalTitles: this.value2, //医生职称
        hospitalLevel: this.value3 //医院等级
      };
      this.$http.GetDoctorList(obj).then(({ data }) => {
        this.loading = false;
        this.searchLoading = false;
        if (data.IsSuccess) {
          this.isLoading = false; // 页面刷新
          this.pageLoading = false; // 页面第一次加载完成

          // 数据全部加载完成
          if (data.ResultObject.length < 10) {
            this.finished = true;
          }

          this.doctorList = [...this.doctorList, ...data.ResultObject];

          // 成功
        } else {
          // 失败
          this.$toast(data.ResultMsg);
        }
      });
    },
    // 发起问诊
    goConsult() {
      this.$toast("暂未开通，敬请期待");
      return;
      // return false;
    }
  },
  created() {
    this.init();
  }
};
</script>
<style lang='less' scoped>
// 字体隐藏
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/deep/ .van-pull-refresh__track {
  min-height: 100vh;
}

.searchExpert {
  // 搜索框
  .search {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 8;
    /deep/ .van-search {
      height: 1rem;
    }
    /deep/ .van-search__content {
      border-radius: 0.3rem;
    }

    /deep/ .van-field__control {
      color: #333;
    }
  }

  .filtrate {
    position: fixed;
    width: 100%;
    top: 1rem;
    z-index: 8;
    height: 1rem;
    border-bottom: 0.02rem solid rgb(238, 238, 238);
  }

  .doctor-list {
    width: 7rem;
    margin: 0 auto;
    padding: 2.2rem 0 0.2rem;
    .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;
        }
      }

      // 描述信息
      .description {
        font-size: 0.24rem;
        line-height: 0.4rem;
        margin: 0.1rem 0;
        .ellipsis();
        text-align: left;
      }

      .recently {
        color: #3aaafd;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.26rem;
        border-top: solid #f6f6f6 0.01rem;
        text-align: left;
      }

      // 问诊
      .consult {
        height: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.2rem;
        font-size: 0.26rem;
        color: red;
        border-top: solid #f6f6f6 0.01rem;

        .btn {
          height: 0.5rem;
          line-height: 0.5rem;
          padding: 0 0.2rem;
          background-color: #00a4ff;
          border-radius: 0.5rem;
          color: #fff;
        }
      }
    }
  }
}
</style>
