<template>
  <view v-if="show">
    <view
      :class="[
        'xd-tag--' + type,
        disabled === true || disabled === 'true' ? 'xd-tag--disabled' : '',
        inverted === true || inverted === 'true' ? type + '-xd-tag--inverted' : '',
        circle === true || circle === 'true' ? 'xd-tag--circle' : '',
        mark === true || mark === 'true' ? 'xd-tag--mark' : '',
        'xd-tag--' + size
      ]"
      @click.stop="onClick()"
      class="xd-tag"
      :style="getStyle"
      v-if="isStop"
    >
      <view
        class="xd-tag__text"
        :class="[
          type === 'default' ? 'xd-tag-text--default':'xd-tag-text',
          inverted === true || inverted === 'true' ? 'xd-tag-text--'+type : '',
          size === 'small' ? 'xd-tag-text--small':''
        ]"
        :style="{
          color: fontColor ? (fontColor + '!important') : '',
          paddingRight: isClose ? (size === 'small'? '20rpx': '40rpx'): 0,
        }"
      >
        <view><slot></slot></view>
        <view
          @click.stop="handleClose"
          v-if="isClose"
        >
          <xd-font-icon  icon="iconguanbi2" size="20"></xd-font-icon>
        </view>
      </view>
    </view>
    <view
      :class="[
      'xd-tag--' + type,
      disabled === true || disabled === 'true' ? 'xd-tag--disabled' : '',
      inverted === true || inverted === 'true' ? type + '-xd-tag--inverted' : '',
      circle === true || circle === 'true' ? 'xd-tag--circle' : '',
      mark === true || mark === 'true' ? 'xd-tag--mark' : '',
      'xd-tag--' + size
    ]"
      @click="onClick()"
      class="xd-tag"
      :style="getStyle"
      v-if="!isStop"
    >
      <view
        class="xd-tag__text"
        :class="[
        type === 'default' ? 'xd-tag--default':'xd-tag-text',
        inverted === true || inverted === 'true' ? 'xd-tag-text--'+type : '',
        size === 'small' ? 'xd-tag-text--small':''
      ]"
        :style="{
        color: fontColor ? (fontColor + '!important') : '',
        paddingRight: isClose ? (size === 'small'? '20rpx': '40rpx'): 0,
      }"
      >
        <view>
          <slot></slot>
        </view>
        <view
          @click.stop="handleClose"
          v-if="isClose"
        >
          <xd-font-icon icon="iconguanbi2" :size="size === 'small'? 16: 22"></xd-font-icon>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';
  
  /**
   * XdTag 标签
   * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
   * @property {String} text 标签内容
   * @property {String} size = [normal|small] 大小尺寸
   *  @value normal 正常
   *  @value small 小尺寸
   * @property {String} type = [default|primary|success｜warning｜error｜royal]  颜色类型
   *  @value default 灰色
   *  @value primary 蓝色
   *  @value success 绿色
   *  @value warning 黄色
   *  @value error 红色
   *  @value royal 紫色
   * @property {Boolean} isClose 是否显示关闭icon 默认：false
   * @property {Boolean} isStop 是否阻止冒泡 默认：false
   * @property {Boolean} selected 是否被选中 默认：false
   * @property {String}  radius  圆角处理 默认为30rpx
   * @property {Boolean} disabled = [true|false] 是否为禁用状态
   * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
   * @property {Boolean} circle = [true|false] 是否为圆角
   * @property {String} color 文字值 默认为 $mainColor
   * @property {String|Number} height 插件高度 默认为: null （传入高度取消size展示）
   * @property {String|Number} width 插件宽度 默认为 null
   *
   *
   * @event {Function} click 点击 Tag 触发事件
   */

  export default {
    name: "XdTag",
    components: {XdFontIcon},
    props: {
      isClose: {
        type: [Boolean],
        default: false
      },
      type: {
        // 标签类型: default、primary、success、warning、error、royal
        type: String,
        default: "default"
      },
      isStop:{
        type: [Boolean],
        default: false
      },
      padding:{
        type: String,
        default: "0 16rpx"
      },
      size: {
        // 标签大小 normal, small
        type: String,
        default: "normal"
      },
      // 标签内容
      text: {
        type: String,
        default: ""
      },
      disabled: {
        // 是否为禁用状态
        type: [Boolean, String],
        default: false
      },
      inverted: {
        // 是否为空心
        type: [Boolean, String],
        default: false
      },
      circle: {
        // 是否为圆角样式
        type: [Boolean, String],
        default: false
      },
      mark: {
        // 是否为标记样式
        type: [Boolean, String],
        default: false
      },
      radius: {
        type: String,
        default: ''
      },
      color: {
        type: String,
        default: ''
      },
      width: {
        type: String|Number|null,
        default: null //rpx
      },
      height: {
        type: String | Number| null,
        default: null //rpx
      },
      selected: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        fontColor: '',
        show: true
      }
    },
    created() {
      if(this.inverted) this.fontColor = this.$mainColor;

      if (this.color) {
        this.fontColor = this.color;
      }
    },

    watch:{
      selected(newVal) {
        //被选中字体颜色为白色  为被选中字体颜色为主色调
        if(newVal) {
          this.fontColor = '#fff'
        } else {
          this.fontColor = this.$mainColor
        }
      }
    },

    computed: {
      getStyle() {
        let style = '';
        if (this.type === 'primary' && !this.inverted) {
          style = `background: ${this.$mainColor}; border-color: ${this.$mainColor}`;
        }
        if (this.type === 'primary' && this.inverted) {
          if(this.color) style = `background:#fff; border-color: ${this.color}; color: ${this.color}`;
          else style = `background:#fff; border-color: ${this.$mainColor}; color: ${this.$mainColor}`;

        }

        if (this.radius && !this.circle) {
          style = `${style};border-radius: ${this.radius}`;
        }

        if(this.width) {
          style = `${style};width: ${this.width}rpx`;
        }

        if (this.height) {
          style = `${style};height: ${this.height}rpx;line-height: ${this.height}rpx`;
        }

        return `${style};padding: ${this.padding}`;
      }
    },
    methods: {
      handleClose(){
        this.show = false;
        this.$emit('close');

      },
      onClick() {
        console.log('click')
        if (this.disabled === true || this.disabled === "true") {
          return;
        }
        this.$emit("click");
      }
    }
  };
</script>

<style lang="less" scoped>
  @tag-pd: 0 32rpx;
  @tag-small-pd: 0 16rpx;

  .xd-tag {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    padding: @tag-pd;
    height: unit(60, rpx);
    line-height: unit(60, rpx);
    justify-content: center;
    color: @xd-text-color;
    border-radius: @xd-border-radius-base;
    background-color: @xd-bg-color-grey;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: @xd-bg-color-grey;
  }

  .xd-tag--circle {
    border-radius: unit(30, rpx);
  }

  .xd-tag--mark {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: unit(30, rpx);
    border-bottom-right-radius: unit(30, rpx);
  }

  .xd-tag--disabled {
    opacity: 0.5;
  }

  .xd-tag--small {
    height: unit(40, rpx);
    padding: @tag-small-pd;
    line-height: unit(40, rpx);
    font-size: @xd-font-size-sm;
  }

  .xd-tag--default {
    color: @xd-text-color;
    font-size: @xd-font-size-base;
    background-color: #fff;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: #efefef;
  }

  .default-xd-tag--inverted {
    color: @custom-btn-primary;
    background-color: @xd-bg-white;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: @custom-btn-primary;
  }

  .xd-tag-text--small {
    font-size: @xd-font-size-sm !important;
  }

  .xd-tag-text {
    color: @xd-text-color-inverse;
    font-size: @xd-font-size-base;
  }

  .xd-tag-text--primary {
    color: @custom-btn-primary !important;
  }

  .xd-tag-text--success {
    color: @custom-btn-success !important;
  }

  .xd-tag-text--warning {
    color: @custom-btn-warning !important;
  }

  .xd-tag-text--error {
    color: @custom-btn-danger !important;
  }

  .xd-tag--primary {
    color: @xd-text-color-inverse;
    background-color: @custom-btn-primary;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: @custom-btn-primary;
  }

  .primary-xd-tag--inverted {
    color: @custom-btn-primary;
    background-color: @xd-bg-white;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: @custom-btn-primary;
  }

  .xd-tag--success {
    color: @xd-text-color-inverse;
    background-color: @custom-btn-success;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: @custom-btn-success;
  }

  .success-xd-tag--inverted {
    color: @custom-btn-success;
    background-color: @xd-bg-white;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: @custom-btn-success;
  }

  .xd-tag--warning {
    color: @xd-text-color-inverse;
    background-color: @custom-btn-warning;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: @custom-btn-warning;
  }

  .warning-xd-tag--inverted {
    color: @custom-btn-warning;
    background-color: @xd-bg-white;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: @custom-btn-warning
  }

  .xd-tag--error {
    color: @xd-text-color-inverse;
    background-color: @custom-btn-danger;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: @custom-btn-danger;
  }

  .error-xd-tag--inverted {
    color: @custom-btn-danger;
    background-color: @xd-bg-white;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: @custom-btn-danger;
  }

  .xd-tag--inverted {
    color: @xd-text-color;
    background-color: @xd-bg-white;
    border-width: unit(2, rpx);
    border-style: solid;
    border-color: @xd-bg-color-grey;
  }


  .xd-tag__text {
    text-align: center;
    position: relative;
    width: 100%;

    & > view:first-child {

    }

    & > view:nth-child(2) {
      position: absolute;
      right: unit(5,rpx);
      top: unit(0,rpx)
    }
  }
</style>
