<template>
  <div>
    <p><label class="label fs-14">Chọn cột hiển thị</label></p>
    <div class="field is-grouped is-grouped-multiline mt-2">
      <div class="control" v-for="(v,i) in args" :key="i">
      <div class="tags has-addons">
        <a class="tag is-primary">{{$stripHtml(v.label)}}</a>
        <a class="tag is-delete" @click="remove(args, i)"></a>
      </div>
      </div>
      </div>
    </div>
</template>

<script>
export default {
  props: ['pagename'],
  data() {
    return {
      args: []
    }
  },
  created() {
    this.args = this.$copy(this.pagedata.fields.filter(v=>v.format==='number' && v.show))
  },
  computed: {
    pagedata: {
      get: function() {return this.$store.state[this.pagename]},
      set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
    },
  },
  methods: {
    remove(args, i) {
      this.$delete(args, i)
      this.$emit('changefields', args)
    }
  }
}
</script>