<!-- 问诊医生列表 -->
<template>
  <div class="doct-list__wrap">
    <section class="header__box">
      <nav-header title="医生列表"
                  :showTab="false"></nav-header>
    </section>
    <div style="height: 42px;"></div>
    <div style="width: 100%; background: #ffffff">
      <div class="header">
        <div class="search">
          <van-field v-model="searchText"
                     clearable
                     size="large"
                     label=""
                     left-icon="search"
                     placeholder="请输入医生名称查询"
                     enterkeyhint="send"
                     style="background: #f7f8fa;border-radius: 4px; width: calc(100% - 48px);align-items: center;padding: 0 10px;height: 34px;"
                     @clear="getDoctList('reflush')"
                     @keydown.enter="getDoctList('reflush')" />
          <van-button type="primary"
                      size="small"
                      style="margin-top: 2px"
                      @click="getDoctList('reflush')">搜索</van-button>
        </div>
        <van-dropdown-menu active-color="#1989fa">
          <van-dropdown-item v-model="job"
                             :title="job === -1 ? '职称' : ''"
                             :options="jobList"
                             @change="getDoctList('reflush')">
          </van-dropdown-item>
          <van-dropdown-item v-model="sort"
                             :title="sort === -1 ? '排序' : ''"
                             :options="sortList"
                             @change="getDoctList('reflush')" />
        </van-dropdown-menu>
      </div>
    </div>
    <div class="doctor-list__box">
      <van-list id="list"
                v-model:loading="loading"
                :finished="finished"
                :immediate-check="false"
                finished-text=">_< 到底啦，别拉了~"
                @load="onLoad"
                style="flex-direction: column">
        <div v-for="item in doctList"
             :key="item.id">
          <div class="item"
               @click="handleTo(item)">

            <template v-if="!item.headImg">
              <div style="min-width: 65px;height: 65px;position: relative;overflow: hidden;border-radius: 50%;background-color: #fff;border: #fff solid 2px;">
                <van-image class="doc__avatar"
                           :width="65"
                           :height="65"
                           round
                           src="data:image/png;base64,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" />
              </div>
            </template>
            <template v-else>
              <div style="min-width: 66px;height: 66px;position: relative;overflow: hidden;border-radius: 50%;background-color: #fff;border: #fff solid 2px;">
                <van-image class="doc__avatar"
                           :width="66"
                           :height="88"
                           style="transform:translateY(-5px);clip-path: circle(31px at 33px 40px);"
                           :src="(item.headImg.indexOf('data:image/') !== -1 ? item.headImg : (UPLOAD_URL + item.headImg))" />
              </div>
            </template>

            <div class="item__right">
              <van-cell class="flex__row"
                        style="position: relative">
                <div class="flex__row flex__row__between">
                  <section>
                    <span class="name">{{ item.doctName }}</span>
                    <span class="job_title">{{ item.title }}</span>
                  </section>
                  <span v-if="item.onlineState && item.onlineState === 1"
                        class="stop">可约</span>
                </div>
              </van-cell>
              <van-cell class="flex__row">
                <span class="department">{{ item.deptName }}</span>
              </van-cell>
              <van-cell class="flex__row">
                <span class="label">咨询
                  <span class="number">{{
                    !item.consultNum ? 0 : item.consultNum
                  }}</span></span>
                <span class="label"
                      style="margin: 0 15px">粉丝
                  <span class="number">{{
                    !item.concernNum ? 0 : item.concernNum
                  }}</span></span>
                <span class="label">访问
                  <span class="number">{{
                    !item.visitNum ? 0 : item.visitNum
                  }}</span></span>
              </van-cell>
              <van-cell v-if="item.skill"
                        class="flex__row flex__row__warp">
                <span class="label">擅长：</span><span style="font-size: 12px">{{
                  !item.skill ? "" : item.skill.replace("擅长：", "")
                }}</span>
              </van-cell>
              <van-cell>
                <div class="flex__row flex__row__between">
                  <section>
                    <span class="price">￥{{
                      item.consultMoney === undefined ||
                      item.consultMoney === null
                      ? " - "
                      : item.consultMoney
                    }}
                      元起</span>
                  </section>
                  <div v-if="false"
                       style="padding-right: 10px; font-size: 13px; color: #7d7d7d;">
                    余 0个
                  </div>
                </div>
              </van-cell>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { axios, UPLOAD_URL } from 'axios'
export default {
  components: {
    'nav-header': VueConfig.vueLoader('@/components/tab-router.vue'),
  },
  setup(props, context) {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      searchText: '', // 搜索内容
      jobList: [
        { text: '不限', value: -1 },
        { text: '主任医师', value: 231 },
        { text: '副主任医师', value: 232 },
        { text: '主治医师', value: 233 },
        { text: '医师', value: 234 }
      ],
      sortList: [
        { text: '不限', value: 0 },
        { text: '咨询次数', value: 1 },
        { text: '关注人数', value: 2 },
        { text: '访问次数', value: 3 }
      ],
      job: -1,
      sort: 0,
      loading: false, // 列表加载状态
      finished: false, // 列表加载全部
      doctList: [], // 医生列表,
      pageNum: 1,
      deptCode: route.query.deptCode, // 科室列表
      refresh_loading: false // 下拉加载
    })

    const isTest = route.query.isTest === undefined || !eval(route.query.isTest) ? false : true

    /**
     * 跳转到医生详情页
     * @param {Object} item 医生
     */
    function handleTo(item) {
      if (item.consultMoney === undefined || item.consultMoney === null) return vant.Toast.fail({ duration: 1000, message: '【提示】该医生的问诊订单价格未录入' })

      if (!item.onlineState) return vant.Toast.fail({ duration: 1000, message: '【提示】该医生暂未开启在线咨询' })

      router.push({
        path: '/doctor-home',
        query: {
          doctCode: item.doctCode,
          isAddVisit: true
        }
      })
    }
    /**
     * 获取医生列表
     */
    async function getDoctList(status) {
      if (status === 'reflush') {
        state.pageNum = 1
        state.finished = false
        state.doctList = []
        comTime = new Date().getTime()
      }
      const resp = await axios.RGet('/micro/online_doctor/getOLDocList', {
        pageNum: state.pageNum,
        pageSize: 20,
        deptCode: state.deptCode === -1 ? '' : state.deptCode,
        doctTitleCode: state.job === -1 ? '' : state.job,
        sortState: state.sort === -1 ? '' : state.sort,
        key: state.searchText,
        isTest: isTest
      })
      if (resp.code === 200) {
        if (status === 'reflush') {
          state.doctList = resp.data.list
          state.loading = false
        } else {
          setTimeout(() => {
            resp.data.list.forEach(item => {
              state.doctList.push(item)
            })
            state.loading = false
          }, 500)
        }
        if (state.doctList.length === resp.data.total) {
          state.finished = true
        }
      }
      state.refresh_loading = false
    }
    getDoctList('reflush')

    /**
     * 滚动加载医生数据
     */
    let comTime = 0
    function onLoad() {
      if (new Date().getTime() - comTime < 1000) {
        return
      } else if (state.pageNum === 1) {
        comTime = new Date().getTime()
      }
      state.pageNum += 1
      getDoctList('add')
    }
    /**
     * 下来刷新
     */
    function onRefresh() {
      getDoctList('reflush')
    }

    return {
      ...toRefs(state),
      handleTo,
      getDoctList,
      onLoad,
      UPLOAD_URL,
      onRefresh
    }
  },
}
</script>
<style scoped>
.doct-list__wrap {
  height: calc(100vh - 30px);
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  max-width: 767px;
  background: #fff;
}

.header__box {
  background: #fff;
  z-index: 2;
  position: fixed;
  width: 100%;
  margin: 0 auto;
  max-width: 767px;
  box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.15);
}

.header {
  width: 100%;
  /* margin-top: 40px; */
  border-bottom: 1px solid rgb(245, 244, 244);
  /* margin-bottom: 5px; */
}

.search {
  padding: 10px 10px 10px 12px;
  display: flex;
  justify-content: space-between;
}

.search>>>.van-field__control {
  margin: auto 0;
}

.search__input>>>.van-search__content {
  border-radius: 6px;
}

.van-dropdown-menu {
  width: calc(100% - 0px);
  margin: 0 auto 5px;
}

.doct-list__wrap>>>.van-dropdown-menu__bar {
  background: #ffffff;
  box-shadow: none;
}

.doct-list__wrap>>>.van-dropdown-menu__bar {
  height: 28px;
}

.doct-list__wrap>>>.van-dropdown-menu__title {
  font-size: 12px;
  color: #89898a;
}

.doct-list__wrap>>>#van-dropdown-menu-3-0::after,
.doct-list__wrap>>>#van-dropdown-menu-3-1::after {
  position: relative;
  content: '';
  height: 70%;
  width: 1px;
  left: 30px;
  background: rgb(239, 239, 239);
}

.doct-list__wrap :deep(.van-dropdown-item--down) {
  max-width: 767px;
  margin: 0 auto;
}

.doctor-list__box {
  width: 100%;
  height: calc(100vh - 162px);
  box-sizing: border-box;
  padding: 10px;
  overflow-y: auto;
  box-sizing: border-box;
}

.item {
  width: calc(100% - 0px);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 10px 0;
  border-bottom: 1px solid rgb(245, 244, 244);
  position: relative;
}

.item__left {
  text-align: center;
  min-height: 90px;
  min-width: 70px;
  margin-top: 7px;
}

.gray {
  -webkit-filter: grayscale(95%);
  -moz-filter: grayscale(95%);
  -ms-filter: grayscale(95%);
  -o-filter: grayscale(95%);
  filter: grayscale(95%);
  filter: gray;
}

.item__right {
  width: calc(100% - 70px);
  font-size: 12px !important;
  margin-left: 5px;
}

.van-cell {
  padding: 0px 5px;
}

.van-cell:after {
  border-bottom: 0px;
}

.item__right .name {
  font-size: 13px;
  font-weight: 550;
  margin-right: 10px;
}

.item__right .department {
  font-size: 12px;
  color: #0e0d0d;
}

.item__right .job_title {
  font-size: 12px;
  color: #b4b4b6;
}

.item__right .hospital {
  font-size: 12px;
  color: #b4b4b6;
}

.item__right .label {
  font-size: 12px;
  color: #848485;
}

.item__right .number {
  font-size: 13px;
  color: #0e0d0d;
}

.item__right .price {
  font-size: 13px;
  color: #e88d82;
}

.item__right .pay__times {
  font-size: 12px;
  margin-left: 10px;
}

.van-tag {
  margin: 0 5px 5px 0;
  padding: 4px 10px;
  border-radius: 5px;
}

.van-tag--plain:before {
  border-color: #e9e9e9;
}

.van-tag--danger {
  background: #cf6046;
}

.stop {
  margin: 0 8px;
  padding: 0px 4px;
  border-radius: 4px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 12px;
}

.doc__avatar {
  border-radius: 50%;
}
</style>
