<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <!-- <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.RoomName" label="教室名称"
            @clear="resetSearch" maxlength="30" />
        </div>
      </div> -->
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
        separator="none" title="排班计划" :data="dataList" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">排班计划</div>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" icon="add" label="新增排班计划" @click="EditSchedu(null)" />
          </div>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <template v-for="col in props.cols">
              <q-td v-if="col.name=='PlanDate'">
                {{col.value}}
              </q-td>
              <q-td v-if="col.name=='SchoolName'">
                {{col.value}}
              </q-td>
              <q-td v-if="col.name == 'PlanDetails'" style="padding-right:0px">
                <div v-for="item in col.value">
                  <div class="border-bottom" style="padding-left: 16px;padding-right: 16px">
                    {{item.ShiftName}}
                  </div>
                </div>
              </q-td>    
              <q-td v-if="col.name == 'StartTime'" style="padding-right:0px">
                <div v-for="item in col.value">
                  <div class="border-bottom" style="padding-left: 16px;padding-right: 16px">
                    {{item.StartTime}} - {{item.EndTime}}
                  </div>
                </div>
              </q-td>    
              <q-td v-if="col.name == 'DutyManName'" style="padding-right:0px">
                <div v-for="item in col.value">
                  <div class="border-bottom" style="padding-left: 16px;padding-right: 16px">
                    {{item.DutyManName}}
                  </div>
                </div>
              </q-td>    
              <q-td v-if="col.name == 'PlanId'" style="padding-right:0px">
                <div v-for="item in col.value">
                  <div class="border-bottom" style="padding-left: 16px;padding-right: 16px">
                    <span v-if="getStatus(props.row.PlanDate,item)==1" style="color:blue">未开始</span>
                    <span v-if="getStatus(props.row.PlanDate,item)==2" style="color:green">进行中</span>
                    <span v-if="getStatus(props.row.PlanDate,item)==3" style="color:red">已结束</span>
                  </div>
                </div>
              </q-td>    
              <q-td v-else-if="col.name == 'Id'" style="width:200px;">
                <q-btn flat size="xs" icon="edit" style="font-weight:400;" color="edit" class="q-mr-xs" label="修改"
                   @click="EditSchedu(props.row)"   />
                <q-btn flat size="xs" icon="delete" style="font-weight:400;" color="negative" class="q-mr-xs" label="删除"
                   @click="" />
                <q-btn flat size="xs" icon="iconfont icon-View" style="font-weight:400;" class="q-mr-xs" label="查看"  @click=""   />
              </q-td>
            </template>
          </q-tr>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
      <schedul-form v-if="isShowSchedu" :save-obj="scheduOption" @close="closeScheduForm" @success="refreshPage">
      </schedul-form>
    </div>
  </div>
</template>
<script>
  import {
    GetDutyPlanPage,
  } from '../../api/scheduling/schedu'
  import schedulForm from '../../components/schedul/schedul-form'

  export default {
    meta: {
      title: "排班计划"
    },
    components: {
      schedulForm
    },
    data() {
      return {
        columns: [{
            name: 'PlanDate',
            label: '日期',
            align: 'left',
            field: 'PlanDate',
          },
          {
            name: 'SchoolName',
            label: '校区',
            field: 'SchoolName',
            align: 'left'
          },
          {
            name: 'PlanDetails',
            label: '班次',
            align: 'left',
            field: 'ShiftName',
            field: row => row.PlanDetails
          },
          {
            name: 'StartTime',
            label: '值班时间',
            align: 'left',
            field: 'StartTime',
            field: row => row.PlanDetails
          },
          {
            name: 'DutyManName',
            label: '值班人员',
            align: 'left',
            field: 'DutyManName',
            field: row => row.PlanDetails
          },
          {
            name: 'PlanId',
            label: '状态',
            align: 'left',
            field: 'PlanId',
            field: row => row.PlanDetails
          },
          {
            name: 'Id',
            label: '操作',
            field: 'Id'
          }
        ],
        dataList: [],
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
        },
        isShowSchedu: false,
        scheduOption: null,
        pageCount: 0,
      }
    },
    created() {
      this.getList();
    },
    mounted() {},
    methods: {
      //获取校区列表
      getList() {
        GetDutyPlanPage(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          }
        })
      },
      //分页改变
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //新增修改值班计划
      EditSchedu(obj) {
        if (obj) {
          this.scheduOption = obj;
        } else {
          this.scheduOption = null;
        }
        this.isShowSchedu = true;
      },
      //关闭新增修改弹窗
      closeScheduForm() {
        this.isShowSchedu = false;
      },
      //刷新页面
      refreshPage() {
        if (!this.scheduOption) {
          this.msg.pageIndex = 1;
        }
        this.getList()
      },
      getStatus(props,obj){
        let beginDateStr = props+' '+obj.StartTime;
        let endDateStr = props+' '+obj.EndTime;        
        let str=0;
        let curDate = new Date();
        let beginDate = new Date(beginDateStr);
        let endDate = new Date(endDateStr);
        if(curDate<beginDate){
          str=1  //未开始
        }
        if(curDate>=beginDate&&curDate<=endDate){
          str=2 //进行中
        }
        if(curDate>endDate){
          str=3  //已结束
        }
        return str;
      }
    },
  }

</script>
<style scoped>
  .border-bottom {
    border-bottom: 1px dashed #EEE;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
</style>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
