<template>
  <view class="safe-area-inset-bottom p-2">
    <view class="search p-row-32">
      <u-search
        placeholder="请输入患者姓名、标签"
        v-model="keyword"
        @change="change"
        :show-action="false"
      ></u-search>
    </view>
    <!-- <view class="p-32 white b-r-8 flex-col" v-if="!loading&&list.length>0"> -->
    <view
      class="p-32 white b-r-8 flex-col"
      v-for="(item, i) in list"
      :key="item.id"
    >
      <view class="flex-row flex-ali-center flex-jus-sp">
        <view class="flex-row flex-ali-center flex-jus-sp">
          <view style="position: relative">
            <u-image
              width="80rpx"
              height="80rpx"
              shape="circle"
              :src="item.avator || '../../static/image/djr.png'"
            >
              <u-loading slot="loading"></u-loading>
            </u-image>
          </view>
          <view class="m-l-2 flex-col flex-jus-sp">
            <view class="flex-row flex-ali-center">
              <d-text
                :text="item.name"
                className="fs-32 "
                color="#31353D"
              ></d-text>
              <d-text
                :text="item.title"
                color="#31353D"
                className="m-l-2"
              ></d-text>
            </view>
            <d-text
              :text="`${item.hospital}(${item.yard})  ${item.depart}`"
              color="#6C7380"
              className="fs-28"
            ></d-text>
          </view>
        </view>
        <view>
          <u-button
            size="mini"
            shape="circle"
            :ripple="true"
            type="primary"
            @click="select(item)"
            >选择
          </u-button>
        </view>
      </view>
    </view>
    <view class="flex-row flex-jus-center" v-if="!loading && list.length == 0">
      <d-empty text="暂无医生" mode="search"></d-empty>
    </view>
    <u-loadmore
      :status="status"
      :load-text="loadText"
      v-if="!loading && list.length > 0"
    />
    <d-loading-page :loading="loading"></d-loading-page>
  </view>
</template>

<script>
import { doctorLists } from "@/api/all.js";
export default {
  data() {
    return {
      list: [],
      page: 1,
      keyword: "",
      loading: true,
      loading2: false,
      status: "loading",
      loadText: {
        loadmore: "轻轻上拉",
        loading: "努力加载中",
        nomore: "已加载全部",
      },
      noMore: false,
    };
  },
  // onLoad(op) {
  // 	this.loading = false
  // 	this.list = op['list'] ? JSON.parse(op['list']) : []
  // },

  onShow() {
    this.init();
   
  },
  onPullDownRefresh() {
    this.init();
  },
  onReachBottom() {
    if (this.noMore) {
      this.$toast("数据已全部加载");
      return;
    }
    this.page++;
    this.getList();
  },
  methods: {
    select(item) {
      uni.showModal({
        confirmText:'确定发送',
        content:`发送 ${item.name} 医生的名片到当前聊天`,
        success: function (res) {
          if (res.confirm) {
            uni.$emit("newAddPv", item);
            uni.navigateBack({
              delta: 1, //返回层数，2则上上页
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    change() {
      this.list = [];
      this.page = 1;
      uni.showLoading({
        title: "搜索中...",
      });
      uni.$u.debounce(this.getList, 600);
    },
    init() {
      this.list = [];
      this.page = 1;
      this.keyword = "";
      this.loading = true;
      this.getList(true);
    },
    handleSearch() {
      this.page = 1;
      this.getList();
    },
    getList(is_stop = false) {
      if (this.loading2) {
        return;
      }
      this.loading2 = true;
      doctorLists({
        page: this.page,
        keyword: this.keyword,
      })
        .then((res) => {
          if (res.errcode == 0) {
            this.list =
              this.page === 1
                ? res.data.list
                : [...this.list, ...res.data.list];
            this.noMore = res.data.list.length < 20;
            if (this.noMore) {
              this.status = "nomore";
            } else {
              this.status = "loadmore";
            }
            this.$nextTick(() => {
              this.loading = false;
              is_stop && uni.stopPullDownRefresh();
            });
          } else {
            this.$toast(res.msg);
            is_stop && uni.stopPullDownRefresh();
            this.loading = false;
          }
        })
        .finally(() => {
          uni.hideLoading();
          this.loading2 = false;
        });
    },
  },
};
</script>
<style>
page {
  background-color: #f9fafb;
}
</style>
<style lang="scss" scoped>
.search {
  position: relative;
  z-index: 982;
}
</style>
