<template>
  <view class="ml-dict-type" :class="[className || '', (status || showStatus) && selectStatus ? `ss-${selectStatus}` : '', {'is-underline': underline, 'is-border': border, 'is-round': round}]" @tap="tapEvent">
    <view v-if="prefixIcon && prefixIcon !== 'none'" class="ml-dict-type-left-icon">
      <ml-icon :className="prefixIcon"></ml-icon>
    </view>
    <view class="ml-dict-type-content">
      <slot>{{ selectLabel }}</slot>
    </view>
    <view v-if="suffixIcon && suffixIcon !== 'none'" class="ml-dict-type-right-icon">
      <ml-icon :className="suffixIcon"></ml-icon>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import XEUtils from 'xe-utils'

export default defineComponent({
  name: 'MlDictType',
  options: {
    virtualHost: true
  },
  props: {
    modelValue: [Number, String],
    options: Array,
    status: String,
    round: Boolean,
    border: Boolean,
    prefixIcon: String,
    suffixIcon: String,
    showStatus: Boolean,
    underline: Boolean,
    optionProps: Object,
    className: String
  },
  computed: {
    selectItem () {
      const item: any = this.options ? this.options.find((item: any) => String(item[this.optValueField]) === String(this.modelValue)) : null
      return item
    },
    selectLabel () {
      return XEUtils.toValueString(this.selectItem ? this.selectItem[this.optLabelField] : this.modelValue)
    },
    selectStatus () {
      return this.status || (this.selectItem ? this.selectItem[this.optStatusField] : null)
    },
    optOptions () {
      return Object.assign({}, this.optionProps)
    },
    optLabelField () {
      return this.optOptions.label || 'label'
    },
    optValueField () {
      return this.optOptions.value || 'value'
    },
    optStatusField () {
      return this.optOptions.status || 'status'
    }
  },
  methods: {
    tapEvent () {
      this.$emit('tap', {})
      this.$emit('click', {})
    }
  }
})
</script>

<style lang="scss">
.ml-dict-type {
  display: inline-block;
  padding: 0 4rpx;
  vertical-align: middle;
  &+.ml-dict-type {
    margin-left: 20rpx;
  }
  &.is-underline {
    text-decoration: underline;
  }
  &.is-border {
    padding: 8rpx 16rpx;
    border-radius: $ml-border-radius;
    font-size: 24rpx;
    &.ss-primary {
      color: $ml-theme-primary-color;
      border: 1px solid $ml-theme-primary-color;
    }
    &.ss-success {
      color: $ml-theme-success-color;
      border: 1px solid $ml-theme-success-color;
    }
    &.ss-info {
      color: #909399;
      border: 1px solid #909399;
    }
    &.ss-warning {
      color: $ml-theme-warning-color;
      border: 1px solid $ml-theme-warning-color;
    }
    &.ss-danger {
      color: $ml-theme-error-color;
      border: 1px solid $ml-theme-error-color;
    }
    &.ss-gray {
      color: $ml-gray-color;
      border: 1px solid $ml-gray-color;
    }
    &.ss-blue {
      color: $ml-blue-color;
      border: 1px solid $ml-blue-color;
    }
    &.ss-green {
      color: $ml-green-color;
      border: 1px solid $ml-green-color;
    }
    &.ss-pink {
      color: $ml-pink-color;
      border: 1px solid $ml-pink-color;
    }
    &.ss-red {
      color: $ml-red-color;
      border: 1px solid $ml-red-color;
    }
    &.ss-orange {
      color: $ml-orange-color;
      border: 1px solid $ml-orange-color;
    }
    &.ss-purple {
      color: $ml-purple-color;
      border: 1px solid $ml-purple-color;
    }
  }
  &.is-round {
    padding: 6rpx 20rpx;
    border-radius: $ml-border-radius;
    font-size: $ml-describe-font-size;
    &.ss-primary {
      color: $ml-theme-primary-color;
      background: #e0efff;
    }
    &.ss-success {
      color: $ml-theme-success-color;
      background: #e0f5e8;
    }
    &.ss-info {
      background: #eaebed;
    }
    &.ss-warning {
      color: #ffffff;
      background: $ml-theme-warning-color;
    }
    &.ss-danger {
      color: $ml-theme-error-color;
      background: #ffeaec;
    }
    &.ss-gray {
      background: $ml-gray-color;
    }
    &.ss-blue {
      color: $ml-blue-color;
      background: #e0efff;
    }
    &.ss-green {
      color: $ml-green-color;
      background: #e0f5e8;
    }
    &.ss-pink {
      color: $ml-pink-color;
      background: #ffeaec;
    }
    &.ss-red {
      color: $ml-red-color;
      background: #ffeaec;
    }
    &.ss-orange {
      color: $ml-orange-color;
      background: #ffedd6;
    }
    &.ss-purple {
      color: $ml-purple-color;
      background: #f2e9ff;
    }
  }
  &:not(.is-round) {
    &.ss-primary {
      color: $ml-theme-primary-color;
    }
    &.ss-success {
      color: $ml-theme-success-color;
    }
    &.ss-info {
      color: #909399;
    }
    &.ss-warning {
      color: $ml-theme-warning-color;
    }
    &.ss-danger {
      color: $ml-theme-error-color;
    }
    &.ss-gray {
      color: $ml-gray-color;
    }
    &.ss-blue {
      color: $ml-blue-color;
    }
    &.ss-green {
      color: $ml-green-color;
    }
    &.ss-pink {
      color: $ml-pink-color;
    }
    &.ss-orange {
      color: $ml-orange-color;
    }
    &.ss-purple {
      color: $ml-purple-color;
    }
  }
  .ml-dict-type-left-icon,
  .ml-dict-type-right-icon,
  .ml-dict-type-content {
    display: inline;
  }
}
</style>
