<template>
    <div
            :class="{'rotate-90':isRote,'rotate--90':isRote1}"
            style="display: flex;flex-direction: row">
        <div :style="{'width':width?width:'10px'}"
             :class="classObj(value,'left')"
             class="arrow-left"></div>
        <div :class="classObj(value,'right')"
             v-show="noArrow === undefined || noArrow === false"
             class="arrow-right"></div>
    </div>
</template>

<script>
/**
 * 箭头
 */
export default {
  name: 'PtArrow',
  props: {
    // 箭头宽度
    width: null,
    // 是否进行旋转，默认否
    isRote: null,
    isRote1: null,
    // 是否显示右侧的箭头标志
    noArrow: null,
    // 根据value值判断颜色
    value: null
  },
  methods: {
    // 颜色
    classObj(value, msg) {
      switch (value) {
        case true:
          return msg === 'left' ? 'blue-color-left' : 'blue-color-right'
        case false:
          return msg === 'left' ? 'red-color-left' : 'red-color-right'
        default:
          break
      }
    }
  }
}
</script>

<style scoped>
.arrow-left {
  height: 2px;
  /*background: #666;*/
  background: #eb6877;
}

.arrow-right {
  border: 6px solid transparent;
  /*border-left: 10px solid #666;*/
  border-left: 10px solid #eb6877;
  width: 0;
  height: 0px;
  margin-top: -5px;
  margin-right: -6px;
}

.rotate-90 {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.rotate--90 {
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.blue-color-left {
  background: #00a0e9;
}

.red-color-left {
  background: #666;
}

.blue-color-right {
  border-left-color: #00a0e9;
}

.red-color-right {
  border-left-color: #666;
}
</style>
