<!-- Created by zoiew on 20/11/05. -->

<template>
  <dof-cell
    :title="title"
    :has-arrow="false"
    :has-top-border="hasTopBorder"
    :has-sub-bottom-border="true"
    :cell-style="{ backgroundColor: backgroundColor }"
    @dofCellClicked="dofCellClicked"
    :disabled="disabled"
    :accessible="true"
    :aria-label="`${title},状态为${checked ? '已选中' : '未选中'},${disabled ? '不可更改' : ''}`"
  >
    <image :src="radioIcon" v-if="radioIcon" slot="switch" class="radio"></image>
  </dof-cell>
</template>

<script>
import DofCell from '../dof-cell'
import Core from '../core'
import { CHECKED, DISABLED } from './type.js'

export default {
  components: { DofCell },
  props: {
    hasTopBorder: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      require: true
    },
    value: {
      type: [String, Number, Object],
      require: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data: () => ({
    icon: [CHECKED, DISABLED]
  }),
  computed: {
    radioIcon() {
      const { icon, disabled, checked, config } = this
      const mergeIcon = icon
      config.checkedIcon && (mergeIcon[0] = config.checkedIcon)
      config.disabledIcon && (mergeIcon[1] = config.disabledIcon)
      return checked ? mergeIcon[disabled ? 1 : 0] : ''
    },
    backgroundColor() {
      const { disabled } = this
      return disabled ? '#F2F3F4' : '#FFFFFF'
    },
    color() {
      const { disabled, checked, config } = this
      let checkedColor = '#EE9900'
      config.checkedColor && (checkedColor = config.checkedColor)
      return checked && !disabled ? checkedColor : '#3D3D3D'
    }
  },
  methods: {
    dofCellClicked() {
      const { disabled, value } = this
      if (!disabled) {
        this.$emit('dofRadioItemChecked', { value, disabled })
      }
    }
  }
}
</script>

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

.title-text {
  font-size: 30px;
  height: 40px;
  line-height: 40px;
}
</style>
