<template>
  <div>

    <el-form :model="formData" style="width: 100%;" ref="dataForm" :rules="formRules"
             label-width="auto"
    >
      <el-row :gutter="24">
        <el-col :span="12" class="el-col">
          <el-form-item label="货位编码:" prop="code" class="query-form-item">
            <el-input
              disabled
              v-model="formData.code" style="width: 80%"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="货位名称:"  class="query-form-item"  prop="name" placeholder="请输入分格名称">
            <el-input
              v-model="formData.name" style="width: 80%"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>、
      <el-row :gutter="24">
        <el-col :span="12" class="el-col">
          <el-form-item label="备注:" prop="remake" class="query-form-item">
            <el-input
              v-model="formData.remark" style="width: 80%"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="hideForm">取消</el-button>
      <el-button
        type="primary"
        @click.native="formSubmit()"
      >提交
      </el-button
      >
    </div>
  </div>
</template>

<script>

import { addQueue, createQueueCode, updateQueue } from '@/api/basic/workPlace/SysWorkplaceQueue'

export default {
  props: {
    closeDialog: {
      type: Function,
      required: true
    },
    workplaceId: {
      type: Object,
      required: true
    },
    queueData: {
      type: Object,
      required: true
    },
  },
  components: {},
  data() {
    return {
      formData: {
        code: "",
        name: "",
        remark: "",
        workPlaceIdFk: "",
      },
      formRules: {
        name: [
          { required: true, message: '请输入分格名称', trigger: 'blur' }
        ],
      }
    }
  },
  computed: {},
  methods: {
    getPlaidCode(){
      createQueueCode().then(res => {
        if (res.code == 20000){
          this.formData.code = res.data
        }
      }).catch(() => {

      })
    },
    formSubmit(){
      this.formData.workPlaceIdFk = this.workplaceId
      this.$refs['dataForm'].validate((rules) => {
        if (rules) {
          if (this.queueData != null){
            updateQueue(this.formData).then(res => {
              if (res.code == 20000){
                this.$message.success("更新成功")
                this.closeDialog()
              }else {
                this.$message.error(res.message)
              }
            })
          }else {
            addQueue(this.formData).then(res => {
              if (res.code == 20000){
                this.$message.success("新增成功")
                this.closeDialog()
              }else {
                this.$message.error(res.message)
              }
            })
          }

        }
      })
    },
    hideForm(){
      this.closeDialog()
    }
  },
  created() {
    if (this.queueData != null){
      this.formData = this.queueData
    }else {
      //更新就不获取编号了
      this.getPlaidCode()
    }

  }
}
</script>

<style scoped>


.dialog-footer {
  text-align: center;
}
</style>
