<template>
  <div class="ibps-desc">
    <van-cell
      :title="label"
      :center="center"
      :border="border"
      :class="bem({
        error,
        [`hairline-${borderStyle}`]:borderStyle,
        [`label-${labelAlign}`]: labelAlign
      })"
    >
      <slot slot="title" name="label" />
    </van-cell>
    <van-cell v-if="desc" class="ibps-pt-0 ibps-pb-0">
      <div name="title" class="ibps-help-block" v-html="formatText(desc)" />
    </van-cell>
  </div>
</template>
<script>
import bem from '@/mixins/bem'
export default {
  name: 'ibps-desc',
  mixins: [bem],
  props: {
    value: String,
    label: String,
    desc: String,
    icon: String,
    center: Boolean,
    leftIcon: String,
    labelAlign: String,
    error: Boolean,
    errorMessage: String,
    placeholder: String,
    border: {
      type: Boolean,
      default: true
    },
    borderStyle: {
      type: String,
      default: 'dashed'
    }
  },
  methods: {
    formatText(text) {
      return text !== null ? ('' + text).replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + '<br />' + '$2') : ''
    }
  }
}
</script>
<style lang="scss">
.ibps-desc{
  background-color:#f8f8f8;
  padding-bottom:0;
  .van-cell{
    background-color:#f8f8f8;
  }
  .van-cell__title {
    max-width: 100%;
  }
  [class*=van-hairline]::after{
    border-bottom-width: 1px;
    color: #eee;
  }
  [class*=ibps-desc--hairline-dashed]::after{
    border-style: dashed;
    color: #d8d6d6;
    left: 0;
  }
  [class*=ibps-desc--hairline-solid]::after{
    border-style: solid;
    color: #d8d6d6;
    left: 0;
  }
}
</style>

