<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
              v-model="formData.code" style="width: 80%"
              auto-complete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="槽位名称:" class="query-form-item">
            <el-input
              v-model="formData.name" style="width: 80%"
              auto-complete="off"
              placeholder="请输入槽位名称"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row :gutter="24">-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="所属工位:" class="query-form-item" prop="workPlaceIdFk">-->
      <!--      <el-select-->
      <!--        disabled-->
      <!--        v-model="formData.workPlaceIdFk"-->
      <!--        filterable-->
      <!--        remote-->
      <!--        style="width: 80%"-->
      <!--        placeholder="请输入选择所属工位"-->
      <!--      >-->
      <!--        <el-option-->
      <!--          v-for="item in workPlaces"-->
      <!--          :key="item.code"-->
      <!--          :label="item.label"-->
      <!--          :value="item.code"-->
      <!--        />-->
      <!--      </el-select>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->
    </el-form>
    <div slot="footer" class="dialog-footer" style="margin-top: 50px">
      <el-button @click.native="hideForm">取消</el-button>
      <el-button
        type="primary"
        @click.native="formSubmit()"
      >提交
      </el-button
      >
    </div>
  </div>
</template>

<script>
import { filterWorkOptimize } from '@/api/basic/workPlace/sysWorkplaceManage'
import { updateQueue} from '@/api/basic/workPlace/SysWorkplaceQueue'
import { isBlank } from '@/utils/strUtil'

export default {
  props: {
    closeDialog: {
      type: Function,
      required: true
    },
    rowData: {
      type: Object,
      required: true
    },
    workplaceId: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      formData: {
        code: '',
        name: '',
        remark: '',
        workPlaceIdFk: ''
      },
      freightData: null,
      workPlaces: [],
      formRules: {
        // name: [
        //   { required: true, message: '请输入货架说明', trigger: 'blur' }
        // ],
        workPlaceIdFk: [
          { required: true, message: '请选择所属工位', trigger: 'blur' }
        ]
      },


    }
  },
  methods: {
    findWorkPlace(val) {
      let query = {
        // chargeUser: _this.$store.getters.userId,
        userIdFlag: true,
        key: val,
        page: 1,
        limit: 10,
        workPlaceClass: 2
      }
      filterWorkOptimize(query)
        .then((response) => {
          this.workPlaces = response.data || []
        })
        .catch(() => {
          this.options.getWorkPlaceList = []
        })
    },
    formSubmit(){
      updateQueue(this.formData).then(res => {
        if (res.code == 20000){
          this.$message.success("更新成功")
        }else {
          this.$message.error("更新失败")
        }
        this.closeDialog()
      })
    },
    hideForm(){
      this.closeDialog()
    },
  },
  created() {
    if (this.rowData != null){
      this.formData = this.rowData
    }
    this.findWorkPlace('')

  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
