<template>
  <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:800px;">
      <q-card-section>
        <div class="text-h6">{{(saveObj&&saveObj.Id>0)?"修改值班设置":"新增值班设置"}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="row wrap">
          <div class="col-6">
            <q-select v-model="EmployeeNameArray" :options="EmployeeListOption" color="primary" filled multiple
              clearable label="值班管理员" option-label="EmployeeName" option-value="Id" ref="EmployeeName"
              :rules="[val => !!val || '请选择值班管理员']" class="col-6 q-pr-lg q-pb-lg" emit-value map-options />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.MachineCode" stack-label
              ref="MachineCode" class="col-6 q-pr-lg q-pb-lg" label="值班机器码" :rules="[val => !!val || '请填写值班机器码']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-select stack-label v-model="msg.School_Id" :options="schoolOptions" color="primary" filled label="校区"
              option-label="SName" option-value="SId" class="col-6 q-pr-lg q-pb-lg" emit-value map-options
              @input="queryDutyFrequencyList(1)" />
          </div>
          <div class="col-6">
            <q-select stack-label v-model="ShiftsNameArr" multiple :options="frequencyOptions" color="primary" filled
              clearable label="班次" option-label="Name" option-value="Id" ref="frequency"
              :rules="[val => !!val || '请选择班次']" class="col-6 q-pr-lg q-pb-lg" />
          </div>
          <div class="col-6">
            <q-select v-model="SendEmployeeId" :options="EmployeeListOption" color="primary" filled multiple clearable
              label="紧急事件抄送人员" option-label="EmployeeName" option-value="Id" ref="EmployeeNameId" emit-value map-options
              class="col-6 q-pr-lg q-pb-lg" />
          </div>
        </div>
      </q-card-section>
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeRuleForm" />
        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" @click="saveRule" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    saveDutyConfig,
    getDutyFrequencyList,
  } from "../../api/duty/index"
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      schoolOptions: {
        type: Array,
        default: []
      },
      EmployeeListOption: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        ShiftsNameArr: [],
        EmployeeNameArray: [],
        SendEmployeeId: [],
        msg: {
          Id: 0,
          EmployeeIds: "",
          MachineCode: "",
          Shifts: '',
          SendEmployeeIds: "", //突发事件抄送人员
          School_Id: "",
        },
        frequencyOptions: [], //班次列表
        persistent: true,
      }
    },
    created() {

    },
    mounted() {
      if (this.saveObj && this.saveObj.Id > 0) {
        this.msg.School_Id = this.saveObj.School_Id;
        this.queryDutyFrequencyList(2);

        this.msg.Id = this.saveObj.Id;
        this.EmployeeNameArray = this.saveObj.EmployeeIdList;
        this.SendEmployeeId = this.saveObj.SendEmployeeIdList;
        this.msg.MachineCode = this.saveObj.MachineCode;
      }
    },
    methods: {
      //获取班次列表
      queryDutyFrequencyList(isclear) {
        if (isclear == 1) {
          this.ShiftsNameArr = [];
        }
        this.frequencyOptions = [];
        var temp = [];
        temp.push(this.msg.School_Id);
        getDutyFrequencyList({
          School_Ids: temp
        }).then(res => {
          if (res.Code == 1) {
            this.frequencyOptions = res.Data;
            if (isclear == 2) {
              let ShiftsNameids = this.saveObj.Shifts.split(",");
              this.ShiftsNameArr = []
              ShiftsNameids.map((item) => {
                this.frequencyOptions.map((_item) => {
                  if (_item.Id == item) {
                    this.ShiftsNameArr.push(_item)
                  }
                })
              })
            }
          }
        })
      },
      //保存信息
      saveRule() {
        if (this.SendEmployeeId && this.SendEmployeeId.length > 0) {
          this.msg.SendEmployeeIds = this.SendEmployeeId.toString();
        }
        if (this.EmployeeNameArray && this.EmployeeNameArray.length > 0) {
          this.msg.EmployeeIds = this.EmployeeNameArray.toString();
        }
        this.$refs.EmployeeName.validate();
        this.$refs.frequency.validate();
        this.$refs.MachineCode.validate();
        if (!this.$refs.EmployeeName.hasError &&
          !this.$refs.frequency.hasError &&
          !this.$refs.MachineCode.hasError) {
          this.msg.Shifts = this.ShiftsNameArr.map(item => item.Id).toString();
          saveDutyConfig(this.msg).then(res => {
            if (res.Code == 1) {
              this.$emit('success');
              this.closeRuleForm();
            } else {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: res.Message,
                position: 'top'
              })
            }
          })
        }
      },
      //关闭窗口
      closeRuleForm() {
        this.$emit('close');
        this.persistent = false
      },
    },
  }

</script>
