<!--按钮组件模块-->
<template>
    <div>
        <!--按钮主体-->
        <button 
          class="bthDom"
            type="button"
            :class="btnStyle" 
            :style="fstyle"
        >
            <!--插槽标签-->
            <slot></slot>
        </button>
    </div>
</template>

<script>
let fstyleDom = Math.random().toFixed(4).replace('.','');
console.log(fstyleDom)
export default {
  name: "poi-button",
  props: {
    //接收按钮类型
    type: {
      type: String,
      default: () => {
        return "default";
      }
    },
    //接收按钮大小
    size: {
      type: String,
      default: () => {
        return "default";
      }
    },
    //接收自定义属性
    freestyle: {
      type: null
    }
  },
  data() {
    return {
      buttonType: {
        primary: "poi-btn-primary",
        success: "poi-btn-success",
        info: "poi-btn-info",
        warning: "poi-btn-warning",
        danger: "poi-btn-danger",
        text: "poi-btn-text"
      },
      buttonSize:{
         small:'poi-btn-small',
         mini:'poi-btn-mini',
         medium:'poi-btn-medium',
      },
      bthDom:`bth-${fstyleDom}`,
    };
  },
  computed: {
    //匹配按钮样式
    btnStyle() {
      let list = [];
      if (this.type != "text") {
        list.push("poi-btn");
      }

      let buttonType = this.buttonType[this.type]?this.buttonType[this.type]:this.type;
      let buttonSize = this.buttonSize[this.size]?this.buttonSize[this.size]:this.size;
      list.push(buttonType); //匹配按钮显示类型
      list.push(buttonSize); //匹配按钮大小类型

      return list;
    },
    //将自定义样式加入到属性中
    fstyle() {
      if (this.freestyle) {
        var styleEl = document.styleSheets[1];
        this.freestyle.btnstyle.forEach((item, index) => {
          styleEl.insertRule(`.${this.type}${item}`, styleEl.rules.length);
        });
      }
      //styleSheet.insertRule(this.freestyle);
    }
  }
};
</script>

