<template>
  <div class="phone">
    <van-cell center clickable v-for="item in list" :key="item.phone" :title="item.name" :label="item.phone"
      @click="callPhone(item)">
      <template #right-icon>
        <van-icon name="phone" class="icon" />
      </template>
    </van-cell>
  </div>
</template>

<script>
import Vue from "vue";
import { Cell, Icon } from "vant";
import { getPhone } from "@/api/coldfood";

Vue.use(Cell).use(Icon);

export default {
  data() {
    return {
      list: [],
      userInfo: {}
    };
  },
  methods: {
    init() {
      getPhone().then(res => {
        if (res.code == 200) {
          this.list = res.data;          
        } else {
          this.list = []
        }
      });
    },
    callPhone(item) {
      if (window.android !== undefined) {
        window.android.callPhone(item.phone);
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.callPhone.postMessage(item.phone);
      }
    },
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo();
        sessionStorage.setItem("ZJCD-UserInfo", res);
        this.userInfo = JSON.parse(res);
        sessionStorage.setItem('token', this.userInfo.token),
          this.init();
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        this.$toast("请先登录！");
      }
    },
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
      sessionStorage.setItem('token', this.userInfo.token),
        this.init();
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    this.JSBgetUserInfo();
  }
};
</script>

<style lang="stylus" scoped>
.phone {
  height: 100vh;
  overflow-y: auto;

  .icon {
    font-size: 40px;
    color: #EB4E3F;
  }
}
</style>