import { List, Avatar, Carousel } from 'antd';

import { connect } from 'dva';

import './lamp.less'

const PositionCarousel = props => {

    const Count= 3;

    const data = [

        {

            img: "",

            createTime: '2019-11-26',

            storeName: "健之佳",

            areaNo: "871",

            drugs: "生当作人杰，死亦为鬼雄。至今思项羽，不肯过江东。",

            tel: '13122036650',

        },

        {

            img: "",

            createTime: '2019-11-29',

            storeName: "健之佳",

            areaNo: "872",

            drugs: "梧桐雨细。渐滴作秋声，被风惊碎。润逼衣篝，线袅蕙炉沈水。悠悠岁月天涯醉。一分秋、一分憔悴。紫箫吟断，素笺恨切，夜寒鸿起。又何苦、凄凉客里。负草堂春绿，竹溪空翠。落叶西风，吹老几番尘世。从前谙尽江湖味。听商歌、归兴千里。露侵宿酒，疏帘淡月，照人无寐。",

            tel: '13131231',

        },

        {

            img: "",

            createTime: '2019-11-26',

            storeName: "健之佳",

            areaNo: "873",

            drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team",

            tel: '13131231',

        },

        {

            img: "",

            createTime: '2019-11-26',

            storeName: "健之佳",

            areaNo: "874",

            drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team",

            tel: '13131231',

        },

        {

            img: "",

            createTime: '2019-11-26',

            storeName: "健之佳",

            areaNo: "876",

            drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team",

            tel: '13131231',

        },

        {

            img: "",

            createTime: '2019-11-26',

            storeName: "健之佳",

            areaNo: "888",

            drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team",

            tel: '13131231',

        }

    ];

    while (data.length % Count != 0) {

        data.push({});

    }

    function formatdrugs(drugs){

        let stringdrugs = drugs.toString();

        if (stringdrugs.length > 53){

            stringdrugs = stringdrugs.substr(0,53)+"..."

        }

        return stringdrugs;

    }

    const sliceitems = [];

    for (let i = 0; i < data.length; i += Count) {

        let endIndex = i + Count < data.length ? i + Count : data.length;

        sliceitems.push(data.slice(i, endIndex));

    }

    // console.log(sliceitems);

    const items = [];

    for (let i = 0; i < sliceitems.length; i++) {

        items.push(<div><List

            itemLayout="horizontal"

            dataSource={sliceitems[i]}

            renderItem={item => (

                <List.Item key={item.title}>

                    <List.Item.Meta

                        avatar={<Avatar src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575339764&di=04ba2b635d619b1e405be69245aad7b9&imgtype=jpg&er=1&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1702%2F12%2F8823860_13_thumb.jpg " />}

                    />

                    <div className="list-tittle">{item.areaNo + " " + item.storeName}<br />{item.tel}</div>

                    <div className="Content">{formatdrugs(item.drugs)}</div>

                    <div className="createTimeContent">{item.createTime}</div>

                </List.Item>

            )}

        /></div>)

    }

    // console.log(items)

    return (

        <div style={{ backgroundColor: "#070f2d" }}>

            <Carousel autoplay dotPosition={"right"} dots={false}>

                {items}

            </Carousel>

        </div>

    );

}

export default connect()(PositionCarousel);

.list-tittle{

  color: white;

  width: 20%;

  height: 80px;

  overflow: hidden;

}

.Content{

  color: white;

  width: 50%;

  height: 80px;

  overflow: hidden;

}

.createTimeContent{

  margin-left: 1%;

  color:white;

  overflow: hidden;

  height: 80px;

  width: 19%;

  line-height: 80px;

}