<template>
  <div class="box-card">
    <el-form ref="form" :model="form" v-loading="loadingStatus" :element-loading-text="loadingText" element-loading-background="rgba(0, 0, 0, 0.2)">
      <el-card>
        <LabelTemplate title="入库信息"></LabelTemplate>
        <Storage :form="form" ref="storage"></Storage>
      </el-card>
      <div class="interval">
        <div></div>
      </div>
      <el-card>
        <LabelTemplate title="物料信息"></LabelTemplate>
        <Material :form="form" ref="material"></Material>
        <div style="width: 100%; text-align: center">
          <el-button type="primary" @click="clickSubmit()" size="small" v-db-click>提 交</el-button>
          <el-button @click="clickCancel" size="small" v-db-click>取 消</el-button>
        </div>
        <br />
      </el-card>
    </el-form>
  </div>
</template>

<script>
import LabelTemplate from '@/components/LabelTemplate'
import Storage from './storage'
import Material from './material'
import * as API from '@/api/shengde/warehouse/outAndInWarehouse'
import Utils from '@/util/transit'
import { mapGetters } from 'vuex'

export default {
  name: 'putInStorageTransfer',
  components: { LabelTemplate, Storage, Material },
  data() {
    return {
      loadingText: '',
      loadingStatus: false,
      form: {
        comeSubsidiaryId: '',
        comeWarehouseId: '',
        putSubsidiaryId: '',
        putWarehouseId: '',
        proposer: '',
        content: '',
        allotDetailList: [],
      },
    }
  },
  created() {
    this.form.proposer = this.userInfo.real_name
  },
  mounted() {},
  computed: mapGetters(['userInfo']),
  methods: {
    clickSubmit() {
      let flagStorage = this.$refs.storage.validateForm()
      let flagProduct = true
      let flagMaterial = true
      flagMaterial = this.$refs.material.validateForm()
      if (flagStorage && flagProduct && flagMaterial) {
        if (this.form.allotDetailList && this.form.allotDetailList.length > 0) {
          this.loadingText = '提交数据中,请稍后'
          this.loadingStatus = true
          API.allotSave(this.form).then(
            () => {
              Utils.$emit('refreshPutList', true)
              this.msgSuccess('提交完成')
              this.form = {
                comeSubsidiaryId: '',
                comeWarehouseId: '',
                putSubsidiaryId: '',
                putWarehouseId: '',
                proposer: '',
                content: '',
                allotDetailList: [],
              }
              this.loadingStatus = false
              this.$store.dispatch('delView', this.$route)
              this.$router.replace({
                path: '/shengde/warehouse/putInStorage/index',
              })
            },
            (err) => {
              console.log('allotSave: ' + err)
              this.loadingStatus = false
            }
          )
        } else {
          this.msgInfo('请选择BOM信息')
        }
      } else {
        setTimeout(() => {
          const errorDiv = document.getElementsByClassName('is-error')
          errorDiv[0].scrollIntoView()
        }, 0)
      }
    },
    clickCancel() {
      this.$store.dispatch('delView', this.$route)
      this.$router.replace({
        path: '/shengde/warehouse/putInStorage/index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
* {
  font-size: 12px;
}

.box-card {
  height: calc(100vh - 110px);
  overflow-y: auto;
}

::v-deep {
  .el-input__inner {
    border-radius: 1px;
  }
  .el-button--mini {
    border-radius: 1px;
  }
  .tableHeader th {
    background-color: #edf0f5;
    height: 35px;
    padding: 0;
  }
}

.interval {
  div {
    height: 12px;
    background-color: #f2f2f2;
    box-shadow: var(--devui-shadow-fullscreen-overlay, 0 10px 40px 0) var(--devui-shadow, rgba(0, 0, 0, 0.08));
  }
}
</style>
