<template>
  <el-config-provider :locale="localLanguage">
      <div  style="width: calc(100vw - 300px)">
          <div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px; calc(100vw - 300px)">
              <el-row>
                  <el-button type="primary" @click="queryGoodsOrderCheck">查询盘点单</el-button>
                  <el-button type="success" @click="addCheckTaskForSimple = true">添加盘点单</el-button>
                  <el-button type="primary" @click="showAddCheckTask">查询盘点任务</el-button>
                </el-row>
          </div>
      <div>
          <el-row style="width: calc(100vw - 300px)">
              <h5>盘点单</h5>
              <el-table :data="goodsInventoryList" border stripe max-height="calc(100vh - 550px)">
                  <el-table-column fixed prop="recordId" label="记录号" width="210px" align="center" show-overflow-tooltip/>
                  <el-table-column prop="checkId" label="盘点类型" width="210px" align="center" show-overflow-tooltip :formatter="statusFormatter"/>
                  <el-table-column fixed prop="warehouse" label="盘点库别" width="210px" align="center" show-overflow-tooltip/>
                  <!-- <el-table-column prop="status" label="盘点单状态" width="210px" align="center" show-overflow-tooltip:formatter="statusFormatter"/> -->
                  <el-table-column prop="status" label="盘点单状态" width="210px" align="center">
                    <template #default="scope">
                      <el-tag class="ml-2" :type=formatterOrderInEnum(scope.row.status).type>
                        {{formatterOrderInEnum(scope.row.status).label }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间" width="210px" align="center" show-overflow-tooltip/>
                  <el-table-column prop="completeTime" label="完成时间" width="210px" align="center" show-overflow-tooltip/>
                  <el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="120px" fixed="right" align="center"/>
                  <el-table-column fixed="right" label="操作" align="center" width="180">
                      <template #default="scope">
                          <el-button-group class="ml-4">
                              <el-tooltip content="执行盘点" placement="top" effect="light">
                                  <el-button type="success" size="small" @click="executeCheck(scope.row)">
                                      <el-icon><Check /></el-icon>
                                  </el-button>
                              </el-tooltip>
                              <el-tooltip content="删除" placement="top" effect="light">
                                <el-button type="danger" size="small" @click="deleteCheck(scope.row)">
                                  <el-icon><Delete/></el-icon>
                                </el-button>
                              </el-tooltip>
                          </el-button-group>
                      </template>
                  </el-table-column>
              </el-table>
          </el-row>
          <el-row style="width: calc(100vw - 300px)">
            <h5>盘点任务</h5>
            <el-table :data="tasks" stripe border v-loading="loading" style="width: 100%" max-height="684px"
                class="table-class" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
                @row-click="getCurrentRow">
                <el-table-column width="65px" fixed="left">
                    <template v-slot="scope">
                        <el-radio :label="scope.row.taskId" v-model="taskId">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="goodsId" label="零件号" fixed="left" min-width="120px" />
                <el-table-column prop="vehicleNo" label="箱号" fixed="left" min-width="120px" />
                <el-table-column prop="goodsName" label="零件名称" min-width="120px" />
                <el-table-column prop="taskType" label="任务类型" :formatter="taskTypeFormat" min-width="120px" />
                <el-table-column prop="taskGroup" label="任务组" min-width="120px" />
                <el-table-column prop="origin" label="起点" min-width="120px" />
                <el-table-column prop="destination" label="终点" min-width="120px" />
                <el-table-column prop="pickStand" label="拣选站台" min-width="120px" />
                <el-table-column prop="weight" label="重量" min-width="120px" />
                <el-table-column prop="productionDate" label="生产日期" :formatter="dateFormat" min-width="120px" />
                <el-table-column prop="expirationDate" label="有效日期" :formatter="dateFormat" min-width="120px" />
                <el-table-column prop="operateNum" label="操作数量" min-width="120px" />
                <el-table-column prop="totalNum" label="库存数量" min-width="120px" />
                <el-table-column prop="taskPriority" label="任务优先级" min-width="120px" />
                <el-table-column prop="kateTaskId" label="配件任务号" min-width="140px" />
                <el-table-column prop="createTime" label="创建时间" :formatter="timeFormat" min-width="120px" />
                <el-table-column prop="createTime" label="运行时长" :formatter="dueFormat" min-width="120px" />
                <el-table-column prop="userName" label="操作人员姓名" min-width="120px" />
                <el-table-column prop="taskStatus" label="任务状态" fixed="right" :formatter="taskStatusFormat"
                    min-width="120px" />
                <el-table-column fixed="right" label="操作" width="120px">
                    <template v-slot="scope">
                        <el-button plain type="primary" @click="editCurrentRowTask(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
          </el-table>
        </el-row>
      </div>
      </div>
      <addCheckOrder v-model="addCheckTaskForSimple"></addCheckOrder>
  </el-config-provider>
</template>

<script setup>
import store from '@/store'
import { sendInventoryTask, finishPicking, getTasks, getTaskByTask, sendBoxArrive } from '@/api/task'
import { queryPartNo } from '@/api/goods'
import { taskStatusFormatter, dueFormatter } from '@/utils/formatter.js'
import { reactive, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import OrderCheck from '@/api/order.in'
import {ElMessage, ElMessageBox} from 'element-plus'
import addCheckOrder from "@/components/addCheckOrder.vue";
import {formatterOrderInEnum, orderInEnum} from "@/enum/order.check.enum";


</script>

<script>
export default {
    name: 'inventory',
    data() {
        return {
            searchParams: {
            searchStr: '',
            orderStatus: [0]
          },
          addCheckTaskForSimple: false,
            remarkR:{
              remarkReturn: "盘点回库"
          },
            goodsInventoryList: [],
            tasks: [],
            taskId: '',
            loading: false
        }
    },
    methods: {
      queryGoodsOrderCheck(){
            OrderCheck.getOrderCheckList(this.searchParams).then(res => {
                const responseData = res.data;
                if (responseData.code === 0) {
                    // 正确请求
                    ElMessage({
                      message: '查询成功',
                      type: 'success',
                    });
                    this.goodsInventoryList = responseData['returnData'];
                } else {
                    // 服务报错
                    ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '查询失败', {
                      type: 'warning',
                      confirmButtonText: '确定',
                      showClose: false
                    }).catch(err => {
                        ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
                          type: 'warning',
                          confirmButtonText: '确定'
                        })
                    })
                }
            })
        },
        statusFormatter:(row, column, cellValue, index) => {
          if (cellValue === 'E') {
              return '按物料号盘点'
          } else if (cellValue === 'F') {
              return '按库位盘点'
          } 
      },
        showAddCheckTask() {
          OrderCheck.showAddCheckTask(this.searchParams).then(res => {
                const responseData = res.data;
                if (responseData.code === 0) {
                    // 正确请求
                    ElMessage({
                      message: '查询成功',
                      type: 'success',
                    });
                    this.goodsInventoryList = responseData['returnData'];
                } else {
                    // 服务报错
                    ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '查询失败', {
                      type: 'warning',
                      confirmButtonText: '确定',
                      showClose: false
                    }).catch(err => {
                        ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
                          type: 'warning',
                          confirmButtonText: '确定'
                        })
                    })
                }
            })
        },
        deleteGoodsOrderInCheck(){
          ElMessageBox.confirm('是否删除所有实际数量与箱码不符的任务？','提示')
        .then(() => {
          OrderCheck.deleteGoodsOrderInCheck(this.remarkR.remarkReturn).then(res => {
            const responseData = res.data;
            if (responseData.code === 0) {
              // 正确请求
              ElMessage({
                message: '删除成功',
                type: 'success',
              });
              this.queryGoodsOrderCheck();
            } else {
              // 服务报错
              ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '删除失败', {
                type: 'warning',
                confirmButtonText: '确定',
                showClose: false
              })
            }
          }).catch(err => {
            // 通讯报错
            ElMessageBox.alert(`请求服务器失败：：${err}`, '任务删除失败', {
              type: 'warning',
              confirmButtonText: '确定'
            })
          })
        })
        .catch(() => {
        })
        },
        executeCheck(row){
          ElMessageBox.confirm(`是否执行 ${row.recordId} 的盘点?`, '提示')
          .then(() => {
            OrderCheck.executeCheck(row.recordId).then(res => {
              const responseData = res.data;
              if (responseData.code === 1) {
                // 正确请求
                ElMessage({
                  message: '执行成功',
                  type: 'success',
                });
                this.queryGoodsOrderCheck();
              } else {
                // 服务报错
                ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '执行失败', {
                  type: 'warning',
                  confirmButtonText: '确定',
                  showClose: false
                })
              }
            }).catch(err => {
              // 通讯报错
              ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
                type: 'warning',
                confirmButtonText: '确定'
              })
            })
          })
          .catch(() => {
          })
        },
        deleteCheck(row) {
        ElMessageBox.confirm('是否删除该出库单？','提示')
        .then(() => {
          OrderCheck.deleteCheckList(row.recordId).then(res => {
            const responseData = res.data;
            if (responseData.code === 0) {
              // 正确请求
              ElMessage({
                message: '删除成功',
                type: 'success',
              });
              this.queryGoodsOrderCheck();
            } else {
              // 服务报错
              ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '删除失败', {
                type: 'warning',
                confirmButtonText: '确定',
                showClose: false
              })
            }
          }).catch(err => {
            // 通讯报错
            ElMessageBox.alert(`请求服务器失败：：${err}`, '任务删除失败', {
              type: 'warning',
              confirmButtonText: '确定'
            })
          })
        })
        .catch(() => {
        })
      }
    }
}
</script>

<style scoped>
.content {
    display: flex;
    width: 100%;
}

.el-row .el-form-item {
    width: 30% inherit;
    justify-content: center;
}

.btn-area .el-form-item {
    width: 30% inherit;
    padding-left: 15px;
}

.el-row .el-form-item .el-select-v2 {
    width: 100% !important;
}

.el-row .el-form-item .el-select {
    width: 100% !important;
}

.el-row .el-form-item .el-input-number {
    width: 100% !important;
}

.el-row .el-form-item .el-button {
    margin: auto;
}

.right {
    width: 40%;
    padding: 5px;
}

.left {
    width: 60%;
    padding: 5px;
}

.input-area {
    margin: auto;
    max-width: inherit;
    height: 300px;
    border: solid 1px;
    border-radius: 10px;
    box-shadow: 0px 15px 10px -15px #000;
}

.display-area {
    margin: auto;
    min-width: inherit;
    height: 632px;
    border: solid 1px;
    border-radius: 10px;
    box-shadow: 0px 15px 10px -15px #000;
}

.table-class {
    width: 100%;
}
</style>