<template>
    <div>
        <van-sticky>
            <van-dropdown-menu >
                <van-dropdown-item v-model="typeCond" :options="typeOptions" @change="condSet(1, $event)" />
                <van-dropdown-item v-model="imei" :options="imeiOptions"  @change="condSet(2, $event)" />
            </van-dropdown-menu>
        </van-sticky>

        <van-pull-refresh v-model="refreshing" @refresh="refresh" style="background:white;margin-top:0.01rem;margin-bottom:1rem">
            <van-list
                v-model="loading"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                :finished="finished"
                finished-text="没有更多了"
                @load="getAlarmRecords"
                :immediate-check="true"
            >
        <!-- <div style="background:white;margin-top:0.01rem;margin-bottom:1rem"> -->

            <div class="list-item" v-for="item in records" :key="item.id">
                <div style="display:flex;align-items:center">
                    <!-- <van-icon name="warn-o" color="#1989fa" size="0.5rem" /> -->
                    <van-icon :name="alarmStyle[item.alarm_type].icon" :color="alarmStyle[item.alarm_type].iconcolor"  size="0.5rem" />
                    <div class="item-left">
                        <div>{{alarmStyle[item.alarm_type].letf_text}}</div>
                        <div style="color:darkgray">{{item.imei}}</div>
                    </div>
                </div>
                <div class="item-middle">
                    <van-tag :color="alarmStyle[item.alarm_type].iconcolor" :class="alarmStyle[item.alarm_type].uniclass" plain>{{item.alarm_type_str}}</van-tag>
                </div>
                <div class="item-right">{{item.created_at_str}}</div>
            </div>
        <!-- </div> -->

            </van-list>
        </van-pull-refresh>




    </div>
    
</template>
<script>
import Vue from 'vue';
import { DropdownMenu, DropdownItem,Tag ,Icon, Sticky  } from 'vant';

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Tag );
Vue.use(Icon);
Vue.use(Sticky);
export default {
  data() {
    return {
      typeCond: '',
      imei: '',
      page: 0,
      records: [],
      refreshing: false,
      loading: false,
      finished:false,
      error: false,
      typeOptions: [
        { text: '所有告警', value: '' }
      ],
      imeiOptions: [
        { text: '所有设备', value: '' },
      ],

        alarmStyle : {
            "low_bat": {icon: 'flower-o', uniclass: 'item-tag-low_bat', iconcolor:  '#ff0800', letf_text:'电量提醒'},
            "low_recover": {icon: 'flower-o', uniclass: 'item-tag-low_recover' , iconcolor:  '#2662f2', letf_text:'电量提醒'},
            "charge_full": {icon: 'flower-o', uniclass: 'item-tag-charge_full' , iconcolor:  '#2662f2', letf_text:'电量提醒'},
            "is_charge": {icon: 'flower-o', uniclass: 'item-tag-charge_full' , iconcolor:  '#2662f2', letf_text:'电量提醒'},
            "press": {icon: 'bulb-o', uniclass: 'item-tag-low_bat' , iconcolor:  '#ff0800', letf_text:'设备告警'},
            "fence_out": {icon: 'aim', uniclass: 'item-tag-low_bat', iconcolor:  '#ff0800' , letf_text:'围栏告警'},
            "fence_in": {icon: 'aim', uniclass: 'item-tag-low_bat' , iconcolor:  '#ff0800', letf_text:'围栏告警'},
        }
      
    };
  },
  methods:{
    //getAlarmTypeOptions
    getAlarmTypeOptions(){
        let that = this;
        that.$http
        .get("/getAlarmTypeOptions")
        .then(res => {
            let resp = res.data;
            if(!resp.success){
                this.$dialog.toast({
                    mes:resp.message
                });
                return;
            }
            that.typeOptions = that.typeOptions.concat(resp.data)  
            console.log(resp)
        })
        .catch(res => {
            console.log(res);
        });
    },
    condSet(type, value){
        if(type === 1){
            this.typeCond = value
        }
        if(type === 2){
            this.imei = value
        }
        this.refreshing = true;
        this.refresh();
    },

    getDeviceOptions(){
        let that = this;
        that.$http
        .get("/getMyDevices&openid=" + localStorage.getItem('openid') + '&userid=' + localStorage.getItem('userid')  )
        .then(res => {
            let resp = res.data;
            if(!resp.success){
                this.$dialog.toast({
                    mes:resp.message
                });
                return;
            }

            let arr = [];
            resp.data.forEach(item => {
                arr.push({
                    text: item.device_name + '(' + item.imei + ')',
                    value: item.imei
                })
            });

            that.imeiOptions = that.imeiOptions.concat(arr)  
            console.log(resp)
        })
        .catch(res => {
            console.log(res);
        });



    },

    getAlarmRecords(){
        let that = this;
        if (this.refreshing) {
            this.courseList = [];
            this.refreshing = false;
            this.page = 0;
        }
        this.page += 1;


        that.$http
        .get("/getAlarmList&openid=" + localStorage.getItem('openid') + '&userid=' + localStorage.getItem('userid') + 
        '&alarmType=' + that.typeCond + '&imei=' + that.imei + '&page=' + that.page)
        .then(res => {
            let resp = res.data;
        //     if(resp.success){
        //         that.records = that.records.concat( resp.data.list );
        //         let total = parseInt(resp.data.total);
        //         let pageSize= parseInt(resp.data.pageSize);
        //         if (total <= pageSize * this.page) {
        //             this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
        //         }
        //     }else{
        //         this.$notify({
        //             message: resp.message || '出错了',
        //         })
        //         this.page -= 1;
        //     }
        //     that.$refs.pullrefreshDemo.$emit('ydui.pullrefresh.finishLoad');
        //     that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

            
        //     console.log(resp)
        // })
        // .catch(res => {
        //     console.log(res);
        // });
            if(resp.success){

                this.records = this.records.concat(resp.data.list) ;

                let total = parseInt(resp.data.total);
                let pageSize = parseInt(resp.data.pageSize);
                if (total <= pageSize * this.page) {
                    this.finished = true;
                }

            }else{
                this.$notify({
                    message: resp.message || '出错了',
                })
                this.page -= 1;
                this.error = true;
            }

            this.loading = false;
        })
        .catch(() => {
            this.loading = false;
            this.finished = true;
        })




        
    },

    loadMore(){
        this.page++;
        this.getAlarmRecords()
    },
    refresh(){
        this.page = 0;
        this.records=[];
        // 清空列表数据
        this.finished = false;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.getAlarmRecords();
    },

  },
  mounted(){
      //
      this.getAlarmTypeOptions()
      this.getDeviceOptions()

      this.refresh()
  }
}
</script>

<style scoped>
.list-item{
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem;
    box-shadow: 1px 0 5px 0 rgba(0, 0, 0, 0.1)
}
.item-left{
    display: flex;
    flex-direction: column;
    margin-left: 0.1rem;
}
.item-middle{

}
.item-right{

}
.item-tag-low_bat{
    padding:4px;
    background: rgba(255, 102, 0, 0.2);
}
.item-tag-low_recover{
    padding:4px;
    background: rgba(0, 132, 255, 0.2);
}
.item-tag-press{
    padding:4px;
    background: rgba(255, 102, 0, 0.2);
}
.item-tag-charge_full{
    padding:4px;
    background: rgba(0, 132, 255, 0.2);
}
.item-tag-fence_in{
    padding:4px;
    background: rgba(255, 102, 0, 0.2);
}
.item-tag-fence_out{
    padding:4px;
    background: rgba(255, 102, 0, 0.2);
}
</style>