<template>
  <div class="call-list">
    <van-nav-bar title="通话清单" left-arrow :border="true" @click-left="onNavBack" left-text="返回" />
    <div class="call-list-con">
      <div class="newsNotData" v-show="list.length == 0">您暂时还没有通话记录~</div>
      <van-list
        v-model="loading"
        class="call-list-container"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="(item, index) in list" :key="index" :title="item" class="call-list">
          <van-row type="flex" justify="center" class="date-row">
            <van-col span="12">
              <!--<p class="call-list-date">{{item.dDateTime}}</p>-->
            </van-col>
          </van-row>
          <div class="call-list-content">
            <van-row type="flex" justify="center">
              <van-col span="23" offset="1">
                <p class="call-list-record">通话记录</p>
                <p class="call-list-detail">{{ item.dDateTime }}</p>
                <p class="call-list-detail">{{ item.sCallLog }}</p>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import ToastService from '../../services/toast-service';
import APIDevice from '../../api/device';
export default {
  data() {
    return {
      loading: false,
      finished: false,
      list: []
    };
  },
  methods: {
    onLoad() {
      this.loading = false;
    },
    // 返回
    onNavBack() {
      this.$router.push({ name: 'Myself' });
    },

    getCallList() {
      /* let url = `/api/DeviceCommunication/GetCallLogList`;
  
        let jsonData = { deviceId: this.$store.getters.deviceId }; */
      ToastService.loading();
      /* this.$axios
          .post(url, jsonData) */
      APIDevice.getCallLogList({
        deviceId: this.$route.query.deviceId ? this.$route.query.deviceId : this.$store.getters.deviceId
      })
        .then(res => {
          this.list = res.data.callLogList || [];
        })
        .catch(e => console.log(e))
        .finally(() => ToastService.clear());
    }
  },

  created() {
    this.getCallList();
  }
};
</script>

<style lang="scss" scoped>
.call-list {
  overflow: hidden;
  .call-list-con {
    height: calc(100vh - 160px);
    padding: 30px;
    overflow: scroll;
    .newsNotData {
      @include flexbox(center, center, column, nowrap);
      font-size: 32px;
      padding: 30px;
    }
    .call-list-date {
      color: #999;
      font-size: 28px;
      text-align: center;
      margin-bottom: 40px;
    }
    .call-list-content {
      background-color: #f0f0f0ef;
      padding: 20px;
      border-radius: 30px;
      margin-top: 20px;
      .call-list-record {
        color: #313131;
        font-size: 28px;
        margin-bottom: 40px;
      }
      .call-list-detail {
        color: #313131;
        font-size: 30px;
      }
    }
    .record {
      color: #313131;
      font-size: 30px;
    }
    .detail {
      color: #666;
      font-size: 28px;
    }
  }
}
</style>
