<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'" v-has="vhas" type="link" :size="'default'" :class="[item.border ? 'isborder-link' : '', item.isEvent ==true ?'isEvent':'isText'].join(' ')"  @click="btnEvent(item)"> {{ item.label }}
        </a-button>
        <span v-if="item.type === 'text'" v-has="vhas" :class="[item.border ? 'isborder' : '', item.isEvent ==true ?'isEvent':'isText'].join(' ')"
          @click="btnEvent(item)">{{ item.label }}</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PTextGroup',
    props: {
      vhas:{type:String},
      value: { type: Array, default:[] },
      showHelp:{type:Boolean, default: () => { return false }}
    },
    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
      },
    },
    mounted() {
    if(this.$isShowHelp == true &&  this.showHelp == true){
      console.log(`
      组件名称：
          PTextGroup
      使用方法：
          <p-TextGroup v-model="[]" @textGroupEvent=""> </p-TextGroup>
      props参数说明：
          props:{
            // 此参数必填   
            // type: 可选择 的值  text | link
            // label: 显示的文本
            // border: 是否显示边框
            // isEvent: 是否启用点击事件
            // { type: 'text', label: '待定', border: true, isEvent: true }
            value: {type: Array},
          },
        事件说明：
            事件名称: textGroupEvent
            参数: 点击按钮的label值
            使用方式： <p-TextGroup v-model="[]" @textGroupEvent=""> </p-TextGroup>
      `)
    }
  },
    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;
    
      .isEvent{
        cursor: pointer;
      }
      .isText{
        cursor: text;
      }
      .isborder {
        border: 1px solid #d9d9d9;
        padding: 5px;
        border-radius: 4px;
      }
      .isborder-link {
        border: 1px solid #1890ff;
        padding: 5px;
        border-radius: 4px;
      }
    }
  }
  </style>
  