<template>
  <div
    ref="dofCell"
    :class="[
      'dof-cell',
      clickActivied && 'active-cell',
      hasTopBorder && 'cell-top-border',
      hasBottomBorder && 'cell-bottom-border',
      hasMargin && 'cell-margin',
      hasBottomBorder && isIos ? 'ios-bottom-border' : ''
    ]"
    :style="outputCellStyle"
    @click="cellClicked"
    @touchstart.stop="startDrag"
    @touchmove.stop="onDrag"
    @touchend.stop="endDrag"
    @touchcancel.stop="endDrag"
  >
    <slot name="itemImg">
      <image v-if="itemImg && itemImg != ''" :src="itemImg" class="item-image" :style="imgStyle"></image>
    </slot>
    <div
      :class="[
        'dof-sub-cell',
        hasSubTopBorder && 'cell-sub-top-border',
        hasSubBottomBorder && 'cell-sub-bottom-border',
        hasSubBottomBorder && isIos ? 'ios-sub-bottom-border' : ''
      ]"
      :style="subCellStyle"
    >
      <div :class="['dof-sub-cell-inner']">
        <div class="content">
          <div class="cell-title">
            <text :class="[title && hasArrow ? 'cell-content' : 'cell-content-no-arrow', tag ? 'hasTag' : 'noTag']">{{
              title
            }}</text>
            <text v-if="tag && tag != ''" class="cell-title-btn">{{ tag }}</text>
          </div>
          <text class="cell-desc-text" v-if="desc" :style="{ color: descColor, lines: size == 'max' ? 2 : 1 }">{{
            desc
          }}</text>
        </div>

        <slot name="rightText">
          <text v-if="rightTip" class="rightTip">{{ rightTip }}</text>
          <text v-if="rightText" class="right-text">{{ rightText }}</text>
          <text v-else-if="placeHolder" class="placeholder-text">{{ placeHolder }}</text>
        </slot>
        <slot name="switch"></slot>
      </div>
      <dof-image :src="arrowIcon" class="cell-arrow-icon" v-if="hasArrow"></dof-image>
    </div>
    <div class="midea-swipe-cell__right" :style="rightStyle" v-if="rightWidth" @click.stop="rightClick">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<style scoped>
.dof-cell {
  position: relative;
  flex-direction: row;
  align-items: center;
  padding-left: 32px;
  /* padding:0 32px; */
  background-color: #ffffff;
}

.active-cell:active {
  background-color: #f5f5f5;
}

.cell-margin {
  margin-bottom: 16px;
}

.cell-title {
  /* display: block !important; */
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-right: 50px;
  flex: 1;
}

.cell-top-border {
  border-top-color: #f2f2f2;
  border-top-width: 1px;
}

.cell-bottom-border {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #f2f2f2;
}

.ios-bottom-border {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #f2f2f2;
}

.dof-sub-cell {
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-right: 32px;
}
.dof-sub-cell-inner {
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.cell-sub-top-border {
  border-top-color: #f2f2f2;
  border-top-width: 1px;
}
.cell-sub-bottom-border {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #f2f2f2;
}

.ios-sub-bottom-border {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #f2f2f2;
}
.cell-arrow-icon {
  width: 40px;
  height: 40px;
}

.content {
  flex-direction: column;
  flex: 1;
}

.cell-content {
  display: flex;
  lines: 1;
  font-family: PingFangSC-Regular;
  font-size: 32px;
  line-height: 32px;
  color: #1E2E37;
  /* margin-right: 80px;     */
  /* hairong add */
  text-align: justify;
  text-overflow: ellipsis;
  /* flex: 1; */
}

/*  防止没有箭头右边距离太大 */
.cell-content-no-arrow {
  display: flex;
  lines: 1;
  font-family: PingFangSC-Regular;
  font-size: 32px;
  line-height: 32px;
  color: #1E2E37;
  /* margin-right: 48px;   */
  text-overflow: ellipsis;
  overflow: hidden;
  /* flex: 1; */
}

.hasTag {
  max-width: 380px;
}
.noTag {
  flex: 1;
}

.cell-desc-text {
  color: #8E969B;
  font-size: 24px;
  line-height: 32px;
  margin-top: 20px;
  margin-right: 80px;
  lines: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}

.item-image {
  margin-right: 24px;
}

.rightTip {
  align-self: flex-start;
  font-size: 24px;
  color: #8E969B;
}

.right-text {
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: #616C73;
  text-align: right;
}
.placeholder-text {
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: #c7c7cc;
  text-align: right;
  flex: 1;
}
.cell-title-btn {
  font-family: PingFangSC-Medium;
  font-size: 24px;
  height: 48px;
  line-height: 48px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 24px;
  margin-left: 20px;
  color: #616C73;
  background-color: #f2f2f2;
}

.midea-swipe-cell__right {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  background-color: #F56428;
  font-size: 32px;
  color: #ffffff;
}
</style>

<script>
// import util from './setting/util';
import DofImage from '../dof-image'
const icon = require('../setting/icon.base64.js')
const dom = weex.requireModule('dom')
const modal = weex.requireModule('modal')
//   add swipe
import TouchMixin from '../../mixins/touch'
const range = (num, min, max) => {
  return Math.min(Math.max(num, min), max)
}
const THRESHOLD = 0.15

export default {
  mixins: [TouchMixin],
  components: {
    DofImage
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'mini' //max /medium / mini.
    },

    itemImg: {
      type: String,
      default: ''
    },
    itemImgSize: {
      type: String,
      default: 'mini' //max /medium / mini.
    },
    // image backgroundColor
    imgBgColor: {
      type: String,
      default: '#F8F8F8'
    },

    title: {
      type: String,
      default: '',
      require: true
    },
    tag: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    descColor: {
      type: String,
      default: '#8E969B'
    },

    rightText: {
      type: String,
      default: ''
    },
    placeHolder: {
      type: String,
      default: ''
    },
    rightTip: {
      type: String,
      default: ''
    },
    clickActivied: {
      type: Boolean,
      default: true
    },
    hasMargin: {
      type: Boolean,
      default: false
    },
    hasTopBorder: {
      type: Boolean,
      default: false
    },
    hasSubTopBorder: {
      type: Boolean,
      default: false
    },
    hasBottomBorder: {
      type: Boolean,
      default: false
    },
    hasSubBottomBorder: {
      type: Boolean,
      default: true
    },
    hasArrow: {
      type: Boolean,
      default: true
    },
    cellStyle: {
      type: Object,
      default: () => ({})
    },
    arrowIcon: {
      type: String,
      default: icon['public_ic_more@3x']
    },

    leftWidth: {
      type: Number,
      default: 0
    },
    rightWidth: {
      type: Number,
      default: 0
    },
    leftBackground: {
      type: String,
      default: '#F56428'
    },
    rightBackground: {
      type: String,
      default: '#F56428'
    }
  },
  data: () => ({
    offset: 0,
    dragging: false
  }),

  // hairong add
  created() {
    this.isIos = weex.config.env.osName == 'iOS'
    console.log('TouchMixin', TouchMixin)
  },

  computed: {
    outputCellStyle() {
      const { cellStyle, disabled } = this
      if (disabled) {
        return {
          ...cellStyle,
          opacity: 0.3,
          ...this.wrapperStyle
        }
      } else {
        return {
          ...cellStyle,
          opacity: 1,
          ...this.wrapperStyle
        }
      }
    },

    imgStyle() {
      const { itemImgSize, imgBgColor } = this
      switch (itemImgSize) {
        case 'medium':
          return { width: '56px', height: '56px', backgroundColor: imgBgColor, borderRadius: '28px' }
          break
        case 'max':
          return { width: '96px', height: '96px', backgroundColor: imgBgColor, borderRadius: '48px' }
          break
        default:
          return { width: '40px', height: '40px', backgroundColor: imgBgColor, borderRadius: '20px' }
          break
      }
    },

    subCellStyle() {
      switch (this.size) {
        case 'medium':
          return { height: '160px' }
          break
        case 'max':
          return { height: '184px' }
          break
        default:
          return { height: '104px' }
          break
      }
    },

    wrapperStyle() {
      let { offset, dragging, leftWidth, rightWidth } = this
      let style = {
        width: `${750 + leftWidth + rightWidth}px`,
        transform: `translateX(${offset - leftWidth}px)`,
        transitionProperty: 'transform',
        transitionDuration: dragging ? '0' : '.6s',
        transitionTimingFunction: dragging ? 'none' : 'cubic-bezier(0.18, 0.89, 0.32, 1)'
      }
      return style
    },

    rightStyle() {
      let { rightWidth, rightBackground, color, size } = this
      let style = {
        width: `${rightWidth}px`,
        // height: `${height}px`,
        backgroundColor: rightBackground,
        color
      }
      // return style
      console.log('this.subCellStyle', this.subCellStyle)
      return {
        ...style,
        ...this.subCellStyle
      }
    }
  },
  mounted() {
    dom.getComponentRect(this.$refs.dofCell, option => {
      // console.log('getComponentRect:', option);
    })
  },
  methods: {
    cellClicked(e) {
      const { disabled } = this
      !disabled && this.$emit('dofCellClicked', { e })
      // console.log("this.isIos", this.isIos)
    },

    rightClick(e) {
      const { disabled } = this
      !disabled && this.$emit('dofCellSwipeClicked', { e })
    },

    // special(dom, styles) {
    //   animation.transition(dom, {
    //     styles,
    //     duration: 200, // ms
    //     timingFunction: 'ease',
    //     delay: 100 // ms
    //   });
    // },

    swipeMove(offset = 0) {
      this.offset = range(offset, -this.rightWidth, this.leftWidth)
      if (this.offset) {
        this.swiping = true
      } else {
        this.opened = false
      }
    },

    resetSwipeStatus() {
      this.swiping = false
      this.opened = true
    },

    open(position) {
      const offset = position === 'left' ? this.leftWidth : -this.rightWidth
      this.swipeMove(offset)
      this.resetSwipeStatus()
    },

    close() {
      this.offset = 0
    },

    swipeLeaveTransition(direction) {
      let { offset, leftWidth, rightWidth } = this
      let threshold = this.opened ? 1 - THRESHOLD : THRESHOLD

      // right
      if (direction === 'right' && -offset > rightWidth * threshold && rightWidth > 0) {
        this.open('right')
        // left
      } else if (direction === 'left' && offset > leftWidth * threshold && leftWidth > 0) {
        this.open('left')
        // reset
      } else {
        this.swipeMove(0)
      }
    },

    startDrag(event) {
      if (this.disabled) {
        return
      }
      this.dragging = true
      this.startOffset = this.offset
      this.touchStart(event)
    },

    onDrag(event) {
      if (this.disabled) {
        return
      }
      this.touchMove(event)
      if (this.direction === 'horizontal') {
        // event.preventDefault()
        this.swipeMove(this.deltaX + this.startOffset)
      }
    },

    endDrag(event) {
      if (this.disabled) {
        return
      }
      this.dragging = false

      if (this.swiping) {
        this.swipeLeaveTransition(this.offset > 0 ? 'left' : 'right')
      }
    },

    onTransitionend() {
      this.swiping = false
    }
  }
}
</script>
