<custom chineseName="动物识别" engName="animalClassify"></custom>
<view class="wrap">
    <view class="card-area" style="height:2.1rem">
        <image mode="aspectFill" class="display-area-image" src="{{image}}"></image>   
    </view>
    <view class="card-area" style="margin-bottom: 1.2rem;">
        <view s-if="!loading" class="top-description border-bottom">识别结果</view>
        <view s-if="result.length>0">
            <view s-if="!loading">
                <view s-for="item in result" class="list-area border-bottom">
                    <view class="reasult-keyword">{{item.name}}</view>
                    <view class="reasult-score">
                        <view class="score-title">置信度</view>
                        <view style="display:inline-block">
                            <view class="score-info">{{item.score}}<text class="percent">%</text></view>
                            <view class="score-percent">
                                <view class="percent-front {{item.score===100?'percent-100':''}}" style="width:{{item.score}}%;"></view>
                            </view>
                        </view>        
                    </view>    
                </view>
            </view>
        </view>
        <view s-else>
            <view s-if="!loading">
                <view class="result-area">
                    <view class="result-area-fail">未检测到动物</view>
                    <view class="result-area-tips">请上传包含动物的清晰图片</view>
                </view>
            </view>
        </view>
    </view>
    <view class="swan-security-padding-bottom flex-button">
        <button type="primary" hover-class="button-hover" disabled="{{loading}}" bindtap="animalClassify">上传动物图片</button>
    </view>
</view>