<template>
  <div>
    <div class="Tb-Dialog" v-show="!selecting" style="position: relative;">
      <div style="position: absolute;top: 0;left: 0; width: 100%;">
        <span @click="close()" class="iconfont">&#xe6e9;</span>
        <p class="name">
           {{currentPatient.patient.name }}
         </p>
        <van-tag type="primary" class="tag1" size="large" v-if="currentPatient.schedule_type == 1">上午</van-tag><van-tag class="tag1" type="primary" size="large" v-if="currentPatient.schedule_type == 2">下午</van-tag><van-tag class="tag1" type="primary" size="large" v-if="currentPatient.schedule_type == 3">晚上</van-tag>
        <van-tag type="success" class="tag1" size="large">{{currentPatient.zone_name}}{{currentPatient.number_name}}</van-tag>
        <van-tag color="#e6a23c" class="tag1" size="large">{{ currentPatient.mode_name }}</van-tag>
        <van-tag color="#67c23a" class="tag1" size="large">{{ currentPatient.anticoagulant_name }}</van-tag>
      </div>
      <van-tabs class="van-tabs-tb" v-model:active="active"  @change="curTab()" :ellipsis="false"  :border="true" sticky>
        <template v-if="currentPatient.schedule_type == 1">
          <van-tab type="card" v-for="(item,index) in scheduleAll" :key="index" :title="item.name + '(' + item.sw_bed + '/' + item.total_bed +')'">
            <van-cell v-for="(device,dindex) in item.device" :key="dindex" :class="cur_index == dindex?'cell-background':''" @click.stop="curCell(dindex,device)">
              <div class="card-name">{{ device.number }}</div>
              <template v-for="(schedule,sindex) in device.schedule">
                <div class="card-info">
                    <p class="card-info-name" v-if="schedule.schedule_type == currentPatient.schedule_type">
                     <span v-if="schedule.patient!=undefined">{{ schedule.patient.name }} </span>
                    </p>
                    <p  v-if="schedule.schedule_type == currentPatient.schedule_type"> {{ schedule.mode_name }}</p>
                    <p  v-if="schedule.schedule_type == currentPatient.schedule_type"> {{ schedule.anticoagulant_name }}</p>
                </div>
                <div class="card-btn">
                  <van-tag v-if="schedule.schedule_type == currentPatient.schedule_type && schedule.order!=undefined&&schedule.order.stage == 0" type="primary"  @click.stop="changeSchedule(device)">待上机</van-tag>
                  <van-tag v-if="schedule.schedule_type == currentPatient.schedule_type && schedule.order!=undefined&&schedule.order.stage == 1" type="success"  @click.stop="changeSchedule(device)">已上机</van-tag>
                  <van-tag v-if="schedule.schedule_type == currentPatient.schedule_type && schedule.order!=undefined&&schedule.order.stage == 2" color="#e6a23c"  @click.stop="changeSchedule(device)">已下机</van-tag>
                </div>
              </template>
            </van-cell>
          </van-tab>
        </template>
        <template v-if="currentPatient.schedule_type == 2">
          <van-tab swipe-threshold="3"  v-for="(item,index) in scheduleAll" :key="index" :title="item.name + '(' + item.xw_bed + '/' + item.total_bed +')'">
            <van-cell v-for="(device,dindex) in item.device" :key="dindex" :class="cur_index == dindex?'cell-background':''" @click.stop="curCell(dindex,device)">
              <div class="card-name">{{ device.number }}</div>
              <template v-for="(schedule,sindex) in device.schedule">
                <div class="card-info">
                    <p class="card-info-name" v-if="schedule.schedule_type == currentPatient.schedule_type">
                      <span v-if="schedule.patient!=undefined">{{ schedule.patient.name }}</span>
                    </p>
                    <p  v-if="schedule.schedule_type == currentPatient.schedule_type"> {{ schedule.mode_name }}</p>
                    <p  v-if="schedule.schedule_type == currentPatient.schedule_type"> {{ schedule.anticoagulant_name }}</p>
                </div>
                <div class="card-btn">
                  <van-tag v-if="schedule.schedule_type == currentPatient.schedule_type && schedule.order!=undefined&&schedule.order.stage == 0" type="primary"  @click.stop="changeSchedule(device)">待上机</van-tag>
                  <van-tag v-if="schedule.schedule_type == currentPatient.schedule_type && schedule.order!=undefined&&schedule.order.stage == 1" type="success"  @click.stop="changeSchedule(device)">已上机</van-tag>
                  <van-tag v-if="schedule.schedule_type == currentPatient.schedule_type && schedule.order!=undefined&&schedule.order.stage == 2" color="#e6a23c"  @click.stop="changeSchedule(device)">已下机</van-tag>
                </div>
              </template>
            </van-cell>
          </van-tab>
        </template>
        <template v-if="currentPatient.schedule_type == 3">
          <van-tab type="card" v-for="(item,index) in scheduleAll" :key="index" :title="item.name + '(' + item.ws_bed + '/' + item.total_bed +')'">
            <van-cell v-for="(device,dindex) in item.device" :key="dindex" :class="cur_index == dindex?'cell-background':''" @click.stop="curCell(dindex,device)">
              <div class="card-name">{{ device.number }}</div>
              <template v-for="(schedule,sindex) in device.schedule">
                <div class="card-info">
                    <p class="card-info-name" v-if="schedule.schedule_type == currentPatient.schedule_type">
                      <span v-if="schedule.patient!=undefined"> {{ schedule.patient.name }}</span>
                    </p>
                    <p  v-if="schedule.schedule_type == currentPatient.schedule_type"> {{ schedule.mode_name }}</p>
                    <p  v-if="schedule.schedule_type == currentPatient.schedule_type"> {{ schedule.anticoagulant_name }}</p>
                </div>
                <div class="card-btn">
                  <van-tag v-if="schedule.schedule_type == currentPatient.schedule_type && schedule.order!=undefined&&schedule.order.stage == 0" type="primary"  @click.stop="changeSchedule(device)">待上机</van-tag>
                  <van-tag v-if="schedule.schedule_type == currentPatient.schedule_type && schedule.order!=undefined&&schedule.order.stage == 1" type="success"  @click.stop="changeSchedule(device)">已上机</van-tag>
                  <van-tag v-if="schedule.schedule_type == currentPatient.schedule_type && schedule.order!=undefined&&schedule.order.stage == 2" color="#e6a23c"  @click.stop="changeSchedule(device)">已下机</van-tag>
                </div>
              </template>
            </van-cell>
          </van-tab>
        </template>
      </van-tabs>
      <van-button  round icon="plus" type="primary" class="tb-btn" @click="changeBed" >确认调班</van-button>
    </div>
    <van-overlay :show="loading" type="spinner" size="30px">
      <div class="wrapper">
        <van-loading size="24px" vertical>正在加载中...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { commitDoubleCheck } from '@/api/dialysis'
import { Toast } from 'vant'
import { changeScheduleBed } from '@/api/staff_schedule'
export default {
  name: 'TbDialog',
  data () {
    return {
      selecting: false,
      cur_index: -1,
      cur_device: {id: 0},
      active: true,
      loading: false
    }
  },
  props: {
    currentPatient: {
      type: Object
    },
    scheduleAll: {
      type: Array
    }
  },
  created () {

  },
  methods: {
    changeBed: function () {
      if (this.cur_device.id > 0) {
        this.loading = true
        var params = {
          schedule_type: this.currentPatient.schedule_type,
          schedule_date: this.currentPatient.schedule_date,
          patient_id: this.currentPatient.patient_id,
          bed_id: this.cur_device.id,
          schedule_week: this.currentPatient.schedule_week,
          mode_id: this.currentPatient.mode_id,
          id: this.currentPatient.id
        }
        changeScheduleBed(params).then(response => {
          if (response.data.state == 1) {
            Toast.success('调班成功!')
            this.loading = false

            this.changeTypeShowOne = false
            this.$emit('close')
            this.$emit('getlist')
          } else {
            this.loading = false
            Toast.fail('被调用床位已有患者上机,调班失败!')
          }
        })
      } else {
        Toast.fail('未选择要调班的床位')
      }
    },
    curTab: function () {
      this.cur_index = -1
      this.cur_device = {id: 0}
    },
    curCell: function (dindex, device) {
      this.cur_device = device
      this.cur_index = dindex
    },
    changeSchedule: function (device) {

    },
    close: function () {
      this.$emit('close')
    }
  },
  mounted () {

  }
}
</script>

<style style="stylesheet/scss" lang="scss" scoped>
  .Tb-Dialog{
    width: 20rem;
    height: 38rem;
    background: #ebf1f7;
  }
  .cell-background{
    background-color: #1989fa;
  }
  .van-tabs-tb{
    position: absolute;
    left: 0;
    top: 5rem;
    width: 100%;
    height: 29rem;
    overflow: hidden;
    overflow-y: auto;
  }
  .tb-btn{
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .iconfont{
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    font-size: 1.5rem;
  }
  .name{
    font-size: 1.5rem;
    margin:0.3rem;
    margin-left:1rem;
  }
  .tag1{
    margin-left:0.3rem;
  }
  // .van-tab{
  //   margin:0 0.8rem;
  // }
  // .van-tab--active{
  //   color: #2196f3;
  //   border-bottom: 3px solid #ee0a24;
  // }
  .van-cell{
    border-bottom: 1px solid #c0c4cc;
  }
  .card-name{
    background-color: #67c23a;
    color: #ffffff;
    width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
    padding: 0.5rem;
    display: inline-block;
    float: left;
  }
  .card-info{
    display: inline-block;
    float: left;
    margin-left: 0.8rem;
    width: 9.4rem;
  }
  .card-btn{
    display: inline-block;
    float: right;
    width: 3rem;
    margin-top: 1rem;
  }
  .card-info-name{
    font-size: 1.2rem;
  }
</style>
<style scoped>
  .Tb-Dialog >>> .van-tab{
    margin:0 0.8rem !important;
    font-size: 1rem;
  }
  .Tb-Dialog >>> .van-tab--active{
    color: #2196f3;
    border-bottom: 3px solid #2196f3;
  }
  .Tb-Dialog >>> .van-sticky--fixed{
    top:5rem;
  }
</style>>
