<template>
  <div :class="['wrap', wrapClass && 'wrap2']" :style="_wrapStyle">
    <div class="content">
      <div v-if="isShowMain" class="main" :style="{ marginRight: prompt.length ? themeStyle.lineMarginRight : '0px' }">
        <div class="dot" :style="{ backgroundColor: options[active]['dotColor'] }"></div>
        <text class="mainText" :style="_mainTextColor">{{ options[active]['text'] }}</text>
      </div>
      <div class="promptBox" v-for="(item, i) in prompt" :key="i">
        <div
          class="fakeBorder"
          :style="{ backgroundColor: !isShowMain && i === 0 ? 'transparent' : _borderColor }"
        ></div>
        <div
          :class="['prompt']"
          :style="{
            paddingLeft: !isShowMain && i === 0 ? '0px' : themeStyle.linePaddingLeft,
            marginRight: i === prompt.length - 1 ? '0px' : themeStyle.lineMarginRight
          }"
        >
          <text :class="[item.promptText2 ? 'smallPromptText' : 'promptText']" :style="_promptTextColor">{{
            item.promptText
          }}</text
          ><text :class="[item.promptText2 ? 'smallPromptText' : 'promptText']" :style="_promptTextColor">{{
            item.promptText2
          }}</text>
        </div>
      </div>
    </div>
  </div>
</template>
<style src="./colmo.css" scoped></style>
<style src="./diablo.css" scoped></style>

<style scoped>
.m-r-24 {
  margin-right: 24px;
}
.m-r-0 {
  margin-right: 0px;
}
.wrap {
  height: 68px;
  border-radius: 34px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  overflow: hidden;
  padding-left: 32px;
  padding-right: 32px;
  max-width: 592px;
}
.wrap2 {
  height: 68px;
}
.content {
  /* height: 68px; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  max-width: 528px;
  flex: 1;
}
.main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.dot {
  width: 14px;
  height: 14px;
  margin-right: 16px;
  border-radius: 14px;
}
.mainText {
  font-family: PingFangSC-Medium;
  font-size: 28px;
  font-weight: 500;
}
.fakeBorder {
  width: 2px;
  height: 40px;
  background-color: transparent;
}
.promptBox {
  /* height: 68px; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.prompt {
  /* padding-left: 22px; */
  /* height: 68px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.promptText {
  font-family: PingFangSC-Regular;
  font-size: 28px;
  font-weight: 500;
}
.smallPromptText {
  font-family: PingFangSC-Regular;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #616c73;
}
</style>

<script>
import { STYLE_MAP } from './style'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
export default {
  mixins: [ColmoMixin, DiabloMixin],
  props: {
    // 宽度，默认自适应
    width: {
      type: String,
      required: false,
      default: 'auto'
    },
    // 组件背景色
    backgroundColor: {
      type: String,
      required: false,
      default: ''
    },
    // options表示状态标识、状态名称选项，由active字段显示当前显示状态
    options: {
      type: Array,
      required: false,
      default: () => []
    },
    wrapStyle: {
      type: Object,
      default: () => ({})
    },
    active: {
      type: Number,
      required: false,
      default: undefined
    },
    // 标识颜色
    mainTextColor: {
      type: String,
      required: false,
      default: ''
    },
    // prompt表示提示文本，数组类型，其中promptText2存在为双行，不存在为单行 [{ promptText: '预约加热至75℃', promptText2: '明天下午6:00-9:00' }]
    prompt: {
      type: Array,
      default: () => []
    },
    // 提示文本颜色
    promptTextColor: {
      type: String,
      required: false,
      default: ''
    },
    // 分格线颜色
    borderColor: {
      type: String,
      required: false,
      default: ''
    }
  },
  computed: {
    themeStyle() {
      const _theme = this._theme || 'default'
      return STYLE_MAP[_theme] || STYLE_MAP['default']
    },
    isShowMain() {
      return this.options.length > 0 && this.active !== undefined
    },
    // 默认字体颜色
    _mainTextColor() {
      let tmp = { color: this.mainTextColor || this.themeStyle.mainTextColor }
      return tmp
    },
    // 默认背景色
    _backgroundColor() {
      let tmp = { backgroundColor: this.backgroundColor || this.themeStyle.backgroundColor }
      return tmp
    },
    _wrapStyle() {
      return {
        width: this.width,
        ...this._backgroundColor
      }
    },
    // 分格线颜色
    _borderColor() {
      let tmp = this.borderColor || this.themeStyle.borderColor
      return tmp
    },
    _promptTextColor() {
      let tmp = { color: this.promptTextColor || this.themeStyle.promptTextColor }
      return tmp
    },
    wrapClass() {
      let flag = false
      this.prompt.forEach(element => {
        if (element.promptText2) flag = true
      })
      return flag
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>
