<template>
  <div class="column-selector">
    <Tooltip placement="top" content="通栏">
      <Button type="ghost" icon="minus-round" @click="select(1)"></Button>
    </Tooltip>
    <Tooltip placement="top" content="两列">
      <Button type="ghost" icon="ios-pause" @click="select(2)"></Button>
    </Tooltip>
    <Tooltip placement="top" content="多列" v-if="!hide3Column">
      <Button type="ghost" icon="navicon-round" @click="select(3)" ></Button>
    </Tooltip>
  </div>
</template>
<script>
  export default {
    props: {
      value: Number,
      hide3Column: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        column: this.value,
      }
    },
    watch: {
      value(val) {
        this.color = val;
      }
    },
    methods: {
      select(column) {
        console.log('column-selector', column);
        this.$emit('input', column);
      }
    }
  }
</script>
<style lang="less">
  
</style>