<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"  prop="name">
            <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
              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-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 { filterWorkOptimize } from '@/api/basic/workPlace/sysWorkplaceManage'
import {
  addWorkplaceFreight,
  createFreightCode,
  updateWorkplaceFreight
} from '@/api/basic/workPlace/SysWorkplaceFreight'

export default {
  props: {
    closeDialog: {
      type: Function,
      required: true
    },
    rowData: {
      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 = [];
        });
    },
    getCode(){
      createFreightCode().then(res => {
        if (res.code == 20000){
          this.formData.code = res.data
        }else {
          this.formData = ""
        }
      })
    },
    formSubmit(){
      // this.formData.workPlaceIdFk = this.workplaceId
      this.$refs['dataForm'].validate((rules) => {
        if (rules) {
          if (this.rowData != null){
            updateWorkplaceFreight(this.formData).then(res => {
              if (res.code == 20000){
                this.$message.success("更新成功")
                this.closeDialog()
              }else {
                this.$message.error(res.message)
              }
            })
          }else {
            addWorkplaceFreight(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.rowData != null){
      this.formData = this.rowData
      this.formData.workPlaceIdFk = String(this.rowData.workPlaceIdFk)
    }else {
      this.getCode()
    }
    this.findWorkPlace("")

  }
}
</script>

<style scoped>

</style>
