<!-- mode-title.swan-->
<import src="../common/templates/mode-title.swan" />

<view class="wrap">
    <custom chineseName="时间轴" engName="timeline"></custom>
    <view class="container">
        <view class="card-panel">
            <template is="mode-title" title="单条信息样式" />
            <view class="comp-wrap">
                <smt-timeline
                    s-for="item, index in options"
                    status="{{item.status}}"
                    title="{{item.title}}"
                    desc="{{item.desc}}"
                    has-tail="{{item.hasTail}}"
                    icon-color="{{item.iconColor}}"
                    timeline-class="comp-timeline"
                    desc-style="
                        {{index === options.length - 1 ? 'font-weight: 700;' : ''}}
                        {{item.status === 'error' ? 'color: #f7534f' : ''}}
                    "
                >
                    {{item.info}}
                </smt-timeline>
            </view>
        </view>
        <view class="card-panel">
            <template is="mode-title" title="多条信息样式" />
            <view class="comp-wrap">
                <smt-timeline
                    s-for="item, index in options2"
                    status="{{item.status}}"
                    desc="{{item.desc}}"
                    has-tail="{{item.hasTail}}"
                    icon-color="{{item.iconColor}}"
                    timeline-class="comp-timeline"
                    desc-style="{{
                        index === options.length - 1
                        ? 'font-weight: 700;'
                        : ''
                    }}"
                >
                    <view
                        class="comp-info-wrap"
                        s-for="descInfo in item.descInfo"
                    >
                        <view class="comp-info">
                            {{descInfo.info}}
                        </view>
                        <view class="comp-title">
                            {{descInfo.title}}
                        </view>
                    </view>
                </smt-timeline>
            </view>
        </view>
    </view>
</view>

