<template>
  <div class="edit-style-box">
    <div class="title">{{ title }}</div>
    <div class="f-type">
      <template v-if="type == 1">
        <el-input
          type="textarea"
          style="margin-top: 15px"
          v-model="returnData.textValue"
          placeholder="请输入"
          @input="changeText"
        ></el-input>
      </template>
      <template v-if="type == 3 || type == 0">
        <div class="upload-img">
          <div class="btn">上传图片</div>
          <UploadImage class="upload" style="width: 50px" v-model="imageUrl" @input="uploadImg"></UploadImage>
        </div>
      </template>
    </div>
    <div class="tool-select">
      <div v-for="(item, index) in toolList" :key="index">
        <div class="tool-item" v-if="item.name === 'fontSize'">
          <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 === '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-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 === '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" 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-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 === 'height'">
          <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 === 'zIndex'">
          <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>
    </div>
  </div>
</template>

<script>
import UploadImage from '@/components/upload/UploadImage.vue'
export default {
  components: {
    UploadImage
  },
  props: {
    type: { type: Number },
    // 工具框大标题
    title: { type: String },
    // 工具框小标题
    subTitle: { type: String },
    // 共有多少个工具
    tool: { type: Array },
    // 一组数据的话工具框的下标
    toolIndex: { type: Number, default: 0 },
    // 输入框最多输入的长度
    valueMaxLength: { type: Number, default: 10 },
    // 回显的数据
    echoData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    id: { type: String },
    dataFlag: { type: String },
    textValue: { type: String }
  },
  data() {
    return {
      // 设置样式
      toolList: [],
      // 最后返回的数据
      returnData: {
        textValue: ''
      },
      // 图片的url
      imageUrl: ''
    }
  },
  mounted() {
    if (this.textValue !== undefined) {
      this.returnData.textValue = this.textValue
      // this.$forceUpdate()
    }
    this.setToolData()
  },
  methods: {
    // 文字输入
    changeText() {
      this.setStyleData()
      const data = Object.assign({ originalData: this.toolList }, this.returnData)
      data.toolIndex = this.toolIndex
      data.id = this.id
      data.type = this.type
      this.$emit('changeText', data)
    },
    // 上传img
    uploadImg() {
      this.setStyleData()
      const data = Object.assign({ originalData: this.toolList }, this.returnData)
      data.toolIndex = this.toolIndex
      data.id = this.id
      data.url = this.imageUrl
      data.type = this.type
      this.$emit('imgUpload', data)
    },
    // 通过父组件传来的tool重组数据渲染
    setToolData() {
      const data = [
        {
          name: 'fontSize',
          styleName: 'font-size',
          value: '12px',
          option: this.setOption(12, 30, 2, 'px')
        },
        {
          name: 'fontColor',
          styleName: 'color',
          value: '#000000'
        },
        {
          name: 'fontLineH',
          styleName: 'line-height',
          value: '12px',
          option: this.setOption(12, 50, 1, 'px')
        },
        {
          name: 'fontFamily',
          styleName: 'font-family',
          value: 'fangsong',
          option: [{ value: 'fangsong', label: 'fangsong' }]
        },
        {
          name: 'borderRadius',
          styleName: 'border-radius',
          value: '15px',
          option: this.setOption(1, 15, 1, 'px')
        },
        {
          name: 'bgColor',
          styleName: 'background',
          value: '#000000'
        },
        {
          name: 'fontPosition',
          styleName: 'padding',
          value: '5px 20px',
          option: [
            { value: '5px 20px', label: '居中' },
            { value: '5px 20px 5px 0', label: '居左' },
            { value: '5px 0 5px 20px', label: '居右' }
          ]
        },
        {
          name: 'width',
          styleName: 'width',
          value: '500px',
          option: this.setOption(0, 800, 1, 'px', 'auto')
        },
        {
          name: 'height',
          styleName: 'height',
          value: '300px',
          option: this.setOption(0, 1000, 1, 'px', 'auto')
        },
        {
          name: 'zIndex',
          styleName: 'z-index',
          value: '1',
          option: this.setOption(0, 50, 1)
        }
      ]
      this.toolList = this.tool.reduce((a, b) => {
        const item = data.find(i => i.name === b.name)
        item && a.push(Object.assign(item, b))
        return a
      }, [])
    },
    // 重新组合对象变成父组件需要的
    setStyleData() {
      this.returnData.style = this.toolList
        .reduce((a, b) => {
          a.push(`${b.styleName}: ${b.value};`)
          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() {
      this.setStyleData()
      const data = Object.assign({ originalData: this.toolList }, this.returnData)
      data.toolIndex = this.toolIndex
      data.id = this.id
      data.type = this.type
      this.$emit('data', data)
    }
  },
  computed: {
    toolListWat() {
      return this.toolList // 深拷贝需要监听的对象数据
    },
    returnDataWat() {
      return this.returnData // 深拷贝需要监听的对象数据
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-style-box {
  width: 320px;
  padding: 22px 23px 0;
  background: rgba(248, 248, 248, 0.39);
  border-radius: 16px;
  margin-bottom: 60px;
  position: relative;
  &::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: rgba(184, 1, 64, 1);
      border-radius: 6px;
      font-size: 14px;
      color: #fff;
      margin-top: 8px;
      border: 1px solid rgba(184, 1, 64, 1);
      cursor: pointer;
      &.active {
        background: rgba(237, 245, 243, 0.39);
        border: 1px solid rgba(184, 1, 64, 1);
        border-radius: 6px;
        color: rgba(184, 1, 64, 1);
      }
    }
  }
  .tool-select {
    display: flex;
    padding-top: 15px;
    justify-content: space-between;
    flex-wrap: wrap;
    .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>
