<template>
  <div ref="workerLogin">
    <a-modal
      :getContainer="
        (triggerNode) => {
          return $refs.workerLogin
        }
      "
      title="解锁"
      :visible="loginVisible"
      :confirm-loading="confirmLoading"
      @ok="loginevent"
      @cancel="handleCancel"
    >
      <p style="margin-top: 30px; margin-bottom: 25px; padding-right: 60px">
        <a-form class="plg-login" :form="loginform" @submit.prevent="loginevent">
          <a-form-item label="用户名" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
            <div class="input-wrapper">
              <a-input
                class="input"
                size="large"
                type="text"
                autocomplete="false"
                placeholder="请输入用户名"
                v-decorator="[
                  'username',
                  { rules: [{ required: true, message: '请输入用户名' }], validateTrigger: 'change' },
                ]"
              >
              </a-input>
            </div>
          </a-form-item>
          <a-form-item label="密码" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
            <div class="input-wrapper">
              <a-input
                class="input"
                size="large"
                type="password"
                autocomplete="false"
                placeholder="请输入密码"
                v-decorator="[
                  'password',
                  { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'change' },
                ]"
              >
              </a-input>
            </div>
          </a-form-item>
        </a-form>
      </p>
    </a-modal>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import request from '@/utils/request'
import qs from 'qs'

export default {
  name: 'workerLogin',
  components: {},
   model: {
    prop: "loginVisible",
    event: "change",
  },
  props: {
    loginVisible: {
      type: Boolean,
      default: false,
    },
    isSupervisedData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
      confirmLoading: false,
      loginform: this.$form.createForm(this),
      refsss: null,
    }
  },
  created() {},
  mounted() {},
  computed: {
    // ...mapState({
    //   chekUser: (state) => state.outBound.checkPerson,
    //   stationCode: (state) => state.outBound.stationCode,
    //   businesstype: (state) => state.outBound.businesstype,
    //   worktype: (state) => state.outBound.worktype,
    //   warehouseId: (state) => state.outBound.warehouseId,
    // }),
    // ...mapGetters({
    //   warehouse: 'warehouse',
    // }),
  },
  watch: {},
  methods: {
    ...mapActions(['CheckLoginIn']),
    loginevent() {
      this.loginform.validateFields((err, values) => {
        if (!err) {
          console.log('登录前登录工号：', values)
          request({
            method: 'post',
            url: '/api/auth/login',
            data:  qs.stringify(values),
          }).then(res => {
             if (res.success) {
                this.$emit('loginResult', true, res)
                this.$emit("change", false);
                this.$message.success('解锁成功')
              } else {
                this.$message.error(res.message)
              }
          })
          // this.confirmLoading = true
          // this.CheckLoginIn(values)
          //   .then((res) => {
          //     this.$message.success('操作成功')
          //     console.log('登录成功返回数据', res)
          //     this.confirmLoading = false
          //     this.$emit('loginResult', false, res)
          //     this.loginform.resetFields()
          //   })
          //   .catch((error) => {
          //     console.log(error)
          //     this.$message.error('解锁失败')
          //     this.confirmLoading = false
          //   })
        }
      })
    },
    handleCancel() {
      // console.log('取消')
      this.$emit('handleCancel', false)
      this.$emit("change", false);
    },
  },
}
</script>

<style></style>
