<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{.topic.topicName}}</title>
    <link rel="stylesheet" href="/api/static/css/index.css">
    <link rel="stylesheet" href="/api/static/css/topic.css">
    <meta name="description" content="{{.topic.topicDesc}}">
</head>
<body>
{{template "NavigationBar.tmpl" .}}

<div class="topic">

    {{if ne .topic.topic.topicPageImage ""}}
    <div class="topic-image"
         style="background-image:url('{{.topic.topicPageImage}}');">
        <div class="image-bottom"></div>
    </div>
    {{else}}
    <div class="topic-image" style="">
        <div class="image-bottom"></div>
    </div>
    {{end}}
    <!--    锚点-->
    <div class="topic-anchor">
        <div class="topic-anchor-to-left anchor-arrow">
            <div class="anchor-arrow-body anchor-div" @click="setFirstItemIndex(firstItemIndex-1)"></div>
        </div>
        <div class="topic-anchor-body anchor-div">
            {{range $index, $type :=.types}}
            <div class="topic-anchor-item" onclick="jumpClass('{{$index}}')">
                <div class="anchor-item-body">
                    <div class="topic-anchor-item-img">
                        <img src="{{.type.typeImage}}"/>
                    </div>
                    <div class="topic-anchor-item-text"><span>{{ .type.typeName }}</span></div>
                </div>
            </div>
            {{end}}
        </div>

        <div class="topic-anchor-to-right anchor-arrow">
            <div class="anchor-arrow-body anchor-div"
                 v-show="getShowStatus('right')"
                 @click="setFirstItemIndex(firstItemIndex+1)">

            </div>
        </div>
    </div>


    <div class="topic-body">

        {{range $index, $type :=.types}}
        <div class="topic-body-list">
            <div class="topic-body-title to-class{{$index}}">
                {{ .type.typeName }}
            </div>
            <div class="topic-body-items">
                {{range .skuList}}
                <div class="topic-body-item" onclick="JumpRouter('/detail?skuId={{.id}}')">
                    <div class="topic-body-left">
                        <div class="topic-item-img">
                            <img src="{{.skuImage}}" alt="image">
                        </div>
                        <div class="topic-item-text">
                            <div class="topic-item-name">
                                {{ .skuName }}
                            </div>
                            <div class="topic-item-description">
                                {{ .price }}
                            </div>
                            <div class="topic-item-num">
                                <div class="topic-item-price">{{ .price }}</div>
                                {{$dis := discalc .price .historicalPrices}}
                                {{if and (ne $dis "0") (ne $dis "NaN")}}
                                <div class="topic-item-originalPrice">{{ .historicalPrices }}</div>
                                <div class="topic-item-discountPercentage">{{ $dis }}</div>
                                {{end}}
                            </div>
                        </div>
                    </div>
                    <div class="topic-body-right">
                        <div class="topic-item-btn">立即购买</div>
                    </div>
                </div>
                {{end}}
            </div>
        </div>
        {{end}}
    </div>
</div>

{{template "BottomBar.tmpl" .}}
</body>
</html>