<template>
  <div
    :class="[showActivated,focus,focusBorder]"
    :style="{'min-height':minHeight}"
    class="hls-item">
    <div
      :class="bottomBorder" class="contents"
      @contextmenu="preventDefault"
      @touchstart="start"
      @touchend="end"
      @touchcancel="end"
      @mousedown="start"
      @mouseup="end"
      @mouseleave="end"
      @focusin="focusin"
      @focusout="focusout">
      <div v-if="showName" :style="{'min-height':minHeight,'flex':proportion[0] }" class="add-name">
        <slot name="left-icon"/>
        <slot name="name"/>
      </div>
      <div v-if="showContent" :style="{'min-height':minHeight,'flex':proportion[1] }" class="add-content">
        <slot name="content"/>
        <slot name="right-icon"/>
        <img v-if="showArrow" :src="rightIcon" class="right-icon">
      </div>
      <slot/>
    </div>
  </div>
</template>

<script>
// import Icon from '@/right-gray@2x.png'

export default {
  name: 'Item',
  props: {
    proportion: {
      // name/content 横向面积比例
      type: Array,
      default: () => [1, 2],
    },
    showName: {
      type: Boolean,
      default: true,
    },
    showContent: {
      type: Boolean,
      default: true,
    },
    showArrow: {
      type: Boolean,
      default: false,
    },
    arrowRight: {
      type: String,
      default: '',
    },
    hasBorder: {
      type: Boolean,
      default: true,
    },
    itemHeight: {
      type: Number,
      default: 0,
    },
    showFocusBorder: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      showActivated: '',
      focus: '',
      focusBorder: '',
      hasTouchEvent: 'ontouchstart' in document,
      Icon: require('./right-gray@2x.png'),
    }
  },
  computed: {
    minHeight () {
      return this.itemHeight ? this.itemHeight + 'px' : this.$parent.itemHeight + 'px'
    },
    rightIcon () {
      return this.arrowRight ? this.arrowRight : this.Icon
    },
    bottomBorder () {
      return this.hasBorder ? 'vue-1px-b' : ''
    },
  },
  mounted () {
  },
  methods: {
    preventDefault (e) {
      // 移动浏览器中长按元素会触发显示菜单，导致touchend事件不会触发，需要阻止该行为
      e.preventDefault()
    },
    focusin () {
      let vm = this
      let showFocus = vm.showFocusBorder ? vm.showFocusBorder : vm.$parent.showFocusBorder
      vm.focus = 'focus'
      if (showFocus) {
        vm.focusBorder = 'focus-border'
      }
    },
    focusout () {
      this.focus = ''
      this.focusBorder = ''
    },
    start (e) {
      if (e.target.readOnly) return
      if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA' || e.target.nodeName === 'BUTTON' || e.target.nodeName === 'LABEL') return
      this.showActivated = 'activated'
    },
    end (e) {
      // TODO: android4上貌似触发touchmove事件之后不会再触发touchend事件，暂未对该情况做兼容处理
      if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA' || e.target.nodeName === 'BUTTON') return
      // 添加一点延时，不然透明度变化太快，效果不明显
      setTimeout(() => {
        this.showActivated = ''
      }, 100)
    },
  },
}
</script>

<style lang="less">
  .hls-item {
    //height: 100px;
    width: 100%;
    border: none;
    padding: 0 0 0 15px;
    height: auto;

    &.activated {
      opacity: 0.8;
    }
    &.focus-border{
      .contents {
        &:after {
          border-bottom: 2px solid rgba(0, 65, 196, 1); /*no*/
          color: rgba(0, 65, 196, 1);
        }
      }
    }

    .contents {
      height: 100%;
      width: 100%;
      //border-bottom: 1px solid rgba(0, 0, 0, 0.10);
      display: flex;
      justify-content: space-between;
      padding: 0 15px 0 0;

      .add-name {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        -webkit-justify-content: flex-start;
        -webkit-align-items: center;
        letter-spacing: 0;
        line-height: 25px;
        font-size: @font-size-middle; /*no*/
        color: #333;
        letter-spacing: 0;
        /*div {
          max-width: 250px;
          min-width: 150px;
        }*/

        .left-icon {
          margin-right: 10px;
          width: 18px;
        }

        .required {
          display: flex;
        }

        .required::after {
          content: '*';
          color: #D24E4E;
          height: 8px;
          padding-top: 2px;
          margin-left: 2px;
        }
      }

      .add-content {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        -webkit-justify-content: flex-end;
        -webkit-align-items: center;
        width: 100%;
        font-size: @font-size-middle; /*no*/
        color: #666;
        height: 100%;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
        line-height: 20px;
        .h-checkbox{
          .checkbox {
            input{
              width: 22px;
              height: 22px;
            }
          }
        }

        //输入框
        input {
          font-size: @font-size-middle; /*no*/
          color: #666;
          line-height: 20px;
          width: 100%;
          text-align: right;
          border: none;
        }

        //右侧图标
        .right-icon {
          margin-left: 5px;
          height: 0.2rem;
        }

        //toggle
        .toggle-check {
          display: -webkit-flex;
          display: flex;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          -webkit-align-items: center;
          align-items: center;

          .track {
            width: 40px;
            height: 25px;
            margin-right: 2.5px;
            border-radius: 15px;

            .handle {
              width: 22.5px;
              height: 22.5px;
              top: 3.5px;
              left: 2.5px;
            }
          }
        }

        .toggle.toggle-positive input:checked + .track {
          border-color: @switch-box-bg;
          background-color: @switch-box-bg;

          .handle {
            width: 22.5px;
            height: 22.5px;
            top: 3.5px;
            left: 9px;
          }
        }
      }
    }
  }
  @media (device-width: 320px) and (device-height: 568px) {
    .hls-item{
      .contents{
        .add-content{
          .toggle-check {
            .track {
              .handle{
                top:4px
              }
            }
          }
          .toggle.toggle-positive input:checked + .track{
            .handle {
              top:4px
            }
          }
        }
      }
    }

  }
</style>
