<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 style="width: 100%">
          <el-form :model="searchParams" label-width="120" label-position="left" >
            <el-form-item style="width: 600px" label="查询关键字：">
              <el-input placeholder="输入 料箱号/库位/任务号 查询..." v-model="searchParams.searchStr" clearable></el-input>
            </el-form-item>
            <el-form-item style="width: 600px" label="任务状态：">
              <el-select  style="width: 600px" v-model="searchParams.orderStatus" multiple placeholder="请选择需要查询的任务状态">
                <el-option v-for="item in orderOutEnum" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <el-button type="primary" @click="queryGoodsOrderOut">查询出库单</el-button>
          <el-button type="success" @click="showhandOut = true">手动出库</el-button>
        </el-row>
      </div>
      <div> <!-- 表格-->
        <el-row style="width: calc(100vw - 300px)">
          <h5>出库单</h5>
          <el-table :data="goodsOrderOutList" border stripe max-height="calc(100vh - 550px)">
            <el-table-column fixed prop="rowId" label="行号" width="130px" align="center" show-overflow-tooltip/>
            <el-table-column fixed prop="recordId" label="识别号" width="130px" align="center" show-overflow-tooltip/>
            <!-- <el-table-column fixed prop="orderId" label="订单号" width="200px" align="center" show-overflow-tooltip/> -->
            <el-table-column prop="warehouseOrigin" label="源库别" width="100px" align="center" show-overflow-tooltip/>
            <!-- <el-table-column prop="warehouseDestination" label="目的库别" width="120px" align="center" show-overflow-tooltip/> -->
            <el-table-column prop="orderType" label="订单类型" width="100px" align="center" show-overflow-tooltip/>
            <el-table-column prop="goodsId" label="物料号" width="120px" align="center" show-overflow-tooltip/>
            <el-table-column prop="date" label="需求时间" width="120px" align="center" show-overflow-tooltip/>
            <el-table-column prop="rowNo" label="行号" width="100px" align="center" show-overflow-tooltip/>
            <el-table-column prop="goodsId" label="物料编号" width="100px" align="center" show-overflow-tooltip/>
            <el-table-column prop="goodsNum" label="物料数量" width="100px" align="center" show-overflow-tooltip/>
            <el-table-column prop="unit" label="单位" width="100px" align="center" show-overflow-tooltip/>
            <el-table-column prop="status" label="出库单状态" width="95px" align="center" fixed="right">
              <template #default="scope">
                <el-tag class="ml-2" :type=formatterOrderOutEnum(scope.row.status).type>
                  {{formatterOrderOutEnum(scope.row.status).label }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" :formatter="formatCellValueTime" width="130px"
                             align="center" show-overflow-tooltip/>
            <el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="120px" />
            <el-table-column fixed="right" label="操作" align="center" width="140">
              <template #default="scope">
                <el-button-group class="ml-4">
                  <el-tooltip content="执行出库" placement="top" effect="light">
                    <el-button type="success" size="small" @click="executeOut(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="deleteOrder(scope.row)">
                      <el-icon><Delete/></el-icon>
                    </el-button>
                  </el-tooltip>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>
    </div>
    
    <HandOut v-model="showhandOut"/>
  </el-config-provider>
</template>

<script>
import {taskStatusFormatter, dueFormatter, formatCellValueTime} from '@/utils/formatter.js'
import HandOut from '@/components/handOut.vue'
import { reactive, ref } from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import en from 'element-plus/dist/locale/en.mjs';
import {Check, Delete} from "@element-plus/icons-vue";
import {formatterOrderOutEnum, orderOutEnum} from "@/enum/order.out.enum";
const language = ref('zh-cn');
import apiOrderOut from '@/api/order.out'

export default {
    name: 'goodsOut',
  components: {Check, Delete, HandOut},
    data() {
        return {
          // 查询条件
          searchParams: {
            searchStr: '',
            orderStatus: [0,1]
          },
          // 展示绑定物料的弹窗
          showhandOut: false,
          // 出库任务单表格
          goodsOrderOutList: []
        }
    },
    mounted() {
    },
    beforeUnmount() {
    },
    methods: {
      formatCellValueTime,
      formatterOrderOutEnum,
      // 查询出库单
      queryGoodsOrderOut() {
        this.goodsOrderOutList = [];
        apiOrderOut.getOrderOutList(this.searchParams).then(res => {
          const responseData = res.data;
          if (responseData.code === 0) {
            // 正确请求
            ElMessage({
              message: '查询成功',
              type: 'success',
            });
            this.goodsOrderOutList = responseData['returnData'];
          } else {
            // 服务报错
            ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '查询失败', {
              type: 'warning',
              confirmButtonText: '确定',
              showClose: false
            })
         }
        }).catch(err => {
          // 通讯报错
          ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
            type: 'warning',
            confirmButtonText: '确定'
          })
        })
      },
      // 删除出库单
      deleteOrder(row) {
        ElMessageBox.confirm('是否删除该出库单？','提示')
        .then(() => {
          apiOrderOut.deleteOrder(row.rowId).then(res => {
            const responseData = res.data;
            if (responseData.code === 0) {
              // 正确请求
              ElMessage({
                message: '删除成功',
                type: 'success',
              });
              this.queryGoodsOrderOut();
            } else {
              // 服务报错
              ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '删除失败', {
                type: 'warning',
                confirmButtonText: '确定',
                showClose: false
              })
            }
          }).catch(err => {
            // 通讯报错
            ElMessageBox.alert(`请求服务器失败：：${err}`, '任务删除失败', {
              type: 'warning',
              confirmButtonText: '确定'
            })
          })
        })
        .catch(() => {
        })
      },
      // 执行出库
      executeOut(row) {
        ElMessageBox.confirm(`是否执行 ${row.rowId} 的出库?`, '提示')
          .then(() => {
            apiOrderOut.executeOut(row.rowId).then(res => {
              const responseData = res.data;
              if (responseData.code === 0) {
                // 正确请求
                ElMessage({
                  message: '执行成功',
                  type: 'success',
                });
                this.queryGoodsOrderOut();
              } else {
                // 服务报错
                ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '执行失败', {
                  type: 'warning',
                  confirmButtonText: '确定',
                  showClose: false
                })
              }
            }).catch(err => {
              // 通讯报错
              ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
                type: 'warning',
                confirmButtonText: '确定'
              })
            })
          })
          .catch(() => {
          })
      }
    },
    computed: {
      orderOutEnum() {
        return orderOutEnum
      },
      localLanguage: () => (language.value === 'zh-cn' ? zhCn : en)
    }
}
</script>

<style scoped>

</style>