<template>
    <div class="materialReportComponent">
        <el-dialog title="原料检测报告" :visible.sync="whether" width="1100px">
            <div class="operationDiv">
                <el-button size="small" @click="exportReport(mergeData.mergeQuery)">导出</el-button>
                <el-button type="primary" size="small" @click="printDataDom()">打印</el-button>
            </div>
            <div v-for="(item,index) of mergeData.data" :key="index" style="margin-top:30px">
                <el-table :data="item.reportQueryTwoVOS" :cell-class-name="addClass">
                    <el-table-column align="left" prop="samplingTime" label="取样时间" width="170px">
                    </el-table-column>
                    <el-table-column align="left" prop="number" label="顺序号">
                    </el-table-column>
                    <el-table-column align="left" prop="sample" label="样品编号">
                    </el-table-column>
                    <el-table-column width="110px" align="left" prop="address" label="取样地点">
                    </el-table-column>
                    <el-table-column align="left" prop="branchName" label="所属分厂">
                    </el-table-column>
                    <el-table-column align="left" prop="supplier" label="供货单位">
                    </el-table-column>
                    <el-table-column align="left" prop="licensePlate" label="车牌号">
                    </el-table-column>
                    <el-table-column align="left" prop="sampleType" label="样品分类">
                    </el-table-column>
                    <el-table-column align="left" prop="sampleName" label="样品名称">
                    </el-table-column>
                    <el-table-column :label="head" :prop="head" v-for="(head, idx) in item.headers" :key="idx">
                        <template slot-scope="scope">
                            <span v-if="item.reportQueryTwoVOS[scope.$index].itemQueryVOS.length">
                                <span v-for="(element,elementIndex) of item.reportQueryTwoVOS[scope.$index].itemQueryVOS" :key="elementIndex">
                                    <span v-if="element.itemName == head">
                                        <span v-if="element.auditResult == 2" class="auditResultRed">
                                            {{element.calculationResults}}
                                            <span>{{element.unit}}</span>
                                        </span>
                                        <span v-else>
                                            {{element.calculationResults}}
                                            <span>{{element.unit}}</span>
                                        </span>
                                    </span>
                                </span>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" width="160" prop="remark" label="备注">
                        <template slot-scope="scope">
                            <span v-if="!scope.row.remark">
                                {{scope.row.remark}}
                            </span>
                            <el-popover v-else width="300" class="reference" placement="bottom" trigger="hover" :content="scope.row.remark">
                                <div style="width:100%" slot="reference">{{scope.row.remark}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" prop="sampler" label="取样人">
                    </el-table-column>
                    <el-table-column align="left" prop="reviewer" label="审核人">
                    </el-table-column>
                    <el-table-column align="left" prop="testResult" label="检验结果">
                        <template slot-scope="scope">
                            <span v-if="scope.row.testResult == 1">{{'合格'}}</span>
                            <span v-else style="color:red">{{'不合格'}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="cancel">取消</el-button>
            </div>
        </el-dialog>
        <!-- <div ref="printBox" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;" v-print="'#printDiv'">
            <div id="printDiv" ref="print" :style="`width: 100%;height:100%;background: #ffffff;`">
                <div v-for="(item,idx) of mergeData.data" :style="`height:${Math.ceil((item.reportQueryTwoVOS.length + 1) / 20) * 100}%;`" :key="idx">
                    <table :style="`font-size: 8pt;border-spacing: 0;height:${((item.reportQueryTwoVOS.length + 1) / 20) * 100}%`">


        </div> -->
       <div ref="printBox" style="position:fixed;top: 0;left: 0;bottom:0;right:0;display: none;z-index: 99999;" v-print="'#printDiv'">
            <div id="printDiv" ref="print" style="width: 100%;height:100%;background: #ffffff;">
                 <div v-for="(item,idx) of mergeData.data" :key="idx" >
                     <table :style="`font-size: 8pt;border-spacing: 0;`">
                         <thead>
                             <tr style="height:10mm">
                                 <th>取样时间</th>
                                 <th>顺序号</th>
                                 <th>样品编号</th>
                                 <th>取样地点</th>
                                 <th>所属分厂</th>
                                 <th>供货单位</th>
                                 <th>车牌号</th>
                                 <th>样品分类</th>
                                 <th>样品名称</th>
                                 <th v-for="(head, index) in item.headers" :key="index">

                                     {{head}}
                                 </th>
                                 <th>备注</th>
                                 <th>取样人</th>
                                 <th>审核人</th>
                                 <th>检验结果</th>
                             </tr>
                         </thead>
                         <tbody>
                             <tr v-for="(col,columnIndex) in item.reportQueryTwoVOS" style="height:10mm" :key="columnIndex">
                                 <td>{{col.samplingTime}}</td>
                                 <td>{{col.number}}</td>
                                 <td>{{col.sample}}</td>
                                 <td>{{col.address}}</td>
                                 <td>{{col.branchName}}</td>
                                 <td>{{col.supplier}}</td>
                                 <td>{{col.licensePlate}}</td>
                                 <td>{{col.sampleType}}</td>
                                 <td>{{col.sampleName}}</td>
                                 <td v-for="(ele,eleidx) in item.headers" :key="columnIndex+eleidx">
                                     <span v-if="col.itemQueryVOS.length">
                                         <span v-for="(element,elementIndex) of col.itemQueryVOS" :key="elementIndex">
                                             <span v-if="element.itemName == ele">
                                                 <span v-if="element.auditResult == 2" style="color:red !important">
                                                     {{element.calculationResults}}
                                                     <span>{{element.unit}}</span>
                                                 </span>
                                                 <span v-else>
                                                     {{element.calculationResults}}
                                                     <span>{{element.unit}}</span>
                                                 </span>
                                             </span>
                                         </span>
                                         <span v-if="col.itemQueryVOS[eleidx] && col.itemQueryVOS[eleidx].itemName == ele">
                                             <span v-if="col.itemQueryVOS[eleidx].auditResult == 2" style="color:red">
                                                 {{col.itemQueryVOS[eleidx].calculationResults}}
                                                 <span>{{col.itemQueryVOS[eleidx].unit}}</span>
                                             </span>
                                             <span v-else>
                                                 {{col.itemQueryVOS[eleidx].calculationResults}}
                                                 <span>{{col.itemQueryVOS[eleidx].unit}}</span>
                                             </span>
                                         </span>
                                     </span>
                                 </td>
                                 <td>{{col.remark}}</td>
                                 <td>{{col.sampler}}</td>
                                 <td>{{col.reviewer}}</td>
                                 <td>
                                     <span v-if="col.testResult == 1">{{'合格'}}</span>
                                     <span v-else style="color:red">{{'不合格'}}</span>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
         </div>
    </div>
</template>

<script>
import Vue from 'vue'
import print from 'vue-print-nb';
import printJS from "print-js";
Vue.use(print) //注册打印插件
export default {
    name: 'materialReportComponent',
    data() {
        return {
            whether: false, //是否弹出
        }
    },
    props: {
        mergeData: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
    methods: {
        cancel() {
            this.whether = false
        },
        addClass({
            row,
            column,
            rowIndex,
            columnIndex
        }) {
            if (column.property == 'remark') {
                return 'addclassName'
            }
        },
        //打印表格
        printDataDom() {
            // this.$refs.printBox.click()
            // console.log(window.Location);
          const style = "@page { margin: 0 } @media print { table tr th,table tr td { border: 1px solid #666; } table{ margin: 20px 0;} }"; //直接写样式
          printJS({
            printable: "printDiv",
            type: "html",
            style: style,
            maxWidth:'100%',
            // 继承原来的所有样式
            targetStyles: ['*'],
            scanStyles: false
          });
        },
        //导出
        async exportReport(query) {
            const res = await this.$api.inspectionReportQuery.exportReport(query).then(response => {
                if (response.code === 200) {
                    this.download(response.msg)
                }
            })
        }
    }
}
</script>

<style lang="scss">
#printDiv{
  table{
    tr{
      th{
        border: 1px solid #e2e2e2;
      }
    }
  }
}
// @page {
//     size: landscape; //横向
// }
@page {
    size: 210mm 290mm​;
    margin: 5mm 4mm;
}

// @media print {
//     @page {
//         size: landscape; //横向
//     }
// }

// .el-table colgroup.gutter {
//     display: table-cell !important;
//     color: #ccc;
// }

// .el-table th.gutter {
//     display: table-cell !important;
// }
// .el-table__header,
// .el-table__body,
// .el-table__footer {
//     table-layout: fixed !important;
// }
#printDiv {
    table thead {
        th {
            border-right: 1pt solid #000;
            border-bottom: 1pt solid #000;
            border-top: 1pt solid #000;
            box-sizing: border-box;
        }

        th:first-child {
            border-left: 1pt solid #000;
            box-sizing: border-box;
        }
    }

    table tbody tr td {
        border-right: 1pt solid #000;
        border-bottom: 1pt solid #000;
        box-sizing: border-box;
    }

    table tbody tr td:first-child {
        border-left: 1pt solid #000;
        box-sizing: border-box;
    }
}

.materialReportComponent {

    ul,
    li {
        list-style: none;
    }

    .auditResultRed {
        color: red;
    }

    .addclassName {
        div {
            width: 160px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

    }

    .detailsInformation {
        width: 100%;
        height: 70px;
        display: flex;
        margin: 0;
        padding: 0;
        align-items: center;

        li {
            flex: 1;

            em {
                font-style: normal;
            }
        }
    }

    .operationDiv {
        text-align: right;
        margin-bottom: 10px;
    }
}

// @media print
// {
//   table {page-break-after:always;}
// }
</style>
