<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-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 dense>
               <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">
            <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'">
                <div v-for="item in col.value">
                  <div class="border-bottom">
                    {{item.ShiftName}}
                  </div>
                </div>
              </q-td>
              <q-td v-if="col.name == 'StartTime'">
                <div v-for="item in col.value">
                  <div class="border-bottom">
                    {{item.StartTime}} - {{item.EndTime}}
                  </div>
                </div>
              </q-td>
              <q-td v-if="col.name == 'CheckTimeStr'">
                <div v-for="item in col.value">
                  <div class="border-bottom">
                    <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'">
                <div v-for="item in col.value">
                  <div class="border-bottom" style="min-height:25px;">
                    <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'">
                <div v-for="item in col.value">
                  <div class="border-bottom">
                    {{item.DutyManName}}
                  </div>
                </div>
              </q-td>
              <q-td v-if="col.name == 'StatusStr'">
                <div v-for="item in col.value">
                  <div class="border-bottom" v-if="item.Status==0" style="color:gray">
                    {{item.StatusStr}}</div>
                  <div class="border-bottom" v-if="item.Status==1" style="color:green">
                    {{item.StatusStr}}</div>
                  <div class="border-bottom" v-if="item.Status==2" style="color:black">
                    {{item.StatusStr}}</div>
                  <div class="border-bottom" v-if="item.Status==3" style="color:red">
                    {{item.StatusStr}}</div>
                </div>
              </q-td>
              <q-td v-else-if="col.name == 'Id'" style="width:200px;">
                <div v-for="item in col.value">
                  <div class="border-bottom" style="border-bottom:0;">
                    <q-btn v-if="item.Status==0||item.Status==1"  flat size="xs"  icon="edit"  style="font-weight:400;"
                      color="edit"  class="q-mr-xs" label="修改"  @click="EditSchedu(props.row)"   />
                    <q-btn v-if="item.Status==0"  flat size="xs"  icon="delete"  style="font-weight:400;"
                      color="negative"  class="q-mr-xs" label="删除"  @click="RemovePlan(props.row.Id)" />
                    <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>
      <schedul-form v-if="isShowSchedu" :save-obj="scheduOption" @close="closeScheduForm" @success="refreshPage">
      </schedul-form>
    </div>
  </div>
</template>
<script>
  import {
    GetDutyPlanPage,
    RemoveDutyPlan
  } from '../../api/scheduling/schedu'
  import {
    getSchoolDropdown
  } from '../../api/school/index'; //获取校区列表

  import schedulForm from '../../components/schedul/schedul-form'
  import {
    queryEmployee
  } from '../../api/users/user'; //获取员工
  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: '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: 'Id',
            label: '操作',
            field: row => row.PlanDetails
          }
        ],
        dataList: [],
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          School_Ids: [],
          StartDate: "", //开始日期
          EndDate: "", //结束日期
          EmployeeIds: [], //员工列表
          QDutyStatus: "", //值班状态
          QAttendanceStatus: "", //出勤状态
        },
        isShowSchedu: false,
        scheduOption: null,
        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.StartDate = 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;
          }
        })
      },
      //删除排班计划
      RemovePlan(Id) {
        this.$q.dialog({
          title: "确定删除排班计划",
          message: '',
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          let msg = {
            Id: Id
          }
          RemoveDutyPlan(msg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '操作成功',
                position: 'top'
              })
              this.getList();
            }
          })
        });
      },
      //分页改变
      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()
      },
      //跳转到值班详情
      GoToDutyInfo(item) {
        this.$router.push({
          path: "/scheduling/scheduleInfo",
          query: {
            Id: item.PlanId,
            Shift: item.Shift,
            DutyMan: item.DutyMan
          }
        });
      }
    },
  }

</script>
<style>
  .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>
