<template>
  <div class="view">
    <!-- <div class="logo">
      <img src="../assets/FG-01C.png" alt="" />
    </div> -->
    <div class="header">
      <img src="../assets/images/home_title.png">
    </div>
    <b-form class="form">
      <b-form-group label="账号" label-for="input-1" style="margin-bottom: 1rem" label-cols="2">
        <b-form-input id="input-1" v-model="form.account" required class="inp" style="
            height: 3rem;
            font-size: 1.1rem;
            font-weight: 500;
            letter-spacing: 0.1rem;
            color: #fff;
          " placeholder="请输入账号"></b-form-input>
      </b-form-group>

      <b-form-group label="密码" label-for="input-2" style="margin-bottom: 1rem" label-cols="2">
        <b-form-input id="input-2" v-model="form.password" type="password" autocomplete="off" class="inp" style="
            height: 3rem;
            font-size: 1.1rem;
            font-weight: 500;
            letter-spacing: 0.1rem;

          " required placeholder="请输入密码"></b-form-input>
      </b-form-group>
      <b-form-group label="所属站点" label-for="input-3" style="margin: 1rem 0" label-cols="3">
        <b-form-select id="input-3" v-model="form.site" :options="siteList" class="inp" style="height: 3rem;
              width:100%;
             padding: 0 0 0 0.5rem;
            font-size: 1.1rem;
            font-weight: 500;
            letter-spacing: 0.1rem;
           " required placeholder="请选择站点" @change="handleChangeSite"></b-form-select>
      </b-form-group>
      <div @click="onSubmit" style="
          width: 100%;

          margin-top: 3rem;
        " class="btn_login">
        <span
          style="color: #ffffff;font-family: PingFangSC-Medium, sans-serif;text-shadow:1px 1px 1px #4FC9F2;letter-spacing: 2px;font-size: 1.2rem">登录</span>
      </div>
    </b-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        account: '',
        password: '',
        site: '',
        site_show: ''
      },
      siteList: []
    }
  },
  mounted() {
    const data = { url: 'http://121.36.142.167:7774/jbl/api/site/all/ignore-action?_allow_anonymous=true' }
    this.axios.post('/api/testdwyget', data).then(res => {
      res.data.forEach(v => {
        v.text = v.name
        v.value = v.code
      })
      this.siteList = res.data
    })
  },
  methods: {
    handleChangeSite(e) {
      this.form.site_show = this.siteList.find(v => v.code === e).name
    },
    onSubmit() {
      const data = {
        post: {
          name: this.form.account, password: this.form.password, rememberMe: true
        },
        url: 'http://121.36.142.167:7774/jbl/api/mes/login',
        header: ['Content-Type:application/json']
      }
      this.axios.post('/api/testdwy', data).then(res => {
        if (res.code === 200) {
          if (res.data.status === 'error') {
            return this.$Message.error(res.data.errorMessage)
          } else {
            this.$Message.success(res.msg)
            localStorage.setItem('site', JSON.stringify({ site: this.form.site, site_show: this.form.site_show }))
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('userDto', JSON.stringify(res.data.userDto))
            this.$router.push('/cms/home')
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.view {
  height: 100%;
  padding: 0;
  overflow-x: hidden;
}

.form {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: #fff;
  position: absolute;
  top: 8.8rem;
  padding: 1.7rem 1.5rem;
  font-size: 18px !important;
  font-weight: bold;
}

.logo {
  width: 6rem;
  height: 6rem;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -70%);

  img {
    width: 100%;
    height: 100%;
  }
}

.header {
  color: #fff;
  font-size: 1.5rem;
  position: relative;
  width: 100%;
  top: 3rem;
  left: 1rem;
}

::-webkit-input-placeholder {
  color: #ffffff84;
  /* 设置占位符文字的颜色 */
}

/deep/.inp {
  background: #2A4470 !important;
  // opacity: 0.4;
  border: none;
  color: #fff;
}

input {
  color: #ffffff;
}

.inp:focus {
  //background: #fff !important;
  background-color: #04FFD5;
  color: #ffffff;
  border: 1px solid #76CFFF;
}

/deep/.col-2 {
  color: #ffffff;
  font-family: PingFangSC-Medium, sans-serif;
  text-shadow: 1px 1px 1px #4FC9F2;
  letter-spacing: 2px;
}

/deep/.col-3 {
  color: #ffffff;
  font-family: PingFangSC-Medium, sans-serif;
  text-shadow: 1px 1px 1px #4FC9F2;
  letter-spacing: 2px;
}

.btn_login {
  background: url("../assets/images/btn_login.png");
  display: flex;
  height: 3.5rem;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
