<template>
  <div>
    <van-nav-bar title="紧急联系人" left-text="返回" left-arrow @click-left="$router.back()" />
    <!-- 添加联系人 -->
    <van-contact-card type="add" add-text="添加紧急联系人" @click="onAdd" />

    <template v-for="device in list"> 
      <van-cell-group :title="device.device_name" :key="device.id">
        
        <template v-if="device.urgent_list && device.urgent_list.length">
          <van-contact-card
            v-for="urgent in device.urgent_list"
            :key="urgent.id"
            type="edit"
            :name="urgent.name"
            :tel="urgent.phone"
            @click="onEdit(urgent)"
          />
        </template>
        <div v-else>
          <van-button type="default" block disabled>暂无联系人</van-button>
        </div>

      </van-cell-group>
    </template>

  </div>
</template>

<script type="text/babel">
import Vue from "vue";
import { ContactCard, NavBar, CellGroup, Cell, Button } from "vant";

Vue.use(ContactCard);
Vue.use(NavBar);
Vue.use(CellGroup);
Vue.use(Cell);
Vue.use(Button);

export default {
  data() {
    return {
      list: [],
      userid: null,
      openid: null,
      device_id: null,
    };
  },
  created() {
    this.userid = localStorage.getItem("userid");
    this.openid = localStorage.getItem("openid");

    this.device_id = this.$route.query.device_id

    this.getUrgentList();
  },
  methods: {
    // 添加
    onAdd() {
      this.$router.push({ path: "/add_edit_urgent?device_id=" + (this.device_id || '')});
    },
    // 修改
    onEdit(urgent) {
      this.$router.push({ path: "/add_edit_urgent?device_id=" + urgent.device_id + "&id=" + urgent.id});
    },
    // 获取联系人
    getUrgentList() {
      this.$http
        .get("/getUrgentList&userid=" + this.userid + '&openid=' + this.openid + '&device_id=' + (this.device_id || ''))
        .then((res) => {
          this.list = res.data.data;
        })
        .catch((res) => {
        });
    },
    goBack() {
      this.$router.back()
    },

  },
};
</script>
<style scoped="less">

</style>