<template>
  <view class="xd-label">
    <view class="xd-label__title"
      v-if="uiLabel.length > 0"
      :style="boxStyle"
      :class="{
        'left': justifyContent === 'flex-start',
        'center': justifyContent === 'space-between',
        'right': justifyContent === 'flex-end',
      }"
    >
      <view class="xd-label__title-required" v-if="required || star" v-html="(required?'*': '&nbsp;')"></view>
      <view
        class="xd-label__title-text"
        :style="{
          fontSize: size + 'rpx',
        }"
      >
        <view v-for="(item,index) in uiLabel" :key="index">{{item}}</view>
      </view>
      <view class="xd-label__title-icon" v-if="strIcon" :style="{fontSize: size + 'rpx'}">{{strIcon}}</view>
    </view>
    <view class="xd-label__content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  /**
   * XdLabelNew
   * @description 在列表组中所有标题文字使用相同左右对齐插件，
   * 备注：在列表组中有使用带"*"时候，不带 * 号插件中也需要传入star的值并进行占位
   *
   * @property {String} label 标题名称 {必填}
   * @property {Boolean} star 不带"*"号插件对"*"号区域进行占位 默认：true
   * @property {String|Number} size 标题文字大小，单位：rpx   默认：32
   * @property {Boolean} required 是否带"*"号， 默认：false
   * @property {String|Number} width 宽度值   默认：auto
   * @property {String} color 标题文字颜色   默认：#333
   * @property {String} justifyContent 对齐方式  默认：space-between  其值：flex-start，flex-end ,space-between
   *
   * @slot 支持插槽（1个插槽） 默认
   */
  export default {
    name: "XdLabel",
    props: {
      label: {
        type: String,
        required: true
      },
      star: {
        type: Boolean,
        default: false
      },
      size: {
        type: String | Number, //rpx
        default: 30,
      },
      required: {
        type: Boolean,
        default: false
      },
      color: {
        type: String,
        default: '#333'
      },
      width: {
        type: String | Number, //rpx
        default: 'auto',
      },
      justifyContent: {
        type: String,
        default: 'space-between', //flex-start，flex-end ,space-between
      }
    },
    data(){
      return {
        uiWidth: 0,
        uiLabel: [],
        strIcon: '',
        boxStyle: '',
      }
    },
    created() {
      this.uiWidth = this.width;
      let reg = /^(([0-9]+)|(auto)+|(([0-9\.]+)%)+)$/; //数字|%|auto
      let reg1 = /^([0-9])+$/; //数字类格式
      if(!reg.test(this.width)) {
        throw new Error(`width格式错误, 当前值为:${this.width}`);
      }

      //两端对齐方式检查
      if((this.justifyContent === 'space-between' || this.justifyContent === 'flex-end')
        && this.width === 'auto') {
        throw new Error(`lable=${this.label}列配置错误，设置两端对齐,右对齐方式，必须设置元素宽度`)
      }

      //数字类型
      if(reg1.test(this.width)) {
        if(this.$xdUniHelper.checkVarType(this.width) === 'string' ) {
          this.uiWidth = Number(this.width);
        }
        this.uiWidth = `${this.uiWidth}rpx`
      }

      let reg2 = /.*([:：])$/;
      let name = this.label.replace(/[:：]/g, '：')
      if (reg2.test(name) && this.justifyContent === 'space-between') {
        this.strIcon = '：';
        this.uiLabel = name.replace(/[:：]/g, '').split('');
      } else {
        this.uiLabel = name.split('');
      }
      this.boxStyle = `color:${this.color};`;
      if(this.justifyContent === 'space-between' || this.justifyContent === 'flex-end' ) {
        this.boxStyle = `${this.boxStyle}width: ${this.uiWidth};`
      }
    }
  }
</script>

<style scoped lang="less">
  .xd-label {
    display: flex;
    align-items: center;
    justify-content: space-between;


    &__title {
      display: flex;
      align-items: center;
      padding-right: unit(10, rpx);
      box-sizing: border-box;
      flex-shrink: 0;

      &-text {
        display: flex;
        align-items: center;
      }

      &-icon {
        flex-shrink: 0;
      }

      &-required {
        color: red;
        padding-right: unit(10, rpx);
        width: unit(20, rpx);
      }

      &.center {
        justify-content: space-between;
      }

      &.center > &-text {
        justify-content: space-between;
        flex: 1;
      }

      &.center > &-required {
        flex-shrink: 0;
      }

      &.left {
        justify-content: flex-start;
      }

      &.left > &-text {
        justify-content: flex-start;
      }

      &.left > &-required {
        flex-shrink: 0;
      }

      &.right {
        justify-content: flex-end;
      }

      &.right > &-text {
        justify-content: flex-end;
      }

    }


    &__content {
      flex: 1;
      width: 0;
    }
  }
</style>
