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

<template>
  <lc-cell :label="label"
    :icon="checkIcon"
    :label-style="{color: textColor}"
    :icon-style="iconStyle"
    :has-top-border="hasTopBorder"
    :has-bottom-border="hasBottomBorder"
    @LcCellClicked="LcCellClicked"
    :accessible="true"
    :aria-label="`${label},状态为${checked ? '已选中' : '未选中'},${disabled ? '不可更改' : '点击可切换'}`">
  </lc-cell>
</template>

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

<script>
  import LcCell from '../lc-cell';
  import { CHECKED, UNCHECKED, CHECKED_DISABLED, UNCHECKED_DISABLED } from './type'

  export default {
    components: { LcCell },
    props: {
      hasTopBorder: {
        type: Boolean,
        default: false
      },
      hasBottomBorder: {
        type: Boolean,
        default: false
      },
      label: {
        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: () => ({})
      },
      labelStyle: {
        type: Object,
        default: () => ({})
      }
    },
    data: () => ({
      icon: [CHECKED, UNCHECKED, CHECKED_DISABLED, UNCHECKED_DISABLED],
      innerChecked: false,
      iconStyle: {
        width: '46px',
        height: '46px'
      },
    }),
    computed: {
      checkIcon () {
        const { icon, disabled, innerChecked, config } = this;
        const mergeIcon = [...icon];

        config.checkedIcon && (mergeIcon[0] = config.checkedIcon);
        config.unCheckedIcon && (mergeIcon[1] = config.unCheckedIcon);
        config.checkedDisabledIcon && (mergeIcon[2] = config.checkedDisabledIcon);
        config.unCheckedDisabledIcon && (mergeIcon[3] = config.unCheckedDisabledIcon);
        if (disabled) {
          return mergeIcon[innerChecked ? 2 : 3];
        } else {
          return mergeIcon[innerChecked ? 0 : 1];
        }
      },
      textColor () {
        const { innerChecked, disabled, config } = this;
        const checkedColor = innerChecked ? ( config.checkedColor ? config.checkedColor : '#4A4A4A') : '#4A4A4A';
        return !disabled ? checkedColor : '#7A7A7A';
      }
    },
    watch: {
      checked (newChecked) {
        this.innerChecked = newChecked;
      }
    },
    created () {
      const { checked } = this;
      this.innerChecked = checked;
    },
    methods: {
      LcCellClicked () {
        const { disabled, innerChecked, value } = this;
        if (!disabled) {
          this.innerChecked = !innerChecked;
          this.$emit('LcCheckboxItemChecked', { value, checked: this.innerChecked })
        }
      }
    }
  }
</script>
