# src/ImageList.js File

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

    /**
     * 图片列表组件<br/>
     * - 通过images配置图片列表数据，数组格式，其中图片地址对应`image`字段，名称对应`title`字段，描述对应`desp`字段。
     * - 通过column设置图片列表的列数，1-8列。
     * - 通过titleField设置名称的格式，以`#`代表名称；通过despField设置描述的格式，以`#`代表描述。
     * - 通过otherParams设置额外的字段和格式。
     * - 通过clickCallback设置点击单个图片块的回调函数，返回当前图片的所有数据。
     * - 可以自定义内容children，当有内容时除了column其他属性不起作用。
     *
     * 主要属性和接口：
     * - images:图片列表数据，默认[]。<br>
     * ```code
     * json:
     * {
     *  "data": [
     *      {
     *          "image": "http://img5.duitang.com/uploads/item/201602/11/20160211214958_RhdCY.jpeg",
     *          "title": "图1",
     *          "desp": "关于图是一个...",
     *          "score": 1
     *      },
     *      ...
     *  ]
     * }
     * ...
     * <ImageList images={this.state.images} />
     * ```
     * - column:列表的列数，默认1。<br>
     * 如: `<ImageList column={2}  images={this.state.images} />`
     * - titleField:名称的格式，以`#`代表名称，默认"#"despField:描述的格式，以`#`代表描述，默认"#"。<br>
     * 如: `<ImageList images={this.state.images} titleField={"姓名: #"} despField={"描述: #"} />`
     * - otherParams:额外的字段和格式，默认{}。<br>
     * 如: `<ImageList images={this.state.images} otherParams={{"score":"分数: #"}} />`
     * - clickCallback:点击单个图片块的回调函数。<br>
     * 如: `<ImageList images={this.state.images} clickCallback={(data)=>{console.log(data);}} />`
     * - 自定义内容:children，当有内容时除了column其他属性不起作用。
     * ```code
     * <ImageList column={4}>
     *  {
     *      this.state.images.map((data,index)=>{
     *          return (
     *              <dl key={index}>
     *                  <dd>
     *                      <p>{data.title}</p>
     *                      <p>{data.desp}</p>
     *                  </dd>
     *                  <dt>
     *                      <img src={data.image} alt={data.title} />
     *                  </dt>
     *              </dl>
     *          )
     *      })
     *  }
     * </ImageList>
     * ```
     *
     * @class ImageList
     * @module 操作类组件
     * @extends Component
     * @constructor
     * @since 1.7.0
     * @demo imagelist|image-list.js {展示}
     * @show true
     * */

    export default class ImageList extends Component{
        static propTypes = {
            /**
             * 样式前缀
             * @property classPrefix
             * @type String
             * @default 'image-list'
             * */
            classPrefix: PropTypes.string,
             /**
             * 图片列表数据
             * @property images
             * @type Array
             * @default []
             * */
            images: PropTypes.array,
            /**
             * 图片列数
             * @property column
             * @type Number
             * @default 1
             * */
            column: PropTypes.number,
            /**
             * 名称格式
             * @property titleField
             * @type String
             * @default "#"
             * */
            titleField: PropTypes.string,
            /**
             * 描述格式
             * @property despField
             * @type String
             * @default "#"
             * */
            despField: PropTypes.string,
             /**
             * 其他参数，额外增加的可自定义的字段
             * @property otherParams
             * @type Object
             * @default {}
             * */
            otherParams: PropTypes.object,
            /**
             * 点击单个图片块的回调函数,返回当前图片的所有信息
             * @method clickCallback
             * @type Function
             * @default null
             **/
            clickCallback: PropTypes.func
        };

        static defaultProps ={
            images: [],
            column: 1,
            titleField: "#",
            despField: "#",
            otherParams: {},
            classPrefix:'image-list',
            classMapping : {}
        };

        constructor(props,context){
            super(props,context);
        }

        formatParams(format, param){
            if(param && format.indexOf('#')!=-1){
                return format.replace('#',param);
            }
        }

        clickCallback(data){
            let {clickCallback} = this.props;
            if(clickCallback) clickCallback(data);
        }

        renderImageList(){
            let {images, column, titleField, despField, otherParams, className, children} = this.props;

            if(children){
                return <div className={classnames(this.getProperty(true), className, setPhoenixPrefix("column-"+column))}>{children}</div>
            }else{
                return (
                    <div className={classnames(this.getProperty(true), className, setPhoenixPrefix("column-"+column))}>
                        {
                            images.map((data,index)=>{
                                return (
                                    <dl key={index} onClick={::this.clickCallback.bind(this,data)}>
                                        <dt>
                                            <img src={data.image} alt={data.title} />
                                        </dt>
                                        <dd>
                                            <p className={setPhoenixPrefix('image-title')}>{this.formatParams(titleField, data.title)}</p>
                                            <p className={setPhoenixPrefix('image-desp')}>{this.formatParams(despField, data.desp)}</p>
                                            {this.renderRest(otherParams, data)}
                                        </dd>
                                    </dl>
                                )
                            })
                        }
                    </div>
                );
            }
        }

        renderRest(otherParams, data){
            var newRest = [];

            for(let i in otherParams){
                newRest.push(<p key={i}>{this.formatParams(otherParams[i], data[i])}</p>);
            }

            return newRest;
        }

        render(){
            return this.renderImageList();
        }
    }