<template>
  <el-dialog
    title="新增配送"
    append-to-body
    :modelValue="openShow"
    width="30%"
    @close="closeDialog"
  >
    <el-form :model="form" ref="form" :rules="rules" label-width="auto">
      <el-form-item label="箱条码" prop="boxBarcode">
        <el-input
          v-model="form.boxBarcode"
          style=""
          @keyup.enter.native="changeCode"
          placeholder="请扫描箱条码"
        />
      </el-form-item>
      <el-form-item label="作业中心" prop="wcId">
        <el-select v-model="form.wcId" placeholder="请选择" filterable>
          <el-option
            v-for="item in workCenterOptions"
            :key="item.id"
            :label="item.wcName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="submitLoading">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
// import {
//   updateProcess,
// } from '../../api/flowManagement/index';

import { getWorkOrderCenter, boxBinding } from '@/api/logisticsManagement/logisticsDistribution';
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      submitLoading:false,
      openShow: false,
      form: {},
      rules: {
        boxBarcode: [{ required: true, message: '请扫描箱条码', trigger: 'blur' }],
        wcId: [{ required: true, message: '请选择作业中心', trigger: 'blur' }],
      },
      workCenterOptions: [],
    };
  },
  mounted() {
    this.openShow = this.showDialog;
    this.getWorkOrderCenter();
  },
  methods: {
    // 获取作业中心
    getWorkOrderCenter() {
      getWorkOrderCenter().then(res => {
        this.workCenterOptions = res.data.data;
      });
    },
    changeCode() {
      console.log(9999, this.form);
    },
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },
    submit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.submitLoading = true
          let params = {
            boxBarcode: this.form.boxBarcode,
            wcId: this.form.wcId,
          };

          boxBinding(params).then(res => {
            this.$message.success('操作成功');
            this.submitLoading = false
            this.closeDialog();
          }).catch(err=>{
            this.submitLoading = false
          })
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
