<template>
  <div>
    <el-form ref="form" :model="posterData" label-width="50px" label-position="left" class="poster-form">
      <div class="poster-draw">
        <div :class="showTools" class="poster-tools" style="position: absolute">
          <el-form :inline="true" :model="formTools" class="form-inline" size="mini">
            <el-form-item label="模块编辑">
              <el-switch v-model="formTools.edit" @change="$message.success('开启后，可以编辑模块的部分配置项')" />
            </el-form-item>
            <el-form-item label="冲突检测">
              <el-switch v-model="formTools.isConflictCheck" @change="$refs.poster.settingAttribute();" />
            </el-form-item>
            <el-form-item label="对齐检测">
              <el-switch v-model="formTools.snap" @change="$refs.poster.settingAttribute()" />
            </el-form-item>
            <el-form-item v-if="formTools.snap" label="辅助线">
              <el-switch v-model="formTools.refLine" @change="$refs.poster.settingAttribute()" />
            </el-form-item>
          </el-form>
        </div>
        <div class="poster-body" :style="posterBodyStyle">
          <dk-vue-poster-content ref="poster" v-model="posterData" :tools="formTools" />
        </div>
        <!--悬浮控件-->
        <i class="el-icon-setting" style="" @click="showTools=showTools?'':'show-tools'" />
        <div class="snap-tolerance">
          <span class="demonstration">网格</span>
          <el-slider v-model="formTools.snapTolerance" :min="0" :max="20" style="width: 100px" :step="2" />
        </div>
        <!--悬浮控件-->
      </div>
      <!-- 海报组件-->
      <el-row class="poster_form" :gutter="20" style="width: 540px;padding: 0 20px">
        <h2 style="font-size: 20px;padding: 10px">海报配置</h2>
        <el-col :sm="24">
          <el-form-item label="元素">
            <!--            <el-button-group>-->
            <el-button type="primary" size="small" :disabled="viewCount['avatar']>=1" @click="$refs.poster.add('avatar')">用户头像</el-button>
            <el-button type="warning" size="small" :disabled="viewCount['qrcode']>=1" @click="$refs.poster.add('qrcode')">二维码</el-button>
            <el-button type="danger" size="small" :disabled="viewCount['name']>=1" @click="$refs.poster.add('name')">用户昵称</el-button>
            <el-button type="info" size="small" :disabled="viewCount['text']>=1" @click="$refs.poster.add('text')">调用文字</el-button>
            <el-button type="primary" size="small" :disabled="viewCount['image']>=1" @click="$refs.poster.add('image')">调用图片</el-button>
            <!--            </el-button-group>-->
            <div class="d-size-12 d-text-grey">注意：调用文字和调用图片用于事件触发传递自定义内容</div>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="背景">
            <dk-image-input v-model="posterData.background" @input="resetSize()" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="宽度">
            <el-slider
              v-model="posterData.width"
              :min="100"
              :max="600"
              show-input
              @change="$refs.poster.checkParentSize()"
            >
              <template slot="append">px</template>
            </el-slider>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="高度">
            <el-slider
              v-model="posterData.height"
              :min="100"
              :max="600"
              show-input
              @change="$refs.poster.checkParentSize()"
            >
              <template slot="append">px</template>
            </el-slider>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="弧度">
            <el-slider v-model="posterData.borderRadius" :min="0" :max="20" show-input />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div style="text-align: center;position: absolute;bottom: 0;width: 100%">
            <el-button style="width: 30%;" @click="resetSize()">重置</el-button>
            <el-button type="primary" style="width: 50%" @click="Submit">确定</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

import DkVuePosterContent from './DkVuePosterContent'

export default {
  name: 'DkPoster',
  components: { DkVuePosterContent },
  props: {
    value: {
      default: () => {
        return {}
      },
      type: [Object]
    }
  },
  data() {
    return {
      posterData: this.value,
      rules: {},
      formTools: {
        refLine: false,
        snap: false,
        isConflictCheck: false,
        edit: false,
        snapTolerance: 10
      },
      showTools: ''
    }
  },
  computed: {
    posterBodyStyle() {
      var w = this.formTools.snapTolerance
      return 'background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px,transparent 1px) 0% 0% / ' + w + 'px ' + w + 'px,' +
        'linear-gradient(rgba(0, 0, 0, 0.1) 1px,transparent 1px) 0% 0% / ' + w + 'px ' + w + 'px'
    },
    viewCount() {
      var count = {}
      var views = this.posterData.views
      for (let i = 0; i < views.length; i++) {
        if (!count[views[i].name]) {
          count[views[i].name] = 1
        } else {
          count[views[i].name]++
        }
      }
      return count
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    Submit() {
      this.$emit('input', this.posterData)
      this.$emit('submit', this.posterData)
    },
    resetSize() {
      if (this.posterData.background) {
        this.getImageSize(this.posterData.background).then(image => {
          var tempWidth
          var tempHeight
          var maxHeight = 600
          var maxWidth = 600
          if (image.width / image.height >= maxWidth / maxHeight) {
            if (image.width > maxWidth) {
              tempWidth = maxWidth
              // 按原图片的比例进行缩放
              tempHeight = (image.height * maxWidth) / image.width
            } else {
              tempWidth = image.width
              tempHeight = image.height
            }
          } else {
            if (image.height > maxHeight) {
              tempHeight = maxHeight
              // 按原图片的比例进行缩放
              tempWidth = (image.width * maxHeight) / image.height
            } else {
              tempWidth = image.width
              tempHeight = image.height
            }
          }
          this.posterData.width = parseInt(tempWidth)
          this.posterData.height = parseInt(tempHeight)
          setTimeout(() => {
            this.$refs.poster.checkParentSize()
          }, 200)
        }).catch(() => {})
      } else {
      }
    },
    getImageSize(url) {
      return new Promise(function(resolve, reject) {
        const image = new Image()
        image.onload = function() {
          resolve({
            width: image.width,
            height: image.height
          })
        }
        image.onerror = function() {
          reject(new Error('error'))
        }
        image.src = url
      })
    }
  }
}
</script>

<style scoped lang="scss">
.poster-form {
  display: flex;
  justify-content: space-between;

  .poster-draw {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 10px;
    border: 1px solid #ccc;
    position: relative;
    overflow: hidden;

    .poster-tools {
      width: 600px;
      display: flex;
      padding: 10px;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      background: #fff;
      z-index: 1;
      box-shadow: 0 0 5px 1px #00000030;
      transition: all .4s ease 0s;
      top: -80px;
      opacity: 0;

      &.show-tools {
        top: 0;
        opacity: 1;
      }

      .form-inline {
        height: 28px;
        margin-left: 20px;
      }
    }

    .poster-body {
      background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px,
      linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;
      padding: 50px 20px;
      width: 600px;
      display: flex;
      justify-content: space-around;
      min-height: 600px;
      position: relative;
    }

    .el-icon-setting {
      position: absolute;
      right: 20px;
      top: 16px;
      font-size: 18px;
      z-index: 9;
      cursor: pointer;
    }

    .snap-tolerance {
      position: absolute;
      bottom: 5px;
      right: 10px;
      width: 150px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      opacity: 0.5;

      &:hover {
        opacity: 1;
      }
    }
  }
}

</style>
