<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="phone-box">
        <div class="card-content">
          <div class="img" :style="`background-image:url(${imgParams.url});`"></div>
          <div class="title" :style="titleParams.style">{{ titleParams.textValue || '请输入' }}</div>
          <div class="desc" :style="describeParams.style">{{ describeParams.textValue || '请输入' }}</div>
          <div class="btn" :style="btnParams.style">{{ btnParams.textValue || '请输入' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UploadImage from '@/components/upload/UploadImage.vue'
import EditStyle from '@/components/base/EditStyle.vue'
export default {
  components: { EditStyle, UploadImage },
  props: ['data'],
  data() {
    return {
      showFlag: false,
      imgParams: { url: '' },
      titleParams: {},
      describeParams: {},
      btnParams: {},
      toolList: [
        {
          type: 'input',
          dataFlag: 'titleParams',
          title: '推送标题',
          subTitle: '标题栏',
          tool: [
            { name: 'fontSize', value: '14px' },
            { name: 'fontColor', value: '#333333' },
            { name: 'fontLineH', value: '20px' },
            { name: 'fontFamily' }
          ]
        },
        {
          type: 'textarea',
          dataFlag: 'describeParams',
          title: '推送内容',
          subTitle: '内容栏',
          tool: [
            { name: 'fontSize', value: '12px' },
            { name: 'fontColor', value: '#6D6D71' },
            { name: 'fontLineH', value: '20px' },
            { name: 'fontFamily' }
          ],
          valueMaxLength: 50
        },
        {
          type: 'input',
          dataFlag: 'btnParams',
          title: '按钮',
          subTitle: '按钮',
          tool: [
            { name: 'borderRadius', value: '4px' },
            { 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.showFlag = true
    },
    // 传回父组件需要提交缓存的数据
    makePreview() {
      const params = {
        titleParams: this.titleParams,
        imgParams: this.imgParams,
        describeParams: this.describeParams,
        btnParams: this.btnParams
      }
      for (const data in params) {
        if (params[data].textValue === '' || this.imgParams.url === '') {
          this.$message({
            message: '请完善步骤后才能进入下一步',
            type: 'warning'
          })
          return false
        }
      }
      return params
    },
    // 上传图片
    uploadImg() {},
    // 设置样式 组合数据
    setStyleData(data) {
      switch (data.toolIndex) {
        case 0:
          this.titleParams = data
          break
        case 1:
          this.describeParams = data
          break
        case 2:
          this.btnParams = data
          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;
    .phone-box{
      margin: 0 auto;
      width: 236px;
      height: 474px;
      background: url(https://webapp-pub.ezijing.com/x-training-new/phone-app.png);
      background-size: 100% 100%;
      position: relative;
      .card-content{
        width: 164px;
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 1);
        border-radius: 6px;
        .img{
          height: 87px;
          background-size:100% 100%;
        }
        .title{
          padding: 15px 0 5px;
          font-size: 14px;
          font-weight: bold;
          line-height: 20px;
          color: #333333;
          text-align: center;
        }
        .desc{
          width: 137px;
          font-size: 12px;
          line-height: 20px;
          color: #6D6D71;
          margin: 0 auto;
        }
        .btn{
          width: 137px;
          background: #49BBA2;
          border-radius: 4px;
          text-align: center;
          line-height: 20px;
          font-size: 12px;
          margin: 22px auto 12px;
          color:#fff;
        }
      }
    }
  }
}
</style>
