<template>
  <view
    :class="[
      'k-typography-text',
      { 'k-text-neutral': neutral },
      { 'k-text-neutral-disabled': neutral && disabled },
      ' kip-typography ',
      { ' kip-typography-ellipsis': ellipsis > 0 },
      { 'k-typography-txt-disabled': !neutral && disabled },
    ]"
    :style="{
      color,
      fontFamily,
      fontSize,
      fontWeight,
      lineHeight:
        !!lineHeight || lineHeight == 0
          ? lineHeight
          : singleLine == true
          ? fontSize
          : 1.5,
      textDecoration,
      backgroundColor,
      '-webkit-line-clamp': clamp,
      display: ellipsis > 0 ? '-webkit-box' : '',
    }"
  >
    <slot></slot>
  </view>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'k-typography',
  data() {
    return {
      size: 22,
      fontWeight: 400,
      textDecoration: 'auto',
      backgroundColor: '',
      clamp: 1,
      singleLine: true,
    };
  },
  props: {
    lineHeight: [String, Number],
    color: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    ellipsis: {
      type: Number,
      default: 0,
    },
    mark: {
      type: Boolean,
      default: false,
    },
    underline: {
      type: Boolean,
      default: false,
    },
    strong: {
      type: Boolean,
      default: false,
    },
    level: {
      type: Number,
      default: 0,
    },
    fontFamily: {
      type: String,
      default: 'Regular',
    },
    neutral: {
      type: Boolean,
      default: true,
    },
    typographyIndex: {
      type: String,
      default: '',
    },
    bgc: {
      type: String,
      default: '#6a94b9',
    },
  },
  computed: {
    fontSize(): string {
      let level = 0;
      const levels = new Map([
        ['Title1', 4.5],
        ['Title2', 4],
        ['Title3', 3],
        ['Heading01', 2.5],
        ['Heading02', 2],
        ['Heading03', 1.5],
        ['Heading04', 1],
        ['Heading05', 0.5],
        ['Heading06', 0],
        ['caption1', 0.5],
        ['caption2', 0],
      ]);
      if (levels.has(this.typographyIndex)) {
        level = levels.get(this.typographyIndex) ?? this.level;
      } else {
        level = this.level;
      }
      let size = this.size + level * 4 + 'rpx';
      return size;
    },
  },
  created() {
    this.$nextTick(() => {
      let view = uni
        .createSelectorQuery()
        .in(this)
        .select('.k-typography-text');
      view
        .fields(
          {
            size: true,
            scrollOffset: true,
          },
          (data) => {
            const clientHeight: number = data.height || 0;
            const index = this.fontSize.indexOf('rpx');
            const fontSize = Number(this.fontSize.slice(0, index));
            if (clientHeight >= fontSize) {
              this.singleLine = false;
            } else if (clientHeight == fontSize) {
              this.singleLine = true;
            }
          }
        )
        .exec();
    });
  },
  watch: {
    level: {
      handler(val: number) {
        if (
          val >= 3 ||
          ['Title1', 'Title2', 'Title3'].includes(this.typographyIndex)
        ) {
          this.fontWeight = 700;
        }
      },
      immediate: true,
    },
    strong: {
      handler(val: boolean) {
        if (val == true) {
          this.fontWeight = 700;
        }
      },
      immediate: true,
    },
    underline: {
      handler(val: boolean) {
        if (val == true) {
          this.textDecoration = 'underline';
        }
      },
      immediate: true,
    },
    mark: {
      handler(val: boolean) {
        if (val == true) {
          this.backgroundColor = this.bgc;
        }
      },
      immediate: true,
    },
    ellipsis: {
      handler(val: number) {
        this.clamp = val;
      },
      immediate: true,
    },
  },
  methods: {},
});
</script>

<style scoped lang="scss">
/* stylelint-disable declaration-no-important */
.k-typography-text {
  color: var(--k-color-primary, #000);
}

.k-text-neutral {
  color: var(--k-color-neutral-01, #333);
}

.k-text-neutral-disabled {
  color: var(--k-color-neutral-02, #666);
}

.k-typography-txt-disabled {
  color: var(--k-color-primary-disabled, #000);
}

.kip-typography {
  position: relative;
}

.kip-typography-ellipsis {
  overflow: hidden;
  -webkit-line-clamp: var(--clamp);
  -webkit-box-orient: vertical;
}
</style>
