<template>
  <div class="page">
    <div class="check-login">
       <div class="line"></div>
      <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>

      <div class="check-info">
        <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/leftrim.png"
          alt
        />
        <input class="info-input" type="text" placeholder="授权编号" v-model="info.userno" />
      </div>

      <div class="check-info">
        <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/leftrim.png"
          alt
        />
        <input class="info-input" type="password" placeholder="授权密码" v-model="info.password" />
      </div>

      <div class="check-btn">
        <button class="btn-eva" @click="login()">登录</button>
      </div>

    </div>



    <div class="foot">
      <div class="foot-msg">
        <br />
        <div class="company">公司：{{enterpriseName}}</div>
        <div>网址：{{website}}</div>
        <div>地址：{{address}}</div>
        <div>布朗全国统一服务热线：{{phone}}</div>
        <br />
      </div>
    </div>

     <div class="navigation-bar">
      <div class="navigation-line"></div>
      <div class="navigation-div">
        <span class="navigation-btn" :class="{'click':btn=='1'}" @click="about()">关于布朗</span>
        <span class="navigation-btn" :class="{'click':btn=='2'}" @click="query()">追溯查询</span>
        <span class="navigation-btn" :class="{'click':btn=='3'}" @click="qcserveice()">质检服务</span>
      </div>
    </div>
  </div>

  

</template>

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

export default {
  name: "Login",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
       btn:"3",
      phone: "021-6278-8781",
      enterpriseName: "上海布朗商行有限公司",
      website: "http://www.arbrown.com.cn",
      address: "上海上海市长宁区长宁路1018号2014室",
      info: {
        userno: "",
        password: "",
        phone: "021-6278-8781",
        enterpriseName: "上海布朗商行有限公司",
        website: "http://www.arbrown.com.cn",
        address: "上海上海市长宁区长宁路1018号2014室"
      }
    };
  },
  methods: {
    getInfo() {
      // 访问后台
    },
    // 登录
    login() {
      debugger;
      var that = this;
      var eno = that.sup8.context.eno || "100833014929";
      apiHelper.qualityInspectionLogin(
        (eno = eno),
        that.info.userno,
        that.info.password,
        function(res) {
          debugger;
          if (res.flag == true) {
            that.$parent.changeSelectedPage("Check_8");

            // 存储登录人信息
            localStorage.setItem("arbrownuser", JSON.stringify(res.data));
          } else {
            MessageBox.alert(res.data || "登录失败");
          }
          debugger;
        }
      );
    },
    about() {
      this.btn='1';
      this.$parent.changeSelectedPage("Check_7");
    },
    query() {
      this.btn='2';
      this.$parent.changeSelectedPage("Check_1");
    },
    qcserveice() {
       this.btn='3';
      this.$parent.changeSelectedPage("Check_3");
    }
  },
  watch: {},
  created: function() {
    var that = this;
    var arbrownuserstr = sessionStorage.getItem("arbrownuser");
    if (!!arbrownuserstr) {
      var arbrownuser = JSON.parse(arbrownuserstr);
      if (!!arbrownuser && !!arbrownuser.UserId && !!arbrownuser.UserName) {
        that.$parent.changeSelectedPage("Check_8");
      }
    }
  },

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

<style scoped>
.page{
  height: 100%;
}

.line {
  background-color: #f9fafb;
  height: 1px;
}

.check-login {
  /* min-height: 32rem; */
  background: linear-gradient(#f9fafb, #ffffff);
}
.check-login .dv-content-title {
  margin: 2rem 0rem 0.5rem 1rem;
  /* background-color: #ffffff; */
}
.dv-content-title img {
  width: 1.1rem;
  margin: 0rem 0.5rem 0rem 0rem;
}

.content-title {
  position: relative;
  top: -0.3rem;
  font-size: 15px;
  font-weight: bolder;
  color: #7b3e15;
}

.check-login .check-info {
  padding: 0.5rem 0.5rem 0.5rem 1rem;
}
.check-info img {
  height: 32px;
  float: left;
}

.check-info .info-input {
  background-color: transparent;
   border: 0.02rem solid #d4d4d4;
  width: 91%;
  height: 29px;
  color: #858380;
  padding-left: 10px;
}

.check-btn {
  padding-top: 2rem;
  text-align: center;
}
.btn-eva {
  width: 90%;
  height: 2.1rem;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background-color: #1d4c9d;
  border: 1px solid #1d4c9d;
  border-radius: 4px;
}

.foot {
  position: absolute;
  bottom: 4%;
  width: 100%;
  /* margin-top: 34.5%; */
  background-color: #fafbfd;
}
.foot-msg {
  margin-left: 6%;
  max-width: 88%;
  font-size: 0.6rem;
  letter-spacing: 0.01rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.foot-msg .company {
  font-weight: bold;
}

.navigation-bar {
  position: absolute;
  bottom: 0px;
  height: 4%;
  width: 100%;
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: gray;
}
.navigation-div {
  margin-top: 1%;
  margin-left: 5%;
  width: 100%;
  margin-right: 5%;
}
.navigation-btn {
  display: inline-block;
  width: 30%;
  text-align: center;
}
.navigation-line {
  background-color: #fafbfd;
  height: 1px;
}
.click{
  color: #864f29;
}
</style>
