
<template>
    <div class="vue-element-page-wrap" ref="tableContainer">
        <el-row class="page-search" justify="space-between" align="bottom">
            <el-form ref="queryFormRef" :model="queryParams" label-width="60px" label-position="left">
                <el-row :gutter="24" class="form-row">
                    <el-col :span="4">
                        <el-form-item label="物料凭证" prop="UNDOID">
                            <el-Input v-model="queryParams.UNDOID" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单据类型" prop="TYPE">
                            <el-select v-model="queryParams.TYPE" placeholder="单据类型" style="width: 240px"
                                default-first-option>
                                <el-option v-for="item in state.TypeList" :key="item.value" :label="item.label"
                                :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="开始时间" prop="FROMDATE">
                            <el-date-picker v-model="queryParams.FROMDATE" value-format="YYYYMMDD" type="date"
                                placeholder="选择开始时间" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="结束时间" prop="TODATE">
                            <el-date-picker v-model="queryParams.TODATE" value-format="YYYYMMDD" type="date"
                                placeholder="选择结束时间" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="page-search-btns">
                <el-button type="primary" @click="handleQueryInfo">搜索</el-button>
            </div>
        </el-row>
        <div class="vue-element-page-table">
            <div class="page-table-operate">
                <div class="page-table-title">
                    <div class="page-table-title-left">
                        <span>凭证列表</span>
                    </div>
                </div>
            </div>
            <el-table border v-loading="loading" :data="list" highlight-current-row row-key="id"
                style="width: 100%;height:140px" @row-click="selectRow">
                <template v-for="(col, index) in column" :key="index">
                    <el-table-column v-if="!col.hide" :label="col.header" :width="col.width" show-overflow-tooltip>
                        <template #default="scope">
                            <span v-if="col.field == 'FLAG'">
                                <span>{{ scope.row[col.field] == 'Y' ? '已冲销' : '未冲销' }}</span>
                            </span>
                            <span v-else-if="col.field == 'INV_TYPE'">
                                <span>{{ scope.row.RECEIVEREQUESTTYPE ? scope.row.RECEIVEREQUESTTYPE : scope.row.SHIPREQUESTTYPE }}</span>
                            </span>
                            <span v-else>{{ scope.row[col.field] }}</span>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <pagination v-if="page.total" :total="page.total" v-model:pageNumTo="page.pageNum"
                v-model:pageSizeTo="page.pageSize" @pagination="handleQuery" />
        </div>
        <div class="vue-element-page-table">
            <div class="page-table-operate">
                <div class="page-table-title">
                    <div class="page-table-title-left">
                        <span>物料详情</span>
                    </div>
                </div>
            </div>
            <el-table :height="tableHeight" border v-loading="loading_d" :data="list_d" highlight-current-row row-key="id"
                style="width: 100%;">
                <template v-for="(col, index) in column_d" :key="index">
                    <el-table-column v-if="!col.hide" :label="col.header" :width="col.width" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row[col.field] }}</span>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <pagination v-if="page_d.total" :total="page_d.total" v-model:pageNumTo="page_d.pageNum"
                v-model:pageSizeTo="page_d.pageSize" @pagination="handleQuery_d" />
        </div>
    <el-row class="page-search" justify="end" align="middle">
      <div class="block"  style="float: right;margin-top: 10px;" >
        <el-form-item label="过账日期" prop="state.commitDate">
          <el-date-picker :clearable="true" :editable="true" v-model="state.commitDate" type="date" placeholder="选择过账时间" value-format="YYYY-MM-DD"/>
        </el-form-item>
      </div>
      <div class="page-search-btns">
        <!-- <el-button type="primary" @click="handleReserve" :disabled="state.button_state" v-loading="state.button_loading">备货</el-button> -->
        <el-button type="primary" @click="sendUndoCommit" :disabled="state.button_state" v-loading="state.button_loading">冲销</el-button>
      </div>
    </el-row>    
    </div>
</template>

<script lang="ts">
export default {
    name: "UnDoInfo",
};
</script>

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance } from "vue";
import { ElForm, ElMessageBox, ElTable } from 'element-plus'
import { getQueryPageList, undoCommit } from '@/api/common';
import {PurInSendERPByCharge} from "@/api/StockIn";
import {localStorage} from "@/utils/storage";
import { bTableHeight } from "../../../../composables/calcTableHeight";

const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(430);

const { proxy }: any = getCurrentInstance();

const queryFormRef = ref(ElForm);

const state = reactive({
    commitDate: "",
    ERPFACTORY:'',
    queryParams: {
        UNDOID: '',
        FROMDATE: '',
        TODATE: '',
        TYPE:""
    },
    TypeList: [
        { value: '', label: '全部' },
        { value: 'A', label: '入库' },
        { value: 'B', label: '出库' },
        { value: '调拨出库', label: '调拨出库' }
    ],
    page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
    },
    button_state : false,
    button_loading : false,
    loading: false,
    list: [],
    column: [] as any,
    active_row: {},
    page_d: {
        pageNum: 1,
        pageSize: 10,
        total: 0
    },
    loading_d: false,
    list_d: [],
    column_d: [] as any,
});

const { loading, list, column, queryParams, page, page_d, loading_d, list_d, column_d, active_row } = toRefs(state)

onMounted(() => {
    var newDate = new Date();
    var year = newDate.getFullYear();
    var moth = newDate.getMonth() + 1;
    if(moth < 10)  moth = '0' + moth;
    var day = newDate.getDate();
    if(day < 10)  day = '0' + day;
    state.commitDate = year + '-' + moth + '-' + day
    state.column = [
        { header: "物料凭证", field: "UNDOID", hide: false },
        { header: "单据状态", field: "FLAG", hide: false },
        { header: "单据类型", field: "INV_TYPE", hide: false },
        { header: "创建时间", field: "CREATETIME", hide: false },
        { header: "创建人", field: "CREATEUSER", hide: false }
    ]

    state.column_d = [
        { header: "标签编号", field: "MATERIALPACKINGNAME", hide: false, width: '320px' },
        { header: "批次", field: "CHARGE", hide: false, width: '200px' },
        { header: "组织", field: "ERPFACTORYDESC", hide: false, width: '250px' },
        { header: "仓库", field: "LOCATIONDESC", hide: false, width: '200px' },
        { header: "物料", field: "MATERIALSPECNAME", hide: false , width: '100px'},
        { header: "数量", field: "MATERIALQUANTITY", hide: false, width: '100px' },
        { header: "凭证日期", field: "UNDOID", hide: false, width: '120px' },
        { header: "凭证日期", field: "UNDODATE", hide: false, width: '100px' },
        { header: "制造日期", field: "MAKEDATE", hide: false, width: '150px' },
        { header: "制造日期", field: "MAKEDATE", hide: false, width: '150px' },
        { header: "品质等级", field: "PACKINGGRADE", hide: false, width: '100px'  },
        { header: "到货单号", field: "RECEIVEREQUESTNAME", hide: false, width: '100px'  },
        { header: "出库单号", field: "SHIPREQUESTNAME", hide: false, width: '100px'  },
        { header: "最后操作时间", field: "LASTEVENTTIME", hide: false , width: '150px' },
        { header: "最后操作人员", field: "LASTEVENTUSER", hide: false, width: '120px' },
        { header: "供应商名称", field: "SUPPLIERNAME", hide: false , width: '120px'},
        { header: "客户", field: "CUSTOMERNAME", hide: false, width: '120px' },
        { header: "最后操作名称", field: "DESCRIPTION", hide: false, width: '120px' },
    ]
    handleQuery()
    updateTableHeight();
  window.addEventListener('resize', handleResize);
  let pwd: any = localStorage.get('orgNo') || '';
  // state.orgNo = JSON.parse(pwd).orgNo;
  state.ERPFACTORY = JSON.parse(pwd);
});
function handleQueryInfo() {
  state.page.pageNum = 1
  state.page_d.pageNum = 1
  handleQuery()
  
}
function handleQuery() {
    state.list_d = []
    state.list = []
    state.page.total = 0;
    state.loading = true
    state.page_d.total = 0;
    state.loading_d = false
    queryFormRef.value.validate((isValid: boolean) => {
        if (isValid) {
            getQueryPageList({
                queryId: "GetUndoList",
                version: "lxh001",
                params: {
                    userId: localStorage.get('userId'),
                    ...state.queryParams
                },
                pageNum: state.page.pageNum,
                pageSize: state.page.pageSize,
            }).then((res: any) => {
              state.list = res.data.list;
              state.page.total = res.data.total;
              state.loading = false
              if (state.list.length > 0) {
                state.active_row = state.list[0]
                if (state.active_row) {
                  handleQuery_d()
                }
              }
            });
        }
    });
}
function handleQuery_d() {
    state.loading_d = true
    getQueryPageList({
        queryId: "GetPackingRow",
        version: "xh003",
        params: {
            userId: localStorage.get('userId'),
            ...state.active_row,
            ERPFACTORY:state.ERPFACTORY
        },
        pageNum: state.page_d.pageNum,
        pageSize: state.page_d.pageSize,
    }).then((res: any) => {
        state.list_d = res.data.list;
        state.page_d.total = res.data.total;
        state.loading_d = false
    });
}

function sendUndoCommit() {
    state.button_state = true
    state.button_loading = true
    console.log(state.button_state)
    if( state.list_d == null ||  state.list_d == [] ||  state.list_d.length < 1){
        ElMessageBox.alert('不存在可提交信息', {
            confirmButtonText: 'OK',
        })
        // state.loadings = false
        state.button_state = false
        state.button_loading = false
        return;
    }
    console.log(state.active_row)
    undoCommit({
        undoId: state.list[0]?.UNDOID,
        userId: localStorage.get('userId'),
        flag:  state.active_row?.FLAG,
        inv_TYPE : state.active_row?.RECEIVEREQUESTTYPE || state.active_row?.SHIPREQUESTTYPE,
        lastEventName:  state.active_row?.LASTEVENTNAME,
        commitDate:state.commitDate
    }).then((res: any) => {
        console.log(res)
        if (res.success) {
                ElMessageBox.alert('操作成功', '提醒框', {
                    confirmButtonText: 'OK',
                })
            handleQuery()
            state.loadings = false
            state.button_state = false
            state.button_loading = false
        } else {
            ElMessageBox.alert('操作失败：' + res.message, '提醒框', {
                confirmButtonText: 'OK',
            })
            state.loadings = false
            state.button_state = false
            state.button_loading = false
        }
    }).catch((err: any) => {
        ElMessageBox.alert('操作失败' + err, '提醒框', {
            confirmButtonText: 'OK',
        })
        state.loadings = false
        state.button_state = false
        state.button_loading = false
    })
    state.loadings = false
    state.button_loading = false
}
function selectRow(row: any) {
    state.active_row = row
    handleQuery_d()
}
</script>

<style scoped lang="scss">
.form-row {
    padding-right: 100px;
    margin-bottom: 0;
}
</style>