<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">其他行为安全承诺</block>
    </cu-custom>
    <view class="top-fixed">
      <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
        <view class="flex text-center">
          <view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
            {{tabNav[index]}}
          </view>
        </view>
      </scroll-view>
      <view class="line"></view>
    </view>
    <block v-if="TabCur==0">
      <scroll-view class="dy-scroll-nobg"  scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
        <view v-if="list.length>0" >
          <view class="news-list">
            <view class="news-item"  v-for="item in list" :key="item.PROMISE_ID" @click="$noMultipleClicks(goToDetail,item)">
              <view class="news-media-list">
                <!--						<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode="aspectFill" class="news-media-logo"></image>-->
                <view class="news-media-body">
                  <view class="news-media-title">
                    被承诺人：{{item.coverpeople}}
                  </view>
                  <view class="news-media-title">
                    承诺人：{{item.NAME}}
                  </view>
                  <view class="news-media-text">
                    <text>{{item.SIGNTIME}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else-if="dataFlag=='noData'" class="dy-null">
          <view class="dy-null-img">
            <image src="../../../static/null.png" mode=""></image>
          </view>
          <view class="dy-null-title">
            暂无数据
          </view>
        </view>
        <view class="cu-tabbar-height"></view>
      </scroll-view>
    </block>
    <block v-if="TabCur==1">
      <scroll-view class="dy-scroll-nobg"  scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
        <view v-if="pclist.length>0" >
          <view class="news-list">
            <view class="news-item"  v-for="item in pclist" :key="item.PROMISE_ID" @click="$noMultipleClicks(goToDetail,item)">
              <view class="news-media-list">
                <view class="news-media-body">
                  <view class="news-media-title">
                    被承诺人：{{item.coverpeople}}
                  </view>
                  <view class="news-media-title">
                    承诺人：{{item.NAME}}
                    <view v-if="item.ISREAD == 0" class="cu-tag badge badge1"></view>
                  </view>
                  <view class="news-media-text">
                    <text>{{item.SIGNTIME}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else-if="dataFlag=='noData'" class="dy-null">
          <view class="dy-null-img">
            <image src="../../../static/null.png" mode=""></image>
          </view>
          <view class="dy-null-title">
            暂无数据
          </view>
        </view>
        <view class="cu-tabbar-height"></view>
      </scroll-view>
    </block>
  </view>
</template>

<script>
import {
  basePath,corpinfoId,loginUserId
} from '@/common/tool.js';
export default {
  data() {
    return {
      dataFlag:'noData',
      background:{"url":""},
      sTop:0,
      totalHeight:0,
      TabCur: 0,
      scrollLeft: 0,
      tabNav: ['我的承诺', '接收承诺'],
      noClick:true,
      list: [],
      pclist: [],
      page:1,//分页参数--页数
      rows:10,//分页参数--每页数据条数
      totalCount:0,//分页参数--初始化页数
      isEnd:false,//防止多次刷新
      totalPage:0,//分页参数--分页数量
      showCount :-1,
      currentPage:1,
      tabCur :0,

    }
  },
  onShow() {
    this.TabCur = 1
    this.getPcData();
  },
  mounted(e){
    let that=this;
    let CustomBar = this.CustomBar;
    uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
      success(res) { //成功回调函数
        let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名（class/id）
        titleH.boundingClientRect(data=>{
          that._data.sTop=data.height  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          that.totalHeight = data.height+CustomBar
        }).exec()
      }
    })
  },
  // 滑动到底方法
  scrolltolower(){
    var _this = this;
    _this.showCount = -1;
    _this.currentPage = _this.currentPage + 1;
    _this.isEnd = false;
    if("0"==_this.TabCur ){
      if(_this.totalPage >= _this.currentPage){
        _this.getDate();//开始分页查询
      }
    }
    if ("1"==_this.TabCur){
      if(_this.totalPage >= _this.currentPage){
        _this.getPcData();//开始分页查询
      }
    }

  },
  onReady() {

  },
  methods: {
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
      if("1" ==this.TabCur){
        this.getPcData();
      }
      if("0" == this.TabCur){
        this.getData();
      }
    },
    getData() {
      var _this = this;
      uni.showLoading({
        title: '请稍候'
      })
      uni.request({
        url: basePath + '/app/corppromise/promiselist_II',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type':'application/x-www-form-urlencoded'
        },
        data: {
          showCount : _this.showCount,
          currentPage : _this.currentPage,
          USER_ID :loginUserId,
        },
        success: (res) => {
          if("success" == res.data.result){
            uni.hideLoading();
            _this.list = res.data.varList;
          } else {
            uni.showToast({
              title: res.data.message,
              duration: 2000
            });
          }
        }
      });
    },

    getPcData() {
      var _this = this;
      uni.showLoading({
        title: '请稍候'
      })
      uni.request({
        url: basePath + '/app/corppromise/receivePromiseList_II',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type':'application/x-www-form-urlencoded'
        },
        data: {
          showCount : _this.showCount,
          currentPage : _this.currentPage,
          USER_ID :loginUserId,
        },
        success: (res) => {
          if("success" == res.data.result){
            uni.hideLoading();
            _this.pclist = res.data.varList;
          } else {
            uni.showToast({
              title: res.data.message,
              duration: 2000
            });
          }
        }
      });
    },
    //跳转事件
    goToDetail(e) {
      uni.navigateTo({
        url: '/pages/my/promise/detail?PROMISE_ID='+e.PROMISE_ID+'&PROMISEPEOPLE_ID='+e.PROMISEPEOPLE_ID+'&TabCur='+this.TabCur,
      });
    },
  }
}
</script>

<style>
.news-list {
  background-color: #FFFFFF;
  position: relative;
  width: 100%;
}

.news-item {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
}

.news-media-list {
  padding: 11px 15px;
  display: flex;
  width: 100%;
  flex-direction: row;
}

.news-media-logo {
  width: 90px;
  height: 70px;
  margin-right: 10px;
  overflow: hidden;
  position: relative;

}

.news-media-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;

}

.news-media-title {
  height: 37px;
  font-size: 14px;
  overflow: hidden;
  width: 100%;
  line-height: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-item::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 15px;
  height: 1px;
  content: '';
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
  background-color: #c8c7cc;
}

.news-media-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  line-height: 15px;
  font-size: 13px;
  color: #8f8f94;
}
.cu-tag{
  right: 50upx !important;
  top: 50% !important;
  transform: translateY(-50%);
}
</style>