<template>
  <div>
    <div :class="data.type != '1' ? 'active edit-style-box' : 'edit-style-box'">
      <div class="f-type">
        <template v-if="data.type == 3 || data.type == 0">
          <div class="upload-img">
            <div class="btn">{{ data.url ? '替换图片' : '上传图片' }}</div>
            <UploadImage class="upload" style="width: 50px" v-model="data.url" @input="uploadImg"></UploadImage>
          </div>
        </template>
        <template v-if="data.type == 1">
          <div>
            <v-editor placeholder="请输入内容" v-model="data.html"></v-editor>
          </div>
        </template>
      </div>
      <div :class="data.type == '1' ? 'active tool-select' : 'tool-select'">
        <div v-for="(item, index) in data.tool" :key="index">
          <div class="tool-item" v-if="item.name === 'fontSize'">
            <div class="tit">字体大小</div>
            <el-input @input="changeStyle" v-model="item.value" placeholder="请输入字号"></el-input>
          </div>
          <div class="tool-item" v-if="item.name === 'fontColor'">
            <div class="tit">字体颜色</div>
            <el-color-picker @change="changeStyle" v-model="item.value"></el-color-picker>
          </div>
          <div class="tool-item" v-if="item.name === 'fontLineH'">
            <div class="tit">字体行高</div>
            <el-input @input="changeStyle" v-model="item.value" placeholder="请输入字体行高"></el-input>
          </div>
          <div class="tool-item" v-if="item.name === 'fontFamily'">
            <div class="tit">字体</div>
            <el-select @change="changeStyle" v-model="item.value" filterable placeholder="请选择">
              <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
            </el-select>
          </div>
          <div class="tool-item" v-if="item.name === 'borderRadius'">
            <div class="tit">圆角</div>
            <el-select v-model="item.value" filterable placeholder="请选择">
              <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
            </el-select>
          </div>
          <div class="tool-item" v-if="item.name === 'bgColor'">
            <div class="tit">背景颜色</div>
            <el-color-picker @change="changeStyle('proportion')" v-model="item.value"></el-color-picker>
          </div>
          <div class="tool-item" v-if="item.name === 'fontPosition'">
            <div class="tit">位置</div>
            <el-select v-model="item.value" filterable placeholder="请选择">
              <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
            </el-select>
          </div>
          <div class="tool-item" v-if="item.name === 'width'">
            <div class="tit">宽</div>
            <el-input @input="changeStyle" v-model="item.value" placeholder="请输入数字"></el-input>
          </div>
          <div class="tool-item" v-if="item.name === 'height'">
            <div class="tit">高</div>
            <el-input @input="changeStyle" v-model="item.value" placeholder="请输入数字"></el-input>
          </div>
          <div class="tool-item" v-if="item.name === 'zIndex'">
            <div class="tit">层级</div>
            <el-input @input="changeStyle" v-model="item.value" placeholder="请输入数字"></el-input>
          </div>
          <div class="tool-item" v-if="item.name === 'proportionWidth'">
            <div class="tit">宽高比</div>
            <el-select @change="changeStyle('proportion')" v-model="item.value" filterable placeholder="请选择">
              <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
            </el-select>
          </div>
          <div class="tool-item" v-if="item.name === 'proportionHeight'">
            <div class="tit" style="opacity: 0">宽高比</div>
            <el-select @change="changeStyle('proportion')" v-model="item.value" filterable placeholder="请选择">
              <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
            </el-select>
          </div>
          <div class="tool-item" v-if="item.name === 'fontWeight'">
            <div class="tit">加粗</div>
            <el-select @change="changeStyle()" v-model="item.value" filterable placeholder="请选择">
              <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
            </el-select>
          </div>
          <div class="tool-item" v-if="item.name === 'fontUnderline'">
            <div class="tit">下划线</div>
            <el-select @change="changeStyle()" v-model="item.value" filterable placeholder="请选择">
              <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
            </el-select>
          </div>
          <div class="tool-item" v-if="item.name === 'align'">
            <div class="tit">对齐方式</div>
            <el-select @change="changeStyle()" v-model="item.value" filterable placeholder="请选择">
              <el-option v-for="opt in item.option" :key="opt.label" :label="opt.label" :value="opt.value"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VEditor from '@/components/tinymce/Index.vue'
import UploadImage from '@/components/upload/UploadImage.vue'
export default {
  components: {
    UploadImage,
    VEditor
  },
  props: {
    data: { type: Object }
  },
  data() {
    return {
      // 设置样式
      toolList: [],
      // 最后返回的数据
      returnData: {}
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.changeStyle()
    }
    this.setToolOption()
  },
  methods: {
    // 上传img
    uploadImg() {
      this.setStyleData()
      this.$emit('imgUpload', this.data)
    },
    // 通过父组件传来的tool添加option
    setToolOption() {
      if (this.data.tool) {
        this.data.tool = this.data.tool.map(item => {
          if (item.option) {
            const [min, max, count = 1, symbol = ''] = item.option
            item.option = this.setOption(min, max, count, symbol)
          }
          if (item.optionDiv) {
            item.option = item.optionDiv
            console.log(item.option, 'item.option')
          }
          return item
        })
      }
    },
    // 重新组合对象变成样式
    setStyleData() {
      const styleData = [
        { name: 'fontSize', styleName: 'font-size', symbol: 'px' },
        { name: 'fontColor', styleName: 'color' },
        { name: 'fontLineH', styleName: 'line-height', symbol: 'px' },
        { name: 'fontFamily', styleName: 'font-family' },
        { name: 'fontWeight', styleName: 'font-weight' },
        { name: 'fontUnderline', styleName: 'text-decoration' },
        { name: 'bgColor', styleName: 'background' },
        { name: 'width', styleName: 'width', symbol: 'px' },
        { name: 'height', styleName: 'height', symbol: 'px' },
        { name: 'zIndex', styleName: 'z-index' }
      ]
      this.data.style = this.data.tool
        .reduce((a, b) => {
          if (b.name === 'proportionWidth') {
            a.push('width: 100%;')
          } else if (b.name === 'proportionHeight') {
            const certBox = document.getElementById('edit-dom-1')
            const [propWidth, propHeight] = this.data.tool
            a.push(`height: ${(propHeight.value / propWidth.value) * certBox.offsetWidth}px;`)
          } else if (b.name === 'align') {
            const alignStyle = {
              2: 'display: flex;justify-content: center;',
              3: 'display: flex;justify-content: right;',
              4: 'display: flex;align-items:center;',
              5: 'display: flex;align-items:center;justify-content: center;',
              6: 'display: flex;align-items:center;justify-content: right;',
              7: 'display: flex;align-items:end;',
              8: 'display: flex;align-items:end;justify-content: center;',
              9: 'display: flex;align-items:end;justify-content: right;'
            }
            a.push(alignStyle[b.value])
          } else {
            if (b.value !== '') {
              const findItem = styleData.find(item => item.name === b.name)
              a.push(`${findItem.styleName}: ${b.value}${findItem.symbol ? findItem.symbol : ''};`)
            }
          }
          return a
        }, [])
        .join()
        .replace(/,/g, '')
    },
    // 设置option值
    setOption(min, max, count, symbol, auto) {
      const options = auto ? [{ value: 'auto', label: 'auto' }] : []
      for (let i = min; i <= max; i += count) {
        options.push({ value: `${i}${symbol}`, label: `${i}${symbol}` })
      }
      return options
    },
    // 改变值
    changeStyle(name) {
      this.setStyleData()
      this.$emit('data', this.data)
      // if (name === 'proportion') {
      //   console.log(this.returnData)
      // }
    },
    handleDelete() {
      this.$emit('delete', this.data)
    }
  }
}
</script>

<style lang="scss" scoped>
.tool-title {
  width: 320px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .icons {
    display: flex;
    i {
      color: #2c2c2c;
      margin-left: 13px;
    }
  }
}
.edit-style-box {
  &.active {
    padding: 5px 23px 0;
    border: 1px solid #eef0f2;
  }
  width: 320px;
  margin-top: 10px;
  // margin-bottom: 24px;
  position: relative;
  .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
  }
  // &::before {
  //   content: '';
  //   width: 100%;
  //   position: absolute;
  //   bottom: -30px;
  //   left: 0;
  //   border-bottom: 1px solid #e3e3e3;
  // }
  .title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    // line-height: 11px;
    color: #333333;
  }
  .f-type {
    // padding-top: 21px;
    .tit {
      font-size: 14px;
      line-height: 100%;
      color: #333333;
    }
    .btn {
      text-align: center;
      line-height: 34px;
      background: #1655b2;
      border-radius: 6px;
      font-size: 14px;
      color: #fff;
      margin-top: 8px;
      border: 1px solid #1655b2;
      cursor: pointer;
      &.active {
        background: rgba(237, 245, 243, 0.39);
        border: 1px solid #1655b2;
        border-radius: 6px;
        color: #1655b2;
      }
    }
  }
  .tool-select {
    display: flex;
    padding-top: 15px;
    justify-content: space-between;
    flex-wrap: wrap;
    &.active{
      border: 1px solid #ccc;
      border-top: 0;
      padding: 20px 23px 0;
    }
    .tool-item {
      // min-width: 127px;
      width: 127px;
      margin-bottom: 20px;
      // margin-right: 20px;
      .tit {
        font-size: 14px;
        line-height: 100%;
        color: #333333;
        margin-bottom: 8px;
      }
    }
    ::v-deep {
      .el-input__inner {
        text-align: center;
      }
      .el-color-picker__trigger {
        width: 127px;
        .el-color-picker__color {
          border-radius: 0;
        }
        .el-color-picker__icon {
          opacity: 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;
      }
    }
  }
}
</style>
