<template>
  <div class="cellBox">
    <dof-cell
      :key="'cellIsColmo' + _isColmo"
      :title="title"
      :hasArrow="false"
      :hasTopBorder="false"
      :hasSubTopBorder="false"
      :hasBottomBorder="false"
      :hasSubBottomBorder="false"
      :backgroundColor="backgroundColor"
      @dofCellClicked="dofCellClick"
      :disabled="disabled"
    >
      <dof-iconfont
        slot="switch"
        v-if="radioIcon && _isColmo"
        :code="'\u4729'"
        :size="50"
        :color="'rgba(255, 255, 255, 0.8)'"
      ></dof-iconfont>
      <image :src="radioIcon" slot="switch" v-if="radioIcon && !_isColmo" class="radio"></image>
    </dof-cell>
    <div
      class="fakeStyle"
      v-if="!isLast && isShowBorder"
      :style="{
        backgroundColor: _isColmo ? 'rgba(255, 255, 255, 0.14)' : '#dddddd',
        right: isFullBorder ? '0px' : '24px'
      }"
    ></div>
  </div>
</template>

<style scoped>
.radio {
  width: 32px;
  height: 32px;
}
.colmoDisabled {
  opacity: 0.3;
}
.cellBox {
  position: relative;
}
.fakeStyle {
  position: absolute;
  /* width: 720px; */
  left: 24px;
  height: 1px;
  /* right: 0; */
  bottom: 0;
}
</style>

<script>
import DofCell from '../dof-cell'
import DofIconfont from '../dof-iconfont'
const icon = require('../setting/icon.base64.js')
var CHECKED = icon['public_ic_done@2x']
var CHECKEDDIABLO = icon['public_ic_done_diablo@2x']
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'

const animation = weex.requireModule('animation')
export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofCell, DofIconfont },
  props: {
    hasSubBottomBorder: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      require: true
    },
    value: {
      type: [String, Number, Object],
      require: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Boolean,
      default: false
    },
    // 是否宽度750（边框样式不一样）
    isFullBorder: {
      type: Boolean,
      default: true
    },
    isLast: {
      type: Boolean,
      default: false
    },
    // 是否显示边框
    isShowBorder: {
      type: Boolean,
      default: false
    }

    // itemImg: {
    //   type: String,
    //   default: ''
    // },
  },
  data: () => ({}),
  computed: {
    radioIcon() {
      const { icon, disabled, checked } = this
      return checked ? (this._isDiablo ? CHECKEDDIABLO : CHECKED) : ''
    },
    backgroundColor() {
      const { _isColmo, _isDiablo } = this
      // 27282a
      return _isColmo ? '#303237' : _isDiablo ? '#101315' : '#FFFFFF'
    },
    cellStyle() {
      return { backgroundColor: this.backgroundColor }
    }
  },
  methods: {
    dofCellClick() {
      const { disabled, value } = this
      if (!disabled) {
        this.$emit('dofRadioItemChecked', { value, disabled })
      }
    }
  }
}
</script>
