<template>
  <div :class="statusClass">
    <div class="rt-status-left" />
    <div class="rt-status-text">
      <span>{{status}}</span>
    </div>
    <div class="rt-status-right" />
  </div>
</template>
<script>
const TYPELIST = ['open', 'close', 'win', 'lose', 'green'];
export default {
  name: 'rtStatus',
  props: {
    status: String,
    type: {
      validator(value) {
        return rt.oneOf(value, TYPELIST);
      },
      default: 'opened'
    }
  },
  computed: {
    statusClass() {
      return ['rt-status-wrapper', `rt-status-${this.type}`];
    }
  }
};
</script>
<style lang="less">
.rt-status-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  line-height: 1;
  border-radius: 50% 0 0 50%;
  .rt-status-left {
    border-style: solid;
    border-width: 12px 9px 12px 0px;
    border-color: transparent;
    width: 0px;
    height: 0px;
  }
  .rt-status-text {
    height: 25px;
    min-width: 55px;
    box-sizing: border-box;
    text-align: center;
    font-size: 13px;
    line-height: 25px;
    padding: 0 10px 0 5px;
  }
  .rt-status-right {
    border-style: solid;
    border-width: 4px 0px 0px 4px;
    border-color: transparent;
    width: 0px;
    height: 0px;
    position: absolute;
    top: -4px;
    right: 0;
  }
  &.rt-status-open {
    .rt-status-left {
      border-right-color: rgb(230, 241, 253);
    }
    .rt-status-text {
      color: rgb(83, 164, 252);
      background-color: rgb(230, 241, 253);
    }
    .rt-status-right {
      border-left-color: rgb(83, 164, 252);
    }
  }
  &.rt-status-win {
    .rt-status-left {
      border-right-color: rgb(255, 232, 226);
    }
    .rt-status-text {
      color: rgb(255, 68, 14);
      background-color: rgb(255, 232, 226);
    }
    .rt-status-right {
      border-left-color: rgb(255, 68, 14);
    }
  }
  &.rt-status-lose {
    .rt-status-left {
      border-right-color: rgb(247, 248, 250);
    }
    .rt-status-text {
      color: rgb(180, 189, 207);
      background-color: rgb(247, 248, 250);
    }
    .rt-status-right {
      border-left-color: rgb(180, 189, 207);
    }
  }
  &.rt-status-close {
    .rt-status-left {
      border-right-color: #fdecd5;
    }
    .rt-status-text {
      color: rgba(254, 145, 32, 1);
      background-color: #fdecd5;
    }
    .rt-status-right {
      border-left-color: rgba(254, 145, 32, 1);
    }
  }
  &.rt-status-green {
    .rt-status-left {
      border-right-color: rgba(215, 248, 240, 1);
    }
    .rt-status-text {
      color: rgba(64, 206, 173, 1);
      background-color: rgba(215, 248, 240, 1);
    }
    .rt-status-right {
      border-left-color: rgba(64, 206, 173, 1);
    }
  }
}
</style>
