<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>
