<template>
  <div class='workStation-wrap' :class='screen?"screen":""' ref='login'>
    <div class='screen-box'>
      <a-icon @click='Fullscreen' class='iconqp' style='font-size: 30px;color: white' type='arrows-alt' />
    </div>
    <div class='entrance-box'>
      <a-form class='plg-login' :form='form' @submit='handlerSubmit'>
        <a-form-item>
          <div class='input-wrapper'>
            <a-select :getPopupContainer='triggerNode => {return triggerNode.parentNode || document.body;}'
                      style='width:100%' size='large' placeholder='请选择复核台' :style="{ width: '100%' }"
                      :options='workStationOptions'
                      v-decorator="[
                'stationCode',
                { rules: [{ required: true, message: '请选择复核台' }], validateTrigger: 'change' },
              ]" />
          </div>
        </a-form-item>
        <a-form-item label='二次复核' style='display: flex;'>
          <a-checkbox-group v-decorator="['isDoubleCheck', { initialValue: [] }]">
            <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'>
            确定
          </a-button>
        </a-form-item>
      </a-form>

    </div>
  </div>
</template>

<script>
import { login, getsearchPage } from './api'
import { queryFormItems } from './components/config'

export default {
  name: 'workStation',
  props: {
    screen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      workStationOptions: [],
      form: this.$form.createForm(this),
      tableDoneBefore: null,
      remoteParams: {},
      queryFormItems: queryFormItems(this)
    }
  },
  created() {
    this.getStation()
  },
  computed: {
    warehouse() {
      return this.$store.getters.warehouse
    },
    userInfo() {
      return this.$store.getters.userInfo
    }
  },
  watch: {
    warehouse: {
      handler(newVal) {
        console.log(newVal)
        this.getStation()
      },
      deep: true
    }
  },
  methods: {
    handlerSubmit(event, form) {
      event.preventDefault()
      this.form.validateFields((err, values) => {
        if (err) return
        const businesstype = '2016'
        const worktype = 'INNER_CHECK'
        const stationId = this.workStationOptions.find(item => item.stationCode == values.stationCode).stationId
        const stationCode = values.stationCode
        const isDoubleCheck = values.isDoubleCheck[0] || 0	//是否双人复核，默认0单人，1双人

        const stationInfo = {
          businesstype,
          worktype,
          stationId,
          stationCode,
          isDoubleCheck
        }
        this.$emit('changeStationInfo', stationInfo)
        this.$emit('changePage', 2)
      })
      this.$emit('Query', event, form)
    },
    getStation() {
      const { employeeNo } = this.userInfo
      getsearchPage({ workercode: employeeNo }).then(res => {
        if (res.success) {
          this.workStationOptions = res.data?.map(_ => ({ ..._, label: _.stationName, value: _.stationCode })) || []
        } else {
          this.$message.error(res.message)
        }
      })
    },
    Fullscreen() {
      this.$emit('fullscreenEven')
    }
  }
}
</script>

<style lang='less' scoped>
.workStation-wrap {
  height: calc(100vh - 155px);
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('./imgs/bg.png');

  &.screen {
    height: 100vh;
  }

  .screen-box {
    position: absolute;
    right: 20px;
    top: 20px;
    display: inline-block;
    background: rgb(170, 187, 200);
  }

  .entrance-box {
    width: 380px;
    padding: 20px;
    background: #ffffff;
    opacity: 0.8;
    border-radius: 4px;
  }
}


.input-wrapper {
  position: relative;
  margin-top: 20px;
  padding-bottom: 5px;
}

.login-button {
  height: 40px;
  width: 100%;
}
</style>
