<template>
  <div>
    <el-dialog :model-value="modelValue"
               title="变更任务信息"
               @close="() => $emit('update:modelValue', false)">
      <div style="margin-left: 80px">
        <el-form
            label-position="left"
            label-width="120px"
            :model="wmsTaskData"
            style="max-width: 600px"
        >
          <el-form-item label="任务号：">
            <el-input class="form-input" v-model="wmsTaskData.taskId" disabled/>
          </el-form-item>
          <el-form-item label="载具号：">
            <el-input class="form-input" v-model="wmsTaskData.vehicleNo" disabled/>
          </el-form-item>
          <el-form-item label="起点：">
            <el-input class="form-input" v-model="wmsTaskData.origin" disabled/>
          </el-form-item>
          <el-form-item label="中间点：">
            <el-input class="form-input" v-model="wmsTaskData.midPoint" disabled/>
          </el-form-item>
          <el-form-item label="终点：">
            <el-input class="form-input" v-model="wmsTaskData.destination" disabled/>
          </el-form-item>
          <el-form-item label="优先级：">
            <el-input-number class="form-input" v-model="wmsTaskData.priority" disabled/>
          </el-form-item>
          <el-form-item label="任务状态：">
            <el-select class="form-input"
                       placeholder='请选择目标任务状态'
                       v-model="wmsTaskData.taskStatus">
              <el-option label="重置任务" value="0"/>
              <el-option label="完成任务" value="3"/>
              <el-option label="删除任务" value="999"/>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="margin-top: 50px">
          <el-button type="primary" @click="changeTaskStatus">
            <el-icon class="el-icon--left"><CirclePlus/></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>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import  《组件名称》  from '《组件路径》 ';

import {CircleCloseFilled, CirclePlus} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import wmsTaskApi from "@/axios/wms.task";

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {CircleCloseFilled, CirclePlus},
  props: ['modelValue', 'wmsTaskData'],
  emits: ['update:modelValue'],
  data() {
    // 这里存放数据
    return {
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    changeTaskStatus() {
      if(this.wmsTaskData.taskStatus === '') {
        ElMessageBox.alert(`请先选择任务状态`, '警告', {
          type: 'warning',
          confirmButtonText: '确定',
          showClose: false
        })
        return
      }
      const changeTaskData = {
        taskId : this.wmsTaskData.taskId,
        destination: this.wmsTaskData.destination,
        taskStatus: this.wmsTaskData.taskStatus,
      }
      ElMessageBox.confirm(`确定变更任务号：${this.wmsTaskData.taskId} 的任务状态吗？`, '变更状态确认', {
        confirmButtonText: '确定变更',
        cancelButtonText: '取消变更',
        type: 'warning'
      }).then(() => {
        wmsTaskApi.changeTaskStatus(changeTaskData).then((response) => {
          const responseData = response.data
          if (responseData.code === 0) {
            // 正确请求
            ElMessage({
              message: '任务状态变更成功， 请稍后刷新查看',
              type: 'success',
            })
          } else {
            // 服务报错
            ElMessage({
              message: '服务器返回失败：' + responseData.msg,
              type: 'warning',
            })
          }
        }).catch((ex) => {
          // 通讯报错
          ElMessage({
            message: '请求服务器失败：' + ex,
            type: 'error',
          })
        })
      }).catch(() => {})
    }
  },
  // 组合式 API
  setup() {
  },
  // 创建之前
  beforeCreate() {
  },
  // 创建完成(可以访问 this 实例)
  created() {
  },
  // 生命周期 - 挂载之前
  beforeMount() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },
  // 更新之前
  beforeUpdate() {
  },
  // 更新之后
  updated() {
  },
  // 销毁之前
  beforeUnmount() {
  },
  // 销毁完成
  unmounted() {
  }
}
</script>

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

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

</style>