<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 600px;max-width:600px;">
      <q-card-section>
        <div class="text-h6">{{objOption.RoomId==0?'新增教室信息':'修改教室信息'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="text-caption q-mb-lg q-px-md text-grey-6">教室信息</div>
        <div class="row wrap">
          <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-12 q-pb-lg" emit-value
            map-options :rules="[val => !!val || '请选择所属校区']" />
        </div>
        <div class="row wrap">
          <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.RoomName" ref="RoomName"
            class="col-12" label="教室名称" :rules="[val => !!val || '请填写教室名称']" />
        </div>
        <div class="row wrap">
          <q-input filled stack-label :min="0" type="number" :dense="false" v-model.number="objOption.SeatNum" ref="SeatNum"
            class="col-12" label="座位数" :rules="[val => !!val||val>=0 || '请填写座位数']" />
        </div>
         <div class="row wrap">
                <el-time-select
                    class="q-mr-lg"
                    v-model="objOption.StartTime"
                    :picker-options="{
                    start: '00:00',
                    step: '00:15',
                    end: '23:55',
                    maxTime:objOption.EndTime
                  }"
                  placeholder="排班开始时间(格式00:00)">
                </el-time-select>
                
                <el-time-select
                    v-model="objOption.EndTime"
                    
                    :picker-options="{
                    start: '06:00',
                    step: '00:15',
                    end: '23:55',
                    minTime:objOption.StartTime
                  }"
                  placeholder="排班结束时间(格式00:00)">
                </el-time-select>
        </div>
        <div class="row wrap" style="padding-top:20px">
           
              <!-- <q-uploader style="display: inline-block;min-height:320px; max-width: 100%;background-repeat:no-repeat"
               max-files="10" hide-upload-btn
               label="教室封面" :max-file-size="5*1024*1024" accept=".jpg, image/*" auto-upload multiple batch
              :factory="uploadFile">
            </q-uploader>  -->
            <div style="display:flex;flex-wrap: wrap;">
              <div v-if="objOption.RoomPicList&&objOption.RoomPicList.length>0" v-for="(item,index) in objOption.RoomPicList">
                <div class="ItemImgDiv">
                  <q-img :src="item" spinner-color="white" style="height: 100%;height:100%" />
                  <q-btn size="7px" @click="deleteItemImg(index)" style="position:absolute;right:-5px;top:-5px;" round color="red" icon="iconfont icon-guanbi1" />
                </div>
              </div>
              <el-upload
                class="avatar-uploader addDutyMain"
                action=""
                :before-upload="uploadFile"
                :show-file-list="false"
                >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </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="closeClassRoomSaveForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="saveClassRoom" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    getSchoolDropdown,
    quertClassRoomInfo,
    saveClassRoom
  } from '../../../api/school/index'
  import {
    UploadSelfFile,
  } from '../../../api/common/common'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {
          RoomId: 0,
          RoomName: "", //教室名称
          School_Id: 0, //校区编号
          Status: -1, //状态
          StartTime:"06:00",//排班开始时间
          EndTime:"",//排班结束时间
          SeatNum:0,//座位数
          RoomPicList:[],//教室图片
        },
        optionTitle: "",
        schoolList: [],
        saveLoading: false,
      }
    },
    created() {
     
    },
    mounted() {
      this.getSchool();
      this.initObj();
    },
    methods: {
      initObj() {
        if (this.saveObj && this.saveObj.RoomId > 0) {
          this.optionTitle = "修改教室信息";
          quertClassRoomInfo({
            RoomId: this.saveObj.RoomId
          }).then(res => {
            if (res.Code == 1) {
              this.objOption.RoomId = res.Data.RoomId;
              this.objOption.RoomName = res.Data.RoomName;
              this.objOption.School_Id = res.Data.School_Id;
              this.objOption.StartTime=res.Data.StartTime||"06:00";//排班开始时间
              this.objOption.EndTime=res.Data.EndTime||"";//排班结束时间
              this.objOption.SeatNum=res.Data.SeatNum;//座位数
              this.objOption.RoomPicList=res.Data.RoomPicList;//教室图片
            }
          });
        } else {
          this.optionTitle = "新增教室";
          this.objOption.RoomId = 0;
          this.objOption.RoomName = "";
          this.objOption.School_Id = 0;
          this.objOption.StartTime="06:00";//排班开始时间
          this.objOption.EndTime="";//排班结束时间
          this.objOption.SeatNum=0;//座位数
          this.objOption.RoomPicList=[];//教室图片
        }
      },
      //获取校区列表
      getSchool() {
        getSchoolDropdown({}).then(res => {
          var tempArray = res.Data;
          if (!tempArray) {
            tempArray = [];
          }
          var obj = {
            SName: '不限',
            SId: 0
          }
          tempArray.unshift(obj);
          this.schoolList = tempArray;
        })
      },
      closeClassRoomSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      saveClassRoom() {
        if(!this.objOption.StartTime){
           this.$q.notify({
          type: 'negative',
          position: "top",
          message: `请选择排班开始时间`
          })
          return
        }
        if(!this.objOption.EndTime){
           this.$q.notify({
          type: 'negative',
          position: "top",
          message: `请选择排班结束时间`
          })
          return
        }
        this.saveLoading = true
        this.$refs.School_Id.validate()
        this.$refs.RoomName.validate()
        if (
          !this.$refs.School_Id.hasError &&
          !this.$refs.RoomName.hasError
        ) {
          if (!Array.isArray(this.objOption.RoomPicList)) {
             this.objOption.RoomPicList=[this.objOption.RoomPicList]
          }
          saveClassRoom(this.objOption).then(res => {
            this.saveLoading = false
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.$emit("success")
            this.closeClassRoomSaveForm()
          }).catch(() => {
            this.saveLoading = false
          })
        } else {
          this.saveLoading = false
        }
      },
     
       onRejected(rejectedEntries) {
        this.$q.notify({
          type: 'negative',
          position: "top",
          message: `文件验证失败，请重新上传`
        })
      },
       uploadFile(files) {
        UploadSelfFile('studentIcon', files, res => {
          if (res.Code == 1) {
            this.objOption.RoomPicList.push(res.FileUrl);
          }
        })
      },
       //删除图片
      deleteItemImg(index){
        this.objOption.RoomPicList.splice(index,1);
      }
    }
  }

</script>
<style>
  .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    width:100%;
    height:100%;
    color:#8c939d;
    position: relative;
    overflow: hidden;
  }
  .addDutyMain{
    display:inline-block;
    width:118px;
    height:118px;
    font-size:70px;
    border: 1px dashed #d9d9d9;
    line-height:120px;
  }
  .ItemImgDiv{
    width:118px;
    height:118px;
    position: relative;
    margin:0 10px 10px 0;
    display:inline-block;
  }
._delete_img{position: absolute;top: 0px;height:82px;width:143px;line-height: 34px;text-align: center;background-color: rgba(2, 2, 2, 0.6);display: inherit;opacity: 0;transition: all linear .5s}
._delete_img i.iconfont{display: inline-block;width: 32px;height: 32px;border-radius: 50%;color: #E95252 !important;background-color:rgba(251, 251, 251, 0.9);   margin-top: 26px;}
._upload_box ul li{float: left;height:82px;width:143px;padding:0px 20px 20px 0;text-align: center;position: relative;cursor: pointer;margin-right: 10px;}
._upload_box ul li img{height:82px;width:143px;}
._upload_box ul li:hover ._delete_img{opacity: 1;}
._upload_tips{font-size: 12px;position: absolute;top: 71%;width: 100%;left: 0;text-align: center;color: #949494;}
</style>
