<template>
  <div class="home">
    <div class="bj"></div>
    <van-tabs
      v-model="formData.appStatus"
      @click="onTabClick"
      class="order_tab"
      color="#46C3B0"
      line-height="2px"
      title-active-color="#46C3B0"
    >
      <van-tab title="全部" name="0"></van-tab>
      <van-tab title="待就诊" name="1"></van-tab>
      <van-tab title="已就诊" name="2"></van-tab>
      <van-tab title="已取消" name="3"></van-tab>
    </van-tabs>
    <div>
      <van-loading type="spinner" color="#1989fa" vertical />
    </div>

    <ul class="list">
      <li v-for="item in list" :key="item.id">
        <router-link class="on" :to="'Yylb_detail?id='+item.id">
          <h2>
            <van-icon name="clock" color="#46C3B0" />
          </h2>
          <h3>
            {{item.appPatientName}}
            <p>{{item.appDeptName}}/{{item.appDoctorName}}</p>
            <p>{{item.appDegDate + ' ' +item.appClinicDuration + ' ' + item.appHbTime}}</p>
            <em>待就诊</em>
          </h3>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import { apiGetReserveList } from "@/request/api.js";
export default {
  data() {
    return {
      active: 0,
      title: "",
      flag: false,
      formData: {
        appStatus: 0
      },
      tab: [],
      list: [
        {
          tit: "全部"
        },
        {
          tit: "待就诊",
          list: [
            {
              name: "李熠熠",
              office: "骨科",
              sname: "张树立",
              time: "2021-04-22 14:22:22",
              url: "/Yylb_detail",
              on: 1
            }
          ]
        },
        {
          tit: "已取消",
          list: [
            {
              name: "李熠熠",
              office: "骨科",
              sname: "张树立",
              time: "2021-04-22 14:22:22",
              url: "/Yylb_detail",
              on: 3
            }
          ]
        },
        {
          tit: "已就诊",
          list: [
            {
              name: "李熠熠",
              office: "骨科",
              sname: "张树立",
              time: "2021-04-22 14:22:22",
              url: "/Yylb_detail",
              on: 2
            }
          ]
        }
      ]
    };
  },
  mounted() {
    // console.log(this.$route.meta.title);
	this.title = this.$route.meta.title;
	this.getList();
  },
  methods: {
    onTabClick(name, title) {
      console.log(name, title);
      if (this.formData.appStatus == name) {
        return;
	  }
	  this.getList();
    },
    getList() {
      let _this = this;
      apiGetReserveList(_this.formData).then(res => {
        _this.list = res.data;
      });
    }
  }
};
</script>


<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
.list {
  li {
    background: #fff;
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 30px;
    a {
      display: flex;
      align-items: center;
    }
    h2 {
      i {
        width: 60px;
        height: 60px;
        font-size: 60px;
        margin-right: 20px;
      }
    }
    h3 {
      width: calc(100% - 80px);
      font-size: 28px;
      color: #333;
      position: relative;
      p {
        font-size: 26px;
        color: #666;
      }
      em {
        font-size: 24px;
        color: #46c3b0;
        position: absolute;
        right: 0px;
        top: 0px;
      }
      em.yjz {
        color: #ee0a24;
      }
      em.yqx {
        color: #ccc;
      }
    }
  }
}
</style>
