<template>
  <div>
    <!-- <van-nav-bar title="我的设备" left-text="返回" left-arrow @click-left="$router.replace('yys_more')" /> -->
    <van-sticky>
      <van-search v-model="keywords" show-action placeholder="请输入设备编号关键词搜索" @search="onSearch">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </van-sticky>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="padding-bottom: 1rem;">
      <template v-if="list.length">
        <van-list ref="deviceList" v-model="loading" :finished="finished" :error.sync="error" finished-text="没有更多了"
          error-text="请求失败，点击重新加载" @load="onLoad">
          <van-cell v-for="item in list" :key="item.id" :title="item.imei" :value="'更多'"
            @click="showDetail(item.id)" size="large" is-link>
            <template #title>
              <span class="custom-title">{{item.depart_name}}</span>
              <!-- <van-tag type="danger" v-if="item.alarm_state > 0">告警</van-tag> -->
            </template>
          </van-cell>
        </van-list>
      </template>
      <van-empty v-else description="暂无数据" />
    </van-pull-refresh>

    <van-action-sheet v-model="showActions" :actions="actions" @select="onSelect" close-on-click-action />
  </div>
</template>

<script type="text/babel">
import Vue from 'vue';
import { ActionSheet, Notify, NavBar, PullRefresh, Tag, Icon, Dialog, Empty, List, CellGroup, Cell, Search, Sticky } from 'vant';

Vue.use(ActionSheet);
Vue.use(NavBar);
Vue.use(Tag);
Vue.use(Icon);
Vue.use(Dialog);
Vue.use(Notify);
Vue.use(Empty);
Vue.use(List);
Vue.use(CellGroup);
Vue.use(Cell);
Vue.use(Search);
Vue.use(PullRefresh);
Vue.use(Sticky);

export default {
  data() {
    return {
      error: false,
      loading: false,
      finished: false,
      refreshing: false,
      keywords: '', // 搜索关键字
      showBindBtn: true,
      list: [],
      limit: 10,
      page: 1,
      showActions: false,
      showDialog: false, // 显示修改设备名称dialog
      currentDeviceInfo: {}, // 当前设备信息
      device_name: '', // 设备名称
      userid: null,
      openid: null,
      actions: [{
        name: '解除绑定',
        action: 'unbind',
      },
        /* { 
          name: '补卡',
          action: 'makeupCard',
        } */
      ],
    };
  },
  created() {
    this.userid = localStorage.getItem("yysUserid");
    this.openid = localStorage.getItem("openid");

    this.onRefresh();
  },
  methods: {
    /**
     * 获取设备列表
     */
    onLoad() {

      let params = {
        page: this.page,
        limit: this.limit,
        imei: this.keywords
      }
      // this.$http.post('login&openid=' + openid, JSON.stringify(postData))
      //   .then(resp => {

      //   })
      let resp = {
        status: 200,
        data: {
          success: true, message: "获取成功", data: {
            total: "311",
            limit: 10,
            page: 3,
            list: [
              { id: "371", "depart_name": "智能仓储" },
              { id: "372", "depart_name": "液压工具" },
              { id: "373", "depart_name": "特种吊具" },
              { id: "374", "depart_name": "其他工具" },
            ]
          }
        }
      }


      // this.$http.post("/getDevices&userid=" + this.userid + '&openid=' + this.openid, JSON.stringify(params)).then(resp => {
      this.loading = false;
      this.refreshing = false;

      if (resp.status !== 200 || !resp.data || !resp.data.success) {
        this.$notify(resp.data.message)
        return;
      }

      this.list = resp.data.data.list;
      if (this.list.length >= resp.data.data.total) {
        this.finished = true;
      }
      this.page += 1;

      // })
      // .catch(resp => {
      //   this.loading = false;
      //   this.refreshing = false;
      //   this.error = true;
      // });

    },
    /**
     * 显示详情
     */
    showDetail(id) {
      let query = {
        id: id
      }
      this.$router.push({ path: "/yys_dev_level2", query: query });
    },
    /**
     * 跳转绑定设备页面
     */
    goPage(name, query = {}) {
      this.$router.push({ name: name, query: query });
    },
    /**
     * 显示选项
     */
    showActionSheet(info) {
      this.showActions = true;
      this.currentDeviceInfo = info;
    },
    // 选中action
    onSelect(item) {
      let action = item.action

      if (action == 'unbind') { // 解绑
        this.beforeUnbindDevice(this.currentDeviceInfo);
      }

    },
    // 搜索
    onSearch() {
      this.onRefresh();
    },
    // 下拉刷新
    onRefresh() {
      this.list = [];
      this.limit = 10;
      this.page = 1;

      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
  }
};
</script>
<style scoped="less">
.custom-title {
  font-size: 0.8em;
}

.fl-buttomright-button {
  position: fixed;
  bottom: 24px;
  right: 16px;
  display: flex;
  flex-direction: column;
  border-radius: 50%;
  height: 54px;
  width: 54px;
  background-color: #2196f3;
  box-shadow: 0 0 6px gray;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 12px;
}
</style>