<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"
              class="col-12 q-pb-lg" label="收费金额" :rules="[val => !!val || '请填写收费金额']" />
          </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 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: '',
        statusOpts: [{
            label: "收费",
            value: 1
          },
          {
            label: "免费",
            value: 2
          }
        ],
      }
    },
    mounted() {
      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: []
        }
      }
    },
    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.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>