<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">{{objOption.Id==0?'新增排班计划':'修改排班计划'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="row wrap">
          <q-input filled v-model="objOption.Date" class="col-6 q-pr-lg q-pb-lg" mask="date" label="日期">
            <template v-slot:append>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy ref="qDateProxy1" transition-show="scale" transition-hide="scale">
                  <q-date v-model="objOption.Date" @input="() => $refs.qDateProxy1.hide()" />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
          <q-select filled stack-label option-value="SId" option-label="SName" v-model="objOption.School_Id"
            ref="School_Id" :options="schoolList" label="所属校区" :dense="false" class="col-6 q-pb-lg" emit-value
            map-options :rules="[val => !!val || '请选择所属校区']" @input="getDutyFrequencyList()" />
        </div>
        <div class="row wrap" style="margin:20px 0;">
          <div class="col-6">
            新增排班
            <q-btn style="margin-left:30px;" size="10px" @click="addScheduPlan()" round color="primary"
              icon="iconfont icon-img_haha" />
          </div>
        </div>
        <div class="row wrap" v-for="(item,index) in objOption.PlanDetails" :key="index">
          <div class="col-6">
            <q-select filled stack-label option-value="Id" option-label="Name" v-model="item.Shift" :options="batchList"
              label="班次" class="col-6 q-pr-lg q-pb-lg" emit-value map-options>
              <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
                <q-item v-bind="itemProps" v-on="itemEvents">
                  <q-item-section>
                    <q-item-label>{{opt.Name}} 【{{opt.StartTime}}-{{opt.EndTime}}】</q-item-label>
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
          <div class="col-6" style="position:relative;">
            <q-select filled stack-label option-value="Id" option-label="EmployeeName" v-model="item.DutyMan"
              :options="EmployeeList" label="值班人员" class="col-6 q-pr-lg q-pb-lg" emit-value map-options />
            <q-btn style="position:absolute;right:-5px;top:20px;" size="6px" @click="delStepPlan(index)" round
              color="red" icon="iconfont icon-guanbi1" />
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" @click="savePlan" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    getSchoolDropdown
  } from '../../api/school/index'
  import {
    queryDutyFrequencyBySchoolIds,
    SaveDutyPlan,
    queryDutyPlanInfo
  } from '../../api/scheduling/schedu'
  import {
    queryEmployee //员工列表
  } from '../../api/users/user'

  export default {
    components: {},
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {
          Id: 0,
          Date: '', //值班时间
          School_Id: '', //校区
          PlanDetails: [] //班次列表
        },
        optionTitle: "",
        schoolList: [],
        batchList: [], //班次列表
        EmployeeList: [], //员工数据
      }
    },
    created() {
      this.getSchool();
      this.Employee();
    },
    mounted() {
      this.initObj()
    },
    methods: {
      initObj() {
        if (this.saveObj && this.saveObj.Id > 0) {
          queryDutyPlanInfo({
            Id: this.saveObj.Id
          }).then(res => {
            if (res.Code == 1) {
              var tempData = res.Data;
              this.objOption.Id = tempData.Id;
              this.objOption.Date = tempData.Date;
              this.objOption.School_Id = tempData.School_Id;
              if (tempData.PlanDetails && tempData.PlanDetails.length > 0) {
                this.objOption.PlanDetails = tempData.PlanDetails;
              }
              this.getDutyFrequencyList();
            }
          });
        } else {
          this.objOption.Id = 0;
          this.objOption.Date = '';
          this.objOption.School_Id = '';
          this.objOption.PlanDetails = [];
        }
      },
      //获取校区
      getSchool() {
        getSchoolDropdown({}).then(res => {
          this.schoolList = res.Data;
          this.$forceUpdate();
        })
      },
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      //保存排班
      savePlan() {
        SaveDutyPlan(this.objOption).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.$emit("success")
            this.closeSaveForm()
          } else {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
          }
        })
      },
      //点击新增排班计划
      addScheduPlan() {
        let obj = {
          Id: 0,
          PlanId: 0,
          Shift: 0,
          DutyMan: 0
        }
        this.objOption.PlanDetails.push(obj);
      },
      //删除
      delStepPlan(index) {
        this.objOption.PlanDetails.splice(index, 1);
      },
      //获取班次信息
      getDutyFrequencyList() {
        queryDutyFrequencyBySchoolIds({
          SchoolIds: this.objOption.School_Id
        }).then(res => {
          if (res.Code == 1) {
            this.batchList = res.Data;
          }
        })
      },
      //获取员工列表
      Employee() {
        var qMsg = {
          EmployeeName: ''
        }
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            this.EmployeeList = res.Data;
          }
        })
      },
    },
  }

</script>

<style>
</style>
