<template>
    <div class="pattern_box">
      <!--<p style="text-align: left">图形选择：</p>-->
        <!--<div class="shapes_box">-->
         <!--<div v-for="(items,index) in colorList"  class="shapes_icon" @click="shapesSelect(items.value,index)" :style="currentIndex==index?'color:'+hex:''">-->
           <!--<font-awesome-icon :icon="items.value" />-->
         <!--</div>-->
        <!--</div>-->
      <p style="text-align: left">图形：</p>
      <div class="shapes_box">
        <div v-for="(items,index) in shapeList" :key="index" class="shapes_icon" :title="items.title" @click="shapesSelect(items.value,items.icon,index)" :style="currentIndex==index?'color:'+color2:''">
          <q-icon :name="items.icon"  v-if="items.value=='long-arrow-alt-right'||items.value=='line'" style="transform: rotate(-45deg)"/>
          <q-icon :name="items.icon"  v-else-if="items.value=='ellipse'" style="transform: scaleX(1.3);font-size: 21px !important;"/>
          <q-icon :name="items.icon"  v-else/>
        </div>
      </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 colorArr2" :key="index"  v-if="index<5"  keep-color dense v-model="color2" :val="item.val" :color="item.color" @input="borderSelect"/>
        </div>
        <div class="q-gutter-sm" style="padding:10px 0;">
          <q-radio v-for="(item,index) in colorArr2" :key="index" v-if="index>=5"  keep-color dense v-model="color2" :val="item.val" :color="item.color" @input="borderSelect"/>
        </div>
        <!--<q-color no-header no-footer default-view="palette" class="my-picker" @change="borderColor" :palette="['#019A9D', '#D9B801', 'rgb(23,120,0)', '#B2028A' ]"/>-->
      </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="index" v-if="index<5" keep-color dense v-model="color" :val="item.val" :color="item.color" @input="colorSelect"/>
        </div>
        <div class="q-gutter-sm" style="padding:10px 0;">
          <q-radio v-for="(item,index) in colorArr" :key="index" v-if="index>=5" keep-color dense v-model="color" :val="item.val" :color="item.color" @input="colorSelect"/>
        </div>
        <!--<q-color v-model="hex" no-header no-footer default-view="palette" class="my-picker" @change="colorSelect" :palette="['#019A9D', '#D9B801', 'rgb(23,120,0)', '#B2028A' ]"/>-->
      </div>

    </div>
</template>

<script>
    export default {
        name: '',
      data() {
       return {
         color: 'white',
         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' }
         ],

         color2: '#009688',
         colorArr2: [
           { 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' }
         ],

         hex: '#019a9d',
         colorList: [// 默认选中的图形
           { 'id': 1, 'value': 'circle', title: '' },
           { 'id': 2, 'value': 'ellipse', title: '' },
           { 'id': 3, 'value': 'square', title: '' },
           { 'id': 4, 'value': 'campground', title: '' },
           { 'id': 5, 'value': 'star', title: '' },
           { 'id': 6, 'value': 'long-arrow-alt-right', title: '' }
         ],
         shapeList: [
           { icon: 'panorama_fish_eye', value: 'circle', title: '圆形' },
           { icon: 'panorama_fish_eye', value: 'ellipse', title: '椭圆' },
           { icon: 'check_box_outline_blank', value: 'square', title: '矩形' },
           { icon: 'change_history', value: 'campground', title: '多角形' },
           { icon: 'star_border', value: 'star', title: '五角星' },
           { icon: 'trending_flat', value: 'long-arrow-alt-right', title: '箭头' },
           { icon: 'remove', value: 'line', title: '直线' }
           // {icon:'text_fields',value:'text',title:'文字'},
         ],
         currentIndex: 0,
         shapeColor: '#009688',
         borderColor: '#009688'
       }
      },
      created() {
      },
      methods: {
        shapesSelect: function(value, icon, index) {
          this.currentIndex = index
          this.$store.state.shapeType = value
          this.$store.state.shapeTypeIcon = icon
        },
        colorSelect: function(e) {
          if (e === '#eee') {
            this.$store.state.shapeColor = ''
          } else {
            this.$store.state.shapeColor = e
          }
        },
        borderSelect: function(e) {
          this.$store.state.shapeBorderColor = e
        }

      }

    }

</script>

<style scoped>
  .q-color-picker__cube{
    border-radius: 50%;
    box-sizing: border-box;
  }
  .pattern_box{
    width:200px;
    /*height:130px;*/
  }
  .shapes_box{
    overflow: hidden;
    /*width:96%;*/
    /*height:45px;*/
    /*padding: 2%;*/
    margin-top:10px;
  }
  .shapes_icon,.shapes_icon_bg{
    width:25%;
    height:30px;
    display: block;
    float: left;
  }
  .shapes_icon >.svg-inline--fa{
    font-size:18px;
  }
  .shapes_icon_bg>.svg-inline--fa{
    font-size:20px;
  }

  .ColorPicker_box{
    width:190px;
    padding: 5px;
  }

</style>
