<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" v-if="this.msg.Id === 0">添加事件</div>
        <div class="text-h6" v-if="this.msg.Id > 0">修改事件</div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        <div class="row">
          <div class="col-6 q-pr-lg">
            <q-input filled v-model="msg.Title" label="标题" />
          </div>
          <div class="col-6">
            <q-select
              @input=""
              standout="bg-primary text-white"
              v-model="msg.EventType"
              class="col-6"
              option-label="Name"
              option-value="Id"
              :options="typeOpts"
              emit-value
              map-options
              label="类型"
            />
          </div>
        </div>
        <q-input
          filled
          type="textarea"
          :rows="3"
          style="margin-top: 20px"
          stack-label
          maxlength="2000"
          v-model="msg.EventContent"
          :dense="false"
          class="col-12 q-pb-lg"
          label="内容"
        />
        <div class="row wrap" style="padding-top: 20px">
          <div style="display: flex; flex-wrap: wrap">
            <div
              v-if="msg.EventPicList && msg.EventPicList.length > 0"
              v-for="(item, index) in msg.EventPicList"
            >
              <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-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"
          :loading="saveLoading"
          @click="save"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
import { UploadSelfFile } from "../../api/common/common";
import { addEvent } from "../../api/stuMan/index.js";
export default {
  props: {
    setObj: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      persistent: true,
      saveLoading: false,
      msg: {
        Id: 0,
        StuId: 0,
        School_Id: 0,
        EventType: 2,
        EventContent: "",
        Title: "",
        EventPicList: [],
      },
      typeOpts: [
        {
          Name: "处分",
          Id: 1,
        },
        {
          Name: "奖励",
          Id: 2,
        },
      ],
    };
  },
  mounted() {
    if (this.setObj) {
      if (this.setObj.STUID) {
        this.msg.StuId = this.setObj.STUID;
      }
      if (this.setObj.School_Id) {
        this.msg.School_Id = this.setObj.School_Id;
      }
      if (this.setObj.Id > 0) {
        this.msg.Id = this.setObj.Id;
        if (this.setObj.EventType) {
          this.msg.EventType = this.setObj.EventType;
        }
        if (this.setObj.Title) {
          this.msg.Title = this.setObj.Title;
        }
        if (this.setObj.EventContent) {
          this.msg.EventContent = this.setObj.EventContent;
        }
        if (this.setObj.EventPicList) {
          this.msg.EventPicList = this.setObj.EventPicList;
        }
      } else {
        this.msg.Id = 0;
        this.msg.EventType = 2;
        this.msg.Title = "";
        this.msg.EventContent = "";
        this.msg.EventPicList = [];
      }
    } else {
      this.msg.Id = 0;
      this.msg.EventType = 2;
      this.msg.Title = "";
      this.msg.EventContent = "";
      this.msg.EventPicList = [];
    }
    this.$forceUpdate();
  },
  methods: {
    closeSaveForm() {
      this.$emit("close");
      this.persistent = false;
    },
    save() {
      this.saveLoading = true;
      addEvent(this.msg)
        .then((res) => {
          this.saveLoading = false;
          if (res.Code === 1) {
            this.$message.success("操作成功");
            this.$emit("success");
            this.persistent = false;
          } else {
            this.$message.error(res.Message);
          }
        })
        .catch((err) => {
          this.saveLoading = false;
        });
    },
    uploadFile(files) {
      UploadSelfFile("studentIcon", files, (res) => {
        if (res.Code == 1) {
          this.msg.EventPicList.push(res.FileUrl);
        }
      });
    },
    //删除图片
    deleteItemImg(index) {
      this.msg.EventPicList.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 0.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>
