<template>
  <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale" class="addactivetype">
    <q-card style="width: 600px;max-width:800px;">
      <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 q-mb-lg">
          <div class="col-12">
            <q-input  clearable standout="bg-primary text-white" v-model="addMsg.Title" label="标题" stack-label
             maxlength="20" />
          </div>
        </div>
        <div class="row wrap q-mb-lg">
          <div class="col-12">
            <q-select standout="bg-primary text-white" v-model="addMsg.IsFee" :options="statusOpts" stack-label
                        emit-value map-options label="类型" />
          </div>
        </div>
        <div class="row wrap" v-show='addMsg.IsFee==1'>
          <div class="col-12">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="addMsg.ChargeAmount" ref="ChargeAmount" stack-label
              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-sm 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> -->
        <div class="row wrap q-mt-lg">
          <div class="col-12">
            <q-uploader :style="{ backgroundImage: 'url(' + addMsg.PictureUrl + ')' }" 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="uploadFile1" auto-upload no-thumbnails>
            </q-uploader>
          </div>
        </div>
        <div class="row wrap q-mt-lg">
          <div class="col-12">
            <q-uploader :style="{ backgroundImage: 'url(' + addMsg.SamplePicturesUrl + ')' }" 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="uploadFile2" auto-upload no-thumbnails>
            </q-uploader>
          </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";
  import {SetAdvertising} from '../../api/AD/index.js'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
    },
    components: { Ueditor },
    data() {
      return {
        addMsg: {
              ID:0,
              IsFee:2,
              ChargeAmount:0,
              PictureUrl:"",
              SamplePicturesUrl:"",
              Title:"",
              LableList:[]
        },
        persistent: true,
        //标签
        dynamicTags: [], //标签数组
        inputVisible: false,
        inputValue: '',
        //富文本
    //     ueditor: {
    //     value: "",
    //     config: {
    //       initialFrameWidth: null,
    //       initialFrameHeight: 100,
    //       autoHeightEnabled: true,
    //       enableContextMenu: false
    //     },
        
    //   },
      statusOpts:[
          {
            label: "收费",
            value: 1
          },
          {
            label: "免费",
            value: 2
          }
            ],
      }
    },
    mounted() {  
      console.log(this.saveObj)
      if (this.saveObj&&this.saveObj.ID>0) {
          this.addMsg.ID=this.saveObj.ID
             this.addMsg.IsFee=this.saveObj.IsFee
              this.addMsg.ChargeAmount=this.saveObj.ChargeAmount
               this.addMsg.PictureUrl=this.saveObj.PictureUrl
                this.addMsg.SamplePicturesUrl=this.saveObj.SamplePicturesUrl
                 this.addMsg.Title=this.saveObj.Title
                  this.addMsg.LableList=this.saveObj.LableList
          if(this.saveObj.LableList){
              this.dynamicTags=this.saveObj.LableList
          }
         
      }else{
          this.addMsg={
              ID:0,
              IsFee:2,
              ChargeAmount:0,
              PictureUrl:"",
              SamplePicturesUrl:"",
              Title:"",
              LableList:[]
          }
      }
         console.log(150, this.addMsg)
    },
    methods: {
       uploadFile1(files) {
        UploadSelfFile("course", files[0], res => {
          if (res.Code == 1) {
                  this.addMsg.PictureUrl = res.FileUrl;
                  this.$forceUpdate();
          }
        });
      },
       uploadFile2(files) {
        UploadSelfFile("course", files[0], res => {
          if (res.Code == 1) {
                  this.addMsg.SamplePicturesUrl = res.FileUrl;
                   this.$forceUpdate();
          }
        });
      },
      //保存信息
      saveRule() {
          if(this.addMsg.PictureUrl==""){
               this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请上传底图`
                })
              return
          }
          if(this.addMsg.SamplePicturesUrl==""){
              this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请上传原图`
                })
              return
          }
        // this.$refs.Name.validate();
        // if (!this.$refs.Name.hasError) {
            this.addMsg.LableList = this.dynamicTags;
            SetAdvertising(this.addMsg).then(res=>{
                if(res.Code===1){
                   this.Success("操作成功");
                   this.closeRuleForm();
                   this.$emit('success');
                }else {
                  this.Error(res.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);
      },
    },
  }

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

