<div class="app-data-view">
    <div class="bar-container">
        <row class="page-sort-bar" :gutter="10" type="flex" justify="start" style="margin:0px;" >
            <i-col :class="getsortClass('customername')" @click.native="sortClick('customername')">
              <span class="sort-field-text">{{$t('entities.incidentcustomer.fields.customername')}}</span>
              <span class="caret-wrapper">
                <Icon type="md-arrow-dropup" />
                <Icon type="md-arrow-dropdown" />
              </span>
            </i-col>
        </row>
    </div>
    <row class="data-view-container" v-if="items.length > 0" :gutter="20" type="flex" justify="start" style="margin:0px;">
        <a v-for="(item,index) in items" :key="index" :href = "item.starturl">
            <i-col  style="min-height: 170px;margin-bottom: 10px;">
                <el-card shadow="always" :class="[ item.isselected === true ? 'isselected' : false, 'single-card-data' ]" @click.native="handleClick(item)" @dblclick.native="handleDblClick(item)">
                    <img v-if="item.srficonpath" :src="item.srficonpath" class="single-card-img" />
                    <img v-else src="/assets/img/noimage.png" class="single-card-img" />
                    <div class="single-card-default">
                        <Tooltip :content="item.srfmajortext">
                            {{item.srfmajortext}}
                        </Tooltip>
                    </div>
                </el-card>
            </i-col>
        </a>
    </row>
    <div v-else class="app-data-empty">{{ $t('app.commonWords.noData') }}</div>
</div>