<template>
  <!--<div-->
  <!--    id="screen"-->
  <!--    class="login allShow"-->
  <!--    :style="{ 'width': `${style.width}px`, 'height': `${style.height}px`, 'transform': `${style.transform}` }">-->
  <div class="login">
    <div style="position: relative">
      <div class="notLoginStopBox">
        <div class="background"></div>
        <div class="text">
          未登陆系统将不允许设备进行工作
        </div>
      </div>
      <div
          style="position: absolute;top: 150px; left: 50%; border: 1px solid black;border-radius: 25px; width: 500px; height: 415px; background-color: white; padding: 10px;">
        <div v-if="count === 1">
          <el-form ref="form1" :model="loginForm" :rules="rules" label-position="left" label-width="70px"
                   style="width: 100%;">
            <div style="display: flex;align-content: center;justify-content: center;" @click="handleFullScreen">
              <img src="../../assets/image/leftPic.jpg" width="166.5" height="54">
              <span
                  style="font-size: 30px; color:black; line-height: 60px; width: 260px;margin-left: 10px">MES信息管理系统</span>
            </div>
            <div style="border: 2px solid royalblue; width: 500px;"/>
            <div style="width: 480px; margin-top: 10px;">
              <div style="margin-left: 30px">
                <el-form-item>
                  <span slot="label" style="font-size: 20px;color: #000">
                    班次
                  </span>
                  <el-select v-model="loginForm.class" placeholder="请选择班次"
                             style="width:340px; border: 2px solid black; border-radius:6px">
                    <!--存储过程1-->
                    <el-option
                        v-for="item in classArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <span slot="label" style="font-size: 20px;color: #000">
                    工位
                  </span>
                  <el-select v-model="loginForm.station" placeholder="请选择工位"
                             style="width:340px; border: 2px solid black; border-radius:6px">
                    <!--存储过程1-->
                    <el-option
                        v-for="item in stationArrIp"
                        :key="item.value"
                        :label="item.label"
                        :value="{value:item.value,label:item.label,MesWebCode:item.MesWebCode}"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <span slot="label" style="font-size: 20px;color: #000">
                    工号
                  </span>
                  <el-input v-model="loginForm.username" style="width:340px; border: 2px solid black; border-radius:6px"
                            clearable placeholder="请输入用户名"/>
                </el-form-item>
                <el-form-item>
                  <span slot="label" style="font-size: 20px;color: #000">
                    密码
                  </span>
                  <el-input v-model="loginForm.password" type="password" auto-complete="on"
                            style="width:340px; border: 2px solid black; border-radius:6px" clearable
                            placeholder="请输入密码" @keyup.enter.native="handleLogin"/>
                </el-form-item>
                <div style="text-align: center">
                  <el-button :loading="loading" style="background-color: dodgerblue; width: 200px; height: 60px;"
                             @click="handleLogin()">
                    <span style="font-size: large; color: black;">登录</span>
                  </el-button>
                  <i class="el-icon-edit" style="font-size: 20px; margin-left: 30px" @click="editform2()"/>
                  <i class="el-icon-setting" style="font-size: 20px; margin-left: 30px" @click="editform3()"/>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <div v-if="count === 2">
          <el-form ref="form2" :model="form2" :rules="rules1" label-position="left" class="demo-ruleForm"
                   label-width="120px" style="width: 90%;">
            <div style="margin-left: 6px; width: 680px; height: 60px;">
              <i class="el-icon-edit" style="font-size: xx-large; margin-left: 30px; margin-top: 10px"/>
              <span style="font-size: xx-large; color:black; line-height: 60px; margin-left: 10px">修改密码</span>
            </div>
            <div style="border: 2px solid royalblue; width: 500px;"/>
            <div style="width: 480px; margin-top: 10px;">
              <div>
                <el-form-item>
                  <span slot="label" style="font-size: 20px;color: #000">
                    工号：
                  </span>
                  <el-input v-model="form2.user" style="width:340px;border: 2px solid black; border-radius:6px"
                            clearable placeholder="请输入工号"/>
                </el-form-item>
                <el-form-item>
                  <span slot="label" style="font-size: 20px;color: #000">
                    原始密码：
                  </span>
                  <el-input v-model="form2.oldPassword" style="width:340px; border: 2px solid black; border-radius:6px"
                            clearable placeholder="请输入原始密码"/>
                </el-form-item>
                <el-form-item>
                  <span slot="label" style="font-size: 20px;color: #000">
                    新密码：
                  </span>
                  <el-input v-model="form2.newPassword" style="width:340px;border: 2px solid black; border-radius:6px"
                            clearable placeholder="请输入新密码"/>
                </el-form-item>
                <el-form-item>
                  <span slot="label" style="font-size: 20px;color: #000">
                    确认密码：
                  </span>
                  <el-input v-model="form2.newPassword" style="width:340px;border: 2px solid black; border-radius:6px"
                            clearable placeholder="再次输入新密码"/>
                </el-form-item>
                <div style="text-align: center">
                  <el-button style="background-color: dodgerblue; width: 200px; height: 60px;" @click="routeJump2()">
                    <span style="font-size: large; color: black;">提交</span>
                  </el-button>
                  <i class="el-icon-close" style="font-size: 20px; margin-left: 30px" @click="editform1()"/>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <div v-if="count === 3">
          <el-form ref="form3" :model="form3" :rules="rules2" label-position="left" class="demo-ruleForm"
                   label-width="100px" style="width: 100%;">
            <div style="margin-left: 6px; width: 500px; height: 60px;">
              <i class="el-icon-setting" style="font-size: xx-large; margin-left: 30px; margin-top: 10px"/>
              <span
                  style="font-size: xx-large; color:black; line-height: 60px; margin-left: 10px">设置MES系统参数</span>
            </div>
            <div style="border: 2px solid royalblue; width: 500px;"/>
            <div style="width: 500px; margin-top: 10px;">
              <div style="margin-left: 30px">
                <el-form-item style="margin-top: 40px">
                  <span slot="label" style="font-size: 20px;color: #000">
                    工位号：
                  </span>
                  <el-select v-model="form3.stationID" style="width:340px;border: 2px solid black; border-radius:6px">
                    <!--存储过程1-->
                    <el-option
                        v-for="item in stationArr"
                        :key="item.value"
                        :label="item.label"
                        :value="{value:item.value,label:item.label,MesWebCode:item.MesWebCode}"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item style="margin-top: 40px">
                  <span slot="label" style="font-size: 20px;color: #000">
                    IP：
                  </span>
                  <el-input v-model="form3.severIP" readonly
                            style="width:340px;border: 2px solid black; border-radius:6px"
                            placeholder="请输入服务器IP地址"/>
                </el-form-item>
                <el-form-item style="margin-top: 40px">
                  <span slot="label" style="font-size: 20px;color: #000">
                    端口：
                  </span>
                  <el-input v-model="form3.network" readonly
                            style="width:340px;border: 2px solid black; border-radius:6px"
                            placeholder="请输入服务器端口"/>
                </el-form-item>
                <div style="text-align: center">
                  <el-button style="background-color: dodgerblue;width: 200px; height: 60px;"
                             @click="submitServiceParameters()">
                    <span style="font-size: large; color: black;">提交</span>
                  </el-button>
                  <i class="el-icon-close" style="font-size: 20px; margin-left: 30px" @click="editform1()"/>
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Cookie from 'js-cookie'
import $ from 'jquery'

export default {
  data() {
    return {
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      },
      fullscreen: false,
      isAppendToBodyOther: false,
      count: 1,
      ip: '',
      loading: false,
      class: '',
      classArr: [],
      stationArr: [],
      stationArrIp: [],
      loginForm: {
        class: '',
        station: '',
        username: '',
        usernameShow: '',
        password: '',
        checked: true
      },
      form2: {
        user: '',
        oldPassword: '',
        newPassword: '',
        qnewPassword: ''
      },
      form3: {
        stationID: '',
        severIP: window.g.mqttIP,
        network: window.g.mqttPortNumber
      },
      rules1: {
        user: [{required: true, message: '请输入用户名', trigger: 'change'}],
        oldPassword: [{required: true, message: '请输入旧密码', trigger: 'change'}],
        newPassword: [{required: true, message: '请输入新密码', trigger: 'change'}],
        qnewPassword: [{required: true, message: '请确认新密码', trigger: 'change'}]
      },
      rules2: {
        stationID: [{required: true, message: '请选择工位', trigger: 'change'}],
        severIP: [{required: true, message: '请输入服务器ip', trigger: 'change'}],
        network: [{required: true, message: '请输入服务器端口', trigger: 'change'}]
      },
      rules: {
        class: [{required: true, message: '请选择班次', trigger: 'change'}],
        station: [{required: true, message: '请选择工位', trigger: 'change'}],
        user: [{required: true, message: '请输入用户名', trigger: 'change'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      }
    }
  },
  mounted() {
    const scope = this
    scope.setScale()
    /* 窗口改变事件*/
    $(window).resize(() => {
      console.log('aaaaa')
      scope.setScale()
    })
  },
  created() {
    setTimeout(() => {
      this.getIp()
      this.getStation()
      this.getShift()
    }, (500))
  },
  methods: {
    getScale() {
      // const w = window.innerWidth / this.style.width
      // const h = window.innerHeight / this.style.height
      // return {x: w, y: h}
    },
    setScale() {
      // const scale = this.getScale()
      // this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    getIp() {
      const Data = this.CreateData('4000', '')
      this.ExecDatabase(Data).then(response => {
        if (response.data) {
          this.ip = response.data
          this.getStationByIp()
          this.$store.commit('set_stationIp', response.data)
        } else {
          this.$message.error('工控机IP获取失败 ！')
        }
      })
    },
    getStationByIp() {
      this.stationArrIp = []
      const param = []
      param[0] = ['工控机IP', this.ip]
      const Data = this.CreateData('11', 'MES_计划BOM_工位与名称_按工控机IP_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationArrIp.push({
            label: response.data[i].工位号,
            value: response.data[i].工位代码,
            MesWebCode: response.data[i].MesWebCode
          })
        }
      })
    },
    submitServiceParameters() {
      if (this.form3.stationID.value && this.form3.severIP && this.form3.network) {
        const param = []
        param[0] = ['工位代码', this.form3.stationID.value]
        param[1] = ['工控机IP', this.ip]
        param[2] = ['工位号', this.form3.stationID.label]
        param[3] = ['服务器IP', this.form3.severIP]
        param[4] = ['通讯端口', this.form3.network]
        const Data = this.CreateData('12', 'AMES_MES_计划BOM_工位与名称_信息修改', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '参数设置成功',
              type: 'success'
            })
            let ss = 0
            for (const responseElement of this.stationArrIp) {
              if (responseElement.value === this.form3.stationID.value) {
                ss = 1
              }
            }
            if (ss === 0) {
              this.stationArrIp.push(this.form3.stationID)
            }
            this.loginForm.station = this.form3.stationID
            this.count = 1
          } else {
            this.$message.error('参数设置失败')
          }
        })
      } else {
        this.$message.error('请输入全参数！')
      }
    },
    getStation() {
      this.stationArr = []
      const Data = this.CreateData('11', '工位与名称_视图_查询')
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationArr.push({
            label: response.data[i].工位号,
            value: response.data[i].工位代码,
            MesWebCode: response.data[i].MesWebCode
          })
        }
      })
    },
    getShift() {
      this.classArr = []
      const Data = this.CreateData('11', 'AMES_物料拉动_人员班组管理_班次信息_登录_查询')
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.classArr.push({
            label: response.data[i].班次描述,
            value: response.data[i].班次代码
          })
        }
      })
    },
    handleLogin() {
      if (!this.loginForm.station.value) {
        this.$message.error('请设置工位！')
      } else if (!this.loginForm.class) {
        this.$message.error('请设置班次！')
      } else {
        this.row = null
        this.loading = true
        this.$store.dispatch('Login', this.loginForm).then(res => {
          if (res.data.length === 1 && res.data[0].考勤编号 === this.loginForm.username && res.data[0].密码 === this.loginForm.password) {
            this.loginForm.usernameShow = res.data[0].姓名
            const param = []
            param[0] = param[0] = ['工位号', this.loginForm.station.label]
            param[1] = param[1] = ['操作者工号', this.loginForm.username]
            param[2] = param[2] = ['班次名称', this.loginForm.class]
            const Data = this.CreateData('12', '测量数据工位_监控系统_操作者工号_增加', param)
            this.ExecDatabase(Data).then(() => {
            })
            this.setLoginStatus(this.loginForm.station.label)
            this.$message({
              message: '登录成功',
              type: 'success'
            })
            this.setStation(this.loginForm.station.label)
            this.loading = false
            this.$router.push({path: '/layout'})
            if (this.loginForm.station.label === 'J07MA115') {
              this.$router.push({
                name: 'RepairManagement',
                params: {
                  id: 123
                }
              })
            } else {
              this.$router.push({
                name: 'OperationGuide',
                params: {
                  id: 123
                }
              })
            }
          } else {
            this.$message.error('登录失败！')
          }
        }).catch(() => {
          this.loading = false
        })
        if (this.loginForm.checked === true) { // 传入账号名，密码，和保存天数3个参数
          this.setCookie(this.loginForm.username, this.loginForm.password, this.loginForm.checked)
        } else {
          this.clearCookie()
        }
      }
    },
    // 通知设备允许工作
    setLoginStatus(OpName) {
      // 1. 将这条数据保存在数据库持久化表中
      var param = []
      param[0] = ['工位号', OpName]
      param[1] = ['名称', '登陆状态']
      param[2] = ['数值', 1]
      var Data = this.CreateData('12', '北汽福田_持久化数据记录表_增加修改', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
        } else {
          this.$message({
            message: '工位登陆状态设置失败，可能会导致设备无法工作，请联系管理员！',
            type: 'error'
          })
        }
      })
    },
    setStation() {
      this.$store.commit('set_MesWebCode', this.loginForm.station.MesWebCode)
      this.$store.commit('set_stationNumber', this.loginForm.station.value)
      this.$store.commit('set_stationName', this.loginForm.station.label)
      this.$store.commit('set_classesID', 'A')
      this.$store.commit('set_classes', '白班')
      this.$store.commit('set_serverIP', this.form3.severIP)
      this.$store.commit('set_serverPort', this.form3.network)
      this.$store.commit('set_stationUserName', this.loginForm.usernameShow)
      this.$store.commit('set_stationUserCount', this.loginForm.username)
    },
    setCookie(username, password, checked) {
      Cookie.set('username', username, {expires: 7})
      Cookie.set('password', password, {expires: 7})
      Cookie.set('checked', checked, {expires: 7})
    },
    clearCookie() {
      Cookie.remove('username')
      Cookie.remove('password')
      Cookie.remove('checked')
    },
    routeJump2() {
      this.count = 1
    },
    editform2() {
      this.count = 2
    },
    editform3() {
      this.count = 3
    },
    editform1() {
      this.count = 1
    },
    handleFullScreen() {
      const element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen
    }
  }
}
</script>

<style scoped>

.allShow {
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}

.login {
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../public/login.png");
}

.notLoginStopBox {
  position: absolute;
  top: 50px;
  left: 50px;
  border: 1px solid black;
  border-radius: 25px;
  width: 200px;
  height: 100px;
  /*background-color: white;*/
  padding: 10px;

}

.notLoginStopBox .background {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

.notLoginStopBox .text {
  position: absolute;
  top: 0px;
  width: 80%;
  margin: 30px 0 0 8%;
  font-size: 20px;
  font-weight: bold;
  color: #ff2e00;
}
</style>
