<template>
    <div class="pop_box">
     <div class="slider_box">
       <p style="text-align: left">字体大小：<b style="color: #009688;font-size: 14px">{{value}}</b></p>
       <Slider v-model="value" :step="1" show-stops @on-change="size" :min="20" :max="72" ></Slider>
     </div>
      <div class="ColorPicker_box ">
        <p style="text-align: left">颜色：</p>

        <div class="q-gutter-sm" style="padding:10px 0;">
          <q-radio v-for="(item,index) in colorArr" :key="item.id" v-if="index<5" keep-color dense v-model="color" :val="item.val" :color="item.color" @input="chioceColor"/>
        </div>
        <div class="q-gutter-sm" style="padding:10px 0;">
          <q-radio v-for="(item,index) in colorArr" :key="item.id" v-if="index>=5" keep-color dense v-model="color" :val="item.val" :color="item.color" @input="chioceColor"/>
        </div>
        <!--<q-color v-model="hex" no-header no-footer default-view="palette" class="my-picker" @change="ss" @input="cc" :palette="['#2d8cf0', '#019A9D', '#D9B801', 'rgb(23,120,0)', '#B2028A' ]"/>-->
      </div>
    </div>
</template>

<script>
import {color} from 'vuex'
export default {
  name: 'pop',
  data() {
    return {
      button4: 'brush',
      hex: '#FF00FF',
      standard: 2,
      value: 20,
      color: 'black',
      colorArr: [
        { val: 'white', color: 'gray' },
        { val: 'black', color: 'black' },
        { val: 'red', color: 'red' },
        { val: 'orange', color: 'orange' },
        { val: 'yellow', color: 'yellow' },
        { val: 'green', color: 'green' },
        { val: 'cyan', color: 'cyan' },
        { val: 'blue', color: 'blue' },
        { val: 'purple', color: 'purple' },
        { val: 'brown', color: 'brown' }
      ]
    }
  },
  methods: {
    ss: function(e) {
      this.$store.state.laserColor = e
      // this.$emit('func',e)
    },
    size: function(e) {
      this.$store.state.textSize = e
    },
    chioceColor: function(e) {
      this.$store.state.textColor = e
    }
  }
}
</script>
<style>
  .ivu-transfer-no-max-height{
    transform-origin: center top;
    position: absolute;
    will-change: top, left;
    top: 32px;
    left: 3px !important;
  }
  .ivu-color-picker-saturation-wrapper{
    padding-bottom: 0% !important;
  }
  .ivu-color-picker-picker-hue-slider{
    height:0px !important;;
  }
  .q-color-picker__cube,.col-auto{
    margin: 4px;
  }
  .q-color-picker{
    box-shadow:none !important;
  }
</style>
<style scoped>
.pop_box{padding:0 8px;overflow: hidden;}
.slider_box{
  width:190px;
  padding: 5px;
}
.ColorPicker_box{
  width:190px;
  padding: 5px;
}
  .secondary_title{
    text-align: left;
  }
</style>
