<template>
    <div class="pop_box">
      <div class="slider_box" >
        <!--<p style="text-align: left"> &nbsp;</p>-->
        <!--<div v-for="(items,index) in shapeList"  class="shapes_icon" @click="penType(items.value,index)" :style="currentIndex==index?'color:'+color:''">-->
          <!--&lt;!&ndash;<q-icon :name="items.icon" />&ndash;&gt;-->
          <!--<font-awesome-icon :icon="items.icon" style="font-size: 24px;" />-->
        <!--</div>-->
        <p style="text-align: left;">画笔：</p>
        <RadioGroup v-model="button4" type="button" @on-change="penType" style="padding:10px 0;">
          <Radio label="pencil-alt" title="通用画笔" :style="brushType=='pencil-alt'?'color:'+color:'color:#515a6e'"><font-awesome-icon icon="pencil-alt" style="font-size: 24px;" /></Radio>
          <Radio label="highlighter" title="高光笔" :style="brushType=='highlighter'?'color:'+color:'color:#515a6e '"><font-awesome-icon icon="highlighter" style="font-size: 24px;"/></Radio>
          <Radio label="magic" title="镭射笔" :style="brushType=='magic'?'color:'+color:'color:#515a6e '"><font-awesome-icon icon="magic" style="font-size: 24px;"/></Radio>
        </RadioGroup>
      </div>
     <div class="slider_box">
       <p style="text-align: left">大小：<b style="color: #009688;font-size: 14px">{{value}}</b></p>

       <Slider v-model="value" @on-change="size" :min='1' :step="1" :max='10' show-tip="never"></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 {
      color: '#009688',
      currentIndex: 0,
      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' }
      ],
      shapeList: [
        { icon: 'pencil-alt', value: 'pencil-alt' },
        { icon: 'highlighter', value: 'highlighter' },
        { icon: 'magic', value: 'magic' }
      ],
      button4: 'pencil-alt',
      hex: '#FF00FF',
      standard: 2,
      value: 1,
      strokeColor: '#019A9D;',
      brushType: 'pencil-alt'
    }
  },
  methods: {
    chioceColor: function(e) {
      this.$store.state.strokeColor = e
      this.strokeColor = e
    },

    size: function(e) {
      this.$store.state.strokeWidth = e
    },
    penType: function(e, index) {
      this.currentIndex = index
      this.$store.state.penType = e
      this.brushType = e
    }
  },
  created() {

  }
}
</script>
<style>
  /*.pop_box .ivu-poptip-popper{
    left:-270px !important;
    min-height: 0;
  }*/

  .pop_box .ivu-radio-group-button .ivu-radio-wrapper-checked, .ivu-radio-group-button .ivu-radio-wrapper:hover{
    color:#019A9D;

  }
  .pop_box .ivu-radio-group-button .ivu-radio-wrapper{
    padding:0 20px 0 0 !important;
    background: none;
  }
  .pop_box .ivu-transfer-no-max-height{
    transform-origin: center top;
    position: absolute;
    will-change: top, left;
    top: 32px;
    left: 3px !important;
  }
  .pop_box .ivu-color-picker-saturation-wrapper{
    padding-bottom: 0% !important;
  }
  .pop_box .ivu-color-picker-picker-hue-slider{
    height:0px !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>
