<template>
  <div style="padding-bottom: 1.2rem;">
    <header>
      <van-tabs
        v-model="active"
        color="#4ca0ff"
        title-active-color="#4ca0ff"
        sticky
        swipeable
        @change="changeList($event)"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          finished-text="没有更多了"
          @load="GetDissertationList"
        >
          <van-tab title="报名中">
            <main>
              <router-link
                v-for="item in list"
                :to="'/freeClinicDetail?id=' + item.ID"
                class="item"
              >
                <van-image fit="cover" :src="item.FlatPatternImg">
                  <template v-slot:error>图片加载失败...</template>
                  <template v-slot:loading>
                    <van-loading
                      type="spinner"
                      style="text-align: center;line-height: 2.6rem;"
                      size="40"
                    />
                  </template>
                </van-image>
                <div class="title">
                  <p>
                    {{ item.DissertationName }}
                    <!--（{{item.HospitalName}}）-->
                  </p>
                  <DownTime
                    :VisitStartTime="item.VisitStartTime"
                    :VisitEndTime="item.VisitEndTime"
                    :AppointmentsStartTime="item.AppointmentsStartTime"
                    :AppointmentsEndTime="item.AppointmentsEndTime"
                  ></DownTime>
                </div>

                <span v-if="item.DissertationPattern == 2" class="tag"
                  >义诊</span
                >
                <span class="DisNumber" v-if="item.DisNumber + DisNumber > 30"
                  >{{ item.DisNumber + DisNumber }}人已报名</span
                >
              </router-link>
            </main>
          </van-tab>
          <van-tab title="义诊预告">
            <main>
              <router-link
                v-for="item in list"
                :to="'/freeClinicDetail?id=' + item.ID"
                class="item"
              >
                <van-image fit="cover" :src="item.FlatPatternImg">
                  <template v-slot:error>图片加载失败...</template>
                  <template v-slot:loading>
                    <van-loading
                      type="spinner"
                      style="text-align: center;line-height: 2.6rem;"
                      size="40"
                    />
                  </template>
                </van-image>
                <div class="title">
                  <p>
                    {{ item.DissertationName }}
                    <!--（{{item.HospitalName}}）-->
                  </p>
                  <DownTime
                    :VisitStartTime="item.VisitStartTime"
                    :VisitEndTime="item.VisitEndTime"
                    :AppointmentsStartTime="item.AppointmentsStartTime"
                    :AppointmentsEndTime="item.AppointmentsEndTime"
                  ></DownTime>
                </div>

                <span class="tag" v-if="item.DissertationPattern == 2"
                  >义诊</span
                >
              </router-link>
            </main>
          </van-tab>
          <van-tab title="已结束">
            <main>
              <router-link
                v-for="item in list"
                :to="'/freeClinicDetail?id=' + item.ID"
                class="item"
              >
                <van-image fit="cover" :src="item.FlatPatternImg">
                  <template v-slot:error>图片加载失败...</template>
                  <template v-slot:loading>
                    <van-loading
                      type="spinner"
                      style="text-align: center;line-height: 2.6rem;"
                      size="40"
                    />
                  </template>
                </van-image>
                <div class="title">
                  <p>
                    {{ item.DissertationName }}
                    <!-- （{{item.HospitalName}}）-->
                  </p>
                  <DownTime
                    :VisitStartTime="item.VisitStartTime"
                    :VisitEndTime="item.VisitEndTime"
                    :AppointmentsStartTime="item.AppointmentsStartTime"
                    :AppointmentsEndTime="item.AppointmentsEndTime"
                  ></DownTime>
                </div>

                <span class="tag" v-if="item.DissertationPattern == 2"
                  >义诊</span
                >
              </router-link>
            </main>
          </van-tab>
        </van-list>
      </van-tabs>
    </header>
    <!-- <div v-if="finished" class="more" @click="$router.push({name:'searchExpert'})">更多 >></div> -->
  </div>
</template>

<script>
import DownTime from "@/components/DownTime";

export default {
  name: "home",
  components: { DownTime },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      active: Number(sessionStorage["HomeListIndex"]) || 0,
      pageData: {
        pageIndex: 1,
        pageSize: 10,
        dissertationStatus: Number(sessionStorage["HomeListIndex"]) + 1 || 1 //-1 = 全部 1,报名中 2，义诊已经发布但是未到报名时间 3，已结束
      }
    };
  },
  created() {
    this.GetDissertationList();
    var index = this.$route.params && this.$route.params.index;
    // console.log(index);
    if (index !== undefined) {
      this.active = Number(sessionStorage["HomeListIndex"]) || index;
      this.changeList();
    }
  },
  methods: {
    // 切换坐诊类型
    changeList(e) {
      // e = 切换列表的下标 0 ， 1 ，2
      sessionStorage["HomeListIndex"] = e;
      this.pageData.pageIndex = 1;
      this.pageData.dissertationStatus = e + 1;
      this.list = [];
      this.finished = false;
      this.loading = false;
      this.GetDissertationList();
    },

    GetDissertationList() {
      var obj = this.pageData;

      this.$http.GetDissertationList(obj).then(res => {
        if (res.data.IsSuccess) {
          this.loading = false;
          this.list = this.list.concat(res.data.ResultObject);
          if (res.data.ResultObject.length < this.pageData.pageSize) {
            this.finished = true;
          }
          this.pageData.pageIndex++;
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.more {
  font-size: 0.3rem;
  color: #00a4ff;
  line-height: 0.4rem;
  margin-bottom: 0.3rem;
}
main {
  width: 7.1rem;
  margin: 0 auto;
  padding-top: 0.2rem;

  .item {
    display: block;
    border-radius: 5px;
    box-shadow: 0px 4px 5px 4px #f1f1f2;
    position: relative;
    margin-bottom: 0.5rem;
    overflow: hidden;
    .tag {
      display: inline-block;
      width: 0.8rem;
      height: 0.4rem;
      border-radius: 0 15px 15px 0;
      background: linear-gradient(to right, #fff26e, #facd29);
      position: absolute;
      top: 0.12rem;
      left: 0;
      text-align: center;
      line-height: 0.4rem;
      font-size: 0.28rem;
      color: #ff0000;
    }
    .DisNumber {
      display: inline-block;
      height: 0.4rem;
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      bottom: 0.9rem;
      left: 0.1rem;
      text-align: center;
      line-height: 0.4rem;
      font-size: 0.28rem;
      color: #fff;
      box-sizing: border-box;
      padding: 0 0.1rem;
    }

    > div {
      width: 100%;
      height: 2.6rem;
      vertical-align: text-bottom;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    > .title {
      display: flex;
      height: 0.8rem !important;

      > p {
        font-size: 0.28rem;
        color: #212121;
        width: 74%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background-color: #fff;
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: left;
        box-sizing: border-box;
        padding: 0 0.2rem;
        position: relative;
      }
    }
  }
}
</style>
