<!--
  功能：功能描述  拆托
  作者：陶庆峰
-->
<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" :rules="rules" :inline="true" label-width="80px"
                label-position="left">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="卷芯号" prop="DURABLENAME">
                            <el-Input v-model="queryParams.DURABLENAME" clearable
                                @keydown.enter.prevent="handleQuery" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="page-search-btns">
                <el-button type="primary" @click="handleQuery">搜索</el-button>
                <el-button type="primary" @click="split">拆分</el-button>
                <!-- <el-button @click="resetQuery">重置</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>PanelListForSplit</span>
                    </div>
                </div>
            </div> -->
            <el-table border v-loading="loading" :data="list" highlight-current-row row-key="id"
                @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <template v-for="(col, index) in column" :key="index">
                    <el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row[col.field] }}</span>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </div>
    </div>
</template>

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

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance } from "vue";
import { ElForm, ElMessageBox, ElTable } from "element-plus";
import { getQueryList, BpelEvent } from '@/api/common';

const queryFormRef = ref(ElForm);
const formDataRef = ref(ElForm);

const { proxy }: any = getCurrentInstance();


const state = reactive({
    queryParams: {
        DURABLENAME: ''
    },
    loading: false,
    list: [],
    column: [] as any,
    rules: {
        DURABLENAME: [{ required: true, message: "请输入DURABLENAME", trigger: "blur" }],
    },
    boxIdList: [] as any
});

const { loading, list, column, queryParams, rules } = toRefs(state)

onMounted(() => {

    state.column = [
        { header: "Box ID", field: "MATERIALPACKINGNAME", hide: false },
        { header: "卷芯号", field: "DURABLENAME", hide: false },
        { header: "ERP工厂", field: "ERPFACTORY", hide: false },
        { header: "ERP库位", field: "ERPLOCATION", hide: false },
        { header: "最后操作名称", field: "LASTEVENTCOMMENT", hide: false },
        { header: "最后操作时间", field: "LASTEVENTNAME", hide: false },
        { header: "物料编号", field: "MATERIALSPECNAME", hide: false }

    ]

});

/**
 * 列表查询
 * */
function handleQuery(e?) {
    // e.preventDefault()
    queryFormRef.value.validate((isValid: boolean) => {
        if (isValid) {
            getQueryList({
                queryId: "GetDurable",
                version: "00002",
                params: {
                    userId: localStorage.getItem('userId'),
                    DURABLENAME: queryParams.value.DURABLENAME
                },
            }).then((res: any) => {
                state.list = res.data
            });
        }
    });
}

/**
 * 勾选
 * */
function handleSelectionChange(e) {
    state.boxIdList = e.map(item => {
        return { MATERIALPACKINGNAME: item.MATERIALPACKINGNAME }
    })
}
/**
 * 拆托
 * */
function split() {
    let query = {
        "header": {
            "MESSAGENAME": "DeassignBoxByTray",
            "LANGUAGE": "Chinese"
        },
        "body": {
            "BOXLIST": state.boxIdList,
            "SITENAME": "SDK",
            "DURABLENAME": state.queryParams.DURABLENAME
        }
    }
    BpelEvent(query).then(res => {
        proxy.$ElMessage.success('拆托成功');
        handleQuery()
    })
}


</script>

<style scoped lang="scss"></style>