<template>
  <div
    :key="_isColmo + 'checkbox'"
    :class="[
      'dof-cell',
      !disabled && 'active-cell',
      hasTopBorder && 'cell-top-border',
      hasBottomBorder && 'cell-bottom-border',
      disabled && 'checkbox-disabled'
    ]"
    :style="cellDynamicHeight"
    @click="dofCellClick"
  >
    <image v-if="!_isColmo" :src="checkIcon" slot="value" :class="['checkbox', disabled && 'checkbox-icon-disabled']"></image>
    <div
      v-if="_isColmo"
      slot="value"
      class="circle"
      :style="{
        backgroundColor: innerChecked ? '#b35336' : 'transparent',
        borderColor: innerChecked ? 'transparent' : '#797979'
      }"
    >
      <dof-iconfont
        v-if="innerChecked"
        style="width: 40px"
        :code="'\u4729'"
        :size="40"
        :color="'rgba(255, 255, 255, 0.8)'"
      ></dof-iconfont>
    </div>
    <div class="avatar" v-if="itemImg && itemImg != ''">
      <image v-if="itemImg && itemImg != ''" :src="itemImg" class="item-img"> </image>
    </div>

    <div
      :class="[
        'main-wrapper',
        hasSubTopBorder && 'checkBox-top-border',
        itemImg && hasSubBottomBorder && 'checkBox-bottom-border'
      ]"
      :style="dynamicSizeComp"
    >
      <div class="content-title" :style="titleDynamicHeight">
        <div class="cell-title">
          <text :class="['title-text', isOverflow && 'title-flex-expand']" slot="title" ref="titleBox">{{
            title
          }}</text>
          <text v-if="tag" class="cell-title-btn" ref="tagBox">{{ tag }}</text>
        </div>
        <div v-if="desc" class="sub-title">
          <text class="sub-text" slot="sub-text">{{ desc }}</text>
        </div>
      </div>
      <dof-image :src="ARROW_ICON" class="cell-arrow-icon" v-if="hasArrow"></dof-image>
    </div>
    <div v-if="!itemImg && hasSubBottomBorder" class="fakeSubBorder"></div>
    <div v-if="_isDiablo && disabled" class="disabledMask"></div>
  </div>
</template>

<style scoped>
.checkbox {
  width: 36px;
  height: 36px;
}

.avatar {
  width: 96px;
  height: 96px;
  margin-left: 32px;
  /* margin-right: 24px; */
  background-color: #f8f8f8;
  border-radius: 48px;
  overflow: hidden;
}

.item-img {
  width: 96px;
  height: 96px;
}

.dof-cell {
  /* height: 160px; */
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 32px;
  /* padding-right: 32px; */
  background-color: inherit;
}

.checkBox-top-border {
  border-bottom-color: #dddddd;
  border-bottom-width: 1px;
}

.checkBox-bottom-border {
  border-bottom-color: #dddddd;
  border-bottom-width: 1px;
}

.fakeSubBorder {
  height: 1px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #dddddd;
  left: 86px;
}

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

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

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

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

.title-text {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: #1e2e37;
  lines: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  /* max-width:398px; */
  /* flex:1; */
}

.title-flex-expand {
  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: #f6f7f9;
  max-width: 350px;
  overflow: hidden;
  text-overflow: clip;
}

.sub-title {
  margin-top: 16px;
  /* flex-direction: row; */
}

.sub-text {
  font-family: 'PingFangSC-Regular';
  font-size: 24px;
  color: #8e969b;
  lines: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
}

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

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

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

.checkbox-disabled {
  opacity: 0.3;
}
</style>
<style scoped src="./colmo.css"></style>
<style scoped src="./diablo.css"></style>

<script>
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
import DofIconfont from '../dof-iconfont'
const dom = weex.requireModule('dom')
const icon = require('../setting/icon.base64.js')
// var CHECKED = icon['public_ic_done@2x'];
// var UNCHECKED = icon['unchecked'];
// var CHECKED_DISABLED = icon['dischecked'];
// var UNCHECKED_DISABLED = icon['disuncheked'];
var UNCHECKED = icon['icon_checkbox_unselect']
var UNCHECKEDDIABLO = icon['icon_checkbox_unselect_diablo']
var CHECKED = icon['icon_checkbox_selected']
var CHECKEDDIABLO = icon['icon_checkbox_selected_diablo']
var ARROW_ICON = icon['public_ic_more@3x']
const WIDTH = 498 // hack
export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofIconfont },
  props: {
    hasTopBorder: {
      type: Boolean,
      default: false
    },
    hasSubTopBorder: {
      type: Boolean,
      default: false
    },
    hasBottomBorder: {
      type: Boolean,
      default: false
    },
    hasSubBottomBorder: {
      type: Boolean,
      default: false
    },

    title: {
      type: String,
      require: true
    },

    tag: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number, Object],
      require: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Boolean,
      default: false
    },
    desc: {
      type: String,
      default: ''
    },
    itemImg: {
      type: String,
      default: ''
    },
    hasArrow: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    innerChecked: false,
    isOverflow: false,
    titleWidth: 0,
    tagWidth: 0
  }),
  watch: {
    title: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.$nextTick(() => {
            this.isOverflow = this.titleWidth + this.tagWidth > WIDTH
          })
        }
      },
      immediate: true
    }
  },
  created() {
    const { checked, disabled } = this
    this.innerChecked = checked
  },
  computed: {
    icon () {
      return [this._isDiablo ? CHECKEDDIABLO  : CHECKED, this._isDiablo ? UNCHECKEDDIABLO : UNCHECKED]
    },
    checkIcon() {
      const { icon, disabled, innerChecked } = this
      return icon[innerChecked ? 0 : 1]
    },
    // item动态高度 由desc撑开
    // dynamicSizeComp() {
    //   if (this.itemImg) {
    //     return {
    //       height: '160px'
    //     }
    //   } else {
    //     return { }
    //   }
    // },
    dynamicSizeComp() {
      if (this.desc || this.itemImg) {
        return {
          height: '160.5px' //有subtitle或者图片时的高度
        }
      } else {
        return {
          // height: '80px'   ////无subtitle和无图片时的高度
        }
      }
    },

    cellDynamicHeight() {
      if (!this.desc && !this.itemImg) {
        return {
          // height: '82px' ////无subtitle和无图片时的高度
        }
      }
      return {}
    },

    titleDynamicHeight() {
      if (!this.desc && !this.itemImg) {
        return {
          height: this._isColmo ? '104px' : '80px' ////无subtitle和无图片时的高度
        }
      }
      return {}
    }
  },

  methods: {
    dofCellClick() {
      const { disabled, innerChecked, value } = this
      if (!disabled) {
        this.innerChecked = !innerChecked
        this.$emit('dofCheckBoxItemChecked', { value, checked: this.innerChecked })
      }
    },
    dynamicIsOverflow() {
      // ios下面 对于这个动态的设置flex=1,或者max-width都会 偶现不生效。
      this.$nextTick(() => {
        setTimeout(() => {
          const result = dom.getComponentRect(this.$refs.tagBox, option => {
            const result2 = dom.getComponentRect(this.$refs.titleBox, titleResult => {
              this.titleWidth = titleResult.size && titleResult.size.width
              this.tagWidth = option.size && option.size.width
              this.isOverflow = this.titleWidth + this.tagWidth > WIDTH
            })
          })
        }, 60)
      })
    }
  },
  mounted() {
    this.dynamicIsOverflow()
  }
}
</script>
