<template>
  <div class="text-group-con">
    <div :key="'text-item-' + index" class="text-item" v-for="(item,index) in dataList">
      <a-button v-if="item.type === 'link'" type="link" :size="'default'" @click="btnEvent(item)"> {{ item.label }}
      </a-button>
      <span v-if="item.type === 'text'" :class="[item.border ? 'isborder' : ''].join(' ')"
        @click="btnEvent(item)">{{ item.label }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PTextGroup',
  props: {
    value: { type: Array }
  },
  data() {
    return {
      dataList: [
        // { type: 'text', label: '待定', border: true, isEvent: true },
        // { type: 'link', label: '查看核定通知书', isEvent: true },
      ]
    }
  },
  watch: {
    value: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Array]') {
          this.dataList = val
        }
        // else {
        //   throw "当前的值需要传入一个两个元素的数组"
        // }

      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    btnEvent(item) {
      const { label, isEvent = false } = item
      if (isEvent) {
        this.$emit('textGroupEvent', label)
      }
    }
  }
}
</script>

<style lang="less">
.text-group-con {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .text-item {
    padding: 0 5px;

    .isborder {
      border: 1px solid #ccc;
      padding: 5px;
      border-radius: 4px;
    }
  }
}
</style>
