<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: []
    };
  },
  methods: {
    callPhone(item) {
      if (window.android !== undefined) {
        window.android.callPhone(item.phone);
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.callPhone.postMessage(item.phone);
      }
    }
  },
  created() {
    getPhone().then(res => {
      this.list = res;
    });
  }
};
</script>

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

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