<template>
  <div>
    <yd-navbar bgcolor="#2196f3" color="#fff" title="首页">
      <div slot="right" @click="logout">
        退出&nbsp;&nbsp;
        <yd-icon name="tuichu" size="14px" color="#FFF" custom></yd-icon>
      </div>
    </yd-navbar>


    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, key) in imgList" :key="key">
        <!-- <img :src="item.banner_url" height="200px;" /> -->
        <!-- <van-image :src="item.banner_url" height="200px">
          <template v-slot:error>加载失败</template>
        </van-image> -->
        <img v-lazy="item" height="200px" />
      </van-swipe-item>
    </van-swipe>

   <!--  <div style="heigth: 200px">
      <yd-slider autoplay="3000">
        <yd-slider-item v-for="(item, key) in imgList" :key="key">
          <img :src="item.banner_url" height="200px;" />
        </yd-slider-item>
      </yd-slider>
    </div> -->
    <yd-grids-group :rows="3">
      <yd-grids-item link="/yys_sos_alarm">
        <yd-icon slot="icon" name="location" color="#FF685D"></yd-icon>
        <span slot="text">SOS告警</span>
      </yd-grids-item>
      <yd-grids-item link="/yys_fence_alarm">
        <yd-icon
          slot="icon"
          name="dianziweilan"
          color="#FF685D"
          custom
        ></yd-icon>
        <span slot="text">围栏告警</span>
      </yd-grids-item>
    </yd-grids-group>

    <yd-cell-group title="信息中心">
      <yd-cell-item arrow @click.native="editPwd">
        <yd-icon slot="icon" name="baoxian" size=".45rem" custom></yd-icon>
        <span slot="left">修改密码</span>
        <span slot="right"></span>
      </yd-cell-item>
    </yd-cell-group>
  </div>
</template>

<script type="text/babel">


import Vue from 'vue';
import { NavBar, Swipe, SwipeItem, Image, Lazyload } from 'vant';

Vue.use(NavBar);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Image);
Vue.use(Lazyload);

export default {
  data() {
    return {
      /* imgList: [
        {
          banner_url:'', // "http://rltest.oss-cn-hangzhou.aliyuncs.com/dev-wxt/20210427/6087d18dae9cb3.47012300.jpg",
        },
      ], */
      imgList: [],
    };
  },
  created() {
    let openid = localStorage.getItem("openid");
    this.$http
      .get("/getSlider&openid=" + openid)
      .then((resp) => {
        let list = resp.data.data || [];
        if (list.length) {
          list.forEach(item => {
            this.imgList.push(item.banner_url)
          })
        }

        console.log('list',list);
        console.log(this.imgList);
      })
      .catch((res) => {
        console.log(res);
      });
  },
  methods: {
    logout() {
      var _this = this;
      _this.$dialog.confirm({
        title: "退出登录",
        mes: "确定要退出登录吗？",
        opts: () => {
          localStorage.removeItem("yysUserid");
          localStorage.removeItem("yysUserinfo");
          _this.$router.replace("/yys_login");
        },
      });
    },
    editPwd() {
      this.$router.push("/yys_profile");
    },
  },
};
</script> 

<style lang="css" scoped>
</style>