<template>
  <div class="peripheral">
    <van-tabs
      v-model="active"
      title-active-color="#6600FF"
      color="#6600FF"
      title-inactive-color="#666666"
      line-width="120px"
      @click="onClick"
    >
      <van-tab title="会议室列表" >
        <div class="tabs-box">
          <div class="white-box part-4">
            <van-pull-refresh v-model="isDownLoading" @refresh="onDownRefresh"  success-text="加载成功">
              <van-list
                v-model="isUpLoading"
                :finished="upFinished"
                finished-text="没有更多了"
                :immediate-check="false"
                :offset="10"
                @load="onLoadList"
              >
                <div class="figure-card" v-for="item in roomList" :key="item.id" @click="$router.push({path:'/meetingRoom/reserve', query: {id:item.id,isDetial:false}})" >
                  <div class="card-left">
                    <img :src="JSON.parse(item.roomImg)[0].url" alt="" />
                  </div>
                  <div class="card-right">
                    <p class="text">会议室名称：{{ item.roomName }}</p>
                    <p class="text">会议室位置：{{ item.position }}</p>
                    <p class="text">座位数：{{ item.seatNumber }}</p>
                    <p class="text">配套：{{ item.match }}</p>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </div>
      </van-tab>
      <van-tab title="预约历史">
        <div class="tabs-box">
          <div class="part-2">
            <van-pull-refresh v-model="appointRefreshing" @refresh="onAppointRefresh" success-text="加载成功">
              <van-list
                v-model="appointLoading"
                :finished="appointFinished"
                finished-text="没有更多了"
                :immediate-check="false"
                @load="onAppointLoad"
              >
                <div
                  class="card-item white-card"
                  v-for="item in list1"
                  :key="item.title"
                  @click="goDetialView(item)"
                >
                  <div class="card-top">
                    <div class="card-left">
                      <p class="tit">{{ item.subject }}</p>
                      <p class="date">发布日期：{{ item.appointtime }}</p>
                    </div>
                    <div class="card-right">
                      <span
                         class="normal-tip yd z-bg"
                         v-if="item.state == '1'"
                        >
                          等待审核
                      </span>
                      <span class="normal-tip yd y-bg" v-if="item.state == '2'">
                        等待付费</span
                      >
                      <span
                           class="normal-tip yd h-bg"
                           v-if="item.state == '3'"
                        >等待确认</span
                      >
                      <span
                           class="normal-tip yd g-bg"
                           v-if="item.state == '4'"
                        >预定成功</span
                      >
                      <span
                        class="normal-tip yd z-br"
                         v-if="item.state == '5'"
                        >已取消</span
                      >
                    </div>
                  </div>
                  <div class="card-bottom">
                    <span
                      v-if="item.state == '2'"
                      class="normal-button-app z-bt"
                      style="padding: 1vw 5.467vw;"
                      @click.stop="$router.push({path:'/meetingRoom/paymentVoucher', query: {id: item.id, isDetial: false}})"
                      >上传支付凭证</span
                    >
                    <span  style="padding: 1vw 5.467vw;" v-if="item.state == '1' || item.state == '2'|| item.state == '3'" class="normal-button-app y-bt" @click.stop="cancelApple(item)">取消</span>
                    <span  v-if="item.state == '5'" class="cancelR" >取消原因：{{item.cancelReason ?item.cancelReason:'无' }}</span>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from 'vant'
import auth from '@/service/auth'
import PositionNav from '@/components/position-nav'
import { getMeetingRoomList } from '@/service/api_meeting_room'
import { getMeetingAppointList, cancelAppoint } from '@/service/api_meeting_appoint'
export default {
    components: {
        PositionNav
    },
    data() {
        return {
            active: 0,
            // groupId: "870261874875170816",
            groupId: '',
            isDownLoading: false,
            isUpLoading: false,
            upFinished: false,
            roomRequestParam: {
                pageNum: 1,
                pageSize: 10,
                groupId: ''
            },
            roomTotal: 0,

            appointLoading: false,
            appointFinished: false,
            appointRefreshing: false,
            appointRequestParam: {
                pageNum: 1,
                pageSize: 10
            },
            appointTotal: 0,

            currUser: {},
            roomList: [],
            list1: [],
            list2: []
        }
    },
    mounted() {
        this.currUser = auth.currUser()
        this.getRoomList()
    },
    methods: {
        onClick() {
            if (this.active == 0) {
                this.roomList = []
                this.getRoomList()
            } else {
                this.list1 = []
                this.getAppointList()
            }
        },

        onDownRefresh: function() {
            this.roomList = []
            this.roomRequestParam.pageNum = 1
            this.isUpLoading = true
            this.upFinished = false
            this.getRoomList()
        },
        onLoadList() {
            this.roomRequestParam.pageNum++
            this.isDownLoading = true
            this.getRoomList()
        },

        // 获取实验室列表
        getRoomList() {
            // const reqData = {
            //     groupId: this.groupId,
            //     pageNum: this.roomRequestParam.pageNum,
            //     pageSize: this.roomRequestParam.pageSize
            // }
            getMeetingRoomList(this.roomRequestParam).then((res) => {
                if (res.rows.length) {
                    this.isDownLoading = false
                    this.roomList.push(...res.rows)
                    this.isUpLoading = false
                    if (this.roomList.length >= res.total) {
                        this.upFinished = true
                    }
                } else {
                    // Toast('列表刷新异常或无数据')
                    this.roomList = []
                    this.isDownLoading = false
                    this.isUpLoading = false
                    this.upFinished = true
                }
                // this.roomList = res.rows
                // this.roomTotal = res.total
                // this.roomRefreshing = false
            })
        },

        onAppointRefresh() {
            this.list1 = []
            this.appointRequestParam.pageNum = 1
            this.appointLoading = true
            this.appointFinished = false
            this.getAppointList()
        },

        onAppointLoad() {
            this.appointRequestParam.pageNum++
            this.appointRefreshing = true
            // if (this.appointRefreshing) {
            //     this.list1 = []
            //     this.appointRefreshing = false
            // }
            // if (this.list1.length >= this.appointTotal) {
            //     this.appointFinished = true
            // } else {
            //     const reqData = {
            //         groupId: this.groupId,
            //         pageNum: this.appointRequestParam.pageNum++,
            //         pageSize: this.appointRequestParam.pageSize
            //     }
            //     getMeetingAppointList(reqData).then((res) => {
            //         res.rows.forEach(element => {
            //             this.list1.push(element)
            //         })
            //         this.appointTotal = res.total
            //     })
            // }
            // this.appointLoading = false
            this.getAppointList()
        },

        // 获取预约记录
        getAppointList() {
            const reqData = {
                userId: this.currUser.id,
                pageNum: this.appointRequestParam.pageNum,
                pageSize: this.appointRequestParam.pageSize
            }
            getMeetingAppointList(reqData).then((res) => {
                if (res.rows.length) {
                    this.appointRefreshing = false
                    this.list1.push(...res.rows)
                    this.appointLoading = false
                    if (this.list1.length >= res.total) {
                        this.appointFinished = true
                    }
                } else {
                    // Toast('列表刷新异常或无数据')
                    this.list1 = []
                    this.appointRefreshing = false
                    this.appointLoading = false
                    this.appointFinished = true
                }
                // this.list1 = res.rows
                // this.appointTotal = res.total
                // this.appointRefreshing = false
            })
        },

        cancelApple(item) {
            const reqData = {
                id: item.id
            }
            cancelAppoint(reqData).then((res) => {
                if (res.key == 200) {
                    Toast('取消成功！')
                    this.getAppointList()
                }
            })
        },

        // 详情页面跳转
        goDetialView(item) {
            //  ||  "5" == item.state
            if (item.state == '1' || item.state == '2') {
                // this.goNavigator('meetingRoom-reserve', {id: item.id, isDetial: true})
                this.$router.push({ path: '/meetingRoom/reserve', query: { id: item.id, isDetial: true }})
            } else {
                // this.goNavigator('meetingRoom-paymentVoucher', {id: item.id, isDetial: true})
                this.$router.push({ path: '/meetingRoom/paymentVoucher', query: { id: item.id, isDetial: true }})
            }
        }

    }
}
</script>

<style lang="scss" type="text/scss" scoped>
.peripheral {
  /deep/.van-tabs__wrap {
    height: 100px;
    background: #ffffff;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 10px;
  }

  .tabs-box {
    margin: 20px 0;

    .part-2 {
      overflow-y: auto;
      height: calc(100vh - 120px);
      box-sizing: border-box;
      .card-item {
        margin: 0 30px 30px;
        .card-top {
          @include flex;
          .card-left {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            height: 100px;
            .tit {
              width: 500px;
              font-size: 32px;
              color: #333;
              @include line-over;
            }

            .date {
              font-size: 28px;
              color: #999;
            }
          }
          .card-right {
            align-self: flex-start;
          }
        }
      }
      .card-bottom {
        height: 80px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }

    .part-4 {
      padding: 0;
      overflow-y: auto;
      height: calc(100vh - 120px);
    }
  }
}

.figure-card {
  padding: 30px;
  display: flex;
  border-bottom: 1px solid #e3e3e3;
  .card-left {
    width: 280px;
    height: 200px;
    overflow: hidden;
    margin-right: 30px;
    img {
      width: 100%;
    }
  }
  .card-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .text {
      font-size: 28px;
      font-weight: 400;
      color: #999999;
      line-height: 40px;
    }
  }
}
.cancelR{
    font-size: 3.6vw;
    color: rgba(140, 140, 140, 1);
    //height: 7vw;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
}
</style>
