<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-download" v-loading="exportLoading" @click="exportExcel">导出</el-button>
                <el-button type="primary" @click="handlePrint">打印</el-button>
            </div>
            <div class="right-panel">
                <el-date-picker v-model="query.test_date" type="date" value-format="YYYY-MM-DD" />
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" row-key="id"  id="myTable" stripe :params="params" :query="query">
                <el-table-column type="index" width="50" />
                <el-table-column label="产品名称" prop="material_name" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="批次号" prop="batch">
                </el-table-column>
                <el-table-column label="总数" prop="count">
                </el-table-column>
                <el-table-column label="不合格数" prop="count_notok">
                </el-table-column>
                <el-table-column label="抽样数量" prop="count_sampling">
                </el-table-column>
                <!-- <el-table-column label="检验结论">
                    <template #default="scope">
                        <el-tag v-if="scope.row.is_testok" type="success">
                            合格
                        </el-tag>
                        <el-tag v-else type="danger">
                            不合格
                        </el-tag>
                    </template>
                </el-table-column> -->
                <el-table-column label="检验员" prop="test_user_name">
                </el-table-column>
                <el-table-column label="检验日期" prop="test_date">
                </el-table-column>
            </scTable>
        </el-main>
        <el-dialog v-model="printVisible" width="850px" title="入司检验">
            <div id="exportDiv">
                <scTable  :apiObj="apiObj" 
                    row-key="id" stripe 
                    :params="params" 
                    hidePagination
                    hideDo
                    style="width: 800px;"
                    :query="query">
                    <el-table-column label="产品名称" prop="material_name">
                    </el-table-column>
                    <el-table-column label="批次号" prop="batch">
                    </el-table-column>
                    <el-table-column label="总数" prop="count">
                    </el-table-column>
                    <el-table-column label="抽样数量" prop="count_sampling" width="80">
                    </el-table-column>
                    <el-table-column label="检验结论" width="80">
                        <template #default="scope">
                            <span v-if="scope.row.is_testok">合格</span>
                            <span v-else>不合格</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="检验员" prop="test_user_name" width="90">
                    </el-table-column>
                    <el-table-column label="检验日期" prop="test_date" width="100">
                    </el-table-column>
                </scTable>
            </div>
            <!-- <el-button type="primary" @click="handleExport">导出</el-button>
            <el-button type="primary" @click="handlePrint">打印</el-button> -->
        </el-dialog>
    </el-container>
</template>
<script>
import PdfLoader from '@/utils/html2pdf';
export default {
    name: "rparty",
    data() {
        return {
            apiObj: this.$API.inm.mioitem.list,
            query: {
                test_date: '',
            },
            params: { type: 20, mio__type: 'pur_in', test_date__isnull: false },
            selection: [],
            state_: {
                10: '',
                20: '',
            },
            printVisible:false,
        };
    },
    methods: {
        //查看
        table_show(row) {
            this.dialog.save = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("show", 10).setData(row);
            });
        },
        handleQuery() {
            this.$refs.table.queryData(this.query)
        },
        countWeight(row) {
            let weight = 0, single = 0, allW = 0;
            let kgs = row.weight_kgs;
            if (kgs.length > 0) {
                kgs.forEach(item => {
                    weight += item;
                });
                single = weight / kgs.length;
                allW = single * row.count_bag;
            }
            return allW;
        },
        resetQuery() {
            this.query = {};
        },
        exportExcel() {
            this.exportLoading = true;
            this.$XLSX('#myTable', "入司检验表")
            this.exportLoading = false;
        },
        handlePrint(){
            this.printVisible = true;
            setTimeout(() => {
                this.$PRINT("#exportDiv");
            }, 1000);
        },
        // clickExport(){
        //     this.printVisible = true;
        // },
        // handleExport() {
        //     let exportDiv = document.getElementById('exportDiv')  // 需要导出部分页面的id名
        //     this.pdfDownLoader = new PdfLoader(exportDiv, '作业许可证', 'exportDiv')  // fileName -->导出文件名,  question-table -->防止被截断的class名
        //     this.pdfDownLoader.outPutPdfFn('test');
        // },
        // handlePrint(){
        //     this.$PRINT("#exportDiv");
        // },
    },
};
</script>