<template>
    <div>
        <el-dialog
            title="新增报告"
            :visible.sync="dialogToggle"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="1200px">
            <div style="padding-bottom: 10px">
                <el-button
                    size="small"
                    type="primary"
                    @click="doAddCheckItemClick()">
                    新增检测项
                </el-button>
            </div>
            <!-- 点检模板表格 -->
            <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">
                        <el-input
                            style="width: 100%"
                            size="small"
                            v-model="scope.row.rev"
                            maxlength="50">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="记录编号/Sheet No."
                    width="200">
                    <template slot-scope="scope">
                        <el-input
                            style="width: 100%"
                            size="small"
                            v-model="scope.row.sheetNo"
                            maxlength="50">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="流水码/No."
                    width="200">
                    <template slot-scope="scope">
                        <el-input
                            style="width: 100%"
                            size="small"
                            v-model="scope.row.no"
                            maxlength="50">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="化验员"
                    width="200">
                    <template slot-scope="scope">
                        <el-input
                            style="width: 100%"
                            size="small"
                            v-model="scope.row.createBy"
                            maxlength="50">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="检测日期">
                    <template slot-scope="scope">
                        <el-date-picker
                            style="width: 100%"
                            v-model="scope.row.createTime"
                            type="date"
                            size="small"
                            placeholder="请选择检测日期">
                        </el-date-picker>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 点检项表格 -->
            <el-table
                :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">
                        <el-input
                            style="width: 100%"
                            v-model="scope.row.checkResult"
                            size="small"
                            maxlength="15"
                            placeholder="请输入检测指标">
                        </el-input>
                    </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
                    width="200">
                    <template slot-scope="scope">
                        <el-date-picker
                            style="width: 100%"
                            v-model="scope.row.createTime"
                            type="date"
                            size="small"
                            placeholder="请选择取样时间">
                        </el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            style="color: rgb(244, 116, 118)"
                            @click="doCheckItemDelect(scope.row)">
                            删除
                        </el-button>
                    </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
                                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 :loading="loadingToggle" size="small" type="primary" icon="el-icon-check" @click="doConfirmClick()">确认</el-button>
                <el-button size="small" icon="el-icon-close" @click="doCancelClick()">取消</el-button>
            </span>
        </el-dialog>

        <!-- 新增检测项对话框 -->
        <AddCheckItem
            ref="AddCheckItem"
            :checkModelId="checkModelId"
            @doConfirmClick="doAddCheckItemConfirmClick">
        </AddCheckItem>
    </div>
</template>

<script>
    import Moment from 'moment'
    import AddCheckItem from './AddCheckItem'

    export default {
        components: {
            AddCheckItem
        },
        watch: {
            dialogToggle (newVal, oldVal) {
                this.currentLoginName = window.sessionStorage.getItem('Admin-Name')
                // 查询酸洗检测模板
                this.getCheckByPickling()
            }
        },
        data () {
            return {
                // 数据提交状态开关标识
                loadingToggle: false,
                // 对话框开关标识
                dialogToggle: false,
                // 检测模板id
                checkModelId: '',
                // 模板数据
                checkTemplate: [],
                // 模板项数据
                checkItem: [],
                // 当前登录人名称
                currentLoginName: '',
                // 槽液调整记录表单
                formData: {
                    recordInfo: ''
                }
            }
        },
        methods: {
            // 时间日期格式化
            formatTime (time, format) {
                return Moment(time).format(format)
            },
            // 点击新增检测项按钮
            doAddCheckItemClick () {
                this.$refs.AddCheckItem.dialogToggle = true
            },
            // 查询酸洗检测模板
            getCheckByPickling () {
                let queryParams = { type: 'ELECTROPHORESIS' }
                this.$fetch('daily-check-controller/getCheckByType-get', queryParams).then(response => {
                    this.checkTemplate = []
                    this.checkItem = []
                    this.checkTemplate.push(_.cloneDeep(response.checkModel))
                    this.checkTemplate[0].createBy = _.cloneDeep(this.currentLoginName)
                    this.checkModelId = _.cloneDeep(response.checkModel.id)
                    this.checkItem = _.cloneDeep(response.checkItem)
                })
            },
            // 点击确认按钮
            doConfirmClick () {
                let queryParams = { checkRecord: _.cloneDeep(this.checkTemplate[0]), itemRecords: this.checkItem }
                queryParams.checkRecord.recordInfo = this.formData.recordInfo
                delete queryParams.checkRecord.id
                this.loadingToggle = true
                this.$fetch('daily-check-controller/addCheckRecord-post', queryParams).then(response => {
                    this.loadingToggle = false
                    this.checkTemplate = []
                    this.checkItem = []
                    this.formData.recordInfo = ''
                    this.dialogToggle = false
                    this.$message.success('新增成功！')
                    this.$emit('doConfirmClick')
                }).catch(() => {
                    this.loadingToggle = false
                })
            },
            // 点击取消按钮
            doCancelClick () {
                this.dialogToggle = false
                this.checkTemplate = []
                this.checkItem = []
                this.formData.recordInfo = ''
            },
            // 点击检测项删除按钮
            doCheckItemDelect (checkItem) {
                this.$confirm(`确定要删除序号为 ${checkItem.orderNum}，检测项目为 ${checkItem.name} 的检测项么？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    let queryParams = { id: checkItem.id, hash: 'id' }
                    this.$fetch('daily-check-controller/id-delete', queryParams).then(response => {
                        this.$message.success('删除成功！')
                        // 查询酸洗检测模板
                        this.getCheckByPickling()
                    })
                })
            },
            // 点击新增检测项对话框确认按钮
            doAddCheckItemConfirmClick () {
                // 查询酸洗检测模板
                this.getCheckByPickling()
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>