<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'ftest.create'">新增</el-button>
                <el-button type="primary" icon="el-icon-download" @click="exportExcel">导出</el-button>
            </div>
            <div class="right-panel">
                <el-date-picker v-model="query.date" type="date" value-format="YYYY-MM-DD" />
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" row-key="id" stripe :params="query">
                <el-table-column type="index" width="50" />
                <el-table-column label="日期" prop="test_date" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="工序" prop="test_numer">
                </el-table-column>
                <el-table-column label="检测内容及标准">
                    <template #default="scope">
                        <div v-for="item in scope.row.ftestitems" :key="item.id">
                            {{ item.testitem_description }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作人测量值" prop="production_date">
                    <template #default="scope">
                        <div v-for="item in scope.row.ftestitems" :key="item.id">
                            {{ item.test_val }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作人" prop="test_user_name">
                </el-table-column>
                <el-table-column label="专检人测量值" prop="buy_date">
                    <template #default="scope">
                        <div v-for="item in scope.row.ftestitems" :key="item.id">
                            {{ item.check_val }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="专检人" prop="check_user_name">
                </el-table-column>
                <el-table-column label="结论">
                    <template #default="scope">
                        <el-tag v-if="scope.row.is_ok" type="success">
                            合格
                        </el-tag>
                        <el-tag v-else type="warning">
                            不合格
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="100">
                    <template #default="scope">
                        <el-link type="primary" @click="table_edit(scope.row)" v-auth="'ftest.update'">编辑
                        </el-link>
                        <el-divider direction="vertical"></el-divider>
                        <el-link type="danger" @click="table_del(scope.row)" v-auth="'ftest.delete'">删除
                        </el-link>
                    </template>
                </el-table-column>
            </scTable>
            <scTable ref="table" :apiObj="apiObj" row-key="id" stripe :params="query" id="myTable" style="display: none;">
                <el-table-column type="index" width="50" />
                <el-table-column label="日期" prop="test_date" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="工序" prop="number">
                </el-table-column>
                <el-table-column label="检测内容">
                    <template #default="scope">
                        <div v-for="item in scope.row.ftestitems" :key="item.id">
                            {{ item.testitem_description }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="检测标准" show-overflow-tooltip>
                    <template #default="scope">
                        <div v-for="item in scope.row.ftestitems" :key="item.id">
                            {{ item.testitem_name }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作人测量值" prop="production_date">
                    <template #default="scope">
                        <div v-for="item in scope.row.ftestitems" :key="item.id">
                            {{ item.test_val }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作人" prop="test_user_name">
                </el-table-column>
                <el-table-column label="专检人测量值" prop="buy_date">
                    <template #default="scope">
                        <div v-for="item in scope.row.ftestitems" :key="item.id">
                            {{ item.check_val }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="专检人" prop="check_user_name">
                </el-table-column>
                <el-table-column label="结论">
                    <template #default="scope">
                        <span v-if="scope.row.is_ok" type="success">
                            合格
                        </span>
                        <span v-else type="warning">
                            不合格
                        </span>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
        <check-dialog v-if="dialog.check" ref="checkDialog" @success="handleCheckSuccess" @closed="dialog.check = false">
        </check-dialog>
    </el-container>
</template>
<script>
import checkDialog from "./first_check.vue";
export default {
    name: "rparty",
    components: {
        checkDialog
    },
    data() {
        return {
            dialog: {
                check: false
            },
            excelName: '首件确认',
            // apiObj: this.$API.qm.list,
            apiObj: this.$API.qm.ftest.list,
            query: {
                page: 1,
                page_size: 20,
                type: 'first'
            },
            selection: []
        };
    },
    methods: {

        add() {
            this.dialog.check = true;
            this.$nextTick(() => {
                this.$refs.checkDialog.open("add");
            });
        },
        table_edit(row) {
            this.dialog.check = true;
            console.log('row', row)
            this.$nextTick(() => {
                this.$refs.checkDialog.open("edit").setData(row);
            });
        },
        table_del(row) {
            this.$confirm(`确定删除吗？`, "提示", {
                type: "warning",
            }).then(() => {
                this.$API.qm.ftest.delete.req(row.id).then(res => {
                    this.$message.success("操作成功");
                    this.$refs.table.refresh();
                })
            })
        },
        //查看
        table_show(row) {
            this.dialog.check = true;
            this.$nextTick(() => {
                this.$refs.checkDialog.open("show").setData(row);
            });
        },
        handleCheckSuccess() {
            this.$refs.table.refresh();
        },
        handleQuery() {
            this.$refs.table.queryData(this.query)
        },
        resetQuery() {
            this.query = {};
        },
        exportExcel() {
            this.exportLoading = true;
            this.$XLSX('#myTable', this.excelName)
            this.exportLoading = false;
        },
    },
};
</script>