<template>
  <div class="loginMin" ref="login">
      <span class="squery">
        <a-icon @click="Fullscreen" class="iconqp" style="font-size: 30px;color: white" type="arrows-alt" />
      </span>
      <div class="bigbox">

        <div class="loginmodel">
            <!-- 登录 -->
        <a-form class="plg-login" :form="form" @submit="hanlderSubmit">
        
          <!-- <a-form-item>
          <div class="input-wrapper">
            <a-input
              class="input"
              size="large"
              type="text"
              autocomplete="false"
              placeholder="请输入工号"
              v-decorator="[
                'workercode',
                { rules: [{ required: true, message: '请输入工号' }], validateTrigger: 'change' },
              ]"
            >
            </a-input>
            <a-icon class="input-icon" type="user" />
          </div>
        </a-form-item>
         <a-form-item>
          <div class="input-wrapper">
            <a-input
              class="input"
              size="large"
              type="password"
              autocomplete="false"
              placeholder="请输入密码"
              v-decorator="[
                'workpassword',
                { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'change' },
              ]"
            >
            </a-input>
            <a-icon class="input-icon" type="user" />
          </div>
        </a-form-item> -->
         <a-form-item>
          <div class="input-wrapper">
            <a-select :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}" style="width:80%" size='large'  placeholder="请选择复核台" :style="{ width: '100%' }"
            v-decorator="[
                'stationCode',
                { rules: [{ required: true, message: '请选择复核台' }], validateTrigger: 'change' },
              ]">
                <a-select-option v-for="item in workstation" :key="item.stationId" :value="item.stationCode"> {{item.stationName}}</a-select-option>
              </a-select>
    
          </div>
        </a-form-item>
				<a-form-item label="二次复核" style="display: flex;">
				      <a-checkbox-group v-decorator="['isDoubleCheck', { initialValue: [] }]" style="" >
				            <a-checkbox value="1" ></a-checkbox>
				      </a-checkbox-group>
				</a-form-item>
				
        <a-form-item style="margin-top: 24px">
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            class="login-button"
            :loading="state.loginBtn"
       
            >确定</a-button
          >
        </a-form-item>
        </a-form>
      
        </div>
      </div>
      <!-- <a-button @click="qpclick">全屏</a-button> -->
  </div>
</template>

<script>
import { postchecLogin, login, getInfo, getsearchPage} from '../api'
import { mapMutations, mapGetters, mapActions } from 'vuex';
import { axios } from '@/utils/request'
import qs from 'qs'
import Vue from 'vue'
export const EventBus = new Vue()
import {fullScreen, eleFullScreen, checkFull, queryFormItems} from './config'
export default {
  name: 'Paused',
  props: {
    status: {
      type: Boolean
    }
  },
  data() {
    return {
      data: [{
        id:'2112'
      }],
      workstation: [],
      form: this.$form.createForm(this),
      tableDoneBefore: null,
      remoteParams:{},
      screen: false,
      queryFormItems: queryFormItems(this),
      state: {
        loginBtn: false
      },
    }
  },
  
  created() {
    this.getStation()
    // console.log(this.warehouse,'warehouse')

    // console.log(this.userInfo,'userInfo')
    // console.log(this.$store.getters.userInfo.employeeNo)

  },
  mounted() {
    window.onresize = () => {
      if (!checkFull()) {
        this.screen = false
      }
    },
    setTimeout(() =>{
      fullScreen()
      if (this.$store.getters.screen) {
        eleFullScreen(this.$refs.login, this.$store.getters.screen)
      }
    },100)
  },
  computed: {
    ...mapGetters(['warehouse','userInfo']),
    warehouse() {
        return this.$store.getters.warehouse
    },
    userInfo() {
        return this.$store.getters.userInfo
    }
  },
  watch: {
    warehouse: {
      handler(newVal) {
        console.log(newVal)
        this.getStation()
      },
      deep: true
    }
  },

  methods: {
    ...mapMutations(['SET_PERSON']),
    ...mapActions(['CheckLoginIn']),
    hanlderSubmit(event, form) {
    console.log(this.warehouse);
      event.preventDefault()
      console.log(event,form,'21231323123')
      this.form.validateFields((err, values) => {
        if (!err) {
          values.businesstype = '2016'
          values.worktype = 'INNER_CHECK'
          values.warehouseId = this.warehouse.warehouseId
          this.$store.getters.screen = checkFull()
          console.log(this)
          // this.state.loginBtn = true
          console.log(this.$store)
          this.$store.state.outBound.stationCode = values.stationCode
          this.$store.state.outBound.isDoubleCheck = values.isDoubleCheck[0] || 0	//是否双人复核，默认0单人，1双人。
          // this.state.loginBtn = false
          this.$emit('login',2,checkFull(),this.$refs.login)
          // this.CheckLoginIn(values).then(res => {
           
          //   console.log(this.$store)
          // })
          // .catch(error => {
          //   this.$message.error('登录失败')
          // })
        }
      });
      this.$emit('Query',event,form)
    },
    getStation() {
      const params = {
        workercode: this.$store.getters.userInfo.employeeNo
      }
      getsearchPage(params).then(res =>{
        if (res.success) {
          this.workstation = res.data ? res.data : []
        }
      })
    },
    Fullscreen() {
      // fullScreen(true)
      // console.log('全屏状态',this.screen )
      if (checkFull()) {
        this.screen = false
        eleFullScreen(this.$refs.login, this.screen )
          
      } else {
        this.screen = true
        eleFullScreen(this.$refs.login,this.screen )
      }
      //  this.$emit('fullscreenEven',2,this.screen,this.$refs.login)
    },
    loginIn(){
      this.$emit('login',2,checkFull(),this.$refs.login)
      this.$store.getters.screen = checkFull()
      console.log(this.$store)
    },
    btEven(event) {
      console.log(event)
      this.$emit('btEven',event)

    },
    actionClick(data, event) {
      console.log(event,data)
      this.$emit('actClick',data,event)
    },
    exit() {
      eleFullScreen(this.$refs.login, true)
    },
    async clickRow(selectedRowKeys, record, row) {
      // console.log(record,row)
      this.$emit('clickRow',record)

    },
  },
}
</script>

<style lang="less" scoped>
.loginMin {
    height: 75vh;
    position: relative;
    background-image: url('./imgs/bg.png');
    .bigbox{
        display: flex;
        justify-content: center;
        padding-top: 15vh;
        .loginmodel{
          width: 380px;
          padding: 20px 2.1%   ;
          background: #ffffff;
          height: 244px;
          opacity: 0.8;
          background: #FFFFFF;
          border-radius: 4px;
          border-radius: 4px;
        }
    }
    
}
.squery {
    position: absolute;
    right: 20px;
    top: 20px;
    display: inline-block;
    background: rgb(170, 187, 200);
}
.input-wrapper {
  position: relative;
  margin-top: 20px;
  padding-bottom: 5px;
}
.input-icon {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 40px;
  line-height: 38px;
  font-size: 14px;
  color: #dce1e7;
  background: #f7f9fc;
  border-right: 1px solid #dce1e7;
}
.input {
  text-indent: 40px;
  background: #ffffff;
}
.login-button {
  padding: 0 15px;
  font-size: 16px;
  height: 40px;
  width: 100%;
}
.extend-title {
  font-size: 14px;
  font-weight: bold;
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 12px;
}
</style>