<template>
 
    <div class="page-loadmore">
        <div class="page-loadmore-wrapper" ref="wrapper" style="height: calc( 100vh - 1rem );overflow-y: scroll;">
                <van-empty v-if="noDevice" image="search" description="查询不到名下有任何设备">
                    <router-link to="/devices" >
                        <van-button plain round type="info">前往绑定设备</van-button>
                    </router-link>
                </van-empty>
                <div  v-for="(item,i) in list" :key="i">
                    <van-divider style="margin:0" />
                    <!-- <router-link :to="'voice/'+item.imei +'/' + item.device_name" class="voice-device-item"> -->
                    <router-link :to="{name: 'voice', params: { imei:item.imei, name: item.device_name }}" class="voice-device-item">
                        <div>
                            <van-image
                            round
                            width="1rem"
                            height="1rem"
                            fit="cover"
                            :src="item.avatar || default_avatar"
                            />
                        </div>

                        <div class="left-info">
                            <span>{{item.device_name}}({{item.imei}})</span>
                            <span style="font-size:12px;color: darkgray;">最后一次互动:{{item.dateTime}}</span>
                        </div>
                        <div class="right-info">
                            <span style="align-self: end;">
                                <van-badge v-if="item.unreadCount >=1 " :content="item.unreadCount" max="99" />
                            </span>
                            {{item.awayTime}}前
                        </div>

                    </router-link>
                    
                </div>
                
        </div>
    </div>

</template>
<script>
import '@/assets/css/wxindex.css';
import Vue from 'vue';
import { Badge, Image as VanImage, Divider, Button  } from 'vant';

Vue.use(Divider);
Vue.use(VanImage);
Vue.use(Badge);
export default {
    data() {
        return {
            noDevice: false,
            list: [ ],
            default_avatar: '/static/avatar_default.png',
        };
    },
    methods:{
        getChatList(){
            let that = this;
            that.$http
            .get("/getChatDevices&userid=" + localStorage.getItem("userid"))
            .then(res => {
                let resp = res.data;
                if(!resp.success){
                    // this.$dialog.toast({
                    //     mes:resp.message
                    // });
                    this.noDevice = true;
                    return;
                }
                console.log(resp);
                that.list = resp.data
            })
            .catch(res => {
                console.log(res);
            });
        }
    },
    mounted(){
        this.getChatList();
    }
        

}
</script>

<style scoped>
  .voice-device-item{
      padding: 4px;
      min-height: 1rem;
      display: flex;
      position: relative;
      align-items: center;
  }
  .left-info{
      display: flex;
      flex-direction: column;
  }
  .right-info{
      position: absolute;
      display: flex;
      flex-direction: column;
      /* align-items: center; */
      color: darkgray;
      right: 5px;
      /* bottom: 7px; */
  }
</style>