<template>
  <div class="page_patientManagement">
    <div class="header">
      <el-input
        placeholder=" 姓名 / 首拼 / 透析号"
        prefix-icon="el-icon-search"
        v-model="searchVal"
      ></el-input>
    </div>
    <div class="searchList">
      <van-tabs
        v-model="active"
        title-active-color="#000000"
        title-inactive-color="#3C3C3C"
        @click="getType"
      >
        <van-tab title="全部">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            loading-text="加载中..."
            @load="onLoad"
            :immediate-check="false"
          >
            <van-cell>
              <!-- 使用 title 插槽来自定义标题 -->
              <template slot="title">
                <div
                  class="searchOne"
                  v-for="(item, index) in list"
                  :key="index"
                >
                  <img :src="item.avatar" alt />
                  <span>{{ item.name }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="血透">
          <van-list
            v-model="loading"
            :finished="finished"
            loading-text="加载中..."
            finished-text="没有更多了"
            @load="onLoad"
            immediate-check
          >
            <van-cell>
              <!-- 使用 title 插槽来自定义标题 -->
              <template slot="title">
                <div
                  class="searchOne"
                  v-for="(item, index) in list"
                  :key="index"
                  @click="toPatientDetail(item.id, item.user_org_id)"
                >
                  <img :src="item.avatar" alt />
                  <span>{{ item.name }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="慢病">
          <van-list
            v-model="loading"
            :finished="finished"
            loading-text="加载中..."
            finished-text="没有更多了"
            @load="onLoad"
            immediate-check
          >
            <van-cell>
              <!-- 使用 title 插槽来自定义标题 -->
              <template slot="title">
                <div
                  class="searchOne"
                  v-for="(item, index) in list"
                  :key="index"
                  @click="toPatientDetail(item.id, item.user_org_id)"
                >
                  <img :src="item.avatar" alt />
                  <span>{{ item.name }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="会员">
          <van-list
            v-model="loading"
            :finished="finished"
            loading-text="加载中..."
            finished-text="没有更多了"
            @load="onLoad"
            immediate-check
          >
            <van-cell>
              <!-- 使用 title 插槽来自定义标题 -->
              <template slot="title">
                <div
                  class="searchOne"
                  v-for="(item, index) in list"
                  :key="index"
                  @click="toPatientDetail(item.id, item.user_org_id)"
                >
                  <img :src="item.avatar" alt />
                  <span>{{ item.name }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="电商">电商</van-tab>
      </van-tabs>
    </div>
    <div class="add" @click="ToAddPatient()">
      <img src="../../assets/images/add.png" alt />
    </div>
  </div>
</template>

<script>
import { getBloodDialysisPatient } from "@/api/login/login";
export default {
  data() {
    return {
      searchVal: "",
      active: 0,
      list: [],
      loading: false,
      finished: false,
      page: 0,
      limit: 10,
      total: 0
    };
  },
  methods: {
    onLoad() {
      this.page++;
      console.log(this.page);
      console.log(this.total);
      if (this.page <= Math.ceil(this.total / 10)) {
        this.getBloodDialysisPatient(this.page, this.limit);
        this.finished = false;
      } else {
        // eslint-disable-next-line no-irregular-whitespace
        // this.finished = true
        // eslint-disable-next-line no-irregular-whitespace
        this.loading = false;
        this.finished = true;
      }
    },
    getType(type) {
      console.log("type是什么", type);
      if (type === 0) {
        this.loading = false;
        this.finished = false;
        this.getBloodDialysisPatient();
      }
      // eslint-disable-next-line no-empty
      if (type === 1) {
        // eslint-disable-next-line no-irregular-whitespace
        this.loading = false;
        this.finished = false;
        this.getBloodDialysisPatient();
      }
      if (type === 2) {
        this.loading = false;
        this.finished = false;
        this.getBloodDialysisPatient();
      }

      if (type === 3) {
        this.loading = false;
        this.finished = false;
        this.getBloodDialysisPatient();
      }
    },
    getBloodDialysisPatient() {
      // eslint-disable-next-line no-undef
      var id = this.$route.query.id;
      setTimeout(() => {
        getBloodDialysisPatient(this.page, this.limit, id).then(response => {
          // eslint-disable-next-line no-empty
          if (response.data.state === 1) {
            var patients = response.data.data.patients;
            console.log("patients", patients);
            this.list.push(...patients);
            console.log("this.list是什么", this.list);
            var total = response.data.data.total;
            this.total = total;
            this.onLoad();
          }
          this.loading = false;
        });
      }, 500);
    },
    toPatientDetail(patientid, orgid) {
      this.$router.push(
        "/patientdetail?patientid=" + patientid + "&orgid=" + orgid
      );
    },
    ToAddPatient() {
      var id = this.$route.query.id;
      this.$router.push("/addpatient?id=" + id);
    }
  },
  created() {}
};
</script>

<style lang="scss">
.page_patientManagement {
  overflow: hidden;
  height: 100%;
  .header {
    height: 2.5rem;
    width: 23.4375rem;
    line-height: 2.5rem;
    border-bottom: 1px solid #f4f4f4;
    .el-input {
      width: 21.4375rem;
      height: 1.9375rem;
      line-height: 1.9375rem;
      background: rgba(244, 244, 244, 1);
      border-radius: 0.9375rem;
      margin-left: 0.9375rem;
    }
    .el-input__inner {
      border: none;
      height: 100%;
      line-height: 1.9375rem;
      background: rgba(244, 244, 244, 1);
      border-radius: 0.9375rem;
      padding-left: 2.5rem;
    }
    .el-input__prefix {
      margin-top: -0.25rem;
      font-size: 1.25rem;
    }
  }

  .record {
    margin-top: 1.25rem;
    .recordList {
      display: flex;
      flex-wrap: wrap;
    }
    .recordOne {
      min-width: 0.0625rem;
      height: 1.6875rem;
      background: rgba(244, 244, 244, 1);
      border-radius: 14px;
      color: rgba(155, 155, 155, 1);
      font-size: 0.875rem;
      padding: 0.4375rem 0.875rem;
      margin-right: 0.625rem;
      box-sizing: border-box;
      margin-bottom: 0.625rem;
    }
  }
  .searchList {
    .van-tab {
      font-weight: 600;
    }
    .van-tab--active {
      font-size: 1.25rem;
      font-weight: 600;
    }
    .van-tabs__line {
      height: 0.25rem;
      background: linear-gradient(
        -90deg,
        rgba(129, 159, 246, 1),
        rgba(81, 119, 238, 1),
        rgba(75, 102, 234, 1)
      );
    }
    .van-list {
      margin-top: 0.625rem;
      overflow-y: auto;
      height: 36.25rem;
    }
    .van-cell:not(:last-child)::after {
      border: none;
    }
    // .list {
    //   margin-top: 0.625rem;
    //   overflow-y: auto;
    //   height: 36.25rem;
    // }
    .searchOne {
      height: 4.625rem;
      width: 21.25rem;
      margin: 0 auto;
      border-bottom: 1px solid #e6e6e6;
      line-height: 4.625rem;
      img {
        float: left;
        width: 3.4375rem;
        height: 3.3125rem;
        border-radius: 50%;
        margin-top: 0.625rem;
      }
      span {
        float: left;
        margin-left: 1.125rem;
        color: rgba(0, 0, 0, 1);
        font-weight: 600;
      }
    }
  }
  .add {
    width: 4.5rem;
    height: 4.5rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 9px 0px rgba(7, 30, 102, 0.15);
    border-radius: 50%;
    position: fixed;
    right: 1.125rem;
    top: 28.75rem;
    img {
      width: 100%;
    }
  }
}
</style>
