<template>
  <div class="edit-style-box">
    <div class="title">{{ title }}</div>
    <div class="f-type">
      <div class="tit">{{ subTitle }}</div>
      <div :class="returnData.show === false ? 'active btn' : 'btn'" @click="handleDom">
        点击{{ returnData.show || returnData.show === undefined ? '创建' : '删除' }}{{ subTitle }}
      </div>
      <el-input
        :maxlength="valueMaxLength"
        v-if="returnData.show === false"
        style="margin-top: 15px"
        v-model="returnData.textValue"
        placeholder="请输入"
      ></el-input>
    </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 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 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 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 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>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 工具框大标题
    title: { type: String },
    // 工具框小标题
    subTitle: { type: String },
    // 共有多少个工具
    tool: { type: Array },
    // 一组数据的话工具框的下标
    toolIndex: { type: Number, default: 0 },
    // 输入框最多输入的长度
    valueMaxLength: { type: Number, default: 10 },
    // 回显的数据
    echoData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // 设置样式
      toolList: [],
      // 最后返回的数据
      returnData: {}
    }
  },
  mounted() {
    this.returnData = this.echoData
    this.setToolData()
    // this.returnData = this.echoData
  },
  methods: {
    // 拖拽的dom 通过此方法显示隐藏
    handleDom() {
      this.returnData.show = this.returnData.show === undefined ? false : !this.returnData.show
      const data = Object.assign({ originalData: this.toolList }, this.returnData)
      data.toolIndex = this.toolIndex
      this.$emit('data', data)
      this.$forceUpdate()
    },
    // 通过父组件传来的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: 'background-color',
          value: 'center',
          option: [
            { value: 'center', label: '居中' },
            { value: 'left', label: '居左' },
            { value: 'right', label: '居右' }
          ]
        }
      ]
      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 = '') {
      const options = []
      for (let i = min; i <= max; i += count) {
        options.push({ value: `${i}${symbol}`, label: `${i}${symbol}` })
      }
      return options
    }
  },
  computed: {
    toolListWat() {
      return this.toolList // 深拷贝需要监听的对象数据
    },
    returnDataWat() {
      return this.returnData // 深拷贝需要监听的对象数据
    }
  },
  watch: {
    // 工具框改变的时候就告诉父组件
    toolListWat: {
      deep: true,
      handler() {
        this.setStyleData()
        const data = Object.assign({ originalData: this.toolList }, this.returnData)
        data.toolIndex = this.toolIndex
        this.$emit('data', data)
      }
    },
    returnDataWat: {
      deep: true,
      handler() {
        this.setStyleData()
        const data = Object.assign({ originalData: this.toolList }, this.returnData)
        data.toolIndex = this.toolIndex
        this.$emit('data', data)
      }
    }
  }
}
</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(73, 187, 162, 1);
      border-radius: 6px;
      font-size: 14px;
      color: #fff;
      margin-top: 8px;
      border: 1px solid rgba(73, 187, 162, 1);
      cursor: pointer;
      &.active {
        background: rgba(237, 245, 243, 0.39);
        border: 1px solid #80d6c4;
        border-radius: 6px;
        color: #49bba2;
      }
    }
  }
  .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;
        }
      }
    }
  }
}
</style>
