/**
 * @file ListItem
 * @author qiusiqi(qiusiqi@baidu.com)
 */

import san from 'san';
import {TouchRipple, CenterRipple} from '../Ripple';
import Icon from '../Icon';

export default san.defineComponent({

    template: `
        <div class="sm-list-item {{listItemClass}}"
            on-click="toggleList($event)"
            style="{{ listItemStyle }}"
        >
            <div class="sm-list-item-content" style="{{ itemContentStyle }}">
                <div class="sm-list-item-left"><slot name="left"></slot></div>
                <p class="sm-list-item-primary-text" 
                    san-if="primaryText"
                >{{ primaryText }}</p>
                <p class="sm-list-item-secondary-text" 
                    style="{{ secondaryTextStyle }}" 
                    san-if="secondaryText"
                >{{ secondaryText | raw }}</p>
            </div>
            <san-touch-ripple san-if="!disableRipple && !disabled" />
            <div class="sm-list-item-right" san-if="!toggleNested"><slot name="right"></slot></div>
            <div class="sm-list-item-expand" 
                san-if="toggleNested" 
                on-click="toggleList($event, 'EXPAND')"
            >
                <san-icon>expand_{{ open | listOpenIcon }}</san-icon>
                <san-center-ripple />
            </div>
            <div class="sm-list-item-nested {{ open | listOpen }}" style="{{ nestedListStyle }}">
                <slot name="nested"></slot>
            </div>

        </div>
    `,

    components: {
        'san-touch-ripple': TouchRipple,
        'san-center-ripple': CenterRipple,
        'san-icon': Icon
    },

    messages: {
        'UI:nested-counter'(arg) {
            let target = arg.value;

            target.set('nestedLevel', target.get('nestedLevel') + 1);
            this.dispatch('UI:nested-counter', target);
        }
    },

    initData() {
        return {
            nestedLevel: 1,
            secondaryTextLines: 1
        };
    },

    filters: {
        listOpenIcon(open) {
            return open ? 'less' : 'more';
        },
        listOpen(open) {
            return open ? '' : 'hide';
        }
    },

    computed: {
        listItemClass() {
            return (this.data.get('disabled') ? 'disabled' : '')
                + (this.data.get('inset') ? ' inset' : '')
                + (this.data.get('secondaryTextLines') > 1 ? ' three-lines' : '')
                + (
                    this.data.get('selectValue')
                    && this.data.get('selectValue') === this.data.get('value') ? ' selected' : ''
                );
        },
        itemContentStyle() {
            return {
                'margin-left': (this.data.get('nestedLevel') - 1) * 16 + 'px',
                'padding-left': this.data.get('hasLeft') ? '72px' : '16px',
                'padding-right': this.data.get('hasRight') ? '56px' : '16px'
            };
        },
        secondaryTextStyle() {
            return {
                '-webkit-line-clamp': this.data.get('secondaryTextLines')
            };
        }
    },

    inited() {
        this.transBoolean('inset');
        this.transBoolean('disabled');
        this.transBoolean('toggleNested');
        this.transBoolean('disableRipple');
        this.transBoolean('primaryTogglesNestedList');
        this.transBoolean('initiallyOpen');
        this.data.set('open', this.data.get('initiallyOpen'));

        this.dispatch('UI:nested-counter', this.data);
        this.dispatch('UI:list-item-attached');
    },

    attached() {
        let slotChilds = this.slotChilds;
        let hasLeft = true;
        let hasRight = true;

        for (let slot of slotChilds) {
            if (slot.name === 'left') {
                hasLeft = false;
            }
            if (slot.name === 'right') {
                hasRight = false;
            }
        }

        this.data.set('hasLeft', hasLeft);
        this.data.set('hasRight', hasRight);
    },

    toggleList(evt, driver) {
        evt.stopPropagation();

        if (this.data.get('disabled')) {
            return;
        }

        if (driver !== 'EXPAND') {
            this.dispatch('UI:list-item-selected');

            if (!this.data.get('primaryTogglesNestedList')) {
                return;
            }
        }

        let open = this.data.get('open');
        this.data.set('open', !open);

        this.fire('nestedListToggle', open);
    },

    transBoolean(key) {
        let value = this.data.get(key);
        this.data.set(key, value === 'false' ? false : !!value);
    }
});

@@ -562,33 +562,32 @@
 em-primary-text%22
- 
 %0A               
@@ -705,17 +705,16 @@
 ry-text%22
- 
 %0A       
@@ -758,17 +758,16 @@
 tyle %7D%7D%22
- 
 %0A       
@@ -1082,17 +1082,16 @@
 -expand%22
- 
 %0A       
@@ -1120,17 +1120,16 @@
 eNested%22
- 
 %0A       
@@ -3541,24 +3541,25 @@
 ttached() %7B%0A
+%0A
         let 
@@ -3588,16 +3588,17 @@
 Childs;%0A
+%0A
         
@@ -3611,19 +3611,20 @@
 sLeft = 
-tru
+fals
 e;%0A     
@@ -3645,11 +3645,12 @@
 t = 
-tru
+fals
 e;%0A%0A
@@ -3746,36 +3746,35 @@
       hasLeft = 
-fals
+tru
 e;%0A            %7D
@@ -3838,28 +3838,27 @@
  hasRight = 
-fals
+tru
 e;%0A         
@@ -3912,24 +3912,24 @@
 , hasLeft);%0A
-
         this
@@ -3957,24 +3957,25 @@
  hasRight);%0A
+%0A
     %7D,%0A%0A    

修复在 san@3.1.2 上 slotChilds 的变化带来的问题