Vue.component("header-btns", {
    template: `
  <div>
        <el-row>
           <button   class="Btn1" v-on:click="colorBtn('btn1')"></button>
           <button   class="Btn2" v-on:click="colorBtn('btn2')"></button>
           <button   class="Btn3" v-on:click="colorBtn('btn3')"></button>
           <button   class="Btn4" v-on:click="colorBtn('btn4')"></button>
           <button   class="Btn5" v-on:click="colorBtn('btn5')"></button>
          <template>
            <el-select style='width:100' v-model='colorNameTmp' placeholder='配色方案'  @change='selectColorName'>
              <el-option
                v-for='(item,index) in colorArr'
                :key='index'
                :label='item.name'
                :value='index'>
              </el-option>
            </el-select>
          </template>
           <el-divider direction='vertical'></el-divider>
          <el-color-picker v-model='textColor' @change='elColorPicChangeText'></el-color-picker>
          <el-color-picker v-model='bgColor' @change='elColorPicChangeBg'></el-color-picker>
          <el-button size='mini' round  v-on:click="colorBtn('rand')">随机配色</el-button>
          <el-divider direction='vertical'></el-divider>
          <el-button icon='el-icon-full-screen' circle v-on:click="colorBtn('full')"></el-button>
          <el-button icon='el-icon-star-off' circle v-on:click="colorBtn('fav')"></el-button>
         </el-row>
      <el-divider></el-divider>
      <el-row>
        <template>
          <el-select v-model="fontNameTmp" placeholder="请选择字体"  @change="selectOne">
              <el-option
              v-for="item in optionsArr"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
          <template>
            <el-select v-model='fontSizeTmp' placeholder='请选择字体大小' >
              <el-option
                v-for='item in fontSizeOptionsArr'
                :key='item.value'
                :label='item.value'
                :value='item.value'>
              </el-option>
            </el-select>
          </template>
           <template>
            <el-select v-model='lineTmp' placeholder='请选择行线' @change="selectLine" >
              <el-option
                v-for='item in lineOptionsArr'
                :key='item.url'
                :label='item.text'
                :value='item.url'
                :style="{height: '56px', background: \`url(\${item.url})\` }"
                >
              </el-option>
            </el-select>
          </template>
          <el-button type="primary" @click='incLineHeight'>增大行间距</el-button>
          <el-button type="primary" @click='decLineHeight'>减小行间距</el-button>
      </el-row>
  </div>
  
  `,
    props: ["colorArr", "optionsArr", "fontSizeOptionsArr", "lineOptionsArr", "colorName", "textColor", "bgColor", "fontName", "fontSize", "lineUrl"],
    data() {
        return {
            fontSizeTmp: this.fontSize,
            colorNameTmp: this.colorName,
            fontNameTmp: this.fontName,
            lineTmp: this.lineUrl
        }
    },
    methods: {

        colorBtn(key) {
            this.$emit("color-btn", key)
        },

        selectColorName(key) {
            console.log(key)
            this.$emit("select-color-name", key)
        },
        elColorPicChangeText(color) {
            this.$emit("el_color-pic_change_text",color)
        },
        elColorPicChangeBg(color) {
            this.$emit("el_color-pic_change_bg",color)
        },
        selectOne(fontName) {
            this.$emit("select-one", fontName)
        },
        selectLine(lineUrl) {
            this.$emit("select-line", lineUrl);
        },
        incLineHeight(){
          this.$emit("inc-line-height");
        },

        decLineHeight(){
          this.$emit("dec-line-height")
        }
    },
    watch: {
        fontSizeTmp(newVar, oldVar) {
            this.$emit("select-font-size", newVar)
        },
        fontName(newVal) {
            this.fontNameTmp = newVal;
        },
        fontSize(newVal) {
            this.fontSizeTmp = newVal;
        },

        lineUrl(newVal) {
            this.lineTmp = newVal;
        }
    },

})