<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-input filled stack-label maxlength="20" :dense="false" v-model="msg.ItemName" ref="ItemName"
              class="col-6 q-pr-lg q-pb-lg" label="事项名称" :rules="[val => !!val || '请填写事项名称']" />
          </div>
          <div class="col-6">
            <q-select stack-label color="primary" filled clearable label="选择事项类型" option-value="Id" option-label="Name"
              :options="itemTypeOptions" v-model="msg.ItemType" ref="ItemType" :rules="[val => !!val || '请选择事项类型']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-select stack-label v-model="FrequencyArr" multiple :options="frequencyOptions" color="primary" filled
              clearable label="选择班次" option-label="Name" option-value="Id" ref="Shifts"
              @input="getSchoolListByFrequencyIds" :rules="[val => !!val || '请选择班次']" class="col-6 q-pr-lg q-pb-lg" />
          </div>
          <div class="col-6">
            <q-select stack-label v-model="schoolArr" multiple :options="schoolOptions" color="primary" filled clearable
              label="选择校区" option-label="SName" option-value="SId" ref="ItemSchools"
              @input="getDutyFrequencyBySchoolIds" :rules="[val => !!val || '请选择校区']" />
          </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 {
    getSetDutyItemModel,
    getSchoolListByFrequencyIds,
    getDutyFrequencyBySchoolIds,
    getDutyFrequencyList
  } from "../../api/duty/index"
  import {
    getSchoolDropdown
  } from '../../api/school/index'; //获取校区列表
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },

      itemTypeOptions: {
        type: Array,
        default: []
      },
    },
    data() {
      return {
        itemArr: [],
        FrequencyArr: [],
        schoolArr: [],
        msg: {
          Id: 0,
          ItemName: "",
          ItemSchools: "",
          ItemType: "",
          Shifts: ""
        },
        persistent: true,
        schoolOptions: [],
        frequencyOptions: [],
      }
    },
    computed: {},
    created() {
      this.getCompanyList();
      this.getDutyFrequencyList();
    },
    mounted() {
      if (this.saveObj && this.saveObj.Id > 0) {
        let schoolids = this.saveObj.ItemSchools.split(",");
        this.schoolArr = []
        schoolids.map((item) => {
          this.schoolOptions.map((_item) => {
            if (_item.SId == item) {
              this.schoolArr.push(_item)
            }
          })
        })
        let frequencyids = this.saveObj.Shifts.split(",");
        this.FrequencyArr = []
        frequencyids.map((item) => {
          this.frequencyOptions.map((_item) => {
            if (_item.Id == item) {
              this.FrequencyArr.push(_item)
            }
          })
        })
        this.msg.Id = this.saveObj.Id;
        this.msg.ItemName = this.saveObj.ItemName;
        this.msg.ItemType = this.saveObj.ItemType;
      }
    },
    methods: {
      //保存信息
      saveRule() {
        this.$refs.ItemName.validate();
        this.$refs.ItemType.validate();
        this.$refs.Shifts.validate();
        this.$refs.ItemSchools.validate();
        if (!this.$refs.ItemName.hasError &&
          !this.$refs.ItemType.hasError &&
          !this.$refs.Shifts.hasError &&
          !this.$refs.ItemSchools.hasError) {
          this.msg.ItemSchools = this.schoolArr.map(item => item.SId).toString();
          getSetDutyItemModel(this.msg).then(res => {
            if (res.Code == 1) {
              this.$emit('success');
              this.closeRuleForm();
            }
          })
        }
      },
      //关闭窗口
      closeRuleForm() {
        this.$emit('close');
        this.persistent = false
      },
      //根据班次获取学校信息
      getSchoolListByFrequencyIds() {
        let Shifts = this.FrequencyArr.map(item => item.Id).toString();
        getSchoolListByFrequencyIds({
          Shifts: Shifts
        }).then((res) => {
          this.schoolOptions = res.Data;
        })
      },
      //根据学校id获取对应的班次
      getDutyFrequencyBySchoolIds() {
        let SchoolIds = this.schoolArr.map(item => item.SId).toString();
        getDutyFrequencyBySchoolIds({
          SchoolIds: SchoolIds
        }).then((res) => {
          this.frequencyOptions = res.Data
        })
      },
      //获取校区列表
      getCompanyList() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            this.schoolOptions = res.Data;
          }
        })
      },
      //获取班次列表
      getDutyFrequencyList() {
        getDutyFrequencyList({}).then(res => {
          if (res.Code == 1) {
            this.frequencyOptions = res.Data;
          }
        })
      },
    },
  }

</script>
