<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 17/07/28. -->

<template>
  <div>
    <lc-cell :has-top-border="hasTopBorder"
              :has-bottom-border="hasBottomBorder"
              :cell-style="{backgroundColor:backgroundColor}"
              @LcCellClicked="LcCellClicked"
              :accessible="true"
              :aria-label="`${title},状态为${checked?'已选中':'未选中'},${disabled?'不可更改':''}`"
              v-if="config.type == 'normal' || config.type == undefined">
      <text class="title-text"
            :style="{color:textColor, fontSize:fontSize}"
            slot="title">{{title}}</text>
      <image :src="radioIcon"
            v-if="radioIcon"
            slot="value"
            :style="iconStyle"></image>
    </lc-cell>
    <div :style="{backgroundColor:backgroundColor}">
    <div :style="cellStyle"
         v-if="config.type == 'traditional'" 
         @click="LcCellClicked">
      <image :src="radioIcon"
            v-if="radioIcon"
            :style="iconStyle"></image>
      <text class="title-text"
            :style="{color:textColor, fontSize:fontSize}"
            slot="title">{{title}}</text>
    </div>
    </div>
  </div>
</template>

<style scoped>
  .title-text {
    flex:1;
    font-size: 34px;
    letter-spacing: 0.25px;
    line-height: 34px;
  }
</style>

<script>
  import LcCell from '../lc-cell';
  import { CHECKED, DISABLED } from './type.js'

  export default {
    components: { LcCell },
    props: {
      hasTopBorder: {
        type: Boolean,
        default: false
      },
      hasBottomBorder: {
        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: () => ({})
      },
      iconStyle: {
        type: Object,
        default: () => ({
          width: "32px",
          height: "32px"
        })
      },
      cellStyle: {
        type: Object,
        default: () => ({
          "flex-direction": "row",
          "align-items": "center",
          "padding-top": "28px",
          "padding-bottom": "28px",
          "padding-left": "24px"
        })
      }
    },
    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] : (config.uncheckedIcon ? config.uncheckedIcon : '');
      },
      backgroundColor () {
        const { disabled, config, checked } = this;
        var color = checked ? (config.checkedColor ? config.checkedColor : '#ffffff') : (config.unCheckedColor ? config.unCheckedColor : '#ffffff');
        color = (config.checkedMode == "background") ? color : "#ffffff";
        return disabled ? '#F2F3F4' : color;
      },
      textColor () {
        const { disabled, config, checked } = this;
        var color = checked ? (config.checkedColor ? config.checkedColor : (config.fontColor ? config.fontColor : '#4A4A4A')) : (config.unCheckedColor ? config.unCheckedColor : (config.fontColor ? config.fontColor : '#4A4A4A'));
        color = (config.checkedMode == "text" || config.checkedMode == undefined) ? color : (config.fontColor ? config.fontColor : '#4A4A4A');
        return disabled ? '#7A7A7A' : color;
      },
      fontSize() {
        const { config } = this;
        const fontSize = config.fontSize ? config.fontSize : '34px';
        return fontSize;
      }
    },
    methods: {
      LcCellClicked () {
        const { disabled, value } = this;
        if (!disabled) {
          this.$emit('LcRadioItemChecked', { value, disabled })
        }
      }
    }
  }
</script>
