<template>
    <el-dialog title="新增" append-to-body :modelValue="openShow" width="70%" @close="closeDialog" fullscreen>
        <el-descriptions title="订单信息" border :column="4" label-width="110">
            <el-descriptions-item label="车间订单号:">WO-898789988WO</el-descriptions-item>
            <el-descriptions-item label="发现工序:">镀后检验</el-descriptions-item>
            <el-descriptions-item label="流程卡号:">9887898</el-descriptions-item>
            <el-descriptions-item label="批次号:">9088909887</el-descriptions-item>
            <el-descriptions-item label="总数量:">78</el-descriptions-item>
            <el-descriptions-item label="物料号:">78765688</el-descriptions-item>
            <el-descriptions-item label="物料名称:">物料1</el-descriptions-item>
            <el-descriptions-item label="简单原因:">
                <el-input v-model="input" placeholder="请输入" />
            </el-descriptions-item>
            <el-descriptions-item label="不良描述:">
                <el-input v-model="input" type="textarea" :rows="3" placeholder="请输入" style="width: 40%;" />
            </el-descriptions-item>


        </el-descriptions>
        <el-descriptions class="margin-top" title="质量信息" border :column="3" label-width="110" style="margin-bottom: 24px;">

            <el-descriptions-item label="历史订单:">
                <el-select v-model="value" placeholder="请选择" style="width: 400px;">
                    <el-option label="订单1" value="1" />
                    <el-option label="订单2" value="2" />
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="处置单类型:">
                <el-select v-model="value" placeholder="请选择" style="width: 400px;">
                    <el-option label="零件模式" value="1" />
                    <el-option label="装配模式" value="2" />
                    <el-option label="售后模式" value="3" />
                </el-select>
            </el-descriptions-item>

            <el-descriptions-item label="不合格数:">
                <el-input v-model="input" placeholder="请输入" style="width: 400px;"/>
            </el-descriptions-item>

            <el-descriptions-item label="比例:">
                <el-input v-model="input" placeholder="请输入" style="width: 400px;"/>
            </el-descriptions-item>
            <el-descriptions-item label="上级编码:">
                <el-input v-model="input" placeholder="请输入" style="width: 400px;"/>
            </el-descriptions-item>
            <el-descriptions-item label="">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="批次性问题" value="Value A" />
                    <el-checkbox label="典型问题" value="Value B" />
                    <el-checkbox label="低级错误" value="Value C" />
                    <el-checkbox label="质量问题" value="Value disabled" />
                </el-checkbox-group>
            </el-descriptions-item>
        </el-descriptions>
        <!-- 
        <el-form :model="form" label-width="auto">
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="历史订单:">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="订单1" value="1" />
                            <el-option label="订单2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="处置单类型:">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="零件模式" value="1" />
                            <el-option label="装配模式" value="2" />
                            <el-option label="售后模式" value="3" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="不合格数:">
                        <el-input v-model="input" placeholder="请输入" />
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="比例:">
                        <el-input v-model="input" placeholder="请输入" />
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="上级编码:">
                        <el-input v-model="input" placeholder="请输入" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="批次性问题" value="Value A" />
                            <el-checkbox label="典型问题" value="Value B" />
                            <el-checkbox label="低级错误" value="Value C" />
                            <el-checkbox label="质量问题" value="Value disabled" />
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form> -->
        <!-- <el-descriptions  title="故障信息" border :column="4"></el-descriptions> -->

        <el-row :gutter="24">
            <el-col :span="24" style="margin-bottom: 24px;">
                <div class="btn_box">
                    <el-button type="primary" plain @click="insertFaultEvent()">插入一行</el-button>
                    <el-button type="danger" plain @click="deleteFaultEvent()">删除选择行</el-button>
                </div>
                <div class="table_box">
                    <el-table ref="faultTable" height="240" :data="faultList" @selection-change="handleSelectionChange"
                        @select="selectChangeData" border>
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column label="故障类别" prop="faultType.rstId" align="center">
                            <template #header>
                                <span><i style="color:red">*</i>故障类别</span>
                            </template>
                            <template #default="scope">
                                <el-select v-model="scope.row.faultType.rstId">
                                    <el-option v-for="item in errorTypeArr" :key="item.rstId" :value="item.rstId"
                                        :label="item.rstName"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="问题大类" prop="questClass.rstId" align="center">
                            <template #header>
                                <span><i style="color:red">*</i>问题大类</span>
                            </template>
                            <template #default="scope">
                                <el-select v-model="scope.row.questClass.rstId" :disabled="!scope.row.faultType.rstId">
                                    <el-option v-for="item in errorBigArr" :key="item.rstId" :value="item.rstId"
                                        :label="item.rstName"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="问题小类" prop="questSubClass.rstId" align="center">
                            <template #header>
                                <span><i style="color:red">*</i>问题小类</span>
                            </template>
                            <template #default="scope">
                                <el-select v-model="scope.row.questSubClass.rstId"
                                    :disabled="!scope.row.questClass.rstId">
                                    <el-option v-for="item in errorSmallArr" :key="item.rstId" :value="item.rstId"
                                        :label="item.rstName"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="比例" prop="proportion" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.proportion"
                                    @input="(value) => changeProportion(value, scope.$index)"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" prop="faultQty" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.faultQty"
                                    @input="(value) => changeFaultQty(value, scope.$index)"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" prop="memo" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.memo"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="btn_box">
                    <el-button type="primary" plain @click="insertDutyEvent()">插入一行</el-button>
                    <el-button type="danger" plain @click="deleteDutyEvent()">删除选择行</el-button>
                </div>
                <div class="table_box">
                    <el-table :data="dutyList" height="240" @selection-change="handleDutyChange"
                        @select="selectChangeDutyData" border>
                        <el-table-column type="selection" width="55px"></el-table-column>
                        <el-table-column label="责任零件" prop="dutyPart" align="center">
                            <template #header>
                                <span><i style="color:red">*</i>责任零件</span>
                            </template>
                            <template #default="scope">
                                <el-input v-model="scope.row.dutyPart" v-if="trialType == 1"></el-input>
                                <el-select v-model="scope.row.dutyPart" v-if="trialType == 2">
                                    <el-option v-for="item in dutyPartArr" :key="item.rstId" :value="item.rstId"
                                        :label="item.rstName"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="责任批号" prop="dutyBatch" align="center">
                            <template #header>
                                <span><i style="color:red">*</i>责任批号</span>
                            </template>
                            <template #default="scope">
                                <el-select v-model="scope.row.dutyBatch">
                                    <el-option v-for="item in dutyBatchArr" :key="item.value" :value="item.value"
                                        :label="item.label"></el-option>
                                    <!-- <el-option v-for="item in dutyBatchArr" :key="item.rstId" :value="item.rstId" :label="item.rstName"></el-option> -->
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="相关零件" prop="relevantPart" align="center">
                            <template #default="scope">
                                <el-select v-model="scope.row.relevantPart">
                                    <el-option v-for="item in relevantPartArr" :key="item.rstId" :value="item.rstId"
                                        :label="item.rstName"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="相关批号" prop="relevantBatch" align="center">
                            <template #default="scope">
                                <el-select v-model="scope.row.relevantBatch">
                                    <el-option v-for="item in relevantBatchArr" :key="item.rstId" :value="item.rstId"
                                        :label="item.rstName"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量(件)" prop="dutyQty" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.dutyQty"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="单位" prop="unit">
                            <template #default="scope">
                                <el-input v-model="scope.row.unit"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" prop="memo">
                            <template #default="scope">
                                <el-input v-model="scope.row.memo"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <template #footer>
            <span class="dialog-footer">
                <el-button plain @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="submit(-1)">保存</el-button>
                <el-button type="primary" plain @click="submit(1)">提交质保</el-button>
                <el-button type="primary" plain @click="submit(2)">提交工艺</el-button>
                <el-button type="primary" plain @click="submit(3)">提交设计</el-button>
                <el-button type="primary" plain @click="submit(4)">提交设计变更</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
        moldAddMore: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            openShow: false,
            tableData: [],
            form: {}
        }
    },
    mounted() {
        this.openShow = this.showDialog
    },
    methods: {
        closeDialog() {
            this.openShow = false
            this.$emit('closeDialog');
        },

    }
}
</script>
<style lang="scss" scoped>
.margin-top {
    margin-top: 24px;
}

.btn_box {
    margin-top: 0 !important;
    margin-bottom: 12px;
}

.table_box {
    width: 100%;
}
</style>