<style>
  input.datepicker-input.with-reset-button {
    padding-right: 25px;
  }

  div.datepicker > button.close {
    position: absolute;
    top: calc(50% - 13px);
    right: 10px;
  }

  div.datepicker > button.close {
    outline: none;
    z-index: 2;
  }

  div.datepicker > button.close:focus {
    opacity: .2;
  }
</style>

<template>
  <div class="datepicker" :class="{'col-sm-12': isAllLine}">
    <input class="form-control datepicker-input" :class="{'with-reset-button': showResetButton}" type="text"
           v-bind:style="{width:width}"
           :disabled="disabled"
           :readonly="readonly"
           @click="inputClick"
           @blur="conBulr(value)"
           :placeholder="placeholder"
           v-model="value"/>
    <!-- <button v-if="showResetButton" type="button" class="close" @click="value = ''">
      <span>&times;</span>
    </button> -->
    <div class="datepicker-popup auto" v-el:popup v-show="displayDayView" :class="{'dateup': isUp, 'dateright': isRight}">
      <div class="datepicker-inner">
        <div class="datepicker-body">
          <div class="datepicker-ctrl">
            <span class="month-btn datepicker-preBtn" @click="preNextMonthClick(0)">&lt;</span>
            <span class="month-btn datepicker-nextBtn" @click="preNextMonthClick(1)">&gt;</span>
            <p @click="switchMonthView">{{stringifyDayHeader(currDate)}}</p>
          </div>
          <div class="datepicker-weekRange">
            <span v-for="w in weekRange">{{w}}</span>
          </div>
          <div class="datepicker-dateRange">
            <span v-for="d in dateRange" v-bind:class="d.sclass" @click="daySelect(d.date,this)">{{d.text}}</span>
          </div>

          <div class="datepicker-weekRange" v-show="displayTTimeView">
            {{hour}}
            <span>时</span>
            {{minute}}
            <span>分</span>
            {{second}}
            <span>秒</span>
            <span @click="switchTimeView" class="glyphicon glyphicon-time"></span>
            <!-- <button @click="switchDayView" type="button" class="btn btn-primary btn-sm">确定</button> -->

          </div>
          <div style="text-align: center">
            <button style="border: none" @click="gettoday()" type="button">今天</button>
          </div>

        </div>
      </div>
    </div>



    <div class="datepicker-popup auto" v-show="displayMonthView" v-el:popupmouth :class="{'dateup': isUp, 'dateright': isRight}">
      <div class="datepicker-inner">
        <div class="datepicker-body">
          <div class="datepicker-ctrl">
            <span class="month-btn datepicker-preBtn" @click="preNextYearClick(0)">&lt;</span>
            <span class="month-btn datepicker-nextBtn" @click="preNextYearClick(1)">&gt;</span>
            <p @click="switchDecadeView">{{stringifyYearHeader(currDate)}}</p>
          </div>
          <div class="datepicker-monthRange">
            <template v-for="m in monthNames">
              <span   :class="{'datepicker-dateRange-item-active':
                  (currDate && text ?
                  (text.months[parse(value).getMonth()]  === m) &&
                  currDate.getFullYear() === parse(value).getFullYear() : false)}"
                      @click="monthSelect($index)"
              >{{m.substr(0,3)}}</span>
              <!-- <template v-for="m in text.months">
          <span   :class="{'datepicker-dateRange-item-active':
              (text.months[parse(value).getMonth()]  === m) &&
              currDate.getFullYear() === parse(value).getFullYear()}"
              @click="monthSelect($index)"
            >{{m.substr(0,3)}}</span> -->
            </template>
          </div>
        </div>
      </div>
    </div>




    <div class="datepicker-popup auto" v-show="displayYearView" v-el:popupyear :class="{'dateup': isUp, 'dateright': isRight}">
      <div class="datepicker-inner">
        <div class="datepicker-body">
          <div class="datepicker-ctrl">
            <span class="month-btn datepicker-preBtn" @click="preNextDecadeClick(0)">&lt;</span>
            <span class="month-btn datepicker-nextBtn" @click="preNextDecadeClick(1)">&gt;</span>
            <p @click="switchMonthView">{{stringifyDecadeHeader(currDate)}}</p>
          </div>
          <div class="datepicker-monthRange decadeRange">
            <template v-for="decade in decadeRange">
              <span :class="{'datepicker-dateRange-item-active':
                  (this.value ?
                    parse(this.value).getFullYear() === decade.text : false)}"
                    @click.stop="yearSelect(decade.text)"
              >{{decade.text}}</span>
            </template>
            <!-- <template v-for="decade in decadeRange">
              <span :class="{'datepicker-dateRange-item-active':
                  parse(this.value).getFullYear() === decade.text}"
                  @click.stop="yearSelect(decade.text)"
                >{{decade.text}}</span>
                <p>
                </p>
            </template> -->
          </div>
        </div>
      </div>
    </div>



    <!-- 时分秒 -->
    <div class="datepicker-popup auto" v-show="displayTimeView" v-el:popuphs :class="{'dateup': isUp, 'dateright': isRight}">
      <div class="datepicker-inner">
        <div class="datepicker-body">
          <table class="table-condensed">
            <tbody>
            <tr>
              <td>
                <a tabindex="-1" title="Increment Hour" class="btn" style="min-width: auto;" @click="changeHour(+1,hour)"><span class="glyphicon glyphicon-chevron-up"></span></a>
              </td>
              <td class="separator"></td>
              <td>
                <a tabindex="-1" title="Increment Minute" class="btn" style="min-width: auto;" @click="changeMinute(+1,minute)"><span class="glyphicon glyphicon-chevron-up"></span></a>
              </td>
              <td class="separator"></td>
              <td>
                <a tabindex="-1" title="Increment Second" class="btn" style="min-width: auto;" @click="changeSecond(+1,second)"><span class="glyphicon glyphicon-chevron-up"></span></a>
              </td>
            </tr>
            <tr>
              <td><span title="Pick Hour" class="timepicker-hour" data-action="showHours" data-time-component="hours"><input type="number" v-model="hour" min="0" max="24" style="border-style:none"></span></td>
              <td class="separator">:</td>
              <td><span title="Pick Minute" class="timepicker-minute" data-action="showMinutes" data-time-component="minutes"><input type="number" v-model="minute" min="0" max="59" style="border-style:none"></span></td>
              <td class="separator">:</td>
              <td><span title="Pick Second" class="timepicker-second" data-action="showSeconds" data-time-component="seconds"><input type="number" v-model="second" min="0" max="59" style="border-style:none"></span></td>
            </tr>
            <tr>
              <td>
                <a tabindex="-1" title="Decrement Hour" class="btn" style="min-width: auto;" @click="changeHour(-1,hour)"><span class="glyphicon glyphicon-chevron-down"></span></a>
              </td>
              <td class="separator"></td>
              <td>
                <a tabindex="-1" title="Decrement Minute" class="btn" style="min-width: auto;" @click="changeMinute(-1,minute)"><span class="glyphicon glyphicon-chevron-down"></span></a>
              </td>
              <td class="separator"></td>
              <td>
                <a tabindex="-1" title="Decrement Second" class="btn" style="min-width: auto;" @click="changeSecond(-1,second)"><span class="glyphicon glyphicon-chevron-down"></span></a>
              </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
              <td>
                <button type="button" class="btn btn-primary btn-xs" @click="closeTimeTem">确定</button>
              </td>
            </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  import EventListener from './EventListener.js'

  export default {
    props: {
      value: {
        type: String,
        twoWay: true,
        default: ''
      },
      format: {
        default: 'yyyy-MM-dd'
      },
      default: {
        type: Boolean,
        default: false
      },
      disabledDaysOfWeek: {
        type: Array,
        default () {
          return []
        }
      },
      width: {
        type: String,
        default: '100%'
      },
      isAllLine: {
        type: Boolean,
        default: false
      },
      showResetButton: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String
      },
      isUp: {
        type: Boolean,
        default: false
      },
      isRight: {
        type: Boolean,
        default: false
      },
      selectMonth: {
        type: Boolean,
        default: false
      },
      selectYear: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {

        // weekRange: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        weekRange: ['日', '一', '二', '三', '四', '五', '六'],
        dateRange: [],
        decadeRange: [],
        currDate: new Date(),
        displayDayView: false,
        displayMonthView: false,
        displayYearView: false,
        displayTimeView: false,
        // monthNames: [
        //   'January', 'February', 'March',
        //   'April', 'May', 'June',
        //   'July', 'August', 'September',
        //   'October', 'November', 'December'
        // ]
        monthNames: [
          '一月', '二月', '三月',
          '四月', '五月', '六月',
          '七月', '八月', '九月',
          '十月', '十一月', '十二月'
        ],
        hour: ('0' + new Date().getHours()).slice(-2),
        minute: ('0' + new Date().getMinutes()).slice(-2),
        second: ('0' + new Date().getSeconds()).slice(-2)
        // hour: '',
        // minute: '',
        // second: ''
      }
    },
    watch: {
      currDate () {
        this.getDateRange()
      },
      value (val) {
        console.log('观察值。。。。', val, this.value)
        this.$emit('change', val)
        if (val) {
          this.currDate = this.parse(val)
          this.getDateRange()
        }
      }
    },
    methods: {
      gettoday () {
        if(this.format == 'yyyy-MM-dd'){
          this.value = this.$login.toStandardDateString()
        } else {
          this.value = this.$login.toStandardTimeString()
        }
        this.displayDayView = false
      },
      conBulr(val){
        this.$dispatch('con-bulr',{oldVal: val});
      },
      close () {
        this.displayDayView = this.displayMonthView = this.displayYearView = false
      },
      inputClick () {
        this.isUp = false
        this.isRight = false
        if(this.selectMonth){
          if (this.displayDayView || this.displayYearView) {
            this.displayMonthView = false
          } else {
            this.displayMonthView = !this.displayMonthView
          }
        }else if(this.selectYear){
          if (this.displayDayView || this.displayMonthView) {
            this.displayYearView = false
          } else {
            this.displayYearView = !this.displayYearView
          }
        }else{
          if (this.displayMonthView || this.displayYearView) {
            this.displayDayView = false
          } else {
            this.displayDayView = !this.displayDayView
          }
        }
        // 显示式纠正位置
        // 显示式纠正位置
        if (this.displayDayView) {
          this.$nextTick(() => {
            let el = this.$els.popup
            if (document.documentElement.clientHeight < el.getBoundingClientRect().bottom) { // 向上展开
              this.isUp = true
            }
            if (el.getBoundingClientRect().right > document.documentElement.clientWidth) { // 右对齐
              this.isRight = true
            }
          })
        }
      },
      preNextDecadeClick (flag) {
        const year = this.currDate.getFullYear()
        const months = this.currDate.getMonth()
        const date = this.currDate.getDate()
        const hours = this.currDate.getHours()
        const minutes = this.currDate.getMinutes()
        const seconds = this.currDate.getSeconds()

        if (flag === 0) {
          this.currDate = new Date(year - 10, months, date, hours, minutes, seconds)
        } else {
          this.currDate = new Date(year + 10, months, date, hours, minutes, seconds)
        }
      },
      preNextMonthClick (flag) {
        const year = this.currDate.getFullYear()
        const month = this.currDate.getMonth()
        const date = this.currDate.getDate()
        const hours = this.currDate.getHours()
        const minutes = this.currDate.getMinutes()
        const seconds = this.currDate.getSeconds()

        if (flag === 0) {
          const preMonth = this.getYearMonth(year, month - 1)
          this.currDate = new Date(preMonth.year, preMonth.month, date, hours, minutes, seconds)
        } else {
          const nextMonth = this.getYearMonth(year, month + 1)
          this.currDate = new Date(nextMonth.year, nextMonth.month, date, hours, minutes, seconds)
        }
      },
      preNextYearClick (flag) {
        const year = this.currDate.getFullYear()
        const months = this.currDate.getMonth()
        const date = this.currDate.getDate()
        const hours = this.currDate.getHours()
        const minutes = this.currDate.getMinutes()
        const seconds = this.currDate.getSeconds()

        if (flag === 0) {
          this.currDate = new Date(year - 1, months, date, hours, minutes, seconds)
        } else {
          this.currDate = new Date(year + 1, months, date, hours, minutes, seconds)
        }
      },
      yearSelect (year) {
        if(!this.selectYear){
          this.displayYearView = false
          this.displayMonthView = true
          this.currDate = new Date(year, this.currDate.getMonth(), this.currDate.getDate(), this.currDate.getHours(), this.currDate.getMinutes(), this.currDate.getSeconds())
        }else{
          this.currDate = new Date(year, this.currDate.getMonth(), this.currDate.getDate(), this.currDate.getHours(), this.currDate.getMinutes(), this.currDate.getSeconds())
          this.value = this.stringify(this.currDate)
          this.displayYearView = false
        }
      },
      daySelect (date, el) {
        if (el.$el.classList[0] === 'datepicker-item-disable') {
          return false
        } else {
          this.currDate = date
          this.value = this.stringify(this.currDate)
          this.displayDayView = false
        }
      },
      switchMonthView () {
        this.displayDayView = false
        this.displayMonthView = true
        if (this.displayMonthView) {

        }
      },
      switchDecadeView () {
        this.displayMonthView = false
        this.displayYearView = true
      },
      monthSelect (index) {
        if(!this.selectMonth) {
          this.displayMonthView = false
          this.displayDayView = true
          this.currDate = new Date(this.currDate.getFullYear(), index, this.currDate.getDate(), this.currDate.getHours(), this.currDate.getMinutes(), this.currDate.getSeconds())
        }else{
          this.currDate = new Date(this.currDate.getFullYear(), index, this.currDate.getDate(), this.currDate.getHours(), this.currDate.getMinutes(), this.currDate.getSeconds())
          this.value = this.stringify(this.currDate)
          this.displayMonthView = false
        }
      },
      switchDayView () {
        this.displayDayView = false
      },
      getYearMonth (year, month) {
        if (month > 11) {
          year++
          month = 0
        } else if (month < 0) {
          year--
          month = 11
        }
        return {year: year, month: month}
      },
      stringifyDecadeHeader (date) {
        const yearStr = date.getFullYear().toString()
        const firstYearOfDecade = yearStr.substring(0, yearStr.length - 1) + 0
        const lastYearOfDecade = parseInt(firstYearOfDecade, 10) + 10
        return firstYearOfDecade + '-' + lastYearOfDecade
      },
      stringifyDayHeader (date) {
        // return this.monthNames[date.getMonth()] + ' ' + date.getFullYear()
        return date.getFullYear() + '年' + this.monthNames[date.getMonth()]
      },
      parseMonth (date) {
        return this.monthNames[date.getMonth()]
      },
      stringifyYearHeader (date) {
        return date.getFullYear()
      },
      stringify (date, format = this.format) {
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        const monthName = this.parseMonth(date)

        return format
          .replace(/yyyy/g, year)
          .replace(/MMMM/g, monthName)
          .replace(/MMM/g, monthName.substring(0, 3))
          .replace(/MM/g, ('0' + month).slice(-2))
          .replace(/dd/g, ('0' + day).slice(-2))
          .replace(/yy/g, year)
          .replace(/M(?!a)/g, month)
          .replace(/d/g, day)
          .replace(/HH/g, ('0' + this.hour).slice(-2))
          .replace(/mm/g, ('0' + this.minute).slice(-2))
          .replace(/ss/g, ('0' + this.second).slice(-2))
      },
      parse (str) {
        if (!str) {
          return null
        }
        if (str.length === 10 && (this.format === 'dd-MM-yyyy' || this.format === 'dd/MM/yyyy')) {
          str = str.substring(3, 5) + '-' + str.substring(0, 2) + '-' + str.substring(6, 10)
        }
        const date = new Date(str)
        return isNaN(date.getFullYear()) ? new Date() : date
      },
      getDayCount (year, month) {
        const dict = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

        if (month === 1) {
          if ((year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0)) {
            return 29
          }
          return 28
        }

        return dict[month]
      },
      getDateRange () {
        this.dateRange = []
        this.decadeRange = []

        this.hour = this.currDate.getHours()
        this.minute = this.currDate.getMinutes()
        this.second = this.currDate.getSeconds()

        const time = {
          year: this.currDate.getFullYear(),
          month: this.currDate.getMonth(),
          day: this.currDate.getDate()
        }
        const yearStr = time.year.toString()
        const firstYearOfDecade = (yearStr.substring(0, yearStr.length - 1) + 0) - 1
        for (let i = 0; i < 12; i++) {
          this.decadeRange.push({
            text: firstYearOfDecade + i
          })
        }

        const currMonthFirstDay = new Date(time.year, time.month, 1)
        let firstDayWeek = currMonthFirstDay.getDay() + 1
        if (firstDayWeek === 0) {
          firstDayWeek = 7
        }
        const dayCount = this.getDayCount(time.year, time.month)
        if (firstDayWeek > 1) {
          const preMonth = this.getYearMonth(time.year, time.month - 1)
          const prevMonthDayCount = this.getDayCount(preMonth.year, preMonth.month)
          for (let i = 1; i < firstDayWeek; i++) {
            const dayText = prevMonthDayCount - firstDayWeek + i + 1
            this.dateRange.push({
              text: dayText,
              date: new Date(preMonth.year, preMonth.month, dayText),
              sclass: 'datepicker-item-gray'
            })
          }
        }

        for (let i = 1; i <= dayCount; i++) {
          const date = new Date(time.year, time.month, i)
          const week = date.getDay()
          let sclass = ''
          this.disabledDaysOfWeek.forEach((el) => {
            if (week === parseInt(el, 10)) sclass = 'datepicker-item-disable'
          })

          if (i === time.day) {
            if (this.value) {
              const valueDate = this.parse(this.value)
              if (valueDate) {
                if (valueDate.getFullYear() === time.year && valueDate.getMonth() === time.month) {
                  sclass = 'datepicker-dateRange-item-active'
                }
              }
            }
          }
          this.dateRange.push({
            text: i,
            date: date,
            sclass: sclass
          })
        }

        if (this.dateRange.length < 42) {
          const nextMonthNeed = 42 - this.dateRange.length
          const nextMonth = this.getYearMonth(time.year, time.month + 1)

          for (let i = 1; i <= nextMonthNeed; i++) {
            this.dateRange.push({
              text: i,
              date: new Date(nextMonth.year, nextMonth.month, i),
              sclass: 'datepicker-item-gray'
            })
          }
        }
      },
      switchTimeView () {
        this.displayMonthView = false
        this.displayYearView = false
        this.displayTimeView = true
        this.displayDayView = true
      },
      closeTimeTem () {
        this.displayTimeView = false
        this.value = this.stringify(this.currDate)
        this.displayDayView = false
      },
      changeHour (flag, hour) {
        console.log('flag:', flag, 'hour->', hour)
        this.hour = flag + Number(hour)
        if (this.hour === 24) {
          this.hour = '00'
        }
        if (Number(this.hour) < 0) {
          this.hour = 23
        }
        if (this.hour < 10 && this.hour >= 0) {
          this.hour = '0' + Number(this.hour)
        }
      },
      changeMinute (flag, minute) {
        console.log('flag:', flag, 'minute->', minute)
        this.minute = flag + Number(minute)
        if (this.minute === 60) {
          this.minute = '00'
        }
        if (Number(this.minute) < 0) {
          this.minute = 59
        }
        if (this.minute < 10 && this.minute >= 0) {
          this.minute = '0' + Number(this.minute)
        }
      },
      changeSecond (flag, second) {
        console.log('flag:', flag, 'second->', second)
        this.second = flag + Number(second)
        if (this.second === 60) {
          this.second = '00'
        }
        if (Number(this.second) < 0) {
          this.second = 59
        }
        if (this.second < 10 && this.second >= 0) {
          this.second = '0' + Number(this.second)
        }
      }
      // showTime () {
      //   if (this.format.indexOf('HH:mm:ss') !== -1) {
      //     this.displayTTimeView = true
      //   } else {
      //     this.displayTTimeView = false
      //   }
      //   console.log('this.format', this.format)
      //   console.log('this.displayTTimeView', this.displayTTimeView)
      //   console.log('HH:mm:ss', this.format.indexOf('HH:mm:ss'))
      // }
    },
    ready () {
      if (this.default) {
        this.value = this.stringify(new Date())
      }
      this.getDateRange()
      this.$dispatch('child-created', this)
      this.currDate = this.parse(this.value) || this.parse(new Date())
      this._closeEvent = EventListener.listen(window, 'click', (e) => {
        if (!this.$el.contains(e.target)) this.close()
      })
    },
    beforeDestroy () {
      if (this._closeEvent) this._closeEvent.remove()
    },
    computed: {
      displayTTimeView () {
        if (this.format.indexOf('HH:mm:ss') !== -1) {
          return true
        } else {
          return false
        }
      }
    }
  }
</script>
<style>
  .dateup {
    bottom: 100%;
  }
  .dateright {
    right: 0;
  }
  .datepicker{
    position: relative;
    display: inline-block;
  }
  input.datepicker-input.with-reset-button {
    padding-right: 25px;
  }
  .datepicker > button.close {
    position: absolute;
    top: 0;
    right: 0;
    outline: none;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
  }
  .datepicker > button.close:focus {
    opacity: .2;
  }
  .datepicker-popup{
    position: absolute;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    margin-top: 2px;
    z-index: 1000;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
  }
  .datepicker-inner{
    width: 218px;
  }
  .datepicker-body{
    padding: 10px 10px;
  }
  .datepicker-ctrl p,
  .datepicker-ctrl span,
  .datepicker-body span{
    display: inline-block;
    width: 28px;
    line-height: 28px;
    height: 28px;
    border-radius: 4px;
  }
  .datepicker-ctrl p {
    width: 65%;
  }
  .datepicker-ctrl span {
    position: absolute;
  }
  .datepicker-body span {
    text-align: center;
  }
  .datepicker-monthRange span{
    width: 48px;
    height: 50px;
    line-height: 45px;
  }
  .datepicker-item-disable {
    background-color: white!important;
    cursor: not-allowed!important;
  }
  .decadeRange span:first-child,
  .decadeRange span:last-child,
  .datepicker-item-disable,
  .datepicker-item-gray{
    color: #999;
  }
  .datepicker-dateRange-item-active:hover,
  .datepicker-dateRange-item-active {
    background: rgb(50, 118, 177)!important;
    color: white!important;
  }
  .datepicker-monthRange {
    margin-top: 10px
  }
  .datepicker-monthRange span,
  .datepicker-ctrl span,
  .datepicker-ctrl p,
  .datepicker-dateRange span {
    cursor: pointer;
  }
  .datepicker-monthRange span:hover,
  .datepicker-ctrl p:hover,
  .datepicker-ctrl i:hover,
  .datepicker-dateRange span:hover,
  .datepicker-dateRange-item-hover {
    background-color : #eeeeee;
  }
  .datepicker-weekRange span{
    font-weight: bold;
  }
  .datepicker-label{
    background-color: #f8f8f8;
    font-weight: 700;
    padding: 7px 0;
    text-align: center;
  }
  .datepicker-ctrl{
    position: relative;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
  }
  .month-btn{
    font-weight: bold;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  .datepicker-preBtn{
    left: 2px;
  }
  .datepicker-nextBtn{
    right: 2px;
  }
  .table-condensed> thead> tr> th,
  .table-condensed> tbody> tr> th,
  .table-condensed> tfoot> tr> th,
  .table-condensed> thead> tr> td,
  .table-condensed> tbody> tr> td,
  .table-condensed> tfoot> tr> td {
    padding: 5px;
  }

  .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4285;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
  }
</style>
