<template>
  <div>
    <!-- 主题色选择器  -->
    <ul class="selectColorBox-dropdown" aria-expanded="true" style="display: block;list-style-type: none;">
      <li class="defaultColor">
        <span v-for="item in colorCircleDefaultData" :key="item" class="colorCircleBtn" :style="{borderColor:item}">
          <i :style="{backgroundColor:item}" :data-color="item"></i>
        </span>
        <el-color-picker color-format="rgb" @change="onColorChange" v-model="color" style="margin: 3px 2px;"></el-color-picker>
      </li>
      <li>
        <el-button @click="restoreColor" style="margin-right:10px;">还原调色板</el-button>
        <el-button @click="restoreStyleList">还原模板样式</el-button>
      </li>
    </ul>
  </div>
</template>

<script>
import './articleEditorCommon.js'
export default {
  mounted() {
    this.setUserColor()
    this.$nextTick(function () {
      this.bindClick()
    })
  },
  data() {
    return {
      color: 'rgb(255,255,255)',
      colorCircleDefaultData: ['rgb(225, 37, 30)', 'rgb(225, 98, 30)', 'rgb(225, 137, 30)', 'rgb(225, 172, 30)', 'rgb(225, 215, 30)', 'rgb(209, 225, 30)', 'rgb(181, 225, 30)', 'rgb(142, 225, 30)', 'rgb(85, 225, 30)', 'rgb(30, 225, 104)', 'rgb(23, 171, 87)', 'rgb(30, 225, 164)', 'rgb(30, 225, 218)', 'rgb(30, 207, 225)', 'rgb(30, 178, 225)', 'rgb(30, 154, 225)', 'rgb(30, 136, 225)', 'rgb(30, 104, 225)', 'rgb(30, 79, 225)', 'rgb(30, 47, 225)', 'rgb(67, 30, 225)', 'rgb(95, 30, 225)', 'rgb(127, 30, 225)', 'rgb(159, 30, 225)', 'rgb(202, 30, 225)', 'rgb(225, 30, 198)', 'rgb(225, 30, 166)', 'rgb(225, 30, 108)', 'rgb(225, 30, 76)', 'rgb(187, 14, 14)']
    }
  },
  methods: {
    restoreColor() {
      // 还原调色板
      this.colorCircleDefaultData = ['rgb(225, 37, 30)', 'rgb(225, 98, 30)', 'rgb(225, 137, 30)', 'rgb(225, 172, 30)', 'rgb(225, 215, 30)', 'rgb(209, 225, 30)', 'rgb(181, 225, 30)', 'rgb(142, 225, 30)', 'rgb(85, 225, 30)', 'rgb(30, 225, 104)', 'rgb(23, 171, 87)', 'rgb(30, 225, 164)', 'rgb(30, 225, 218)', 'rgb(30, 207, 225)', 'rgb(30, 178, 225)', 'rgb(30, 154, 225)', 'rgb(30, 136, 225)', 'rgb(30, 104, 225)', 'rgb(30, 79, 225)', 'rgb(30, 47, 225)', 'rgb(67, 30, 225)', 'rgb(95, 30, 225)', 'rgb(127, 30, 225)', 'rgb(159, 30, 225)', 'rgb(202, 30, 225)', 'rgb(225, 30, 198)', 'rgb(225, 30, 166)', 'rgb(225, 30, 108)', 'rgb(225, 30, 76)', 'rgb(187, 14, 14)']
      localStorage.userSetColor = ''
    },
    restoreStyleList() {
      // 还原模板样式
      this.$emit('restore')
    },
    onColorChange(color) {
      this.$emit('change', color)
      // 调色板插入用户自定义的颜色
      this.colorCircleDefaultData.splice(this.colorCircleDefaultData.length, 1, color)
      // 保存用户自定义的颜色
      if (localStorage.userSetColor) {
        localStorage.userSetColor += '||'
      }
      localStorage.userSetColor += color
      this.$nextTick(function () {
        this.bindClick()
      })
    },
    setUserColor() {
      // 加载用户上次自定义的颜色到调色板
      if (localStorage.userSetColor && localStorage.userSetColor !== '') {
        let userSetColorArr = localStorage.userSetColor.split('||')
        this.colorCircleDefaultData = [...this.colorCircleDefaultData, ...userSetColorArr]
      }
    },
    bindClick() {
      // 为每一个色块绑定点击事件，用于返回给父组件
      let el = Array.from(this.$el.querySelectorAll('.colorCircleBtn'))
      el.forEach(element => {
        element.onclick = () => {
          this.$emit('change', element.childNodes[0].attributes['data-color'].nodeValue)
        }
      }, this)
    }
  }
}
</script>

<style scoped>
  .selectColorBox {
    text-align: right;
    font-size: 12px;
    height: 50px;
    margin-right: -15px;
  }

  .colorCircleBtn {
    border-radius: 50%;
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    display: inline-block;
    height: 32px;
    margin: 3px;
    padding: 2px;
    vertical-align: middle;
    width: 32px;
    z-index: 999;
  }

  .colorCircleBtn i {
    border-radius: 50%;
    content: ' ';
    display: block;
    height: 100%;
    width: 100%;
  }

  .selectColorBox-dropdown>li {
    position: relative;
    display: table;
    width: 100%;
  }

  .selectColorBox-dropdown>li .btn {
    outline: 0;
  }

  .selectColorBox-dropdown .colorCircleBtn {
    float: left;
    position: relative;
  }

  .selectColorBox-dropdown .colorCircleBtn:hover,
  .selectColorBox-dropdown .colorCircleBtn.active {
    border-width: 1px;
  }

  .selectColorBox-dropdown {
    float: left;
    min-width: 160px;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
  }
</style>
