# src/Tabset.js File

    import React,{PropTypes, Component} from 'react';
    import ClassNameMixin from './utils/ClassNameMixin';
    import classnames from 'classnames';
    import {setPhoenixPrefix} from './utils/Tool';
    import Tab from './Tab.js';

    /**
     * <h5>tab选项卡，主要包括一下两个组件:</h5>
     * <strong><a href='../classes/Tabset.html'>tabset</a></strong><br/>
     * <strong><a href='../classes/Tab.html'>tab</a></strong><br>
     * <h6>点击以上链接或者左侧导航栏的组件名称链接进行查看</h6>
     * @module 选项卡
     * @main 选项卡
     * @static
     *
     */
    /**
     * tabset选项卡组件<br/>
     * - 通过activeIndex指定默认的选中tab的索引值。
     * - 选项卡默认横排, 可通过vertical设置为竖排。
     * - 当设置为vertical后, 可通过width设置tab标题部分的宽度占比。
     * - 可通过onTabsetChange设置点击选项卡的回调函数。
     * - 可自定义className等常用属性以及事件。
     *
     * 具体属性和接口如下：
     * - activeIndex:默认选中的标签卡索引值，默认0第一个tab
     * - vertical:是否竖排，如需要直接添加改属性即可，默认不竖排
     * - width:选项卡头部的宽度，取值0-100之间, 只有设置vertical下生效, 默认20
     * - onTabsetChange:点击选项卡执行的回调函数
     *
     * 示例:
     * - 横排
     * ```code
     *     <Tabset activeIndex ={this.state.index} onTabsetChange={(index)=>{console.log(index);}>
     *         <Tab heading='标题1' className='tab-test'>
     *             横向内容1
     *         </Tab>
     *         <Tab heading='标题2' clickCallback={(index)=>{console.log(index);}>
     *             横向内容2
     *         </Tab>
     *     </Tabset>
     * ```
     * - 竖排
     * ```code
     *     <Tabset vertical width={30} activeIndex ={this.state.index} onTabsetChange={(index)=>{console.log(index);}>
     *         <Tab heading='标题1'>
     *             竖向内容1
     *         </Tab>
     *         <Tab heading='标题2' clickCallback={(index)=>{console.log(index);}>
     *             竖向内容2
     *         </Tab>
     *     </Tabset>
     * ```
     *
     * @class Tabset
     * @module 选项卡
     * @extends Component
     * @constructor
     * @since 0.1.0
     * @demo tab|tab.js{展示}
     * @show true
     * */
    @ClassNameMixin
    export default
    class Tabset extends Component {

        static propTypes={
            /**
             * 指定默认选中的选项卡，默认为0
             * @property activeIndex
             * @type Number
             * @default 0
             * */
            activeIndex:PropTypes.number,
            /**
             * 是否竖排
             * @property vertical
             * @type Boolean
             * @default false || null
             * */
            vertical: PropTypes.bool,
            /**
             * 设置选项卡头部的宽度，只有竖排的情况下才起作用
             * @property width
             * @type Number
             * @default '20'
             * */
            width: PropTypes.number,
            /**
             * 点击事件的回调函数,返回当前选中项
             * @method onTabsetChange
             * @type Function
             * @default null
             * */
            onTabsetChange: PropTypes.func
        };

        static defaultProps = {
            activeIndex: 0,
            vertical: false,
            width: 20,
            onTabsetChange: null
        };

        constructor(props, context) {
            super(props, context);
            this.state = {
                activeIndex: this.props.activeIndex
            };
            /**
             * 首次进入获取active
             * */
            // this.props.onTabsetChange && this.props.onTabsetChange(this.props.activeIndex);
        }

        /**
         * props再次改变，再次判断active
         * */
        componentWillReceiveProps(nextProps){
            this.state.activeIndex != nextProps.activeIndex && this.changeActive(nextProps.activeIndex);
        }

        isVertial() {
            return !!this.props.vertical ? 'vertical '+setPhoenixPrefix('row') : '';
        }

        isActive(index) {
            return index == this.state.activeIndex ? 'active' : '';
        }

        changeActive(index) {
            if (index != this.state.activeIndex) {
                this.setState({
                    activeIndex: index
                })
            }
            this.tabHandler(index);
        }

        getClass(flag) {
            let vertical = this.props.vertical;
            if(flag){
                let cols = setPhoenixPrefix('col-'+this.props.width);
                return !vertical ? setPhoenixPrefix('row'): setPhoenixPrefix('col')+' '+cols;
            }else{
                return vertical ? setPhoenixPrefix('col'): '';
            }

        }

        tabHandler(index){
            let {onTabsetChange} =this.props;
            onTabsetChange && onTabsetChange(index);
        }

        render() {
            let panels = [];
            let {className,...other} = this.props;
            let headings = React.Children.map(this.props.children, (options, index)=> {
                let { vertical,...other} = options.props;
                let opt = React.cloneElement(options, {
                    key:index,
                    index: index,
                    activeIndex: this.state.activeIndex,
                    changeActive: this.changeActive.bind(this),
                    vertical: this.props.vertical
                });

                let panel = <div className={classnames(
                        setPhoenixPrefix('tab-panel'),
                       this.isActive(index),
                       options.props.className
                    )} key={index}>
                    {options.props.children}
                </div>;
                panels.push(panel);
                return opt;
            }, this);

            return (
                <div className={classnames(
                    setPhoenixPrefix('tabs'),
                    this.isVertial(),
                    className
                )}  {...other}>
                    <ul className={this.getClass(true)}>
                        {headings}
                    </ul>
                    <div className={classnames(
                        this.getClass(false),
                        setPhoenixPrefix('tab-bd')
                    )}>
                        {panels}
                    </div>
                </div>)
        }
    }