<template>
  <div>
    <div
      class="body"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    >
      <div class="line"></div>
      <div class="dv-content">
        <div class="dv-content-title">
          <img
            src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/detail.png"
            alt
          />
          <span class="content-title">查看个人历史</span>
          <span class="check-num-content">
            维修次数：
            <span class="check-num" v-text="hcount"></span>次
          </span>
        </div>
        <div class="dv-content-ll" v-for="item in hlist" :key="item.Id" :value="item.Id">
          <div class="line"></div>
          <div class="dv-content-ll-li">
            <span class="dv-content-txt">维修数码:</span>
            <span class="dv-content-val code" v-text="item.Code"></span>
            <a class="detail" @click="detail(item.Id,item.Code)">详情></a>
          </div>
          <div class="dv-content-ll-li">
            <span class="dv-content-txt">维修产品:</span>
            <span class="dv-content-val pro" v-text="item.ProductName"></span>
          </div>
          <div class="dv-content-ll-li">
            <span class="dv-content-txt">维修时间:</span>
            <span class="dv-content-val" v-text="item.CheckDate"></span>
          </div>
          <div class="dv-content-ll-li">
            <span class="dv-content-txt">维修类别:</span>
            <span class="dv-content-val" v-text="item.CheckType"></span>
          </div>
        </div>
        <div class="line-bottom"></div>
      </div>
    </div>
  </div>
</template>

<script>
//import $ from "jquery";
// import apiHelper from "../assets/js/apiHelper.js";

import { MessageBox,Indicator} from "mint-ui";
import apiHelper from "@/assets/js/apiHelper.js";
// import dropLoadHelper from "@/assets/js/dropload.js";

export default {
  name: "StartCheck",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      ProductName: "",
      hlist: [
        {
          Code: "",
          CheckDate: "",
          CheckType: ""
        }
      ],
      hcount: 0,
      counter:0,
       // 每页展示4个
     num :6,
    };
  },
  methods: {
    loadMore() {
      this.loading = true;
      var that = this;

      // var counter = 0;
      // 每页展示4个
      // var num = 4;
      var offset = 0,
        limit = 0;
      setTimeout(() => {
        offset = that.num * that.counter;
        limit = that.num;
        debugger
        that.getHistoryList(offset, limit);
        this.loading = false;

        that.counter++;
        console.log(limit);
      }, 1000);
    },
    getHistoryList(offset, limit) {
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      var that = this;
      var arbrownuserstr = localStorage.getItem("arbrownuser");
      var arbrownuser = {};
      if (!!arbrownuserstr) {
        arbrownuser = JSON.parse(arbrownuserstr);
        if (arbrownuser.UserId == "" && arbrownuser.UserName == "") {
          MessageBox.alert("未登录，请先登录");
          return;
        }
      } else {
        MessageBox.alert("未登录，请先登录");
        return;
      }
      var userid = arbrownuser.UserId;
      // var offset = 0;
      // var limit = 4;
      apiHelper.getHistoryList(
        userid,
        that.sup8.context.eno,
        offset,
        limit,
        function(res) {
          if (res.flag == true) {
            //DataName: "维修" DataValue: "1"
            var result = res.data || {};
            
            if(that.hlist==null || that.hlist.length==1){
                that.hlist = result.Rows;
            }else{
            var newlist = _.concat(that.hlist, _.values(result.Rows));
            that.hlist = newlist;
            }
              
            that.hcount = result.Total;
          } else {
            MessageBox.alert(res.msg || "未获取到数据");
          }

          
           setTimeout(() => {
             Indicator.close();
      }, 500);
        },function(){
          setTimeout(() => {
             Indicator.close();
      }, 500);
        }
      );
    },
    detail(id, code) {
      sessionStorage.setItem("historyid", id);
      sessionStorage.setItem("historycode", code);
      this.$parent.changeSelectedPage("RecordsInf");
    },
    // 评价反馈
    eval() {
      this.$parent.changeSelectedPage("Check_2");
    },
    againquery() {
      this.$parent.changeSelectedPage("8"); //扫码页面
    }
  },
  watch: {},
  created: function() {
    var that = this;
  },

  mounted: function() {
    var that = this;
    // that.getHistoryList();
    //that.initDropLoad();
  }
};
</script>

<style scoped>
.body {
  background-color: #f5f7f8;
}
.line {
  background-color: #f9fafb;
  height: 1px;
}
.dv-content {
  max-height: 5%;
  max-width: 94%;
  margin-left: 3%;
}
.dv-content-title {
  margin-top: 0.5rem;
  /* padding-top: 8%; */
  height: 3rem;
  /* max-width: 94%; */
  padding-left: 3%;
  width: 100%;
  background-color: #fff;
  line-height: 3rem;
}
.dv-content-title img {
  /* width: 1.1rem;
  margin: 0rem 0.5rem 0rem 0rem; */
  width: 7%;
}

.content-title {
  /* position: relative;
  top: -0.3rem;
  font-size: 15px;
  font-weight: bolder;
  color: #7b3e15; */
  margin-left: 2%;
  vertical-align: super;
  color: #7e431b;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.06rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.check-num-content {
  /* position: relative;
  top: 0.1rem;
  font-size: 10px;
  float: right;
  margin-right: 0.5rem; */
  margin-top: 1.5%;
  font-size: 0.7rem;
  letter-spacing: 0.02rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* padding: 0rem 0rem 0.2rem 1rem; */
  float: right;
  margin-right: 1rem;
}
.check-num {
  color: #7b3e15;
  font-weight: bolder;
}
.dv-content-ll {
  /* background-color: #ffffff;
  margin: 0.5rem 0.5rem;
  padding: 1rem 0rem; */
  background-color: #ffffff;
  margin-top: 2%;
  height: 6.5rem;
  /* width: 90%;
  margin-left: 5%; */
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.dv-content-ll-li {
  /* padding: 2px 0.5rem;
   margin-left: 4%; */
  margin-top: 2%;
  margin-bottom: 2%;
}

.dv-content-txt,
.dv-content-val {
  /* font-size: 15px; */
  margin-left: 3%;
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* padding: 0.2rem 0.2rem 0.2rem 0.5rem; */
  bottom: 0.2rem;
}

.code {
  color: #7b3e15;
  font-weight: bolder;
}

.pro {
  font-weight: bolder;
}

.detail {
  /* position: absolute;
    right: 22px;
    color: #1D4C9D;
    font-size: 15px; */
  float: right;
  margin-right: 2%;
  color: #1d4c9d;
  /* font-size: 15px; */
  font-size: 0.7rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 0.2rem 0.2rem 0.2rem 0.5rem;
  bottom: 0.2rem;
}
.line-bottom {
  width: 100%;
  height: 0.5rem;
}
</style>