<style>
  .Sctop_Last {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }

  .Sctop_Last>div {
    display: inline-block;
    width: 100px;
    height: 30px;
    background-color: #D4DFFF;
    color: #2966FE;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
  }
  .sche_rightTop{
    width: 100%;
    padding: 20px 0;
    background-color: #fff;
    position: relative;
  }
</style>
<template>
  <div class="sche_rightTop">
    <div v-if="dataList.Status!=2" class="sche_Topflex" style="display:flex;">
      <div class="Sctop_Color Scdu_benci" style="position:relative;">本次值班信息</div>
      <div class="Sctop_Color">
        <span class="Scotop_little">校区</span>{{dataList.SchoolName}}
      </div>
      <div class="Sctop_Color" style="width:33%;">
        <span class="Scotop_little">时间</span>
        <span v-if="dataList.PlanDate">{{dataList.PlanDate.replaceAll('-','.')}}</span>
        <span v-if="dataList.WeekDay"> {{dataList.WeekDay.replace('星期','周')}}</span>
        {{dataList.StartTime}}-{{dataList.EndTime}}
      </div>
      <div class="Sctop_Color" style="width:15%">
        <span class="Scotop_little">班次</span>{{dataList.ShiftName}}
      </div>
    </div>
    <div class="Sctop_Last">
      <div @click="isShowJiedai=true"><i style="margin-right:5px;" class="iconfont icon-liuchengguanliqi"></i>接待流程
      </div>
    </div>
    <table v-if="dataList.Status==2" style="width:100%;margin:0 20px;font-size:18px;color:#000000;">
      <tr>
        <td style="width:11%">
          <span class="Sch_MainColor">本次值班信息</span>
        </td>
        <td style="width:15%">
          <span class="Scotop_little">校区</span>{{dataList.SchoolName}}
        </td>
        <td style="width:32%;">
          <span class="Scotop_little">时间</span>
          <span v-if="dataList.PlanDate">{{dataList.PlanDate.replaceAll('-','.')}}</span>
          <span v-if="dataList.WeekDay"> {{dataList.WeekDay.replace('星期','周')}}</span>
          {{dataList.StartTime}}-{{dataList.EndTime}}
        </td>
        <td style="width:23%;">
          <span class="Scotop_little">班次</span>{{dataList.ShiftName}}
        </td>
        <td>
          <span class="Scotop_little">值班状态</span>{{dataList.StatusStr}}
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <span class="Scotop_little">值班人员</span>{{dataList.DutyManName}}
        </td>
        <td>
          <span class="Scotop_little">打卡时间</span>
          <span v-if="dataList.CheckTime">{{dataList.CheckTime}}
            <template v-if="dataList.CheckLateTime&&dataList.CheckLateTime>0">
              <span style="color:red">{{dataList.CheckLateTimeStr}}</span>
            </template>
            <template v-else>
              <span style="color:green">{{dataList.CheckLateTimeStr}}</span>
            </template>
          </span>
        </td>
        <td>
          <span class="Scotop_little">交接时间</span>{{dataList.FinishTime}}
          <template v-if="dataList.FinishLateTime&&dataList.FinishLateTime>0">
            <span style="color:red">{{dataList.FinishLateTimeStr}}</span>
          </template>
          <template v-else>
            <span style="color:green">{{dataList.FinishLateTimeStr}}</span>
          </template>
        </td>
      </tr>
    </table>
    <schedulJiedai v-if="isShowJiedai" @close="closeJiedai"></schedulJiedai>
  </div>
</template>
<script>
  import schedulJiedai from '../../components/schedul/schedul-jiedai'

  export default {
    props: {
      dataList: {
        type: Object,
        default: null
      },
    },
    components: {
      schedulJiedai
    },
    data() {
      return {
        isShowJiedai: false //是否显示接待
      }
    },
    created() {},
    methods: {
      closeJiedai() {
        this.isShowJiedai = false;
      }
    },
  }

</script>
