<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 500px;max-width:500px;">
      <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 stack-label maxlength="20" :dense="false" v-model="objOption.SubjectName" ref="SubjectName"
            class="col-12 q-pb-lg" :rules="[val => !!val || '请输入科目名称']" label="科目名称" />
        </div>
        <div class="row wrap">
          <div style="display:flex;flex-wrap: wrap;">
            <div v-if="objOption.SubjectIcon">
              <div class="ItemImgDiv">
                <q-img :src="objOption.SubjectIcon" spinner-color="white" style="height: 100%;height:100%" />
                <q-btn size="7px" @click="deleteItemImg" style="position:absolute;right:-5px;top:-5px;" round
                  color="red" icon="iconfont icon-guanbi1" />
              </div>
            </div>
            <el-upload v-if="objOption.SubjectIcon==''" 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="closeSubject" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="saveSubject" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    queryCourseSubject,
    saveCourseSubject
  } from '../../api/course/index'
  import {
    UploadSelfFile,
  } from '../../api/common/common'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {
          Id: 0,
          SubjectName: '',
          SubjectIcon: '', //图标
        },
        schoolList: [],
        saveLoading: false,
      }
    },
    created() {

    },
    mounted() {
      this.initObj();
    },
    methods: {
      initObj() {
        if (this.saveObj && this.saveObj.Id > 0) {
          queryCourseSubject({
            Id: this.saveObj.Id
          }).then(res => {
            if (res.Code == 1) {
              this.objOption.Id = res.Data.Id;
              this.objOption.SubjectName = res.Data.SubjectName;
              this.objOption.SubjectIcon = res.Data.SubjectIcon;
            }
          });
        } else {
          this.objOption.Id = 0;
          this.objOption.SubjectName = '',
            this.objOption.SubjectIcon = ''
        }
      },

      closeSubject() {
        this.$emit('close')
        this.persistent = false
      },
      saveSubject() {
        this.$refs.SubjectName.validate()
        if (!this.$refs.SubjectName.hasError) {
          this.saveLoading = true
          saveCourseSubject(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.closeSubject()
          }).catch(() => {
            this.saveLoading = false
          })
        } else {
          this.saveLoading = false
        }
      },
      uploadFile(files) {
        UploadSelfFile('Icon', files, res => {
          if (res.Code == 1) {
            this.objOption.SubjectIcon = res.FileUrl;
          }
        })
      },
      //删除图片
      deleteItemImg(index) {
        this.objOption.SubjectIcon = '';
      }
    }
  }
</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;
  }
</style>