<style>
  @import "../../assets/css/advert/advertfont.css";
  @import "../../assets/css/advert/advmanager.css";

</style>
<template>
  <div class="adv-box page-body">
    <div v-if='bg!=""' v-loading='isLoading'>
      <div class="board" ref="board">
        <img :src="bg" class="bg" @click="currentNode={},currentNodeList=[]" />
        <a style="display:none" ref='down'></a>
        <VueDraggableResizable @click="moreSelect()" v-for="item in nodes" tabindex="0" :key="item.nodeId"
          :active="item.active" :parent="item.rotate==0||item.rotate==360?true:false"
          :style="{transform:'rotate('+item.rotate+'deg)','min-height':'100px !important'}"
          @activated="onActivated(item.nodeId)" :w="item.width" :h="item.height" :x="item.x" :y="item.y"
          :minh='item.fontSize' :minw='item.fontSize' :z="item.zindex" @resizestop="onResizstop" @dragstop="onDragstop">
          <div v-if="item.type==0" class='text'
            :style="{'font-size':item.fontSize+'px','letter-spacing':item.letterSpacing+'px','background':item.bg,'font-family':item.fontname,'color':item.color,'line-height':item.lineHeight,'text-align':item.textAlign,'font-weight':(item.isBold==0?'400':'bold'),'font-style':(item.isXie==0?'normal':'italic'),'border-radius':item.radius+'px','text-shadow':item.hshadow+'px '+item.vshadow+'px '+item.blur+'px '+item.shadowcolor,'text-stroke':item.strokeWidth+'px '+item.strokeColor}">
            {{item.content}}</div>
          <img class="img" v-if="item.type==1" :src="item.src"
            :style="{'border-radius':item.radius+'px','box-shadow':item.hshadow+'px '+item.vshadow+'px '+item.blur+'px '+item.shadowcolor,'opacity':(item.alpha/100),'border':item.strokeWidth+'px solid '+item.strokeColor}" />
          <div style='height:1px' v-if="item.type==2"
            :style="{'border-bottom':item.height+'px '+item.style+' '+item.bg,'border-radius':item.radius+'px','box-shadow':item.hshadow+'px '+item.vshadow+'px '+item.blur+'px '+item.shadowcolor,'opacity':(item.alpha/100)}">
          </div>
          <img class="img" v-if="item.type==3" :src="item.src"
            :style="{'box-shadow':item.hshadow+'px '+item.vshadow+'px '+item.blur+'px '+item.shadowcolor,'opacity':(item.alpha/100)}" />
        </VueDraggableResizable>
      </div>
      <ul class="tools">
        <li @click="returnback">
          <el-tooltip effect="dark" content="切换背景" placement="top-start">
            <i class="iconfont icon-genghuanx"></i>
          </el-tooltip>
        </li>
        <li @click="addQr">
          <el-tooltip effect="dark" content="插入二维码" placement="top-start">
            <i class="iconfont icon-QR_code"></i>
          </el-tooltip>
        </li>
        <li @click="addTitle">
          <el-tooltip effect="dark" content="插入标题" placement="top-start">
            <i class="iconfont icon-biaoti"></i>
          </el-tooltip>
        </li>
        <li @click="addP">
          <el-tooltip effect="dark" content="插入文字" placement="top-start">
            <i class="iconfont icon-duanluo"></i>
          </el-tooltip>
        </li>
        <li @click="addLine">
          <el-tooltip effect="dark" content="插入线条" placement="top-start">
            <i class="iconfont icon-hengxian"></i>
          </el-tooltip>
        </li>
        <li @click="openUploadPic">
          <el-tooltip effect="dark" content="插入图片" placement="top-start">
            <i class="iconfont icon-tupian1"></i>
          </el-tooltip>
          <input type="file" ref='addImage' style="display:none" @change="addPic" />
        </li>
        <li @click="tiggerMax" class="source">
          原图
        </li>
        <!-- <li class="save" @click="outerVisible=true">
          保存
        </li> -->
        <li class="save" @click="getFileBase64(2)">
          保存
        </li>
        <li class="down" @click="getFileBase64(1)">
          下载
        </li>
        <!-- <li class="return" @click="returnback">
                    返回
                </li> -->
      </ul>
      <div class="property-box" v-if='currentNode.type==0 && !isMax'>
        <el-form ref="form" :model="currentNode" label-width="80px">
          <el-form-item label="内容：">
            <el-input type="textarea" v-model="currentNode.content"></el-input>
          </el-form-item>
          <el-form-item label="字号：">
            <el-input-number v-model="currentNode.fontSize" :min="12" :max="280"></el-input-number>
            <label class="remark">修改文字大小</label>
          </el-form-item>
          <el-form-item label="行高：">
            <el-input-number v-model="currentNode.lineHeight" :min="1" :max="10"></el-input-number>
            <label class="remark">修改文字上下间距</label>
          </el-form-item>
          <el-form-item label="文字间距：">
            <el-input-number v-model="currentNode.letterSpacing" :min="1" :max="10"></el-input-number>
            <label class="remark">修改文字左右间距</label>
          </el-form-item>
          <el-form-item label="字体：">
            <el-select v-model="currentNode.fontname" placeholder="请选择字体">
              <el-option v-for="item in fonts" :key="item.value" :label="item.label" :value="item.value">
                <span :style="{'font-family':item.value}" style="font-size:14px;">{{ item.label }}</span>
              </el-option>
            </el-select>
            <label>加粗</label>
            <el-switch v-model="currentNode.isBold" active-color="#13ce66" active-value="1" inactive-value="0"
              inactive-color="#ccc">
            </el-switch>
            <label>斜体</label>
            <el-switch v-model="currentNode.isXie" active-color="#13ce66" active-value="1" inactive-value="0"
              inactive-color="#ccc">
            </el-switch>
          </el-form-item>
          <el-form-item label="字体阴影：">
            <el-col :span="6">
              <el-input size="mini" v-model="currentNode.hshadow">
                <template slot="prepend">水平位置</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-input size="mini" v-model="currentNode.vshadow">
                <template slot="prepend">垂直位置</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-input size="mini" v-model="currentNode.blur">
                <template slot="prepend">距离</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-color-picker v-model="currentNode.shadowcolor" show-alpha>
                <template slot="prepend">颜色</template>
              </el-color-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="对齐方式：">
            <el-button type="primary" @click='alignMethod(1)'><i class="iconfont icon-zuoduiqi"
                style="margin-right:5px"></i>左对齐</el-button>
            <el-button type="primary" @click='alignMethod(2)'><i class="iconfont icon-juzhongduiqi"
                style="margin-right:5px"></i>居中</el-button>
            <el-button type="primary" @click='alignMethod(3)'><i class="iconfont icon-youduiqi"
                style="margin-right:5px"></i>右对齐</el-button>
          </el-form-item>

          <el-form-item label="文字颜色：">
            <el-color-picker v-model="currentNode.color" show-alpha></el-color-picker>
            <label style="margin:0 0 0 15px;vertical-align: top;">背景颜色：</label>
            <el-color-picker v-model="currentNode.bg" show-alpha></el-color-picker>
          </el-form-item>
          <el-form-item label="文字描边：">
            <el-input-number v-model="currentNode.strokeWidth" :min="0" :max="30"></el-input-number>
            <label style="margin:0 0 0 15px;vertical-align: top;">描边颜色：</label>
            <el-color-picker v-model="currentNode.strokeColor" show-alpha></el-color-picker>
          </el-form-item>
          <el-form-item label="圆角：">
            <el-input-number v-model="currentNode.radius" :min="0"></el-input-number>
            <label class="remark">修改块的圆角弧度（有背景色时体现）</label>
          </el-form-item>
          <el-form-item label="旋转：">
            <el-input-number v-model="currentNode.rotate" :min="0" :max="360"></el-input-number>
            <el-slider v-model="currentNode.rotate" :max="360" :step="1"></el-slider>
          </el-form-item>
          <el-form-item label="排序：">
            <el-button type="primary" @click='moveLayer(1)'>上移</el-button>
            <el-button type="primary" @click='moveLayer(2)'>下移</el-button>
            <el-button type="primary" @click='moveLayer(3)'>置顶</el-button>
            <el-button type="primary" @click='moveLayer(4)'>置底</el-button>
          </el-form-item>
          <el-form-item label="操作：">
            <el-button type="danger" @click='operation(0)'>删除此项</el-button>
            <el-button type="success" @click='operation(1)'>复制此项</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="resorece max-resource" style="margin-left:100px" @click="tiggerMax" v-if="isMax">
        <img :src="st" />
      </div>
      <div class="property-box" v-if='currentNode.type==1 && !isMax'>
        <el-form ref="form" :model="currentNode" label-width="80px">
          <!-- <el-form-item label="宽度：">
                        <el-input-number v-model="currentNode.width" :min="0"></el-input-number>
                    </el-form-item>
                    <el-form-item label="高度">
                        <el-input-number v-model="currentNode.height" :min="0"></el-input-number>
                    </el-form-item> -->
          <el-form-item label="圆角：">
            <el-input-number v-model="currentNode.radius" :min="0"></el-input-number>
            <label class="remark">修改块的圆角弧度（有背景色时体现）</label>
          </el-form-item>
          <el-form-item label="旋转：">
            <el-input-number v-model="currentNode.rotate" :min="0" :max="360"></el-input-number>
            <el-slider v-model="currentNode.rotate" :max="360" :step="1"></el-slider>
          </el-form-item>
          <el-form-item label="阴影：">
            <el-col :span="6">
              <el-input v-model="currentNode.hshadow">
                <template slot="prepend">水平位置</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="currentNode.vshadow">
                <template slot="prepend">垂直位置</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="currentNode.blur">
                <template slot="prepend">距离</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-color-picker v-model="currentNode.shadowcolor" show-alpha>
                <template slot="prepend">颜色</template>
              </el-color-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="透明：">
            <el-slider v-model="currentNode.alpha" :max="100" :step="1"></el-slider>
          </el-form-item>
          <el-form-item label="图片描边：">
            <el-input-number v-model="currentNode.strokeWidth" :min="0" :max="30"></el-input-number>
            <label style="margin:0 0 0 15px;vertical-align: top;">描边颜色：</label>
            <el-color-picker v-model="currentNode.strokeColor" show-alpha></el-color-picker>
          </el-form-item>
          <el-form-item label="排序：">
            <el-button type="primary" @click='moveLayer(1)'>上移</el-button>
            <el-button type="primary" @click='moveLayer(2)'>下移</el-button>
            <el-button type="primary" @click='moveLayer(3)'>置顶</el-button>
            <el-button type="primary" @click='moveLayer(4)'>置底</el-button>
          </el-form-item>
          <el-form-item label="操作：">
            <el-button type="danger" @click='operation(0)'>删除此项</el-button>
            <el-button type="success" @click='operation(1)'>复制此项</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="property-box" v-if='currentNode.type==2 && !isMax'>
        <el-form ref="form" :model="currentNode" label-width="80px">
          <el-form-item label="圆角：">
            <el-input-number v-model="currentNode.radius" :min="0"></el-input-number>
            <label class="remark">修改块的圆角弧度（有背景色时体现）</label>
          </el-form-item>
          <el-form-item label="旋转：">
            <el-input-number v-model="currentNode.rotate" :min="0" :max="360"></el-input-number>
            <el-slider v-model="currentNode.rotate" :max="360" :step="1"></el-slider>
          </el-form-item>
          <el-form-item label="阴影：">
            <el-col :span="6">
              <el-input v-model="currentNode.hshadow">
                <template slot="prepend">水平位置</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="currentNode.vshadow">
                <template slot="prepend">垂直位置</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="currentNode.blur">
                <template slot="prepend">距离</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-color-picker v-model="currentNode.shadowcolor" show-alpha>
                <template slot="prepend">颜色</template>
              </el-color-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="透明：">
            <el-slider v-model="currentNode.alpha" :max="100" :step="1"></el-slider>
          </el-form-item>
          <el-form-item label="颜色：">
            <el-color-picker v-model="currentNode.bg" show-alpha></el-color-picker>
          </el-form-item>
          <el-form-item label="线条样式：">
            <el-select v-model="currentNode.style">
              <el-option label="实线" value='solid'></el-option>
              <el-option label="点线" value='dotted'></el-option>
              <el-option label="虚线" value='dashed'></el-option>
              <el-option label="双线" value='double'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序：">
            <el-button type="primary" @click='moveLayer(1)'>上移</el-button>
            <el-button type="primary" @click='moveLayer(2)'>下移</el-button>
            <el-button type="primary" @click='moveLayer(3)'>置顶</el-button>
            <el-button type="primary" @click='moveLayer(4)'>置底</el-button>
          </el-form-item>
          <el-form-item label="操作：">
            <el-button type="danger" @click='operation(0)'>删除此项</el-button>
            <el-button type="success" @click='operation(1)'>复制此项</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="property-box" v-if='currentNode.type==3 && !isMax'>
        <el-form ref="form" :model="currentNode" label-width="80px">
          <el-form-item label="类型：">
            <el-select v-model="qrCodeType" placeholder="请选择">
              <el-option :key="0" label="普通二维码" :value="0"></el-option>
              <el-option :key="1" label="小程序二维码" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="路径：" v-show="qrCodeType===1">
            <el-input v-model="qrPath">
              <template slot="prepend">/pages/</template>
            </el-input>
          </el-form-item>
          <el-form-item label="内容：" v-show="qrCodeType===0">
            <el-input type="textarea" v-model="currentNode.content"></el-input>
          </el-form-item>
          <el-form-item label="背景颜色：" v-show="qrCodeType===0">
            <div class="" style="display:flex;align-items:center;">
              <el-color-picker v-model="currentNode.bg"></el-color-picker>
              <label style="margin:0 0 0 15px;vertical-align: top;">前置颜色：</label>
              <el-color-picker v-model="currentNode.forecolor"></el-color-picker>
            </div>

          </el-form-item>
          <el-form-item label="">
            <el-button type="danger" @click='getQRCode'>重新生成二维码</el-button>
          </el-form-item>
          <el-form-item label="旋转：">
            <el-input-number @mousewheel.native="whellRotate()" v-model="currentNode.rotate" :min="0" :max="360">
            </el-input-number>
            <el-slider v-model="currentNode.rotate" :max="360" :step="1"></el-slider>
          </el-form-item>
          <el-form-item label="阴影：">
            <el-col :span="6">
              <el-input size="mini" v-model="currentNode.hshadow">
                <template slot="prepend">水平位置</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-input size="mini" v-model="currentNode.vshadow">
                <template slot="prepend">垂直位置</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-input size="mini" v-model="currentNode.blur">
                <template slot="prepend">距离</template>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-color-picker v-model="currentNode.shadowcolor" show-alpha>
                <template slot="prepend">颜色</template>
              </el-color-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="透明：">
            <el-slider v-model="currentNode.alpha" :max="100" :step="1"></el-slider>
          </el-form-item>
          <el-form-item label="排序：">
            <el-button type="primary" @click='moveLayer(1)'>上移</el-button>
            <el-button type="primary" @click='moveLayer(2)'>下移</el-button>
            <el-button type="primary" @click='moveLayer(3)'>置顶</el-button>
            <el-button type="primary" @click='moveLayer(4)'>置底</el-button>
          </el-form-item>
          <el-form-item label="操作：">
            <el-button type="danger" @click='operation(0)'>删除此项</el-button>
            <el-button type="success" @click='operation(1)'>复制此项</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-if='bg==""' class='advmanager-box'>
      <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-3">
            <q-select @input="getaddatas(0)" standout="bg-primary text-white" v-model="adMsg.IsFee"
              :options="statusOpts" emit-value map-options label="类型" />
          </div>
        </div>
      </div>
      <div class="content">
        <vueWaterfallEasy :imgsArr="addatas" ref="waterfall" @scrollReachBottom="handleCurrentChange" :maxCols='7'
          :imgWidth='208' :enablePullDownEvent='true' v-if="addatas.length>0">
          <template slot-scope="props">
            <span class="money" v-if="props.value.IsFee==1">￥{{props.value.ChargeAmount.toFixed(2)}}</span>
            <span class="free" v-else>{{$t('advmanager.v_free')}}</span>
            <div class="star-box">
              <i class="iconfont icon-star star"></i>&nbsp; {{props.value.AdvertisingCount}}
            </div>
            <div class="label-box" v-if="props.value.LableList.length>0">
              <div v-for="(item,index) in props.value.LableList" :key="index" class="ad-label" v-if="index<3">
                {{ item }}
              </div>
            </div>
            <div class="zezhao">
              <i class="el-icon-edit-outline" title="选择此图" @click="chosenbg(props.value)"></i>
            </div>
          </template>
          <div slot="waterfall-over">没有更多了</div>
        </vueWaterfallEasy>
        <div v-if="addatas.length===0" style="text-align:center">
          暂无数据
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import VueDraggableResizable from 'vue-draggable-resizable'
  import QRCode from 'qrcode'
  import browserMD5File from 'browser-md5-file';
  import vueWaterfallEasy from 'vue-waterfall-easy'
  import h2c from 'html2canvas'
  // import Canvas2Image from 'Canvas2Image'
  import {
    getAdvertisingList,
    saveMakeAd,
    getMyAdDetail
  } from '../../api/AD/index.js'

  import {
    UploadViittoBlobFile
  } from '../../api/common/common'
  export default {
    components: {
      VueDraggableResizable,
      vueWaterfallEasy
    },
    data() {
      return {
        statusOpts: [{
            label: "全部",
            value: 0
          },
          {
            label: "收费",
            value: 1
          },
          {
            label: "免费",
            value: 2
          }
        ],
        isLoading: true,
        isMax: false,
        outerVisible: false,
        AssociatedTeam: true,
        imgUrl: '',
        currentZIndex: 100,
        currentMaxId: 0,
        nodes: [],
        currentnodeId: -1,
        user: {},
        currentNode: {
          nodeId: 0,
          type: -1,
          lineHeight: '1',
          bg: null,
          color: '#333',
          zindex: 100,
          content: '',
          textAlign: 'center',
          fontSize: 16,
          fontname: '微软雅黑',
          active: false,
          letterSpacing: 1,
          isBold: 0,
          isXie: 0,
          radius: 0,
          rotate: 0,
          hshadow: 0,
          vshadow: 0,
          blur: 0,
          shadowcolor: null,
          alpha: 100,
          width: 0,
          height: 0,
          style: 'solid',
          strokeWidth: 0,
          strokeColor: null
        },
        fonts: [],
        bg: '',
        st: '',
        templateId: 0,
        backBg: '',
        backSt: '',
        lines: [],
        teams: [],
        modelTeams: [],
        countrys: [],
        addatas: [],
        pageIndex: 1,
        pageSize: 50,
        total: 0,
        msg: {
          lineId: '0',
          teamId: '0',
          countryId: '0',
          type: '0'
        },
        dataId: 0,
        isCtrl: false,
        currentNodeList: [],
        TCID: 0,
        adMsg: {
          pageIndex: 1,
          pageSize: 10,
          IsFee: 0
        },
        qrcodeImg: "",
        qrCodeType: 0,
        qrPath: ""
      }
    },
    mounted() {

      if (this.$route.query.id) {
        this.dataId = this.$route.query.id
      }
      //   this.user = JSON.parse(window.localStorage.userInfo)
      if (this.dataId != 0) {
        this.bg = ' '
        this.loadObj()
      } else {
        this.isLoading = false
      }

      //   this.loadingFont(this.nodes[0])
      this.nodes.forEach(x => {
        this.currentZIndex = x.zindex > this.currentZIndex ? x.zindex : this.currentZIndex
        this.currentMaxId = x.nodeId > this.currentMaxId ? x.nodeId : this.currentMaxId
      })
      this.fonts.push({
        'label': '默认',
        'value': '微软雅黑'
      })
      this.fonts.push({
        'label': '苹果黑体',
        'value': 'pingfang'
      })
      this.fonts.push({
        'label': '时尚中黑体',
        'value': 'sszhjt'
      })
      this.fonts.push({
        'label': '方正剪纸体',
        'value': 'fzjzjt'
      })
      this.fonts.push({
        'label': '方正喵呜体',
        'value': 'fzmwt'
      })
      this.fonts.push({
        'label': '方正铁筋隶书体',
        'value': 'fztjlst'
      })
      this.fonts.push({
        'label': '方正硬笔行书体',
        'value': 'FZYBXSJW'
      })
      this.fonts.push({
        'label': '汉仪萝卜体',
        'value': 'hxlbjt'
      })
      this.fonts.push({
        'label': '汉仪火柴体',
        'value': 'hybqt'
      })
      this.fonts.push({
        'label': '汉仪哈哈体',
        'value': 'hyhht'
      })
      this.fonts.push({
        'label': '汉仪凌波体',
        'value': 'hylbt'
      })
      this.fonts.push({
        'label': '汉仪清韵体',
        'value': 'hyqytj'
      })
      this.fonts.push({
        'label': '汉仪娃娃篆体',
        'value': 'hywwzj'
      })
      this.fonts.push({
        'label': '汉仪燕翎体',
        'value': 'hyyltj'
      })
      this.fonts.push({
        'label': '迷你菱心体',
        'value': 'jlx'
      })
      this.fonts.push({
        'label': '叶根友圆趣卡通体',
        'value': 'katongjian'
      })
      this.fonts.push({
        'label': '叶根友毛笔行书体',
        'value': 'YGYXSZITI'
      })
      //   this.getline()
      this.getaddatas(0)
      var sUserAgent = navigator.userAgent;
      var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
      var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform ==
        "Macintosh") || (navigator.platform == "MacIntel");
      document.addEventListener('keydown', e => {
        if ((e.keyCode === 17 && isWin) || (e.keyCode === 91 && isMac)) {
          this.isCtrl = true
        }
      })
      document.addEventListener('keyup', e => {
        if ((e.keyCode === 17 && isWin) || (e.keyCode === 91 && isMac)) {
          this.isCtrl = false
        }
      })
    },
    methods: {
      loadObj() {
        getMyAdDetail({
          ID: this.dataId
        }).then(res => {
          this.isLoading = false
          if (res.Code === 1) {
            let data = res.Data
            this.dataId = data.ID,
              this.bg = data.PictureUrl + '?width=470'
            this.st = data.SamplePicturesUrl + '?width=470'
            this.templateId = data.AdvertisingID
            this.nodes = JSON.parse(data.Content)
            this.nodes.forEach(y => {
              this.currentZIndex = y.zindex > this.currentZIndex ? y.zindex : this.currentZIndex
              this.currentMaxId = y.nodeId > this.currentMaxId ? y.nodeId : this.currentMaxId
            })
            let reg = /^http(s)?:\/\/(.*?)\//
            let getBlob = this.getFileBlob(data.pictureUrl.replace(reg, ''), 'aa.jpg')
            let that = this
            getBlob.then(blob => {
              that.blobToDataURL(blob, function (e) {
                that.bg = e
              })
            });
          } else {
            this.dataId = 0
            this.bg = ''
          }
        })
      },
      save(imgUrl) {
        this.isLoading = true;
        let msg = {
          ID: this.dataId,
          AdvertisingPicUrl: '',
          AdvertisingID: this.templateId,
          Content: JSON.stringify(this.nodes),
          SecretKey: ""
        }
        let that = this
        let blob = that.base64ToBlob(imgUrl)
        UploadViittoBlobFile("Edu", blob, (res) => {
          this.isLoading = false;
          if (res.Code === 1) {
            msg.AdvertisingPicUrl = res.FileUrl
            new browserMD5File(blob, function (err, md5) {
              msg.SecretKey = md5;
              saveMakeAd(msg).then(res => {

              })
            })
          }
        })



      },
      uuid(len, radix) {
        var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
        var uuid = [],
          i;
        radix = radix || chars.length;
        if (len) {
          // Compact form
          for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
        } else {
          var r;
          uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
          uuid[14] = '4';
          for (i = 0; i < 36; i++) {
            if (!uuid[i]) {
              r = 0 | Math.random() * 16;
              uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
            }
          }
        }
        return uuid.join('');
      },
      goon() {
        this.bg = ''
        this.st = ''
        this.bg = this.backBg
        this.st = this.backSt
      },
      returnback() {
        this.backBg = this.bg
        this.backSt = this.st
        this.bg = ''
        this.st = ''
        //this.$message.success('已自动保存数据')
      },
      chosenbg(x) {
        this.bg = x.PictureUrl + '?width=470'
        this.st = x.SamplePicturesUrl + '?width=470'
        this.templateId = x.ID
        let reg = /^http(s)?:\/\/(.*?)\//
        let getBlob = this.getFileBlob(x.PictureUrl.replace(reg, ''), 'aa.jpg')
        let that = this
        getBlob.then(blob => {
          that.blobToDataURL(blob, function (e) {
            that.bg = e
          })
        });
      },
      blobToDataURL(blob, callback) {
        var a = new FileReader()
        a.onload = function (e) {
          callback(e.target.result);
        }
        a.readAsDataURL(blob)
      },
      handleCurrentChange() {
        this.adMsg.pageIndex++
        this.pageIndex++
        this.getaddatas(1)
      },
      //获取广告图列表
      getaddatas(type) {
        if (type === 0) {
          this.adMsg.pageIndex = 1
        }
        getAdvertisingList(this.adMsg).then(res => {
          if (res.Code === 1) {
            res.Data.PageData.forEach(x => {
              x.src = `${x.SamplePicturesUrl}?x-oss-process=image/resize,w_200`
              x.id = x.ID
            })
            if (type == 0) {
              this.addatas = res.Data.PageData
            } else {
              this.addatas = this.addatas.concat(res.Data.PageData)
            }
            this.total = res.Data.Count
            if (res.Data.PageData.length == 0) {
              this.$refs.waterfall.waterfallOver()
            }
          }

        })

      },



      tiggerMax() {
        this.isMax = !this.isMax
      },
      downAdv() {
        let that = this
        var cntElem = this.$refs.board;

        var shareContent = cntElem
        var width = shareContent.offsetWidth
        var height = shareContent.offsetHeight
        var canvas = document.createElement("canvas")
        var scale = 2
        canvas.width = width * scale
        canvas.height = height * scale
        canvas.getContext("2d").scale(scale, scale)
        var opts = {
          scale: scale, // 添加的scale 参数
          canvas: canvas, //自定义 canvas
          width: width, //dom 原始宽度
          height: height,
          useCORS: true // 【重要】开启跨域配置
        };
        h2c(shareContent, opts).then(function (canvas) {
          var context = canvas.getContext('2d')
          context.mozImageSmoothingEnabled = false
          context.webkitImageSmoothingEnabled = false
          context.msImageSmoothingEnabled = false
          context.imageSmoothingEnabled = false

          // 【重要】默认转化的格式为png,也可设置为其他格式
          let imgUrl = canvas.toDataURL("image/png")
          that.downloadFile('我的广告图.png', imgUrl)
        })
      },
      getFileBase64(type) {
        let that = this
        var cntElem = this.$refs.board;
        var shareContent = cntElem
        var width = shareContent.offsetWidth
        var height = shareContent.offsetHeight
        var canvas = document.createElement("canvas")
        // var scale = window.devicePixelRatio;//显示设备的物理像素分辨率与CSS像素分辨率之比
        var scale = 1
        canvas.width = width * scale
        canvas.height = height * scale
        canvas.getContext("2d").scale(scale, scale)
        var opts = {
          scale: scale, // 添加的scale 参数
          canvas: canvas, //自定义 canvas
          width: width, //dom 原始宽度
          height: height,
          useCORS: true // 【重要】开启跨域配置
        };
        h2c(shareContent, opts).then(function (canvas) {
          var context = canvas.getContext('2d')
          context.mozImageSmoothingEnabled = false
          context.webkitImageSmoothingEnabled = false
          context.msImageSmoothingEnabled = false
          context.imageSmoothingEnabled = false

          // 【重要】默认转化的格式为png,也可设置为其他格式
          let imgUrl = canvas.toDataURL("image/png")
          if (type == 1)
            that.downloadFile('我的广告图.png', imgUrl)
          else {
            that.save(imgUrl)
          }
        })
      },
      downloadFile(fileName, content) {
        let aLink = this.$refs.down
        let blob = this.base64ToBlob(content)
        this.uploadImage(fileName, blob)
        let evt = document.createEvent("HTMLEvents")
        evt.initEvent("click", true, true)
        aLink.download = fileName
        aLink.href = URL.createObjectURL(blob)
        aLink.click()
      },
      base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;

        let uInt8Array = new Uint8Array(rawLength);

        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
          type: contentType
        });
      },
      uploadImage(name, file) {

      },
      operation(type) {
        if (type == 0) {
          let index = this.nodes.indexOf(this.currentNode)
          this.nodes.splice(index, 1)
          this.currentNode.type = -1
        } else {
          this.currentMaxId = this.currentMaxId + 1
          this.currentZIndex++
          let t = {}
          if (this.currentNode.type == 0) {
            t = {
              nodeId: this.currentMaxId,
              type: 0, //0文本，1图片
              width: (this.currentNode.fontSize * 4) + 10,
              height: this.currentNode.fontSize,
              lineHeight: this.currentNode.lineHeight,
              bg: this.currentNode.bg,
              color: this.currentNode.color,
              zindex: this.currentZIndex,
              content: this.currentNode.content,
              x: 200,
              y: 300,
              textAlign: this.currentNode.textAlign,
              fontSize: this.currentNode.fontSize,
              fontname: this.currentNode.fontname,
              active: false,
              letterSpacing: this.currentNode.letterSpacing,
              isBold: this.currentNode.isBold,
              isXie: this.currentNode.isXie,
              radius: this.currentNode.radius,
              rotate: this.currentNode.rotate,
              hshadow: this.currentNode.hshadow,
              vshadow: this.currentNode.vshadow,
              blur: this.currentNode.blur,
              shadowcolor: this.currentNode.shadowcolor,
              alpha: this.currentNode.alpha,
              strokeWidth: this.currentNode.strokeWidth,
              strokeColor: this.currentNode.strokeColor
            }
          } else if (this.currentNode.type == 1) {
            t = {
              nodeId: this.currentMaxId,
              type: 1, //0文本，1图片
              width: this.currentNode.width,
              height: this.currentNode.height,
              zindex: this.currentZIndex,
              x: 200,
              y: 300,
              active: false,
              src: this.currentNode.src,
              radius: this.currentNode.radius,
              rotate: this.currentNode.rotate,
              hshadow: this.currentNode.hshadow,
              vshadow: this.currentNode.vshadow,
              blur: this.currentNode.blur,
              shadowcolor: this.currentNode.shadowcolor,
              alpha: this.currentNode.alpha,
              strokeWidth: this.currentNode.strokeWidth,
              strokeColor: this.currentNode.strokeColor
            }
          } else if (this.currentNode.type == 2) {
            t = {
              nodeId: this.currentMaxId,
              type: 2, //0文本，1图片
              width: this.currentNode.width,
              height: this.currentNode.height,
              zindex: this.currentZIndex,
              x: 50,
              y: 300,
              active: false,
              radius: this.currentNode.radius,
              rotate: this.currentNode.rotate,
              hshadow: this.currentNode.hshadow,
              vshadow: this.currentNode.vshadow,
              blur: this.currentNode.blur,
              shadowcolor: this.currentNode.shadowcolor,
              alpha: this.currentNode.alpha,
              bg: this.currentNode.bg,
              style: this.currentNode.style,
              fontSize: 1
            }
          } else if (this.currentNode.type == 3) {
            t = {
              nodeId: this.currentMaxId,
              type: 3, //0文本，1图片
              width: this.currentNode.width,
              height: this.currentNode.height,
              zindex: this.currentZIndex,
              x: 200,
              y: 300,
              active: false,
              rotate: this.currentNode.rotate,
              hshadow: this.currentNode.hshadow,
              vshadow: this.currentNode.vshadow,
              blur: this.currentNode.blur,
              shadowcolor: this.currentNode.shadowcolor,
              alpha: this.currentNode.alpha,
              bg: this.currentNode.bg,
              fontSize: 50,
              content: this.currentNode.content,
              src: this.currentNode.src,
              forecolor: this.currentNode.forecolor
            }

          }
          this.nodes.push(t)
          this.nodes.forEach((x, i) => {
            x.active = false

          })
          this.nodes[this.nodes.length - 1].active = true
          this.currentNode = this.nodes[this.nodes.length - 1]
          this.currentnodeId = t.nodeId
        }
      },
      moveLayer(type) {

        if (type == 1) {
          this.currentNode.zindex = this.currentNode.zindex + 1
          this.currentZIndex = this.currentZIndex > this.currentNode.zindex ? this.currentZIndex : this.currentNode
            .zindex
        } else if (type == 2) {
          this.currentNode.zindex = this.currentNode.zindex - 1
        } else if (type == 3) {
          this.currentZIndex++
          this.currentNode.zindex = this.currentZIndex

        } else {
          let min = 1
          this.nodes.forEach(x => {
            min = min > x.zindex ? x.zindex : min
          })
          min--
          min = min < 100 ? 100 : min
          this.currentNode.zindex = min
        }
      },
      alignMethod(type) {
        if (type == 1)
          this.currentNode.textAlign = 'left'
        else if (type == 2)
          this.currentNode.textAlign = 'center'
        else
          this.currentNode.textAlign = 'right'
      },
      addPic() {
        let that = this;
        if (this.$refs.addImage.files.length > 0 && this.$refs.addImage.files[0].size > 0) {
          // 压缩图片需要的一些元素和对象
          var reader = new FileReader(),
            img = new Image();
          // 选择的文件对象
          var file = null;
          // 是否含透明背景的标志量
          var isAlphaBackground = false;
          // 缩放图片需要的canvas
          var canvas = document.createElement('canvas');
          var context = canvas.getContext('2d');
          // base64地址图片加载完毕后
          img.onload = function () {
            // 图片原始尺寸
            var originWidth = this.width;
            var originHeight = this.height;
            // canvas尺寸设置
            canvas.width = originWidth;
            canvas.height = originHeight;
            // 清除画布
            context.clearRect(0, 0, originWidth, originHeight);
            // 图片绘制在画布上
            context.drawImage(img, 0, 0);
            // 获取图片像素信息
            var imageData = context.getImageData(0, 0, originWidth, originHeight).data;
            // 检测有没有透明数据
            isAlphaBackground = false;
            for (var index = 3; index < imageData.length; index += 4) {
              if (imageData[index] != 255) {
                isAlphaBackground = true;
                break;
              }
            }
            that.chuliImg(isAlphaBackground, img.src);
            // isAlphaBackground就是最后石头有透明或半透明背景色的结果
          };
          // 文件base64化，以便获知图片原始尺寸
          reader.onload = function (e) {
            img.src = e.target.result;
          };
          reader.readAsDataURL(this.$refs.addImage.files[0])
        }
      },
      chuliImg(i, e) { // 判断是否有透明背景进行不同操作
        let that = this;
        if (i) {
          that.creatImg(e);
        } else {
          this.lrz(e, {
            quality: 0.7
          }).then(function (rst) {
            that.creatImg(rst.base64);
          }).catch(function (err) {
            // 处理失败会执行
          }).always(function () {
            // 不管是成功失败，都会执行
          });
        }
      },
      creatImg(e) { // 展示图片
        let that = this;
        that.currentMaxId = that.currentMaxId + 1
        that.currentZIndex++
        //e.target.result
        let t = {
          nodeId: that.currentMaxId,
          type: 1, //0文本，1图片
          width: 100,
          height: 100,
          zindex: that.currentZIndex,
          x: 200,
          y: 300,
          active: false,
          src: e,
          radius: 1,
          rotate: 0,
          hshadow: 0,
          vshadow: 0,
          blur: 0,
          shadowcolor: null,
          alpha: 100,
          strokeWidth: 0,
          strokeColor: null
        }
        that.nodes.push(t)
        this.nodes.forEach((x, i) => {
          x.active = false
        })
        this.nodes[this.nodes.length - 1].active = true
        that.currentNode = that.nodes[that.nodes.length - 1]
        that.currentnodeId = t.nodeId
      },
      addLine() {
        this.currentMaxId = this.currentMaxId + 1
        this.currentZIndex++
        //e.target.result
        let t = {
          nodeId: this.currentMaxId,
          type: 2, //0文本，1图片
          width: 300,
          height: 1,
          zindex: this.currentZIndex,
          x: 50,
          y: 300,
          active: false,
          radius: 1,
          rotate: 0,
          hshadow: 0,
          vshadow: 0,
          blur: 0,
          shadowcolor: null,
          alpha: 100,
          bg: '#000',
          style: 'solid',
          fontSize: 1
        }
        this.nodes.push(t)
        this.nodes.forEach((x, i) => {
          x.active = false
        })
        this.nodes[this.nodes.length - 1].active = true
        this.currentNode = this.nodes[this.nodes.length - 1]
        this.currentnodeId = t.nodeId
      },
      addQr() {
        this.currentMaxId = this.currentMaxId + 1
        this.currentZIndex++
        //e.target.result
        let t = {
          nodeId: this.currentMaxId,
          type: 3, //0文本，1图片
          width: 100,
          height: 100,
          zindex: this.currentZIndex,
          x: 200,
          y: 300,
          active: false,
          radius: 0,
          rotate: 0,
          hshadow: 0,
          vshadow: 0,
          blur: 0,
          shadowcolor: null,
          alpha: 100,
          bg: null,
          fontSize: 50,
          content: '新增二维码',
          src: '',
          forecolor: '#000'
        }
        this.nodes.push(t)
        this.nodes.forEach((x, i) => {
          x.active = false
        })
        this.nodes[this.nodes.length - 1].active = true
        this.currentNode = this.nodes[this.nodes.length - 1]
        this.currentnodeId = t.nodeId
        this.getQRCode()
      },
      getQRCode() {
        if (this.qrCodeType === 0) {
          this.canvasQrCode()
        } else if (this.qrCodeType === 1) {
          if (this.qrPath.length === 0) {
            this.Error("请填写二维码路径")
            return
          }
          this.showQRcode(this.qrPath);
        }
      },
      canvasQrCode() {
        let that = this
        QRCode.toDataURL(this.currentNode.content, {
          color: {
            dark: this.currentNode.forecolor, // Blue dots
            light: this.currentNode.bg == null ? '#0000' : this.currentNode.bg // Transparent background
          }
        }, function (err, url) {
          that.currentNode.src = url
        })
      },
      openUploadPic() {
        this.$refs.addImage.click()
      },
      addTitle() {
        this.currentMaxId = this.currentMaxId + 1
        this.currentZIndex++
        let t = {
          nodeId: this.currentMaxId,
          type: 0, //0文本，1图片
          width: (36 * 4) + 10,
          height: 100,
          lineHeight: '1',
          bg: null,
          color: '#000',
          zindex: this.currentZIndex,
          content: '新增标题',
          x: 200,
          y: 300,
          textAlign: 'center',
          fontSize: 36,
          fontname: 'sszhjt',
          active: false,
          letterSpacing: 1,
          isBold: 0,
          isXie: 0,
          radius: 0,
          rotate: 0,
          hshadow: 0,
          vshadow: 0,
          blur: 0,
          shadowcolor: null,
          strokeWidth: 0,
          strokeColor: null
        }
        this.nodes.push(t)
        this.nodes.forEach((x, i) => {
          x.active = false
        })
        this.nodes[this.nodes.length - 1].active = true
        this.currentNode = this.nodes[this.nodes.length - 1]
        this.currentnodeId = t.nodeId
      },
      addP() {
        this.currentMaxId = this.currentMaxId + 1
        this.currentZIndex++
        let t = {
          nodeId: this.currentMaxId,
          type: 0, //0文本，1图片
          width: (16 * 4) + 10,
          height: 50,
          lineHeight: '1',
          bg: null,
          color: '#000',
          zindex: this.currentZIndex,
          content: '新增文字',
          x: 200,
          y: 300,
          textAlign: 'center',
          fontSize: 16,
          fontname: 'pingfang',
          active: false,
          letterSpacing: 1,
          isBold: 0,
          isXie: 0,
          radius: 0,
          rotate: 0,
          hshadow: 0,
          vshadow: 0,
          blur: 0,
          shadowcolor: null,
          strokeWidth: 0,
          strokeColor: null
        }
        this.nodes.push(t)
        this.nodes.forEach((x, i) => {
          x.active = false
        })
        this.nodes[this.nodes.length - 1].active = true
        this.currentNode = this.nodes[this.nodes.length - 1]
        this.currentnodeId = t.nodeId
      },
      onResizstop(x, y, w, h) {
        if (this.currentnodeId == -1 || !x)
          return;
        this.currentNode.x = x
        this.currentNode.y = y
        this.currentNode.width = w
        this.currentNode.height = h
      },
      onDragstop(x, y) {
        if (this.currentnodeId == -1)
          return;
        this.currentNode.x = x
        this.currentNode.y = y
      },
      onActivated(id) { //isCtrl ==true多选 ==false单选 
        if (!this.isCtrl) {
          this.currentnodeId = id
          this.nodes.forEach(x => {
            if (x.nodeId == id) {
              this.currentNode = x
            }
          })
        } else {
          this.nodes.forEach(x => {
            if (x.nodeId == id) {
              if (this.currentNodeList.length > 0) {
                let isRepeat = false;
                for (let i = 0; i < this.currentNodeList.length; i++) {
                  if (this.currentNodeList[i].nodeId == id) {
                    isRepeat = true;
                    break;
                  }
                }
                if (!isRepeat) {
                  this.currentNodeList.push(x);
                }
              } else {
                this.currentNodeList.push(x)
              }
            }
          })
        }
      },
      showQRcode(path) {
        this.apipostDS(
          "/api/user/GetWeiXinQRCodeForHT", {
            Path: "/pages/" + path,
            With: 212
          },
          (res) => {
            if (res.data.resultCode == 1) {
              if (res.data.data) {
                let getBlob = this.getAnyFileBlob(this.domainManager().mallUrl + res.data.data)
                let that = this
                getBlob.then(blob => {
                  that.blobToDataURL(blob, function (e) {
                    that.currentNode.src = e;
                    that.$forceUpdate()
                  })
                });
                
              }
            } else {
              this.Error(res.data.message);
            }
          }
        );
      },
    }
  }

</script>
