<template>
    <div class="outputStatistics">
        <div class="block_wrap">
            <el-form label-width="100px" :form="queryParams" size="small" class="layout_conditional">
                <el-form-item label="取样时间">
                    <el-date-picker v-model="queryParams.date" :default-time="['00:00:00', '23:59:59']" type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="顺序号">
                    <el-input v-model="queryParams.number" clearable></el-input>
                </el-form-item>
                <el-form-item label="样品编号">
                    <el-input v-model="queryParams.sample" clearable></el-input>
                </el-form-item>
                <el-form-item label="班次">
                    <el-select v-model="queryParams.shift" placeholder="请选择" clearable>
                        <el-option key="早班" label="早班" value="早班"></el-option>
                        <el-option key="晚班" label="晚班" value="晚班"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属分厂">
                    <el-select v-model="queryParams.branchName" placeholder="请选择" clearable>
                        <el-option v-for="item in branchObj.branch" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="样品分类">
                    <el-select v-model="queryParams.sampleType" placeholder="请选择" clearable>
                        <el-option v-for="item in branchObj.sampleTypes" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="样品名称">
                    <el-select v-model="queryParams.sampleName" placeholder="请选择" clearable>
                        <el-option v-for="item in branchObj.sampleTemplateInfoVOS" :key="item.sampleName" :label="item.sampleName" :value="item.sampleName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="flex_last">
                    <el-button type="primary" size="small" class="btn_check" @click="handleQuery('查询')">查询</el-button>
                    <el-button class="btn_reset" size="small" @click="handleQuery('重置')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="block_wrap">
            <div class="operationTitle">
                <h3>检测报告查询</h3>
                <el-button type="primary" size="small" @click="mergeReportClick">合并报告</el-button>
            </div>
            <el-table v-loading="loading" :cell-class-name="addClass" ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column align="left" prop="shiftCode" label="班次">
                </el-table-column>
                <el-table-column align="left" prop="samplingTime" label="取样时间">
                </el-table-column>
                <el-table-column width="160px" align="left" prop="number" label="顺序号">
                </el-table-column>
                <el-table-column align="left" prop="sample" label="样品编号">
                </el-table-column>
                <el-table-column align="left" prop="branchName" label="所属分厂">
                </el-table-column>
                <el-table-column align="left" prop="sampleType" label="样品分类">
                </el-table-column>
                <el-table-column width="160px" align="left" prop="sampleName" label="样品名称">
                </el-table-column>
                <el-table-column align="left" prop="address" label="取样地点">
                </el-table-column>
                <el-table-column align="left" prop="sampler" 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="createBy" label="登记人">
                </el-table-column>
                <el-table-column width="160px" align="left" 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="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 class="unqualified">{{'不合格'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120px" align="left" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-link @click="getTestResultDetail(scope.row.id)" class="link1" type="primary">查看报告</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" :page-size="pageObj.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageObj.pageNum" background layout="total, prev, pager, next, sizes, jumper" :total="pageObj.total">
            </el-pagination>
        </div>
        <!-- <el-table :data="tableDataalllist" style="width:100%">
            <el-table-column :label="head" :prop="head" v-for="(head, index) in header" :key="index">
                <template slot-scope="scope">
                    {{tableDataalllist[scope.$index].tableData1[index].name}}
                </template>
            </el-table-column>
        </el-table> -->
        <!-- <table>
            <thead>
                <tr>
                    <th v-for="(head, index) in header" :key="index">
                        {{head}}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(col,idx) in tableDataalllist" :key="idx">
                    <td v-for="(ele,eleidx) in col.tableData1" :key="idx+eleidx">
                        {{ele.name}}
                    </td>
                </tr>
            </tbody>
        </table> -->
        <el-dialog title="检验报告" :visible.sync="open" width="580px">
            <div class="contentReport">
                <div class="information">
                    <h4>基础信息</h4>
                    <p>
                        <span>
                            <em>取样时间：</em>
                            {{reportData.samplingTime}}
                        </span>
                        <span>
                            <em>样品名称：</em>
                            {{reportData.sampleName}}
                        </span>
                    </p>
                    <p>
                        <span>
                            <em>所属分厂：</em>
                            {{reportData.branchName}}
                        </span>
                        <span>
                            <em>取样地点：</em>
                            {{reportData.address}}
                        </span>
                    </p>
                    <p>
                        <span>
                            <em>样品分类：</em>
                            {{reportData.sampleType}}
                        </span>
                        <span>
                            <em>取样人：</em>
                            {{reportData.sampler}}
                        </span>
                    </p>
                    <p>
                        <span>
                            <em>备注：</em>
                            {{reportData.remark}}
                        </span>
                    </p>
                </div>
                <div class="results">
                    <h4>检验结果</h4>
                    <div>
                        <span v-for="(col,index) of reportData.itemQueryVOS" :key="index">
                            <span v-if="col.auditResult == 2" class="unqualified">
                                <em>{{col.itemName}}：</em>
                                <span v-if="col.calculationResults">
                                    {{col.calculationResults}}
                                    <span>{{col.unit}}</span>
                                </span>
                                <span v-else>{{col.calculationResults}}</span>
                            </span>
                            <span v-else>
                                <em>{{col.itemName}}：</em>
                                <span v-if="col.calculationResults">
                                    {{col.calculationResults}}
                                    <span>{{col.unit}}</span>
                                </span>
                                <span v-else>{{col.calculationResults}}</span>
                            </span>
                        </span>
                    </div>
                </div>
                <div class="results">
                    <h4>检验结果判定</h4>
                    <p>
                        <span v-if="reportData.testResult == 1">
                            <em>{{'合格'}}</em>
                        </span>
                        <span v-else class="unqualified">
                            <em>{{'不合格'}}</em>
                        </span>
                    </p>

                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="cancel">关闭</el-button>
            </div>
        </el-dialog>
        <!-- <div ref="printBox" style="position:absolute;top:0;left:0;right:0;bottom:0;" v-print="'#printDiv'">
            <div id="printDiv" ref="print" :style="`width: 100%;height:${mergeData.len * 100}%;background: #ffffff;`">
                    <table v-for="(item,idx) of mergeData.data" :key="idx" style="margin-top:5%" :style="`font-size: 8pt;border-spacing: 0;height:${(item.reportQueryTwoVOS.length + 1) * 5}%;`">
                        <tbody>
                            <tr :style="`height:${100 / (item.reportQueryTwoVOS.length + 1)}%;`">
                                <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>
                            <tr v-for="(col,columnIndex) in item.reportQueryTwoVOS" :style="`height:${100 / (item.reportQueryTwoVOS.length + 1)}%;`" :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>
                                </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> -->
        <MaterialReportComponent ref="materialReport" :mergeData="mergeData" />
    </div>
</template>

<script>
import LayoutTable from '@/layout/business/LayoutTable'
import MaterialReportComponent from './MaterialReportComponent'
import moment from 'moment'
export default {
    name: 'appearanceStatistical',
    data() {
        return {
            pageObj: {
                pageNum: 1,
                pageSize: 20,
                total: 0
            },
            open: false,
            loading: false,
            mergeReportData: [], //合并报告数组
            mergeData: {
                data: [], //合并详情表格数据
                mergeQuery: {}, //合并对象id
                len: 0 //打印页数
            },
            //筛选参数
            queryParams: {
                date: null, // 取样时间
                number: null, // 顺序号
                sample: null, // 样品编号
                branchName: null, // 所属分厂
                sampleType: null, // 样品分类
                sampleName: null, // 样品名称
                shift: null // 班次
            },
            branchObj: {},
            tableData: [],
            reportData: {}, //报告详情数据
        }
    },
    components: {
        LayoutTable,
        MaterialReportComponent
    },
    methods: {
        //表格行合并选择
        handleSelectionChange(val) {
            this.mergeReportData = val
        },
        //合并报告
        mergeReportClick() {
            if (!!this.mergeReportData.length) {
                const keys = this.mergeReportData.map(_ => `ids=${_.id}`).join('&');
                let query = {
                    keys
                }
                this.getMerge(query)
            } else {
                this.$message.warning('请勾选要合并的报告')
            }
        },
        //合并详情查询
        async getMerge(query) {
            const res = await this.$api.inspectionReportQuery.getMerge(query).then(response => {
                if (response.code === 200) {
                    this.mergeData.data = response.data || []
                    this.mergeData.mergeQuery = query
                    this.$refs.materialReport.whether = true
                    this.mergeData.len = 0
                    this.mergeData.data.forEach(ele => {
                        // ele.forEach(item => {
                        if (ele.headers) {
                            this.mergeData.len++
                        }
                        if (ele.reportQueryTwoVOS && ele.reportQueryTwoVOS.length) {
                            this.mergeData.len += ele.reportQueryTwoVOS.length
                        }
                    })
                    this.mergeData.len = Math.ceil(this.mergeData.len / 20)
                    console.log(this.mergeData.len);
                }
            })
        },
        //切换页码
        handleCurrentChange(val) {
            this.pageObj.pageNum = val
            this.listTestResultPage(this.query)
        },
        //每一页显示数量
        handleSizeChange(size) {
            this.pageObj.pageSize = size
            this.listTestResultPage(this.query)
        },
        //筛选查询
        handleQuery(type) {
            //     this.arr1.unshift(2,0)
            //     let that = this
            //    Array.prototype.splice.apply(that.arr2,that.arr1)
            //    console.log(that.arr2);
            if (type == '重置') {
                this.queryParams = {
                    date: null, // 取样时间
                    number: null, // 顺序号
                    sample: null, // 样品编号
                    branchName: null, // 所属分厂
                    sampleType: null, // 样品分类
                    sampleName: null, // 样品名称
                    shift: null // 班次
                }
            }
            this.pageObj.pageNum = 1
            this.query = this.queryParams
            this.listTestResultPage(this.query)
        },
        //查看报告
        async getTestResultDetail(query) {
            this.open = true
            const res = await this.$api.inspectionReportQuery.getTestResultDetail(query).then(response => {
                if (response.code === 200) {
                    this.reportData = response.data
                }
            })
        },
        addClass({
            row,
            column,
            rowIndex,
            columnIndex
        }) {
            //第八列添加 red 类
            if (columnIndex == 11) {
                return 'addclassName'
            }
        },
        cancel() {
            this.open = false
        },
        submitForm() {

        },
        async branchFactory(obj = {}) { // 所属分厂三联动
            const res = await this.$api.inspectionReportQuery.getTemplateBranchInfoVO(obj).then(response => {
                if (response.code === 200) {
                    this.branchObj = response.data
                }
            })
        },
        //列表分页查询及检验报告
        async listTestResultPage(query = {}) {
            let isNumber = true
            if (query.number) {
                isNumber = Number.isInteger(query.number * 1)
            }
            if (!isNumber) {
                this.$message.warning('顺序号必须是数字')
                return
            }
            let data = {}
            this.loading = true
            if (query.date) {
                data.startTime = moment(query.date[0]).format('YYYY-MM-DD HH:mm:ss')
                data.endTime = moment(query.date[1]).format('YYYY-MM-DD HH:mm:ss')
            }
            data.number = query.number ? query.number : null
            data.sample = query.sample ? query.sample : null
            data.branchName = query.branchName ? query.branchName : null
            data.sampleType = query.sampleType ? query.sampleType : null
            data.sampleName = query.sampleName ? query.sampleName : null
            data.shift = query.shift ? query.shift : null
            data.pageNum = this.pageObj.pageNum
            data.pageSize = this.pageObj.pageSize
            const res = await this.$api.inspectionReportQuery.listTestResultPage(data).then(response => {
                if (response.code === 200) {
                    this.tableData = response.data.records || []
                    this.pageObj.total = response.data.total
                    // const keys = this.tableData.map(_ => `ids=${_.id}`).join('&');
                    // let query = {
                    //     keys
                    // }
                    // this.getMerge(query)
                }
            })
            this.loading = false
        },
    },
    watch: {
        'queryParams.branchName': function (val) {
            console.log(val, '290');
            this.queryParams.sampleType = null // 样品分类
            this.queryParams.sampleName = null // 样品名称
            this.branchFactory({
                branch: val
            }) // 所属分厂三联动
        },
        'queryParams.sampleType': function (val) {
            console.log(val, ('298'));
            this.queryParams.sampleName = null // 样品名称
            this.branchFactory({
                branch: this.queryParams.branchName,
                sampleType: val
            }) // 所属分厂三联动
        }
    },
    created() {
        var lett = this;
        document.onkeydown = function (e) {
            var key = window.event.keyCode;
            if (key == 13) {
                lett.listTestResultPage(lett.query)
            }
        }
        lett.listTestResultPage()
        this.branchFactory()
    },
}
</script>

<style lang="scss">
// @page {
//     size: 210mm 290mm​;
//     margin: 0mm 4mm;
// }

.outputStatistics {
    background: #ecf0f3;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-y: auto;
    padding: 16px;

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

    }

    // #printDiv {
    //     table{
    //         th {
    //             border-right: 0.3mm solid #000;
    //             border-bottom: 0.3mm solid #000;
    //             border-top: 0.3mm solid #000;
    //             box-sizing: border-box;
    //         }

    //         th:first-child {
    //             border-left: 0.3mm solid #000;
    //             box-sizing: border-box;
    //         }
    //     }

    //     table tbody tr td {
    //         border-right: 0.3mm solid #000;
    //         border-bottom: 0.3mm solid #000;
    //         box-sizing: border-box;
    //     }

    //     table tbody tr td:first-child {
    //         border-left: 0.3mm solid #000;
    //         box-sizing: border-box;
    //     }
    // }

    .overflow_wrap {
        .el-form {
            overflow: hidden;
        }
    }

    .layout_conditional {
        display: grid;
        grid-template-columns: repeat(4, minmax(256px, 25%));
        grid-template-areas: ". . . ."". . . b";
        margin-bottom: -22px;
        overflow: hidden;

        .el-date-editor,
        .el-input.el-input--suffix,
        .el-select {
            width: 100%;
        }

        .flex_last {
            .el-form-item__content {
                margin-left: 0 !important;
            }
        }

        .btn_check {
            position: relative;
            top: 0px;
            margin-left: 16px;
        }

        .btn_reset {
            position: relative;
            margin-left: 8px;
        }

        .el-radio-button__orig-radio:checked+.el-radio-button__inner {
            color: #355DB4;
            background: none;
        }
    }

    .operationTitle {
        // padding: 0 24px;
        display: flex;
        margin-bottom: 24px;

        h3 {
            flex: 1;
            margin: 0;
        }
    }

    .el-table::before {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0px;
    }

    .pagination {
        position: relative;
        right: -5px;
        margin-top: 16px;
        padding: 0;
        text-align: right;
    }

    .unqualified {
        color: red;
    }

    .contentReport {
        em {
            // width: 90px;
            // text-align: right;
            display: inline-block;
            font-style: normal;
        }

        p {
            display: flex;

            span {
                flex: 1;

                // em {
                //     // width: 90px;
                //     // text-align: right;
                //     display: inline-block;
                //     font-style: normal;
                // }
            }
        }

        .results {
            // span{
            //     display: inline-block;
            // }
            width: 100%;

            div {
                display: grid;
                grid-template-columns: repeat(2, minmax(256px, 50%));
                grid-template-areas: "a b";
            }
        }
    }

}
</style>
