<template>
  <div class="home">
    <nav-bar url="Zstj"/>
    <div class="bj"></div>
    <van-tabs
      class="order_tab"
      color="#46C3B0"
      line-height="2px"
      title-active-color="#46C3B0"
       @click="changeTab"
    >
      <van-tab v-for="item in tabList" :key="item.state">
        <template #title>
          {{ item.title }}
        </template>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadMore"
        >
          <ul class="list">
          <li v-for="(li, i) in list" :key="li.id">
            <div @click="toDetail(item.id)">
                <h2>{{ li.yytime }}
                 <!-- // 预约状态（0、全部 1、待支付 2、待体检 3、已完成 4、已取消） -->
                <!-- <em v-if="li.state==1">待支付</em> -->
                <em v-if="li.state==1">待体检</em>
                <em v-if="li.state==2" class="yjz">已完成</em>
                <em v-if="li.state==3" class="yqx">已取消</em>
                </h2>
              <h3>
                {{ li.name }}
                <p>{{ li.iname }} 
                  <button v-if="li.state==1" @click.stop="handleCancel(li.id, i)">取消预约</button>
                   <!-- <em >取消预约</em> -->
                  <!-- <em v-if="li.state==3"><router-link to="">体检报告</router-link></em> -->
                  </p>
              </h3>
            </div>
          </li>
        </ul>
        </van-list>

        
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// @ is an alias to /src
import { apiGetInspectYyList, apiGetInspectList, apiGetInspectYyCancel} from "@/request/api.js";
import { Toast } from "vant";
export default {
  components: {},
  data() {
    return {
      active: 0,
      title: "",
      flag: false,
      loading: false,
      finished: false,
      // 预约状态（0、全部 1、待支付 2、待体检 3、已完成 4、已取消）
      tabList: [
        {
          state: 0,
          title: '全部'
        },
        {
          state: 1,
          title: '待体检'
        },
        {
          state: 2,
          title: '已完成'
        },
        {
          state: 3,
          title: '已取消'
        }
      ],
      paramsData: {
        page: 1,
        pagesize: 10,
        state: 0,
      },
      list: []
    };
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.getListData();
  },
  methods: {
    changeTab(title) {
      console.log(title);
      this.list = [];
      this.finished = false;
      this.paramsData.state = title;
      this.paramsData.page = 1;
      this.getListData();
    },
    // 获取列表
    getListData() {
      apiGetInspectYyList(this.paramsData).then((res) => {
        this.loading = false;
        if (res.data.length < this.paramsData.pagesize) {
          this.finished = true;
        }
        this.list = [...this.list, ...res.data];
      });
    },
    toDetail(id){
      // Zstj_wd_detail?id=
      // this.$router.push()
    },
    handleCancel(id, i){
      apiGetInspectYyCancel({id: id}).then((res) => {
        this.loading = false;
        if(res.code==200){
          Toast("取消成功");
          if(this.paramsData.state!==0){
            this.list.splice(i, 1);
          }
        }
       
      });
    },
    loadMore() {
      if (!this.finished) {
        this.paramsData.page += 1;
        this.getListData();
      }
    },
  },
};
</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;
    h2 {
      font-size: 30px;
      padding-bottom: 8px;
      height: 50px;
      position: relative;
      
      em {
        font-size: 24px;
        color: #46c3b0;
        position: absolute;
        right: 0px;
        top: 0px;
      }
      em.yjz {
        color: #ee0a24;
      }
      em.yqx {
        color: #ccc;
      }
    }
    h3 {
      font-size: 28px;
      color: #333;
      position: relative;
      p {
        font-size: 26px;
        color: #666;
        padding-top: 8px;
      }
      button{
        position: absolute;
        right: 0px;
        top: 20px;
        font-size: 24px;
        height: 50px;
        line-height: 50px;
        background:#46c3b0;
        border-radius: 10px;
        box-shadow: none;
        color: #fff;
        border:none
      }
      em {
        font-size: 24px;
        color: #46c3b0;
        position: absolute;
        right: 0px;
        top: 20px;
        a {
          width: 148px;
          height: 42px;
          line-height: 42px;
          color: #46c3b0;
          border: 2px solid #46c3b0;
          border-radius: 23px;
          display: block;
          text-align: center;
        }
      }
    }
  }
}
</style>
