<template>
  <div>
    <div class="logo-header">
      <img
        class="logo-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/logo.png"
      />
      <span class="logo-text">布朗商行</span>
      <!-- <div class="btn-div">
        <button class="btn_againquery" @click="description()">服务说明</button>
      </div>-->
    </div>
    <div class="body">
      <div class="line"></div>

      <div class="dv-content">
        <div class="top">
          <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/repair.png"
              alt
            />
            <span class="content-title">维修记录</span>
            <div class="btn-div">
              <button class="btn_againquery" @click="description()">服务说明</button>
            </div>
          </div>
        </div>

        <div class="dv-content-ll">
          <div class="dv-content-ll-basic">基础信息</div>
          <div class="dv-content-ll-dv">
            <span class="dv-content-ll-l">产品数码:</span>
            <span class="dv-content-ll-r code" v-text="code"></span>
          </div>
          <div class="dv-content-ll-dv">
            <span class="dv-content-ll-l">客户:</span>
            <span class="dv-content-ll-r" v-text="customer"></span>
          </div>
          <div class="dv-content-ll-dv">
            <span class="dv-content-ll-l">产品名称:</span>
            <span class="dv-content-ll-r" v-text="productname"></span>
          </div>
          <div class="dv-content-ll-dv">
            <span class="dv-content-ll-l">序列号:</span>
            <span class="dv-content-ll-r" v-text="receiptno"></span>
          </div>
          <div class="dv-content-ll-dv">
            <span class="dv-content-ll-l">出库日期:</span>
            <span class="dv-content-ll-r" v-text="receiptdate"></span>
          </div>
          <div class="dv-content-ll-dv">
            <span class="dv-content-ll-l">质保日期:</span>
            <span class="dv-content-ll-r" v-text="qcdate"></span>
          </div>
          <div class="dv-content-ll-dv">
            <span class="dv-content-ll-l">质保期限:</span>
            <span class="dv-content-ll-r" v-text="qctimelimit"></span>
          </div>
        </div>
        <div class="dv-content-history">
          <span class="check-num-title">历史维修</span>
          <span class="check-num-content">
            维修次数：
            <span class="check-num" v-text="recordcount"></span>次
          </span>
        </div>
        <div class="qchistory">
          <!-- <div class="dv-list-title"></div> -->
          <div
            class="dv-list"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="1"
            infinite-scroll-listen-for-event
          >
            <div class="dv-list-ll" v-for="item in record" :key="item.Id" :value="item.Id">
              <div class="line"></div>
              <div class="dv-list-ll-li">
                <span class="dv-list-txt">维修产品:</span>
                <span class="dv-list-val pro" v-text="productname">4activi SB System</span>
                <a class="detail" @click="detail(item.Id)">详情></a>
              </div>

              <div class="dv-list-ll-li">
                <span class="dv-list-txt">维修时间:</span>
                <span class="dv-list-val" v-text="item.CheckDate">2020/04/28</span>
              </div>
              <div class="dv-list-ll-li">
                <span class="dv-list-txt">维修类别:</span>
                <span class="dv-list-val" v-text="item.CheckType">重装系统</span>
              </div>
              <div class="dv-list-ll-li">
                <span class="dv-list-txt">维修内容:</span>
                <span class="dv-list-val info" v-text="item.CheckInfo">产品严重损坏，现已更新配件</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="line-bottom"></div>
      <div class="dv-add">
        <button class="dv-add-btn" @click="add()">新增维修</button>
      </div>
    </div>
  </div>
</template>
<script>
// import $ from "jquery";
// import wx from "weixin-js-sdk";
// import { MessageBox } from "mint-ui";

import apiHelper from "@/assets/js/apiHelper.js";
import Vue from "vue";
// import { Loadmore } from "mint-ui";
// Vue.component(Loadmore.name, Loadmore);
import { InfiniteScroll } from "mint-ui";
import { Indicator } from "mint-ui";
Vue.use(InfiniteScroll);

export default {
  name: "QualityInspectionRecords",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      code: "",
      customer: "",
      productname: "",
      receiptno: "",
      receiptdate: "",
      qcdate: "",
      qctimelimit: "",
      recordcount: "",
      record: [
        {
          productname: "",
          checkdate: "",
          checktype: "",
          checkinfo: ""
        }
      ],
      page: [
        {
          productname: "",
          checkdate: "",
          checktype: "",
          checkinfo: ""
        }
      ],
      offset: 0,
      limit: 5
    };
  },
  methods: {
    loadMore() {
      var that = this;
      this.loading = true;
      if (that.recordcount > that.limit) {
        Indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });
      }
      that.gethistoryRecord();
      setTimeout(() => {
        for (let i = 1; i < that.recordcount / that.limit; i++) {
          if (that.limit == 0) {
            that.limit = 5;
          } else {
            that.limit += i * that.limit;
          }
          that.gethistoryRecord();
        }
        if (that.recordcount <= that.limit) {
          this.loading = false;
        }
      }, 1200);

      Indicator.close();
    },
    //获取数码信息
    getProductParams() {
      var that = this;
      apiHelper.getProductParams(
        that.sup8.context.eno,
        that.sup8.codeInfo.Code,
        "PRODUCT_NAME_196609|ReceiptReceiverName|ReceiptNO|RECEIPTDATE|receipt_f17|receipt_f16",
        function(res) {
          if (res.flag == true) {
            $.each(res.data, function(i, v) {
              switch (v.Key) {
                case "PRODUCT_NAME_196609":
                  that.productname = v.Value;
                  break;
                case "ReceiptReceiverName":
                  that.customer = v.Value;
                  break;
                case "ReceiptNO":
                  that.receiptno = v.Value;
                  break;
                case "RECEIPTDATE":
                  that.receiptdate = v.Value;
                  break;
                case "receipt_f16":
                  that.qcdate = v.Value;
                  break;
                case "receipt_f17":
                  if (v.Value == "0.5") {
                    that.qctimelimit = "半年";
                  } else {
                    that.qctimelimit = v.Value + "年";
                  }
                default:
                  break;
              }
            });
          }
          console.log("res", res);
        },
        function(error) {
          console.log("error", error);
        }
      );
    },
    //质检记录列表
    gethistoryRecord() {
      var that = this;
      apiHelper.gethistoryRecord(
        that.code,
        that.sup8.context.eno,
        that.offset,
        that.limit,
        function(res) {
          console.log("recordres", res);
          if (res.flag == true) {
            that.recordcount = res.data.Total;
            that.record = res.data.Rows;
          }
        }
      );
    },
    //新增质检
    add() {
      this.$parent.changeSelectedPage("Check_4");
    },
    //质检说明
    description() {
      this.$parent.changeSelectedPage("Check_7");
    },
    detail(id) {
      sessionStorage.setItem("historyid", id);
      this.$parent.changeSelectedPage("RecordsInf");
    }
  },
  watch: {},
  created: function() {},

  mounted: function() {
    var that = this;
    var code = sessionStorage.getItem("ArbrownCode");
    if (code != null && code != "") {
      that.sup8.codeInfo.Code = code;
    }
    that.code = that.sup8.codeInfo.Code;
    debugger;

    // var sessionResult = sessionStorage.getItem("ScanResult");
    // if (!!sessionResult) {
    //   var scanresult = JSON.parse(sessionResult);
    //   if (!!scanresult) {
    //     console.log("scanresult", scanresult);
    //   }
    // }

    that.getProductParams(that.code, that.sup8.context.eno);
    // that.limit = 0;
    //  that.gethistoryRecord();
  }
};
</script>

<style scoped>
.logo-header {
  margin-top: 5%;
  margin-left: 6%;
  background-color: #ffffff;
}
.logo-img {
  width: 30%;
  height: auto;
}
.logo-text {
  vertical-align: super;
  margin-left: 3%;
  font-weight: bold;
  font-size: 0.8rem;
  letter-spacing: 0.01rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.btn-div {
  margin-left: 25%;
  float: right;
  margin-top: 2%;
}
.btn_againquery {
  font-weight: bold;
  font-size: 0.5rem;
  letter-spacing: 0.01rem;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  width: 4.1rem;
  height: 1.5rem;
  border: 0;
  color: white;
  background-color: #1d4c9d;
}
.line {
  background-color: #f9fafb;
  height: 1px;
}
.body {
  /* margin-top: 2%; */
  height: 100%;
  background: #f9fafb;
}
.body .dv-content {
  padding-top: 2%;
  width: 100%;
  /* height: 100%; */
  /* background: linear-gradient(#f9fafb, #ffffff); */
}
.dv-content-title img {
  /* width: 1.1rem;
  margin: 0rem 0.5rem 0rem 0rem; */
  width: 7%;
}

.content-title {
  /* margin: 1rem 0rem 0.5rem 0rem;
  background-color: #ffffff;
  position: relative;
  top: -0.3rem;
  font-size: 15px;
  font-weight: bolder;
  color: #7b3e15; */
  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;
}

/* .btn-service {
  font-weight: bold;
  font-size: 0.5rem;
  letter-spacing: 0.01rem;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  width: 4.1rem;
  height: 1.5rem;
  border: 0;
  color: white;
  background-color: #1d4c9d;
} */

.dv-content-title {
  padding-top: 5%;
  max-height: 5%;
  /* max-width: 88%; */
  padding-left: 6%;
  background-color: #ffffff;
}
.top {
  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;
}
.dv-list {
  margin: 0.1rem 0.5rem;
  font-size: 15px;
  /* background-color: #f5f7f8; */
}

.dv-content-ll-dv {
  margin: 0.1rem 0.5rem 0.1rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.dv-content-ll {
  padding-top: 5%;
  max-height: 5%;
  /* max-width: 88%; */
  padding-left: 6%;
  /* font-size: 14px; */
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #fff;
  padding-bottom: 0.2rem;
}
.dv-content-history {
  height: 2rem;
  background-color: #fff;
  padding-left: 1.5rem;
  line-height: 2.1rem;
}
.qchistory {
  max-height: 5%;
  max-width: 98%;
  margin-left: 0.2rem;
  font-size: 14px;
}
.dv-content-ll-basic {
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 0rem 0rem 0.2rem 1rem;
  font-weight: bolder;
  color: #1d4c9d;
}
.dv-content-ll-l {
  font-size: 0.8rem;
  letter-spacing: 0.08rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.dv-content-ll-r {
  margin-left: 3%;
  font-weight: bolder;
  font-size: 0.8rem;
  letter-spacing: 0.08rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.code {
  color: #7b3e15;
}
.dv-list {
  padding-top: 0.1rem;
  /* background-color: #f5f7f8; */
}

/* .dv-list-title {
  padding: 2rem 0rem 0.2rem 1rem;
} */
.check-num-title {
  font-weight: bolder;
  color: #1d4c9d;
  /* font-size: 15px; */
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 0rem 0rem 0.2rem 1rem;
}
.check-num-content {
  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-list-ll {
  background-color: #ffffff;
  margin-top: 0.3rem;
  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;
  /* border:0.1px solid #cfcdcd ; */

  /* margin: 0.3rem 0.2rem;
  padding: 0.5rem 0.3rem; */
}

.dv-list-ll-li {
  margin-left: 4%;
  margin-top: 2%;
  margin-bottom: 2%;
}

.dv-list-txt,
.dv-list-val {
  /* margin-top: 3%; */
  /* 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;
}
.pro {
  font-weight: bolder;
}

.detail {
  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;
}

.body .dv-add {
  position: fixed;
  /* z-index: 999; */
  bottom: 0;
  width: 100%;
  border: 0;
  /* height: 10%; */
}
.dv-add-btn {
  width: 100%;
  height: 2.3rem;
  background-color: #1d4c9d;
  color: white;
  border: 0;
}
.line-bottom {
  background-color: #f9fafb;
  height: 1.2rem;
  bottom: 0;
}
</style>