<template>
  <div class="mail-three-box">
    <div class="content-left">
      <edit-style v-for="(item, index) in toolList" :key="index" v-bind="item" @data="setTitleData" :toolIndex="index"></edit-style>
      <div class="upload-img">
        <div class="btn">上传图片</div>
        <UploadImage class="upload" style="width:50px" v-model="imgParams.url" @input="uploadImg"></UploadImage>
      </div>
    </div>
    <div class="content-right">
      <div class="card-dom" id="max">
        <div id="title" v-show="titleParams.show == false" :style="titleParams.style" class="title">{{ titleParams.textValue || '请输入' }}</div>
        <div id="describe" v-show="describeParams.show == false" :style="describeParams.style" class="describe">{{ describeParams.textValue || '请输入' }}</div>
        <div id="btn" v-show="btnParams.show == false" :style="btnParams.style" class="btn">{{ btnParams.textValue || '请输入' }}</div>
        <div v-if="imgParams.url" id="uploadImg" :style="`background:url(${imgParams.url});background-size:cover;`" class="img" />
      </div>
      <!-- <div @click="makePreview">点击生成预览</div> -->
    </div>
  </div>
</template>

<script>
import UploadImage from '@/components/upload/UploadImage.vue'
import drag from '@/utils/drag.js'
import EditStyle from '@/components/base/EditStyle.vue'
export default {
  components: { EditStyle, UploadImage },
  data() {
    return {
      imgParams: { url: '' },
      titleParams: {},
      describeParams: {},
      btnParams: {},
      textarea1: '',
      toolList: [
        {
          title: '邮件标题',
          subTitle: '标题栏',
          tool: [
            { name: 'fontSize', value: '20px' },
            { name: 'fontColor', value: '#232325' },
            { name: 'fontLineH', value: '20px' },
            { name: 'fontFamily' }
          ]
        },
        {
          title: '邮件内容',
          subTitle: '内容栏',
          tool: [
            { name: 'fontSize', value: '14px' },
            { name: 'fontColor', value: '#999999' },
            { name: 'fontLineH', value: '20px' },
            { name: 'fontFamily' }
          ],
          valueMaxLength: 50
        },
        {
          title: '按钮',
          subTitle: '按钮',
          tool: [
            { name: 'borderRadius', value: '15px' },
            { name: 'bgColor', value: '#49BBA2' },
            { name: 'fontSize', value: '12px' },
            { name: 'fontColor', value: '#fff' },
            { name: 'fontLineH', value: '20px' },
            { name: 'fontPosition' }
          ]
        }
      ]
      // tool: ['fontSize', 'fontColor', 'fontLineH', 'fontFamily', 'borderRadius', 'bgColor', 'fontPosition']
    }
  },
  mounted() {
  },
  methods: {
    makePreview() {
      const params = {
        titleParams: this.titleParams,
        imgParams: this.imgParams,
        describeParams: this.describeParams,
        btnParams: this.btnParams
      }
      console.log(params)
    },
    uploadImg() {
      this.$nextTick(() => {
        console.log(111, 222)
        drag(document.querySelector('#uploadImg'), document.querySelector('#max'), function(res) {
          this.imgParams.position = res
        })
      })
    },
    setTitleData(data) {
      switch (data.toolIndex) {
        case 0:
          this.titleParams = data
          this.$nextTick(() => {
            drag(document.querySelector('#title'), document.querySelector('#max'), res => {
              this.titleParams.position = res
            })
          })
          break
        case 1:
          this.describeParams = data
          this.$nextTick(() => {
            drag(document.querySelector('#describe'), document.querySelector('#max'), res => {
              this.describeParams.position = res
            })
          })
          break
        case 2:
          this.btnParams = data
          this.$nextTick(() => {
            drag(document.querySelector('#btn'), document.querySelector('#max'), res => {
              this.btnParams.position = res
            })
          })
          break
      }
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.mail-three-box {
  display: flex;
  .content-left {
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede;
    padding: 30px 30px 0;
    .upload-img{
      position: relative;
      .btn{
        width: 321px;
        height: 40px;
        background: rgba(237, 245, 243, 0.39);
        border: 1px solid #80D6C4;
        border-radius: 8px;
        font-size: 14px;
        line-height: 40px;
        color: #49BBA2;
        cursor: pointer;
        text-align: center;
      }
      .upload{
        position: absolute;
        top:0;
        left:0;
        opacity: 0.00001;
        ::v-deep{
          .el-upload{
            width: 320px;
            height: 40px;
          }
        }
      }
    }
  }
  .content-right {
    width: 588px;
    padding-top: 95px;
    box-sizing: border-box;
    .card-dom {
      width: 431px;
      height: 238px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.39);
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
      position: relative;
      .title {
        width: 140px;
        position: absolute;
        top: 50px;
        left: 30px;
        font-size: 20px;
        font-weight: bold;
        color: #232325;
        cursor: pointer;
      }
      .describe {
        width: 140px;
        position: absolute;
        top: 80px;
        left: 30px;
        font-size: 14px;
        color: #999999;
        cursor: pointer;
      }
      .btn {
        position: absolute;
        top: 170px;
        left: 30px;
        padding: 5px 20px;
        font-size: 12px;
        background: rgba(73, 187, 162, 1);
        border-radius: 13px;
        color: #fff;
        cursor: pointer;
      }
      .img {
        width: 220px;
        height: 190px;
        position: absolute;
        top: 30px;
        left: 200px;
      }
    }
  }
}
</style>
