<template>
    <div>
        <el-dialog
            title="报告详情"
            :visible.sync="dialogToggle"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="1200px">
            <!-- 点检模板表格 -->
            <el-table
                style="width: 1058px; margin-bottom: 10px"
                :data="checkTemplate"
                tooltip-effect="dark"
                stripe
                border>
                <el-table-column
                    label="序号"
                    width="55"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.id }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="版本状态/Rev"
                    width="200">
                    <template slot-scope="scope">
                        {{ scope.row.rev }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="记录编号/Sheet No."
                    width="200">
                    <template slot-scope="scope">
                        {{ scope.row.sheetNo }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="流水码/No."
                    width="200">
                    <template slot-scope="scope">
                        {{ scope.row.no }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="化验员"
                    width="200">
                    <template slot-scope="scope">
                        {{ scope.row.createBy }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="检测日期">
                    <template slot-scope="scope">
                        {{ formatTime(scope.row.createTime, 'YYYY-MM-DD') }}
                    </template>
                </el-table-column>
            </el-table>
            <!-- 点检项表格 -->
            <el-table
                style="width: 1058px"
                :data="checkItem"
                tooltip-effect="dark"
                stripe
                border>
                <el-table-column
                    label="序号"
                    width="55"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.orderNum }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="检测项目"
                    show-overflow-tooltip
                    width="145">
                    <template slot-scope="scope">
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column
                    width="55"
                    align="center"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-if="scope.row.isNecessary">★</span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="检测指标"
                    show-overflow-tooltip
                    width="200">
                    <template slot-scope="scope">
                        <span 
                            v-if="scope.row.checkResult >= scope.row.rangeLower && scope.row.checkResult <= scope.row.rangeUpper">
                            {{ scope.row.checkResult }}
                        </span>
                        <span
                            v-else
                            style="color: red">
                            {{ scope.row.checkResult }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="控制范围"
                    width="200"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.rangeAll }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="频次"
                    show-overflow-tooltip
                    width="200">
                    <template slot-scope="scope">
                        {{ scope.row.frequency }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="取样时间"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ formatTime(scope.row.createTime, 'YYYY-MM-DD') }}
                    </template>
                </el-table-column>
            </el-table>
            <el-form
                label-width="100px"
                label-position="top"
                ref="form"
                :data="formData">
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-form-item
                            label="槽液调整记录"
                            prop="recordInfo">
                            <el-input
                                readonly
                                type="textarea"
                                :rows="4"
                                v-model="formData.recordInfo"
                                placeholder="请输入槽液调整记录"
                                maxlength="255">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <p style="color: red">*各槽液至少搅拌30min后取样测试；标★项为必控项，超出范围必须调整合格后再生产；其他项为观察跟踪项，可偏离控制范围限制一个点，但不允许连续超过3天。</p>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="doExportClick()" icon="el-icon-printer">打印</el-button>
                <el-button size="small" type="primary" icon="el-icon-close" @click="doCancelClick()">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import request from '@/utils/request'
    import Moment from 'moment'

    export default {
        props: {
            checkRecordId: {}
        },
        watch: {
            dialogToggle (newVal, oldVal) {
                // 根据id查询对应的检测报告
                this.getCheckRecordById()
            }
        },
        data () {
            return {
                // 对话框开关标识
                dialogToggle: false,
                // 模板数据
                checkTemplate: [],
                // 模板项数据
                checkItem: [],
                // 槽液调整记录表单
                formData: {
                    recordInfo: ''
                }
            }
        },
        methods: {
            // 时间日期格式化
            formatTime (time, format) {
                return Moment(time).format(format)
            },
            // 点击关闭按钮
            doCancelClick () {
                this.checkTemplate = []
                this.checkItem = []
                this.formData.recordInfo = ''
                this.dialogToggle = false
            },
            // 点击打印按钮
            async doExportClick () {
                let queryParams = { recordId: this.checkRecordId }
                try {
                    let response = await request({
                        url: `${process.env.API_HOST}/api/check/expert`,
                        data: queryParams,
                        method: 'get',
                        responseType: 'blob'
                    })
                    let objectUrl = URL.createObjectURL(response.data)
                    const link = document.createElement('a')
                    link.download = decodeURI(response.headers.filename)
                    link.href = objectUrl
                    link.click()
                    window.URL.revokeObjectURL(objectUrl)
                    this.$message.success('操作成功！')
                    this.checkTemplate = []
                    this.checkItem = []
                    this.formData.recordInfo = ''
                    this.dialogToggle = false
                } catch (error) {
                    console.log(error)
                }
            },
            // 根据id查询对应的检测报告
            getCheckRecordById () {
                let queryParams = { id: this.checkRecordId }
                this.$fetch('daily-check-controller/getCheckRecordDetailsByID-get', queryParams).then(response => {
                    this.checkTemplate = []
                    this.checkItem = []
                    this.formData.recordInfo = ''
                    this.checkTemplate.push(_.cloneDeep(response.checkRecord))
                    this.checkItem = _.cloneDeep(response.itemRecords)
                    this.formData.recordInfo = _.cloneDeep(response.checkRecord.recordInfo)
                })
            }
        }
    }
</script>

<style>

</style>