<template>
  <div class="page-body schedulingRecord">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select @input="resetSearch" clearable multiple standout="bg-primary text-white" option-value="SId"
            option-label="SName" v-model="msg.School_Ids" :options="schoolOptions" emit-value map-options label="校区"
            @clear="resetSearch" />
        </div>
        <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="开始日期" value-format="yyyy-MM-dd" 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="结束日期" value-format="yyyy-MM-dd" size="small" style="width:47%;"
                  @change="resetSearch" clear-icon="iconfont icon-guanbi">
                </el-date-picker>
              </template>
            </q-field>
          </div>
        </div>
        <div class="col-3">
          <q-select v-model="msg.EmployeeIds" :options="EmployeeList" filled multiple clearable use-input label="值班人员"
            option-label="EmployeeName" option-value="Id" ref="EmployeeName" class="col-6" emit-value
            map-options @input="resetSearch" @filter="filterFn">
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  未找到相关数据
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" clearable standout="bg-primary text-white" option-value="Id"
            option-label="Name" v-model="msg.QDutyStatus" :options="DutyStatusList" emit-value map-options label="值班状态"
            @clear="resetSearch" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" clearable standout="bg-primary text-white" option-value="Id"
            option-label="Name" v-model="msg.QAttendanceStatus" :options="AttendanceStatusList" emit-value map-options
            label="出勤状态" @clear="resetSearch" />
        </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">
          </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 == 'CheckTimeStr'" style="padding-right:0px">
                <div v-for="item in col.value">
                  <div class="border-bottom" style="padding-left: 16px;padding-right: 16px">
                    <div v-if="item.Status==1||item.Status==2">
                      {{item.CheckTimeStr}}
                      <template v-if="item.CheckLateTime&&item.CheckLateTime>0">
                        <span style="color:red">{{item.CheckLateTimeStr}}</span>
                      </template>
                      <template v-else>
                        <span style="color:green">{{item.CheckLateTimeStr}}</span>
                      </template>
                    </div>
                  </div>
                </div>
              </q-td>
              <q-td v-if="col.name == 'FinishTimeStr'" style="padding-right:0px">
                <div v-for="item in col.value">
                  <div class="border-bottom" style="padding-left: 16px;padding-right: 16px">
                    <div v-if="item.Status==2">
                      {{item.FinishTimeStr}}
                      <template v-if="item.FinishLateTime&&item.FinishLateTime>0">
                        <span style="color:red">{{item.FinishLateTimeStr}} </span>
                      </template>
                      <template v-else>
                        <span style="color:green">{{item.FinishLateTimeStr}}</span>
                      </template>
                    </div>
                  </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 == 'StatusStr'" style="padding-right:0px">
                <div v-for="item in col.value">
                  <!-- (0-未开始,1-值班中,2-已完成,3-未值班) -->
                  <div v-if="item.Status==0" style="color:gray" class="border-bottom">{{item.StatusStr}}</div>
                  <div v-if="item.Status==1" style="color:green" class="border-bottom">{{item.StatusStr}}</div>
                  <div v-if="item.Status==2" style="color:black" class="border-bottom">{{item.StatusStr}}</div>
                  <div v-if="item.Status==3" style="color:red" class="border-bottom">{{item.StatusStr}}</div>
                </div>
              </q-td>
              <q-td v-else-if="col.name == 'ViewId'" style="width:200px;">
                <div v-for="item in col.value">
                  <div class="border-bottom" style="border:0;margin-bottom:8px;">
                    <q-btn flat size="xs" icon="iconfont icon-View" style="font-weight:400;" class="q-mr-xs"  label="查看"
                       @click="GoToDutyInfo(item)"   />
                  </div>
                </div>
              </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>
    </div>
  </div>
</template>
<script>
  import {
    GetDutyPlanPage,
  } from '../../api/scheduling/schedu'
  import {
    getSchoolDropdown
  } from '../../api/school/index'; //获取校区列表
  import {
    queryEmployee
  } from '../../api/users/user'; //获取员工
  export default {
    meta: {
      title: "排班计划"
    },
    components: {

    },
    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: 'CheckTimeStr',
            label: '上班',
            align: 'left',
            field: 'CheckTimeStr',
            field: row => row.PlanDetails
          },
          {
            name: 'FinishTimeStr',
            label: '下班',
            align: 'left',
            field: 'FinishTimeStr',
            field: row => row.PlanDetails
          },
          {
            name: 'DutyManName',
            label: '值班人员',
            align: 'left',
            field: 'DutyManName',
            field: row => row.PlanDetails
          },
          {
            name: 'StatusStr',
            label: '状态',
            align: 'left',
            field: 'StatusStr',
            field: row => row.PlanDetails
          },
          {
            name: 'ViewId',
            label: '操作',
            field: row => row.PlanDetails
          }
        ],
        dataList: [],
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          School_Ids: [],
          StartDate: "", //开始日期
          EndDate: "", //结束日期
          EmployeeIds: [], //员工列表
          IsFinish: 1, //已完成值班
          QDutyStatus: "", //值班状态
          QAttendanceStatus: "", //出勤状态
        },
        pageCount: 0,
        schoolOptions: [], //校区列表
        EmployeeList: [], //员工列表
        AllemployeeList: [], //所有员工列表
        //值班状态
        DutyStatusList: [{
          Id: 0,
          Name: '未开始'
        }, {
          Id: 1,
          Name: '值班中'
        }, {
          Id: 2,
          Name: '已完成'
        }, {
          Id: 3,
          Name: '未值班'
        }],
        //考勤状态列表
        AttendanceStatusList: [{
          Id: 1,
          Name: '迟到'
        }, {
          Id: 2,
          Name: '早退'
        }, {
          Id: 3,
          Name: '缺勤'
        }, {
          Id: 4,
          Name: '正常'
        }]
      }
    },
    created() {
      let nowDay = new Date();
      var year = nowDay.getFullYear(); //年
      var month = nowDay.getMonth() + 1; //月
      var day = nowDay.getDate(); //日
      var currentDay = year + '-' + month + '-' + day;
      this.msg.EndDate = currentDay;
      this.querySchoolList();
      this.getEmployee();
    },
    mounted() {
      this.getList();
    },
    methods: {
      //筛选员工
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList))
          } else {
            const needle = val.toLowerCase();
            this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
      //获取业务员
      getEmployee() {
        var qMsg = {
          Dept_Id: 0
        }
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            this.EmployeeList = res.Data;
            this.AllemployeeList = res.Data;
          }
        }).catch(() => {})
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      //获取校区列表
      querySchoolList() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            this.schoolOptions = res.Data;
          }
        })
      },
      //获取校区列表
      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();
      },
      //跳转到值班详情
      GoToDutyInfo(item) {
        this.$router.push({
          path: "/scheduling/scheduleInfo",
          query: {
            Id: item.PlanId,
            Shift: item.Shift,
            DutyMan: item.DutyMan
          }
        });
      }
    },
  }

</script>
<style>
  .schedulingRecord .border-bottom {
    border-bottom: 1px dashed #EEE;
    padding-bottom: 5px;
    margin-bottom: 5px;
    min-height: 25px;
  }

  .Sysuser_Date .el-input__inner {
    background-color: transparent;
    border: 0;
  }

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

</style>
