<!--  -->
<template>
    <div style="margin-left: 10px">
      <el-dialog :model-value="modelValue" :show-close="false" title="下发盘点任务"
                 @close="() => $emit('update:modelValue', false)">
        <div>
          <el-form
              label-width="100px"
              :model="bindingData"
              require-asterisk-position="right"
              inline
          >
            <el-form-item label="载具号：" required>
              <el-input class="form-input" v-model="bindingData.vehicleNo" clearable/>
            </el-form-item>
            <el-form-item label="零件号：" required>
              <el-input class="form-input" v-model="bindingData.goodsId" clearable/>
            </el-form-item>
            <el-form-item label="数量：" required>
              <el-input class="form-input" v-model="bindingData.goodsNum" clearable/>
            </el-form-item>
            <div style="margin-top: 50px">
              <el-button type="warning" @click="resetInput">
                <el-icon class="el-icon--left"><RefreshRight/></el-icon>
                重置输入
              </el-button>
              <el-button type="primary" @click="addOrderIn()">
                <el-icon class="el-icon--left"><Search /></el-icon>
                下发任务
              </el-button>
              <el-button type="danger" @click="$emit('update:modelValue', false)">
                <el-icon class="el-icon--left"><CircleCloseFilled/></el-icon>
                关闭窗口
              </el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </template>

  <script>
// import  《组件名称》  from '《组件路径》 ';
import {CircleCloseFilled, Close, RefreshRight} from "@element-plus/icons-vue";
import {formatterOrderInEnum} from "@/enum/order.in.enum";
import {formatCellValueTime} from "@/utils/formatter";
import {ElMessage, ElMessageBox} from "element-plus";
import apiOrderIn from '@/api/order.in';

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {Close, CircleCloseFilled, RefreshRight},
  props: ['modelValue'],
  emits: ['update:modelValue'],
  data() {
    // 这里存放数据
    return {
      // 绑定表单数据
      bindingData: {
        vehicleNo: '',
        goodsId: '',
        goodsNum: ''
      },
      bindOrderInList: []
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    formatCellValueTime,
    formatterOrderInEnum,
    // 查看载具的绑定
    addOrderIn() {
      if(this.bindingData.vehicleNo === '' || this.bindingData.goodsId === '' || this.bindingData.goodsNum === '') {
        ElMessage({
          message: '载具号、零件号和数量不能为空',
          type: 'error',
        });
        return;
      }
        this.bindOrderInList = []
        ElMessageBox.confirm(`是否下发入库任务?`, '提示')
          .then(() => {
            apiOrderIn.addOrderIn(this.bindingData).then(res => {
              const responseData = res.data;
              if (responseData.code === 0) {
                // 正确请求
                ElMessage({
                  message: '执行成功',
                  type: 'success',
                });
                this.bindOrderInList = responseData['returnData'];
              } else {
                // 服务报错
                ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '执行失败', {
                  type: 'warning',
                  confirmButtonText: '确定',
                  showClose: false
                })
              }
            }).catch(err => {
              // 通讯报错
              ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
                type: 'warning',
                confirmButtonText: '确定'
              })
            })
          })
          .catch(() => {
          })
      },
    // 重置输入框
    resetInput() {
      this.bindingData.vehicleNo = '';
      this.bindingData.goodsId = '';
      this.bindingData.goodsNum = '';
    },
    // 绑定物料
    bindingGoods() {
      if(this.bindingData.vehicleNo === '' || this.bindingData.code === '') {
        ElMessage({
          message: '载具号和物料号不能为空',
          type: 'error',
        });
        return;
      }
      apiOrderIn.bindingVehicle({vehicleNo: this.bindingData.vehicleNo, code: this.bindingData.code}).then(res => {
        const responseData = res.data
        if (responseData.code === 0) {
          // 正确请求
          ElMessage({
            message: '绑定成功',
            type: 'success',
          });
          this.queryBinding();
          this.bindingData.code = '';
        } else {
          // 服务报错
          ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '绑定失败', {
            type: 'warning',
            confirmButtonText: '确定',
            showClose: false
          })
        }
      }).catch(err => {
        // 通讯报错
        ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
          type: 'warning',
          confirmButtonText: '确定'
        })
      })
    },
    // 解绑载具
    unBindingOrder(row) {
      apiOrderIn.unbindingVehicle(row.rowId).then(res => {
        const responseData = res.data
        if (responseData.code === 0) {
          // 正确请求
          ElMessage({
            message: '解绑成功',
            type: 'success',
          });
          this.queryBinding();
        } else {
          // 服务报错
          ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '解绑失败', {
            type: 'warning',
            confirmButtonText: '确定',
            showClose: false
          })
        }
      }).catch(err => {
        // 通讯报错
        ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
          type: 'warning',
          confirmButtonText: '确定'
        })
      })
    }
  },
  // 组合式 API
  setup() {
  },
  // 创建之前
  beforeCreate() {
  },
  // 创建完成(可以访问 this 实例)
  created() {
  },
  // 生命周期 - 挂载之前
  beforeMount() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },
  // 更新之前
  beforeUpdate() {
  },
  // 更新之后
  updated() {
  },
  // 销毁之前
  beforeUnmount() {
  },
  // 销毁完成
  unmounted() {
  }
}
</script>


<style lang="scss" scoped>
$input-width: 500px;

.form-input {
  width: $input-width;
}

</style>