<template>
  <view class="ml-tree-node" :class="[className || '', {'is-disabled': isDisabled}]">
    <view class="ml-tree-node-warpper">
      <view v-if="showCheckbox" class="ml-tree-node-checkbox" :class="{'is-checked': checkCheckbox, 'is-indeterminate': indeterminate}">
        <view class="ml-tree-node-checkbox-icon" @click="changeCheckboxEvent">
          <ml-icon :name="checkCheckbox ? 'checkbox-checked' : (indeterminate ? 'checkbox-indeterminate' : 'checkbox-unchecked')"></ml-icon>
        </view>
      </view>
      <view class="ml-tree-node-expand" :class="{'is-expand': hasExpand}">
        <view v-if="hasChild" class="ml-tree-node-expand-icon" @click="expandEvent">
          <ml-icon name="arrow-right-filling"></ml-icon>
        </view>
      </view>
      <view class="ml-tree-node-name">{{ nodeContent }}</view>
    </view>
    <view v-if="hasChild && hasExpand" class="ml-tree-node-childs">
      <ml-tree-node v-for="(item, index) in nodeChilds" :key="index" :node-data="item"></ml-tree-node>
    </view>
  </view>
</template>

<script>
import XEUtils from 'xe-utils'

export default {
  name: 'MlTreeNode',
  props: {
    nodeData: Object
  },
  inject: {
    tree: {
      from: 'mlTree',
      default: null
    }
  },
  data () {
    return {
      treeData: []
    }
  },
  computed: {
    nodeKey () {
      return this.nodeData ? this.nodeData[this.keyField] : null
    },
    nodeContent () {
      return this.nodeData ? XEUtils.toValueString(this.nodeData[this.titleField]) : ''
    },
    nodeChilds () {
      return this.nodeData ? (this.nodeData[this.childrenField] || []) : []
    },
    titleField () {
      return this.tree ? this.tree.titleField : 'name'
    },
    keyField () {
      return this.tree ? this.tree.keyField : 'key'
    },
    isDisabled () {
      return this.tree ? this.tree.disabled : false
    },
    childrenField () {
      return this.tree ? this.tree.childrenField : 'children'
    },
    indeterminateRowKeys () {
      return this.tree ? (this.tree.indeterminateRowKeys || []) : []
    },
    selectCheckboxRowKeys () {
      return this.tree ? (this.tree.selectCheckboxRowKeys || []) : []
    },
    expandRowKeys () {
      return this.tree ? (this.tree.expandRowKeys || []) : []
    },
    showRadio () {
      return this.tree ? this.tree.showRadio : false
    },
    showCheckbox () {
      return this.tree ? this.tree.showCheckbox : false
    },
    hasChild () {
      return this.nodeChilds.length > 0
    },
    hasExpand () {
      return this.expandRowKeys.includes(this.nodeKey)
    },
    indeterminate () {
      return this.showCheckbox ? this.indeterminateRowKeys.includes(this.nodeKey) : false
    },
    checkCheckbox () {
      return this.showCheckbox ? this.selectCheckboxRowKeys.includes(this.nodeKey) : false
    }
  },
  methods: {
    changeCheckboxEvent () {
      if (this.isDisabled) {
        return
      }
      if (this.tree) {
        this.tree.selectCheckboxNodeEvent({
          nodeData: this.nodeData,
          nodeKey: this.nodeKey
        })
      }
    },
    expandEvent () {
      if (this.tree) {
        this.tree.expandNodeEvent({
          nodeData: this.nodeData,
          nodeKey: this.nodeKey
        })
      }
    }
  }
}
</script>

<style lang="scss">
.ml-tree-node {
  .ml-tree-node-warpper {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 80rpx;
    border-bottom: 1px solid #e5e5e5;
  }
  .ml-tree-node-checkbox-icon {
    font-size: 1.3em;
  }
  .ml-tree-node-expand-icon {
    font-size: 1em;
  }
  &.is-disabled {
    color: rgba(0,0,0,0.5);
    .ml-tree-node-checkbox-icon {
      color: rgba(0,0,0,0.25);
    }
  }
  .ml-tree-node-checkbox {
    width: 50rpx;
    text-align: center;
    &.is-checked,
    &.is-indeterminate {
      color: $ml-theme-primary-color;
    }
  }
  .ml-tree-node-expand {
    width: 50rpx;
    text-align: center;
    &.is-expand {
      .ml-tree-node-expand-icon {
        transform: rotate(90deg);
      }
    }
  }
  .ml-tree-node-expand-icon {
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    transition: transform .1s ease-in-out;
  }
  .ml-tree-node-childs {
    padding-left: 24rpx;
  }
}
</style>
