<template>
  <div :class="['wrapper', hasMargin && 'cell-margin']" ref="dof-cell" :style="cellStyleComp">
    <div :class="['cell-wrapper', disabled ? 'cell-disabled-opacity' : 'cell-abled-opacity']">
      <div
        :class="['dof-cell', hackMrgb1pxcom && 'mgb-1', !disabled && isHighlight && 'dof-cell-highlight']"
        :style="borderStyleComp"
        :accessible="autoAccessible"
        :aria-label="`${label},${title},${desc}`"
        @click="onClick"
      >
        <slot>
          <!-- left -->
          <div class="left img-wrapper" v-if="avatarIcon || avatarIconFont">
            <div
              v-if="avatarIcon"
              class="img-container circle-bg"
              :class="[badgeNum && 'Dotright32']"
              :style="avatarIconBgSizeComp"
            >
              <slot name="leftImg">
                <image class="left-img" :src="avatarIcon" :style="avatarIconSizeComp"></image>
              </slot>
            </div>
            <div v-if="avatarIconFont" class="circle-bg">
              <slot name="leftIconFont">
                <dof-iconfont
                  :code="avatarIconFont"
                  :size="avatarIconFontSize"
                  :color="_isColmo ? 'rgba(255,255,255,0.80)' : '#1E2E37'"
                ></dof-iconfont>
              </slot>
            </div>

            <div class="dot-tip" v-if="hasDot" :class="[badgeNum && 'dotRight', dotTipTop]" :style="badgeStyle"></div>
            <div class="dot-num-tip" v-else-if="badgeNum" :style="badgeStyle">
              <text class="dot-num-tip-text">{{ dotNum }}</text>
            </div>
          </div>

          <!-- middle -->
          <div
            :class="['main-container', hasVerticalIndent && 'cell-indent', badgeNum && 'notDot']"
            :style="subBorderStyleComp"
          >
            <slot name="label">
              <div v-if="label">
                <text class="cell-label-text" :style="textColorComp">{{ label }}</text>
              </div>
            </slot>
            <div :class="['middle', desc ? 'has-desc' : 'no-desc']" :style="innerCellHeightComp">
              <slot name="middle">
                <div class="cell-title-wrapper">
                  <div :class="['cell-title-content', !tag && 'title-flex-expand']">
                    <div :class="['cell-title']">
                      <text :class="['cell-title-text', !hasTextTip && 'title-flex-expand']" :style="titleStyleComp">{{
                        title
                      }}</text>
                      <div class="text-dot-tip" v-if="hasTextTip"></div>
                    </div>
                  </div>

                  <slot name="tag">
                    <div
                      class="cell-title-tag"
                      v-if="tag"
                      :style="{
                        backgroundColor: iconColor ? iconColor : _isDiablo ? '#2b2f32' : '#F6F7F9'
                      }"
                    >
                      <text class="cell-title-tag-text">{{ tag }}</text>
                    </div>
                  </slot>
                </div>
                <div :class="['cell-desc-wrapper', !tag && !_isColmo && 'margin-top-24']" v-if="desc">
                  <slot name="desc">
                    <div class="cell-desc">
                      <text class="cell-desc-text" :style="descStyleComp">{{ desc }}</text>
                    </div>
                  </slot>
                </div>
              </slot>
            </div>
            <!-- right -->
            <div :class="['right', rightTip && 'has-no-padding-left']">
              <slot name="rightText">
                <div class="right-text-wrapper" v-if="rightText">
                  <text
                    :class="[
                      'right-text',
                      !avatarIcon && 'single-line-text',
                      avatarIcon && iconSize === 'big' && 'normal-right-text'
                    ]"
                    :style="rightTextStyleComp"
                    >{{ rightText }}</text
                  >
                </div>
              </slot>
              <text class="extra-content-text" :style="textColorComp" v-if="extraContent">{{ extraContent }}</text>
              <!-- 开关 -->
              <slot name="switch"></slot>

              <div class="arrow-wrapper" v-if="hasArrow">
                <slot name="arrow">
                  <dof-iconfont
                    style="width: 34px"
                    v-if="_isColmo"
                    :code="'\u4713'"
                    :size="48"
                    :color="'rgba(255,255,255,0.80)'"
                    @dofIconFontClicked="onClick"
                  ></dof-iconfont>
                  <image v-else :src="arrowIcon" class="cell-arrow-icon" :aria-hidden="true"></image>
                </slot>
              </div>
            </div>
          </div>
          <div
            :class="[
              'right-tip-wrapper',
              hasTopSubBorder && 'cell-top-border',
              hasSubBottomBorder && 'cell-bottom-border',
              special && 'space-gap'
            ]"
            v-if="rightTip"
          >
            <slot name="rightTip">
              <text class="right-tip-text" @click="dofRightTipClicked">{{ rightTip }}</text>
            </slot>
          </div>
        </slot>
      </div>
    </div>
    <div v-if="useFakeBorder" class="fake-border" :style="fakeBorderStyleRender"></div>
  </div>
</template>

<style scoped>
.wrapper {
  /*hairong add for swipe*/
  overflow: hidden;
  position: relative;
  /* end  by hairong*/
  /* 解决安卓渲染间隔问题 */
  /* margin-bottom: -1px; */
  /* padding-bottom: -1px; */
}

.fake-border {
  /* width: 750px; */
  height: 1px;
  position: absolute;
  bottom: 1px;
  left: 0;
  /* background-color: #f2f2f2; */
}

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

.dof-cell-highlight:active {
  background-color: #f4f5f6;
}

.dof-cell {
  display: flex;
  flex-direction: row;
  flex: 1;
  /* align-items: center; */
}
.cell-wrapper {
  flex: 1;
}

.mgb-1 {
  margin-bottom: 1px;
}

.cell-disabled-opacity {
  opacity: 0.3;
}

.cell-abled-opacity {
  opacity: 1;
}

/* left部分 */
.left {
  justify-content: center;
  /* border-width: 1px; */
}

.img-wrapper {
}

.circle-bg {
  margin-left: 32px;
  /* width: 96px;
  height: 96px; */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.text-dot-tip {
  width: 16px;
  height: 16px;
  border-radius: 10px;
  background-color: #f56428;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 22px;
}

.dot-tip {
  position: absolute;
  top: 30px;
  right: 12px;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  background-color: #f56428;
}

.dot-num-tip {
  position: absolute;
  font-size: 24px;
  top: 30px;
  right: 32px;
  /* transform: translate(50%, 0); */
  border-radius: 100px;
  /* border-width: 1px;
  border-color: #ffffff; */
  background-color: #f56428;
  align-items: center;
  justify-content: center;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 1;
}

.dot-num-tip-text {
  font-size: 24px;
  color: #ffffff;
}

.left-img {
  /* width: 64px;
  height: 64px; */
}

.main-container {
  flex: 1;
  flex-direction: row;
  align-items: center;
  /* padding: 0 0px 0 32px; */
  margin-left: 32px;
  overflow: hidden;

  /* border-width: 1px;
  border-color: red; */
}

.Dotleft32 {
  margin-left: 32px;
}

.Dotright32 {
  margin-right: 32px;
}

.notDot {
  margin-left: 0px;
}

.dotRight {
  right: 32px;
}
.dotTopMax {
  top: 34px;
}
.dotTopMedium {
  top: 39px;
}
.dotTopBig {
  top: 44px;
}
.dotTopMin {
  top: 54px;
}

/* label */
.cell-label-text {
  font-size: 30px;
  color: #616c73;
  width: 188px;
  margin-right: 10px;
}

/* middle部分 */
.middle {
  flex: 1;
  min-height: 124px;
  overflow: hidden;
  /* margin-right: 32px; */
  /* border-width: 1px;
  border-color: blue; */
}

.has-desc {
  min-height: 160px;
  /* padding-top: 26px; */
  /* margin-bottom: 2px; */
  justify-content: center;
}

.no-desc {
  justify-content: center;
}

.cell-title-wrapper {
  flex-direction: row;
  margin-right: 40px;
  overflow: hidden;
}

.cell-title-content {
  /* flex: 1; */
  /* max-width: 400px; */
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  /* border-width: 1px;
  border-color: orange; */
  overflow: hidden;
}

.title-flex-expand {
  flex: 1;
}

.cell-title {
  flex: 1;
  flex-direction: row;
  align-items: center;
  /* justify-content: flex-start; */
}

.avatar-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-right: 24px;
}

.cell-title-text {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  /* line-height: 32px; */
  color: #1e2e37;
  lines: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* tag */

.cell-title-tag {
  width: 88px;
  height: 48px;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #f2f2f2;
  border-radius: 48px;
  margin-left: 18px;
}

.cell-title-tag-text {
  font-family: PingFangSC-Medium;
  font-size: 24px;
  color: #616c73;
  /* line-height: 24px; */
}

/* desc */
.cell-desc-wrapper {
  /* flex: 1; */
  margin-top: 16px;
  /* border-width: 1px;
  border-color: tomato; */
  /* padding-bottom: 30px; */
  /* min-height: 36px; */
}

.margin-top-24 {
  margin-top: 18px;
}

.cell-desc {
  /* border-width: 1px;
  border-color: aqua; */
}

.cell-desc-text {
  font-family: PingFangSC-Regular;
  color: #8e969b;
  font-size: 24px;
  /* line-height: 36px; */
  /* desc和title的间距 */
  /* margin-top: 4px; */
  /* margin-right: 30px; */
  /* 文字超出设置 */
  lines: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 右部 */
.right-tip-wrapper {
  padding: 40px 32px 0 0;
  /* border-width: 1px; */
}

.space-gap {
  margin-left: 92px;
}

.right-tip-text {
  font-family: PingFangSC-Regular;
  color: #8e969b;
  font-size: 24px;
  /* line-height: 24px; */
  text-align: right;
}

.right {
  flex-direction: row;
  align-items: center;
  padding-right: 24px;
  padding-left: 32px;
}

.has-no-padding-left {
  padding-right: 0;
  padding-left: 0;
}

.right-text-wrapper {
  /* 文字距离图标间隔 */
  /* margin-left: 80px;
  border-width: 1px;
  border-color: greenyellow; */
}

.right-text {
  font-family: PingFangSC-Regular;
  color: #8e969b;
  font-size: 28px;
  /* line-height: 28px; */
  letter-spacing: 0;
  text-align: right;
}

.normal-right-text {
  /* font-size: 32px; */
  /* line-height: 32px; */
}

.single-line-text {
  /* color: #8E969B;
  font-size: 24px;
  line-height: 34px; */
}

/* arrow */
.arrow-wrapper {
  padding-left: 0px;
}

.cell-arrow-icon {
  width: 40px;
  height: 40px;
}

.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>
<style scoped src="./colmo.css"></style>
<style scoped src="./diablo.css"></style>

<script>
const icon = require('../setting/icon.base64.js')
const modal = weex.requireModule('modal')
const dom = weex.requireModule('dom')
import DofIconfont from '../dof-iconfont'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'

export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofIconfont },
  props: {
    special: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    isHighlight: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    tag: {
      type: String,
      default: ''
    },
    extraContent: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    hasTextTip: {
      type: Boolean,
      default: false
    },
    badgeNum: {
      type: [Number, String],
      default: 0
    },
    badgeMax: {
      type: Number,
      default: 0
    },
    badgeTheme: {
      type: String,
      default: 'red'
    },
    badgeColor: {
      type: String,
      default: ''
    },
    hasDot: {
      type: Boolean,
      default: false
    },
    avatarIcon: {
      type: String,
      default: ''
    },
    // 使用字体图标
    avatarIconFont: {
      type: String,
      default: ''
    },
    iconSize: {
      type: String,
      default: 'big'
    },
    iconSizeCustom: {
      // { iconSize: 96, bgSize: 96 }
      type: Object,
      default: () => ({})
    },
    cellStyle: {
      type: Object,
      default: () => ({})
    },
    rightTextStyle: {
      type: Object,
      default: () => ({})
    },
    backgroundColor: {
      type: String,
      default: ''
    },
    textColor: {
      type: String,
      default: ''
    },
    iconColor: {
      type: String,
      default: ''
    },
    hasTopBorder: {
      type: Boolean,
      default: false
    },
    hasTopSubBorder: {
      type: Boolean,
      default: false
    },
    hasBottomBorder: {
      type: Boolean,
      default: false
    },
    hasSubTopBorder: {
      type: Boolean,
      default: false
    },
    hasSubBottomBorder: {
      type: Boolean,
      default: false
    },
    hasMargin: {
      type: Boolean,
      default: false
    },
    hasVerticalIndent: {
      type: Boolean,
      default: true
    },
    hasArrow: {
      type: Boolean,
      default: true
    },
    rightText: {
      type: String,
      default: ''
    },
    rightTip: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    autoAccessible: {
      type: Boolean,
      default: true
    },
    fakeBorderStyle: {
      type: Object,
      default: () => ({})
    },
    titleTextStyle: {
      type: Object,
      default: () => ({})
    },
    descTextStyle: {
      type: Object,
      default: () => ({})
    }
  },
  data: () => ({
    offset: 0,
    dragging: false
  }),

  computed: {
    badgeThemeList() {
      return {
        brand: this._isDiablo ? '#0490d3' : '#00A4F2',
        red: this._isDiablo ? '#DB5C44' : '#F56428',
        purple: this._isDiablo ? '#805ed1' : '#946CF2',
        'blue-purple': this._isDiablo ? '#5865DC' : '#6575ff',
        blue: this._isDiablo ? '#25A8DC' : '#29c3ff',
        cyan: '#00cbb8',
        yellow: this._isDiablo ? '#BE8214' : '#FFAA10',
        orange: this._isDiablo ? '#db7122' : '#ff8225',
        'orange-red': '#ff6a4c',
        'gray-offline': this._isDiablo ? '#6B7587' : '#7c879b',
      }
    },
    arrowIcon() {
      return this._isDiablo ? icon.arrowIconNew_diablo : icon.arrowIconNew
    },
    _backgroundColor() {
      if (this.backgroundColor) return this.backgroundColor
      return this._isColmo ? '#303237' : this._isDiablo ? '#101315' : '#ffffff'
    },
    _borderColor() {
      return this._isColmo ? 'rgba(255,255,255,0.14)' : '#DDDDDD'
    },
    useFakeBorder() {
      return JSON.stringify(this.fakeBorderStyle) !== '{}'
    },
    // cell样式
    cellStyleComp() {
      const { cellStyle, _backgroundColor } = this
      return {
        backgroundColor: _backgroundColor,
        ...cellStyle
      }
    },
    dotNum() {
      let { badgeNum, badgeMax } = this
      let value = ''
      let curContent = Number(badgeNum)
      if (badgeMax && curContent >= badgeMax) {
        value = `${badgeMax}+`
      } else {
        value = badgeNum
      }
      return value
    },
    dotTipTop() {
      let { iconSize } = this
      let topClass = ''
      if (iconSize === 'max') {
        topClass = 'dotTopMax'
      } else if (iconSize === 'medium') {
        topClass = 'dotTopMedium'
      } else if (iconSize === 'min') {
        topClass = 'dotTopMin'
      } else {
        topClass = 'dotTopBig'
      }
      return topClass
    },
    //处理特殊类型cell高度问题
    innerCellHeightComp() {
      const { special, desc } = this
      if (special && desc) {
        return {
          minHeight: '200px',
          paddingTop: '32px'
        }
      }
      return ''
    },
    // 文字样式颜色
    textColorComp() {
      const { textColor } = this
      if (textColor) {
        return {
          color: textColor
        }
      } else {
        return {}
      }
    },
    titleStyleComp() {
      const { textColor, titleTextStyle } = this
      if (textColor) {
        return {
          color: textColor,
          ...titleTextStyle
        }
      } else {
        return {
          ...titleTextStyle
        }
      }
    },
    descStyleComp() {
      const { textColor, descTextStyle } = this
      if (textColor) {
        return {
          color: textColor,
          ...descTextStyle
        }
      } else {
        return {
          ...descTextStyle
        }
      }
    },
    avatarIconBgSizeComp() {
      let { iconSize, iconColor } = this
      let iconSizeCustom = this.iconSizeCustom.bgSize
      if (iconSizeCustom) {
        return {
          width: iconSizeCustom + 'px',
          height: iconSizeCustom + 'px',
          borderRadius: iconSizeCustom / 2 + 'px',
          backgroundColor: iconColor ? iconColor : 'transparent'
        }
      }
      if (iconSize === 'max') {
        return {
          width: '112px',
          height: '112px',
          borderRadius: '56px',
          marginTop: this._isColmo ? '0px' : '16px',
          marginBottom: this._isColmo ? '0px' : '16px',
          backgroundColor: iconColor ? iconColor : 'transparent'
        }
      } else if (iconSize === 'medium') {
        return {
          width: '76px',
          height: '76px',
          borderRadius: '38px',
          marginTop: this._isColmo ? '0px' : '40px',
          marginBottom: this._isColmo ? '0px' : '40px',
          backgroundColor: iconColor ? iconColor : 'transparent'
        }
      } else if (iconSize === 'min') {
        return {
          width: '58px',
          height: '58px',
          borderRadius: '20px',
          marginTop: this._isColmo ? '0px' : '32px',
          marginBottom: this._isColmo ? '0px' : '32px',
          backgroundColor: iconColor ? iconColor : 'transparent'
        }
      } else {
        return {
          width: '64px',
          height: '64px',
          borderRadius: '32px',
          marginTop: this._isColmo ? '0px' : '48px',
          marginBottom: this._isColmo ? '0px' : '48px',
          backgroundColor: iconColor ? iconColor : 'transparent'
        }
      }
    },
    avatarIconSizeComp() {
      let { iconSize } = this
      let iconSizeCustom = this.iconSizeCustom.iconSize
      if (iconSizeCustom) {
        return {
          width: iconSizeCustom + 'px',
          height: iconSizeCustom + 'px',
          borderRadius: iconSizeCustom / 2 + 'px'
        }
      }
      if (iconSize === 'max') {
        return {
          width: '96px',
          height: '96px'
        }
      } else if (iconSize === 'medium') {
        return {
          width: '64px',
          height: '64px'
        }
      } else if (iconSize === 'min') {
        return {
          width: '40px',
          height: '40px'
        }
      } else {
        return {
          width: '48px',
          height: '48px'
        }
      }
    },
    avatarIconFontSize() {
      let { iconSize } = this
      if (iconSize === 'max') {
        return 80
      } else if (iconSize === 'medium') {
        return 40
      } else if (iconSize === 'min') {
        return 24
      } else {
        return 64
      }
    },
    rightTextStyleComp() {
      const { textColor, rightTextStyle, avatarIcon, iconSize } = this
      if (textColor) {
        return {
          color: textColor,
          ...rightTextStyle
        }
      } else {
        return {
          ...rightTextStyle
        }
      }
    },
    hackMrgb1pxcom() {
      let { hasSubBottomBorder, hasBottomBorder } = this
      return hasSubBottomBorder || hasBottomBorder ? true : false
    },
    borderStyleComp() {
      let {
        cellStyle: { borderColor = null },
        hasTopBorder,
        hasBottomBorder
      } = this
      if (borderColor) {
        if (hasTopBorder) {
          return {
            borderTopWidth: '1px',
            borderTopColor: borderColor
          }
        } else if (hasBottomBorder) {
          return {
            borderBottomWidth: '1px',
            borderBottomColor: borderColor
          }
        } else {
          return {}
        }
      } else {
        if (hasTopBorder) {
          return {
            borderTopWidth: '1px',
            borderTopColor: this._borderColor
          }
        } else if (hasBottomBorder) {
          return {
            borderBottomWidth: '1px',
            borderBottomColor: this._borderColor
          }
        } else {
          return {}
        }
      }
    },
    subBorderStyleComp() {
      let {
        cellStyle: { borderColor = null },
        hasSubTopBorder,
        hasSubBottomBorder
      } = this
      if (borderColor) {
        if (hasSubTopBorder) {
          return {
            borderTopWidth: '1px',
            borderTopColor: borderColor
          }
        } else if (hasSubBottomBorder) {
          return {
            borderBottomWidth: '1px',
            borderBottomColor: borderColor
          }
        } else {
          return {}
        }
      } else {
        if (hasSubTopBorder) {
          return {
            borderTopWidth: '1px',
            borderTopColor: this._borderColor
          }
        } else if (hasSubBottomBorder) {
          return {
            borderBottomWidth: '1px',
            borderBottomColor: this._borderColor
          }
        } else {
          return {}
        }
      }
    },
    badgeStyle() {
      let { badgeTheme, badgeThemeList, badgeColor } = this
      return {
        backgroundColor: badgeColor ? badgeColor : badgeThemeList[badgeTheme]
      }
    },
    // 底部border样式
    fakeBorderStyleRender() {
      return {
        backgroundColor: this._isColmo ? 'rgba(255,255,255,0.14)' : '#DDDDDD',
        ...this.fakeBorderStyle
      }
    }
  },
  methods: {
    onClick() {
      const { disabled } = this
      !disabled && this.$emit('dofCellClicked')
    },
    dofRightTipClicked() {
      const { rightTip } = this
      rightTip && this.$emit('dofRightTipClicked')
    }
  }
}
</script>
