<template>
    <div>
        <div style="display: flex;flex-wrap:wrap;">
            <div class="device-item" v-for="item in dataList" :key="item.id" >
                <div class="top">
<!--                    <Icon type="ios-link" class="link" />-->
                    <div class="icon"><svg-icon  :icon-class=" item.is_running ?'device_busy': 'device_free' " :class="! item.is_running ?'status-color2': 'status-color1'"/></div>
                    <span v-text="! item.is_running ? '空闲中': '占用中'" :class="! item.is_running ?'': 'status-color1'"></span>
                    <Icon type="ios-link" class="link"  @click="copyLink(item)"/>
                    <Button size="small" type="primary"  class="button"  v-if="! item.is_running" @click="exec(item)">立即使用</Button>
                    <Button size="small"  disabled class="button" style="background-color: #f90;color: white;border-color: #f90"  v-else>运行中...</Button>
<!--                    <Icon type="md-link" class="link"/>-->

                </div>

                <div>
                    <div class="title">{{item.name}}</div>
                    <div class="div-inline">
                        <div class="left">
                            <img src="https://inside.testin.cn/cfgfiles/images/model/1632454023561/f6aec1729de246f99e672b301dadca88.jpg"/>
                            <!--                        <img :src="item.pic_url" />-->
                        </div>

                        <div class="device-info">
                            <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; ">型号:{{item.model}}</div>
                            <div >版本号:{{item.version}}</div>
                        </div>

                    </div>
                </div>

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

</template>

<script src="./phoneCard.ts"></script>

<style scoped lang="less" src="./phoneCard.less"></style>
