<template>
  <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale"
    class="addactivetype">
    <q-card style="width: 450px;max-width:500px;">
      <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-12">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="addMsg.TypeName" ref="Name"
              class="col-12 q-pb-lg" label="活动类型名称" :rules="[val => !!val || '请填写活动类型名称']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-12">
            <q-uploader :style="{ backgroundImage: 'url(' + addMsg.CoverImage + ')' }"
              style="width:auto;height:500px;background-repeat:no-repeat;background-size:cover; border:1px solid #eee"
              flat hide-upload-btn max-files="1" label="封面图" accept=".jpg, image/*" :factory="uploadFile" auto-upload>
            </q-uploader>
          </div>
        </div>
        <div class="row wrap">
          <div class="q-mt-lg q-mb-sm">标签</div>
          <div class="col-12 q-gutter-sm row">
            <el-tag :key="index" v-for="(tag,index) in dynamicTags" closable :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
              @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
          </div>
        </div>
        <div class="row wrap">
          <div class="q-mt-lg q-mb-sm">简介</div>
          <div class="col-12">
            <Ueditor :value="ueditor.value" :config="ueditor.config" @input="setVal" ref="ue" no-margin
              :isShowInsertImage="false" :isShowAttachment="false" :isShowVoice="false"></Ueditor>
          </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 {
    UploadSelfFile
  } from "../../api/common/common";
  import Ueditor from "../editor/UeEditor";
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
    },
    components: {
      Ueditor
    },
    data() {
      return {
        addMsg: {
          Id: 0,
          TypeName: "",
          CoverImage: "",
          LableNameList: [],
          TypeContent: "",
        },
        persistent: true,
        //标签
        dynamicTags: [], //标签数组
        inputVisible: false,
        inputValue: '',
        //富文本
        ueditor: {
          value: "",
          config: {
            initialFrameWidth: null,
            initialFrameHeight: 100,
            autoHeightEnabled: true,
            enableContextMenu: false
          }
        },
      }
    },
    mounted() {
      if (this.saveObj && this.saveObj.Id > 0) {
        this.addMsg.Id = this.saveObj.Id
        this.addMsg.CoverImage = this.saveObj.CoverImage
        this.dynamicTags = this.saveObj.LableNameList
        this.addMsg.TypeName = this.saveObj.TypeName
        this.addMsg.TypeContent = this.saveObj.TypeContent
        this.setVal(this.addMsg.TypeContent);
      } else {
        this.addMsg.Id = 0
        this.addMsg.CoverImage = ""
        this.dynamicTags = []
        this.addMsg.TypeName = ""
        this.addMsg.TypeContent = ""
        this.setVal("");
      }
    },
    methods: {
      uploadFile(files) {
        UploadSelfFile("course", files[0], res => {
          if (res.Code == 1) {
            this.addMsg.CoverImage = res.FileUrl;
          }
        });
      },
      //保存信息
      saveRule() {
        this.$refs.Name.validate();
        if (!this.$refs.Name.hasError) {
          this.addMsg.LableNameList = this.dynamicTags;
          this.apipostDS("/api/Education/SetCommerceActivityType", this.addMsg, (res) => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message);
              this.closeRuleForm();
              this.$emit('success');
            } else {
              this.Error(res.data.message);
            }
          })
        }
      },
      //关闭窗口
      closeRuleForm() {
        this.$emit('close');
        this.persistent = false
      },
      //   标签
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      //删除标签
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      //   富文本
      setVal(val) {
        this.addMsg.TypeContent = val;
        this.ueditor.value = decodeURIComponent(val);
      },
    },
  }
</script>
<style scoped>
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
    margin-right: 5px;
  }

  .el-tag {
    margin-right: 5px;
  }

  .el-form-item__content {
    line-height: 0;
  }

  .el-button {
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    height: 32px;
    margin-top: 8px;
  }
</style>