<template>
  <div class="mail-three-box">
    <div class="content-left">
      <template v-if="showFlag">
        <edit-style
          v-for="(item, index) in toolList"
          :key="index"
          v-bind="item"
          @data="setStyleData"
          :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>
      </template>
    </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>
  </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 },
  props: ['data'],
  data() {
    return {
      showFlag: false,
      imgParams: { url: '' },
      titleParams: {},
      describeParams: {},
      btnParams: {},
      toolList: [
        {
          dataFlag: 'titleParams',
          title: '邮件标题',
          subTitle: '标题栏',
          tool: [
            { name: 'fontSize', value: '20px' },
            { name: 'fontColor', value: '#232325' },
            { name: 'fontLineH', value: '20px' },
            { name: 'fontFamily' }
          ]
        },
        {
          dataFlag: 'describeParams',
          title: '邮件内容',
          subTitle: '内容栏',
          tool: [
            { name: 'fontSize', value: '14px' },
            { name: 'fontColor', value: '#999999' },
            { name: 'fontLineH', value: '20px' },
            { name: 'fontFamily' }
          ],
          valueMaxLength: 50
        },
        {
          dataFlag: 'btnParams',
          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' }
          ],
          valueMaxLength: 6
        }
      ]
    }
  },
  created() {},
  mounted() {
    if (Object.keys(this.data).length) {
      this.dataEcho()
    } else {
      this.showFlag = true
    }
  },
  methods: {
    // 数据回显
    dataEcho() {
      this.titleParams = this.data.titleParams
      this.imgParams = this.data.imgParams
      this.describeParams = this.data.describeParams
      this.btnParams = this.data.btnParams
      this.toolList.map(item => {
        item.echoData = Object.assign({}, this.data[item.dataFlag])
        delete item.echoData.originalData
        item.tool = this.data[item.dataFlag].originalData
        return item
      })
      this.$nextTick(() => {
        const imgDom = document.querySelector('#uploadImg')
        const imgPosition = this.data.imgParams.position
        if (imgPosition) {
          imgDom.style.top = imgPosition.top + 'px'
          imgDom.style.left = imgPosition.left + 'px'
        }
        drag(imgDom, document.querySelector('#max'), res => {
          this.imgParams.position = res
        })
        const titleDom = document.querySelector('#title')
        const titlePosition = this.data.titleParams.position
        if (titlePosition) {
          titleDom.style.top = titlePosition.top + 'px'
          titleDom.style.left = titlePosition.left + 'px'
        }
        drag(titleDom, document.querySelector('#max'), res => {
          this.imgParams.position = res
        })
        const describeDom = document.querySelector('#describe')
        const describePosition = this.data.describeParams.position
        if (describePosition) {
          describeDom.style.top = describePosition.top + 'px'
          describeDom.style.left = describePosition.left + 'px'
        }
        drag(describeDom, document.querySelector('#max'), res => {
          this.imgParams.position = res
        })
        const btnDom = document.querySelector('#btn')
        const btnPosition = this.data.btnParams.position
        if (btnPosition) {
          btnDom.style.top = btnPosition.top + 'px'
          btnDom.style.left = btnPosition.left + 'px'
        }
        drag(btnDom, document.querySelector('#max'), res => {
          this.imgParams.position = res
        })
        this.showFlag = true
      })
    },
    // 传回父组件需要提交缓存的数据
    makePreview() {
      let flag = true
      const params = {
        titleParams: this.titleParams,
        imgParams: this.imgParams,
        describeParams: this.describeParams,
        btnParams: this.btnParams
      }
      for (const data in params) {
        if (params[data].show !== false) {
          flag = false
        } else {
          if (!params.titleParams.textValue || !params.describeParams.textValue || !params.btnParams.textValue) {
            flag = false
          } else {
            if (
              params.titleParams.textValue === '' ||
              params.describeParams.textValue === '' ||
              params.btnParams.textValue === ''
            ) {
              flag = false
            }
          }
        }
      }
      if (flag) {
        return params
      } else {
        this.$message({
          message: '请完善步骤后才能进入下一步',
          type: 'warning'
        })
        return false
      }
    },
    // 上传图片
    uploadImg() {
      this.$nextTick(() => {
        this.imgParams.show = false
        drag(document.querySelector('#uploadImg'), document.querySelector('#max'), res => {
          this.imgParams.position = res
        })
      })
    },
    // 设置样式 组合数据
    setStyleData(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
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mail-three-box {
  margin-bottom: 20px;
  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>
