<template>
  <div class="body">
    
       <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>
      </div>
      <div class="dv-content-ll">
        <div class="dv-content-ll-dv">
          <span class="dv-content-ll-l">维修数码:</span>
          <span class="dv-content-ll-r code" v-text="info.Code"></span>
        </div>
        <div class="dv-content-ll-dv">
          <span class="dv-content-ll-l">客户:</span>
          <span class="dv-content-ll-r cus" v-text="info.CustomerName"></span>
        </div>
        <div class="dv-content-ll-dv">
          <span class="dv-content-ll-l">维修产品:</span>
          <span class="dv-content-ll-r pro" v-text="info.ProductName"></span>
        </div>
        <div class="dv-content-ll-dv">
          <span class="dv-content-ll-l">序列号:</span>
          <span class="dv-content-ll-r sn" v-text="info.SN"></span>
        </div>
        <div class="dv-content-ll-dv">
          <span class="dv-content-ll-l">维修工编号:</span>
          <span class="dv-content-ll-r" v-text="info.CheckUserName"></span>
        </div>
        <div class="dv-content-ll-dv">
          <span class="dv-content-ll-l">维修时间:</span>
          <span class="dv-content-ll-r" v-text="info.CheckDate"></span>
        </div>
        <div class="dv-content-ll-dv">
          <span class="dv-content-ll-l">维修类别:</span>
          <span class="dv-content-ll-r" v-text="info.CheckType"></span>
        </div>
        <div class="dv-content-ll-dv">
          <span class="dv-content-ll-l">维修内容:</span>
          <span class="dv-content-ll-r" v-text="info.CheckInfo"></span>
        </div>
        <div class="dv-content-ll-dv">
          <span class="dv-content-ll-l">备&nbsp;&nbsp;&nbsp;&nbsp;注:</span>
          <span class="dv-content-ll-r" v-text="info.Remark"></span>
        </div>
      </div>

        <div class="dv-img">
      <div class="dv-img-txt">维修图片:</div>
      <div class="dv-img-ll" >
        <img v-for="item in info.ImgList" :key="item"
          :src="item"
        />
      </div>
    </div>
    </div>

  
  </div>
</template>

<script>
//import $ from "jquery";
// import apiHelper from "../assets/js/apiHelper.js";
import apiHelper from "@/assets/js/apiHelper.js";
import { MessageBox } from "mint-ui";

export default {
  name: "StartCheck",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      info: {
        historyid: "",
        Id: "",
        Code: "",
        SN: "",
        EnterpriseNo: "",
        ProductNo: "",
        ProductName: "",
        CheckDate: "",
        ReceiptDate: "",
        CheckType: "",
        CheckDeadline: "",
        CheckInfo: "",
        Remark: "",
        ImgList: [],
        Imgs: "",
        CustomerName:'',
        // CheckUserId: "",
        CheckUserNo: "",
        CheckUserName: ""
      }
    };
  },
  methods: {
    // 调试code= productno
    getCheckInfo() {
      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;
      }
      debugger;

      apiHelper.getCheckInfo(this.historyid, that.sup8.context.eno, function(
        res
      ) {
        if (res.flag == true) {
          that.info = res.data;
          var name = that.info.CheckUserName+"("+that.info.CheckUserNo+")";
          that.info.CheckUserName=name;
        } else {
          MessageBox.alert(res.data || "登录失败");
        }
      });
    },
    // 评价反馈
    eval() {
      this.$parent.changeSelectedPage("Check_2");
    },
    againquery() {
      this.$parent.changeSelectedPage("8"); //扫码页面
    }
  },
  watch: {},
  created: function() {
    var that = this;
  },

  mounted: function() {
    var that = this;

    that.historyid = sessionStorage.getItem("historyid");
    that.info.Code = sessionStorage.getItem("historycode");
    sessionStorage.removeItem("historyid");
    sessionStorage.removeItem("historycode");

    that.getCheckInfo();
  }
};
</script>

<style scoped>
.body{
  background: linear-gradient(#f9fafb, #ffffff);
}
.line {
  background-color: #f9fafb;
  height: 1px;
}
.dv-content{
   margin-top: 8%;
  max-height: 5%;
  max-width: 88%;
  margin-left: 6%;
}
.dv-content-title img {
  /* width: 1.1rem;
  margin: 0rem 0.5rem 0rem 0rem; */
  width: 7%;
}

.content-title {
  
  margin-left:2%;
  /* 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;
}
.dv-content-ll-dv {

  margin-top: 2%;
   font-size: 0.8rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.dv-content-ll {
  /* font-size: 14px; */
   /* margin: 0.1rem 0.5rem 0.1rem 1rem; */
   margin-top: 5%;
}
.dv-content-ll-l{
   font-size: 0.9rem;
  letter-spacing: 0.08rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.dv-content-ll-r{
  margin-left: 2%;
}
.code,
.cus,
.pro,
.sn {
  font-weight: bolder;
}

.dv-img-txt {
  margin-top: 10%;
  /* margin: 1rem 0.5rem 0.4rem 1rem; */
   font-size: 0.8rem;
  letter-spacing: 0.05rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.dv-img-txt img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}

.dv-img-ll {
  margin: 0.2rem 0.5rem 0.1rem 1rem;
}
.dv-img img {
  width: 55px;
  height: 55px;
  border-radius: 5px;
  margin: 0.2rem 0.3rem;
}
</style>