<template>
  <div class="address-main">
    <el-dialog :visible.sync="isVisible" title="查看地址" @close="closeDialog">
      <el-scrollbar id="resultScroll"  ref="myScrollbar" style="height: 400px;overflow-y:auto;overflow-x: hidden;">
        <div class="addr-item" v-for="item in list" :key="item.id">
          <div class="flex-aic-jcb  addr-user-info">
            <div class="flex-aic">
              <span style="width: 200px;margin-right: 20px;" class="ellipsis">收货人：{{item.consigneeName}}</span>
              <span style="width: 200px;">手机：{{item.consigneePhone}}</span>
            </div>
            <div v-if="item.label" style="color: #0A84FF;font-size: 12px;background: #D9EAFA;border-radius: 2px;padding: 2px 5px;">{{item.label}}</div>
          </div>
          <div class="flex-aic-jcb">
            <span style="margin-top: 10px;" class="ellipsis-2">地址：{{item.province}}{{item.city}}{{item.town}}{{item.consigneeAddress}}</span>
          </div>
        </div>
        <div style="color: #666;font-size: 12px;text-align: center;" v-if="finished">没有更多数据了</div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script type="javascript">
  import { userAddressList } from 'api/userManagement/index'
  export default {
    name: 'userManagement',
    components: {},
    data() {
      return {
        list: [],
        finished: false, // 是否已加载全部
        isVisible: false,
        listQuery: {
          page: 1,
          limit: 20,
        },
      }
    },
    mounted() {
      this.isVisible = true
      this.getAddressList()
      // 监听滚动事件
      this.$nextTick(() => {
        $('#resultScroll')[0].addEventListener('scroll', this.handleScroll, true)
      })
    },
    methods:{
      /**
       * 关闭弹窗
       */
      closeDialog(){
        this.$emit('addressEvent', false)
      },
      /**
       * 滚动监听
       */
      handleScroll(){
        var that = this
        var sh = that.$refs['myScrollbar'].$refs['wrap'].scrollHeight // 滚动条高度
        var st = that.$refs['myScrollbar'].$refs['wrap'].scrollTop // 滚动条距离顶部的距离
        var ch = that.$refs['myScrollbar'].$refs['wrap'].clientHeight // 滚动条外容器的高度

        if (st + ch >= sh) {
          //到底了-业务逻辑
          console.log(st)
          this.listQuery.page = this.listQuery.page + 1
          if(!this.finished){
            that.getAddressList()
          }
        }
      },
      /**
       * 获取发票列表
       */
      getAddressList(){
        let _this = this
        userAddressList(this.listQuery).then(response => {
          if(response.status == 200){
            let a = response.data.data
            if (0 == a.length || _this.listQuery.page > response.data.totalPage) {
              _this.finished = true;
              return;
            }
            var e = _this.listQuery.page == 1 ? [] : _this.list;
            a.map(function(item) {
              e.push(item);
            })
            _this.list = e;
          } else {
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
    }
  }
</script>
<style lang="scss">
  .address-main{
    .el-scrollbar__wrap{
      overflow-y: auto;
      overflow-x: hidden;
    }
    .addr-item{
      background: #f5f6fa;
      border: 1px solid #f5f6fa;
      padding: 16px;
      margin-right: 25px;
      color: #413434;
      font-size: 13px;
      margin-bottom: 24px;
    }
  }
</style>
