<template>
    <div style="padding: 8px">
        <div>
            <el-card style="width: 100%" header="基本信息" shadow="hover">
                <el-descriptions>
                    <el-descriptions-item label="日期">{{ workObj.test_date }}</el-descriptions-item>
                    <el-descriptions-item label="批次号">{{ workObj.batch }}</el-descriptions-item>
                    <el-descriptions-item label="总数">{{ workObj.count }}</el-descriptions-item>
                </el-descriptions>
            </el-card>
        </div>
        <div style="height:8px"></div>
        <div>
            <el-card style="width: 100%" header="检验记录" shadow="hover">
                <!-- 预制棒 -->
                <sc-form-table ref="formTable" v-if="type == 'bang'" v-model="formTableData" :addTemplate="addTemplate"
                    placeholder="暂无数据">
                    <el-table-column prop="val" label="抽检编号" min-width="120">
                        <template #default="scope">
                            <span v-if="scope.row.id">{{ scope.row.test_numer }}</span>
                            <el-input v-else v-model="scope.row.test_numer" placeholder="抽检编号"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="检验记录" align="center">
                        <template v-for="(item0, $index) in ftestitems" :key="item0.id">
                            <el-table-column prop="test_val" :label="item0.name" min-width="130">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.ftestitems[$index].test_val"
                                        :disabled="!scope.row.isEdit" :min="0" style="width:100%" controls-position="right">
                                    </el-input-number>
                                </template>
                            </el-table-column>
                        </template>
                    </el-table-column>
                    <el-table-column prop="test_val" label="合格判定" min-width="90">
                        <template #default="scope">
                            <el-select v-model="scope.row.is_ok" placeholder="是否合格" clearable :disabled="!scope.row.isEdit"
                                style="width:100%">
                                <el-option label="是" :value="true" />
                                <el-option label="否" :value="false" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="test_user" label="检验人" width="120">
                        <template #default="scope">
                            <el-select v-model="scope.row.test_user" placeholder="检验人" clearable filterable
                                :disabled="!scope.row.isEdit" style="width:100%">
                                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="open" label="操作" fixed="right" width="90" align="center">
                        <template #default="scope">
                            <el-link type="primary" v-if="scope.row.isEdit" @click="saveCheck(scope.row)">保存</el-link>
                            <el-link type="primary" v-else @click="editCheck(scope.row)">编辑</el-link>
                            <el-link type="danger" @click="delCheck(scope.row.id)" style="margin-left: 2px;">删除</el-link>
                        </template>
                    </el-table-column>
                </sc-form-table>
                <!-- 预制管 -->
                <sc-form-table ref="formTable" v-else-if="type == 'guan'" v-model="formTableData" :addTemplate="addTemplate"
                    placeholder="暂无数据">
                    <el-table-column prop="val" label="抽检编号">
                        <template #default="scope">
                            <span v-if="scope.row.id">{{ scope.row.test_numer }}</span>
                            <el-input v-else v-model="scope.row.test_numer" placeholder="抽检编号"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="检验记录" align="center">
                        <template v-for="(item, $index) in ftestitems" :key="item.id">
                            <el-table-column prop="test_val" :label="item.name" min-width="130">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.ftestitems[$index].test_val"
                                        :disabled="!scope.row.isEdit" :min="0" style="width:100%" controls-position="right">
                                    </el-input-number>
                                </template>
                            </el-table-column>
                        </template>
                    </el-table-column>
                    <el-table-column prop="test_val" label="合格判定" min-width="90" align="center">
                        <template #default="scope">
                            <el-select v-model="scope.row.is_ok" placeholder="是否合格" clearable :disabled="!scope.row.isEdit"
                                style="width:100%">
                                <el-option label="是" :value="true" />
                                <el-option label="否" :value="false" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="test_user" label="检验人" min-width="120" align="center">
                        <template #default="scope">
                            <el-select v-model="scope.row.test_user" placeholder="检验人" clearable filterable
                                :disabled="!scope.row.isEdit" style="width:100%">
                                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="open" label="操作" fixed="right" width="90" align="center">
                        <template #default="scope">
                            <el-link type="primary" v-if="scope.row.isEdit" @click="saveCheck(scope.row)">保存</el-link>
                            <el-link type="primary" v-else @click="editCheck(scope.row)">编辑</el-link>
                            <el-link type="danger" @click="delCheck(scope.row.id)" style="margin-left: 2px;">删除</el-link>
                        </template>
                    </el-table-column>
                </sc-form-table>
            </el-card>
        </div>
    </div>
    <save-dialog v-if="dialog.save" ref="saveDialog" :mioId="mioId" :belongDeptId="belongDeptId"
        :belongDeptName="mioObj.belong_dept_name" :mioObj="mioObj" :cate="cate" @success="handleSaveSuccess"
        @closed="dialog.save = false">
    </save-dialog>
</template>
<script>
import saveDialog from "./product_check.vue";
export default {
    name: "mioitem",
    components: {
        saveDialog
    },
    data() {
        return {
            addTemplate: {
                ftestitems: [
                    { test_val: '', check_val: '', testitem: '' },
                ],
                test_date: '',//work获取
                test_numer: '',
                is_ok: true,
                test_user: '',
                ftest_work: '',//work获取
                isEdit: true,
                type: 'prod'
            },
            ftestitems: [],
            dialog: {
                check: false,
                save: false,
            },
            apiObj: null,
            params: {},
            formTableData: null,
            ftestWork: '',
            type: '',
            userList: [],
            workObj: {},
        };
    },
    watch: {
        formTableData(newValue, oldValue) {
            console.log('值发生了变化:', newValue);
            this.testNumberChange();
        }
    },
    mounted() {
        let that = this;
        that.type = that.$route.query.type;
        that.ftestWork = that.$route.query.ftestWork;
        that.addTemplate.ftest_work = that.ftestWork;
        that.$API.qm.ftestwork.item.req(that.ftestWork).then((res) => {
            that.workObj = res;
            that.addTemplate.test_date = res.test_date;
            that.addTemplate.test_numer = res.batch + '_1';
            that.getCheckList();
        })
        let tag = that.type == 'bang' ? 'prod_bang' : 'prod_guan';
        that.getTestItem(tag, that.ftestWork);
        that.getUserList(that.ftestWork);
    },
    methods: {
        //获取检验项目
        getTestItem(tag, ftestWork) {
            let that = this;
            that.$API.qm.getTestItem.get({ tag: tag, page: 0, ftest_work: ftestWork }).then(res => {
                let arr = res;
                that.ftestitems = res;
                let ftestitems = [];
                arr.forEach(item => {
                    let obj = {};
                    obj.test_val = 0;
                    obj.testitem = item.id;
                    ftestitems.push(obj);
                });
                that.addTemplate.ftestitems = ftestitems;
            })
        },
        //获取员工
        getUserList() {
            let that = this;
            this.$API.system.user.list.req({ page: 0 }).then(res => {
                that.userList = res;
            });
        },
        //表格数据
        getCheckList(ftestwork) {
            let that = this;
            that.formTableData = [];
            this.$API.qm.ftest.list.req({ page: 0, type: 'prod', ftest_work: ftestwork }).then(res => {
                if (res.length > 0) {
                    that.addTemplate.test_numer = that.workObj.batch + '_' + (res.length + 1);
                    console.log('that.addTemplate.test_numer', that.addTemplate.test_numer)
                    res.forEach(item => {
                        let obj = {};
                        obj = item;
                        obj.isEdit = false;
                        that.formTableData.push(obj);
                    })
                }
            })
        },
        testNumberChange() {
            this.addTemplate.test_numer = this.workObj.batch + '_' + (this.formTableData.length + 1);
        },
        editCheck(row) {
            this.formTableData.forEach((item, index) => {
                if (item.id == row.id) {
                    this.formTableData[index].isEdit = true;
                }
            })
        },
        //删除
        delCheck(id) {
            this.$confirm(`确定删除吗？`, "提示", {
                type: "warning",
            }).then(() => {
                this.$API.qm.ftest.delete.req(id).then((res) => {
                    this.$message.success("删除成功");
                    this.$refs.table.refresh();
                    return res;
                }).catch((err) => {
                    return err;
                });
            }).catch(() => { });
        },
        saveCheck(row) {
            console.log(row);
            if (row.id && row.id !== '') {
                this.$API.qm.ftest.update.req(row.id, row).then((res) => {
                    this.$message.success("操作成功");
                    this.$refs.table.refresh();
                }).catch((err) => {
                    return err;
                });
            } else {
                this.$API.qm.ftest.create.req(row).then((res) => {
                    this.$message.success("操作成功");
                    this.$refs.table.refresh();
                }).catch((err) => {
                    return err;
                });
            }

        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            this.$refs.table.refresh();
        },
        handleCheckSuccess() {
            this.$refs.table.refresh();
        },
        handleQuery() {
            this.$refs.table.queryData(this.query)
        },
        resetQuery() {
            this.query = {};
        },
        mioSubmit() {
            this.$API.inm.mio.submit.req(this.mioObj.id).then(res => {
                this.$message.success("提交成功");
                this.mioObj = res
            })
        }
    },
};
</script>