<template>
  <van-popup v-model="showPopup"
             position="bottom"
             @open="open"
             get-container="#app"
             class="operation-log-popup">
    <div class="page-contain list-contain">
      <top-nav :title="title"
               :showQuery="false"
               :back-func="handleBack"></top-nav>
      <van-list v-model="loading"
                :error.sync="loadError"
                error-text="请求失败，点击重新加载"
                :finished="finished"
                finished-text="没有更多了"
                @load="getLogPage"
                :immediate-check="false"
                :style="{marginTop: paddingTop ? paddingTop + 'px' : '0'}"
                class="data-list">
        <div v-for="(item,index) in dataList"
             :key="index"
             class="collapse-box"
             style="margin:10px">
          <div class="top"
               style="padding-top:0px;">
            <div class="row ptb20"
                 style="color:#008cee;font-weight:bold">
              <span>{{item.operType}}</span>
            </div>
            <div class="row">
              <span>操作人：{{item.createUser}}</span>
              <span>时间：{{item.createDate}}</span>
            </div>
          </div>
          <div class="info-box"
               style="padding-bottom:0px">
            <div class="info-item">
              <span>详情：</span>
              <span>{{item.msg}}</span>
            </div>
          </div>

        </div>
      </van-list>
    </div>
  </van-popup>
</template>

<script>

export default {
  name: 'operation-log',
  props: {
    busId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showPopup: false,
      title: '操作日志',

      loading: false,
      loadError: false,
      finished: false,
      dataList: [],
      total: 0,
      pageSize: 0,
      currPage: 1,
      paddingTop: localStorage.getItem('paddingTop'),
      
    }
  },
  methods: {
    getLogPage () {
      this.pageSize += 10
      let param = {
        currPage: this.currPage,
        pageSize: this.pageSize,
        busSystem: 'cloud-crm-project',
        busId: this.busId
      }

      this.$axios.post({
        domain: 'logUrl',
        url: 'getLogPageList',
        data: param,
        requestType: 'body',
        isShow: false,
        success: function (res) {
          if (res.errorCode === 200) {
            this.dataList = res.data.list || []
            this.total = res.data.totalCount || 0
            if (this.dataList.length >= this.total) {
              this.finished = true
            }
          } else {
            this.loadError = true
          }
        }.bind(this),
        error: function (err) {
          this.loadError = true
        }.bind(this),
        complete: function () {
          this.loading = false
        }.bind(this)
      })
    },
    open () {
      this.getLogPage()
    },
    handleBack () {
      this.showPopup = false
    }

  }
}
</script>

<style lang="scss">
.operation-log-popup {
  height: 100%;
  padding-bottom: 100px;
}
</style>
<style scoped  lang="scss">
.page-contain.list-contain {
  padding-top: 82px;
}
.info-item {
  span:first-child {
    min-width: 80px;
    white-space: nowrap;
    margin-right: 10px;
  }
}
</style>
