<style>
  .Mysche_Dian {
    width: 6px;
    height: 6px;
    background-color: gray;
    border-radius: 50%;
  }
  .sch_isWorked{
    background-color: #6D97FF!important;
  }
  .myPlan_List {
    display: flex;
    align-items: center;
  }

  .Sysuser_Date .el-input__inner {
    background-color: transparent;
    border: 0;
  }
  .mySchPopDiv{
    max-height: 300px;
    overflow: auto;
  }
  .mySchpopTable td{
    height:27px;
  }
  .mySchPopDiv::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #F5F5F5;
  }
  /*!*定义滚动条轨道 内阴影+圆角*!*/
  .mySchPopDiv::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }
  /*!*定义滑块 内阴影+圆角*!*/
  .mySchPopDiv::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }
</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col-3">
        <div class="col-3 Sysuser_Date">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="msg.StartDate" type="date" placeholder="开始日期" size="small" style="width:47%;"
                @change="resetSearch" clear-icon="iconfont icon-guanbi">
              </el-date-picker>至
              <el-date-picker v-model="msg.EndDate" type="date" placeholder="结束日期" size="small" style="width:47%;"
                @change="resetSearch" clear-icon="iconfont icon-guanbi">
              </el-date-picker>
            </template>
          </q-field>
        </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:body-cell-StatusStr="props">
          <q-td>
            <div v-if="props.row.Status==0" style="color:gray">
              {{props.row.StatusStr}}</div>
            <div v-if="props.row.Status==1" style="color:green">
              {{props.row.StatusStr}}</div>
            <div v-if="props.row.Status==2" style="color:black">
              {{props.row.StatusStr}}</div>
            <div v-if="props.row.Status==3" style="color:red">
              {{props.row.StatusStr}}</div>
          </q-td>
        </template>
        <template v-slot:body-cell-CheckTimeStr="props">
          <q-td>
            <div v-if="props.row.Status==1||props.row.Status==2">
              <template v-if="props.row.CheckTimeStr!='00:00'">
              {{props.row.CheckTimeStr}}
              <template v-if="props.row.CheckLateTime&&props.row.CheckLateTime>0">
                <span style="color:red">{{props.row.CheckLateTimeStr}}</span>
              </template>
              <template v-else>
                <span style="color:green">[正常]</span>
              </template>
              </template>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-FinishTimeStr="props">
          <q-td>
            <div v-if="props.row.Status==2">
              {{props.row.FinishTimeStr}}
              <template v-if="props.row.FinishLateTime&&props.row.FinishLateTime>0">
                <span style="color:red">{{props.row.FinishLateTimeStr}}</span>
              </template>
              <template v-else>
                <span style="color:green">[正常]</span>
              </template>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-PlanList="props">
          <q-td>
          <el-popover placement="bottom" popper-class="mySchePop" width="300" trigger="click">
            <div class="mySchPopDiv">
              <table class="mySchpopTable" style="width:100%;">
                <tr v-for="item in props.row.PlanList">
                  <td style="width:10px;">
                    <div class="Mysche_Dian" :class="{'sch_isWorked':item.IsChecked==1}"></div>
                  </td>
                  <td>
                    {{item.ItemName}}
                  </td>
                  <td style="width:40px;text-align:center;">
                    <img v-if="item.IsChecked==1" style="width:20px;height:20px;" src="../../assets/images/da_gou.png" />
                  </td>
                </tr>
              </table>
            </div>
            <div slot="reference" style="cursor:pointer;">
              {{getWorked(props.row.PlanList)}}/{{props.row.PlanList.length}}
            </div>
          </el-popover>
          </q-td>
        </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>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <div>
              <template v-if="props.row.Status==1 || props.row.NewStatus==1">
                <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="开始值班"
                  @click="StartSchedule(props.row)" />
              </template>
              <template v-if="props.row.Status==2">
                <q-btn flat size="xs" icon="iconfont icon-View" style="font-weight:400;" class="q-mr-xs"  label="查看"
                   @click="GoToDutyInfo(props.row)"   />
              </template>
            </div>
          </q-td>
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  import {
    queryMyDutyPlanPage,
  } from '../../api/scheduling/schedu'
  export default {
    meta: {
      title: "我的排班计划"
    },
    components: {},
    data() {
      return {
        currentUrl: "",
        columns: [{
            name: 'PlanDate',
            label: '日期',
            align: 'left',
            field: 'PlanDate',
          },
          {
            name: 'SchoolName',
            label: '校区',
            field: 'SchoolName',
            align: 'left'
          },
          {
            name: 'ShiftName',
            label: '时间（班次）',
            align: 'left',
            field: 'ShiftName'
          },
          {
            name: 'PlanList',
            label: '日常工作',
            align: 'left',
            field: 'PlanList'
          },
          {
            name: 'GiveMan',
            label: '交班对象',
            align: 'left',
            field: 'GiveMan'
          },
          {
            name: 'CheckTimeStr',
            label: '上班',
            align: 'left',
            field: 'CheckTimeStr'
          },
          {
            name: 'FinishTimeStr',
            label: '下班',
            align: 'left',
            field: 'FinishTimeStr'
          },
          {
            name: 'ReciveMan',
            label: '接班对象',
            align: 'left',
            field: 'ReciveMan'
          },
          {
            name: 'CreateByName',
            label: '排班人',
            align: 'left',
            field: 'CreateByName'
          },
          {
            name: 'StatusStr',
            label: '状态',
            align: 'left',
            field: 'StatusStr'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'Id'
          }
        ],
        dataList: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          StartDate: '',
          EndDate: ''
        },
        pageCount: 0,
      }
    },
    created() {

    },
    mounted() {
      let nowDay = new Date();
      var year = nowDay.getFullYear(); //年
      var month = nowDay.getMonth() + 1; //月
      var day = nowDay.getDate(); //日
      var currentDay = year + '-' + month + '-' + day;
      this.msg.StartDate = currentDay;
      this.getMyDutyPage();
    },
    methods: {
      getMyDutyPage() {
        this.loading = true;
        queryMyDutyPlanPage(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          }
          this.loading = false;
        })
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getMyDutyPage();
      },
      //分页改变
      changePage(val) {
        this.msg.pageIndex = val;
        this.getMyDutyPage();
      },
      //开始值班
      StartSchedule(obj) {
        this.$router.push({
          path: "/scheduling/scheduleBoard",
          query: {
            Id: obj.Id,
            Shift: obj.Shift
          }
        });
      },
      //跳转到值班详情
      GoToDutyInfo(item) {
        this.$router.push({
          path: "/scheduling/scheduleInfo",
          query: {
            Id: item.Id,
            Shift: item.Shift,
            DutyMan: item.DutyMan
          }
        });
      },
      //已经完成的
      getWorked(PlanList){
        let count = 0;
        PlanList.forEach(x=>{
          if(x.IsChecked==1){
            count = count+1 ;
          }
        })
        return count;
      }
    },
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
