<wxs module="_" src="../common/utils.wxs" />
<wxs module="this" src="./index.wxs" />

<view class="{{classPrefix}} class" style="{{_._style(['height:' + _.addUnit(height) , style, customStyle])}}">
  <scroll-view
    scroll-y
    enhanced
    show-scrollbar="{{false}}"
    class="{{_.cls(classPrefix + '__column', [this.getTreeClass(leafLevel - level, treeOptions.length)])}} {{prefix}}-class"
    wx:for="{{treeOptions}}"
    wx:key="level"
    wx:for-index="level"
  >
    <t-side-bar
      wx:if="{{level == 0}}"
      value="{{value[level]}}"
      bind:change="onRootChange"
      t-class="{{classPrefix}}-column {{prefix}}-class-left-column"
    >
      <t-side-bar-item
        wx:for="{{treeOptions[level]}}"
        wx:key="index"
        label="{{item[labelAlias]}}"
        value="{{item[valueAlias]}}"
        t-class="{{prefix}}-class-left-item"
      />
    </t-side-bar>
    <block wx:elif="{{level != leafLevel}}">
      <view
        wx:for="{{treeOptions[level]}}"
        wx:key="index"
        bind:tap="handleTreeClick"
        data-level="{{level}}"
        data-value="{{item[valueAlias]}}"
        class="{{_.cls(classPrefix + '__item', [['active', item[valueAlias] === value[level]]])}} {{prefix}}-class-middle-item"
      >
        {{item[labelAlias]}}
      </view>
    </block>
    <t-radio-group
      wx:elif="{{!multiple}}"
      class="{{classPrefix}}__radio {{prefix}}-class-right-column"
      data-level="{{level}}"
      value="{{value[level]}}"
      bind:change="handleRadioChange"
    >
      <t-radio
        wx:for="{{treeOptions[level]}}"
        wx:key="value"
        icon="line"
        class="{{classPrefix}}__radio-item {{prefix}}-class-right-item"
        t-class-label="{{prefix}}-class-right-item-label"
        value="{{item[valueAlias]}}"
        borderless
        placement="right"
        >{{item[labelAlias]}}</t-radio
      >
    </t-radio-group>
    <t-checkbox-group
      wx:else
      class="{{classPrefix}}__checkbox {{prefix}}-class-right-column"
      value="{{value[level]}}"
      bind:change="handleRadioChange"
      data-level="{{level}}"
    >
      <t-checkbox
        wx:for="{{treeOptions[level]}}"
        wx:key="value"
        placement="right"
        icon="line"
        class="{{prefix}}-class-right-item"
        t-class-label="{{prefix}}-class-right-item-label"
        borderless
        value="{{item[valueAlias]}}"
        >{{item[labelAlias]}}</t-checkbox
      >
    </t-checkbox-group>
  </scroll-view>
</view>