<template>
	<el-drawer
		v-model="visible"
		title="检测表详情"
		:size="'90%'"
		destroy-on-close
		@closed="$emit('closed')"
	>
		<div style="padding: 8px">
			<el-card style="width: 100%" header="基本信息" shadow="hover">
                <el-descriptions>
                    <el-descriptions-item label="名称">{{qctItem.name}}</el-descriptions-item>
                    <el-descriptions-item label="编号">{{qctItem.number}}</el-descriptions-item>
                    <el-descriptions-item label="检测类型">
                        <span v-for="(item,index) in qctItem.tags" :key="item">
                            {{ tags_[item] }} <span v-if="index < qctItem.tags.length - 1">、</span>
                        </span>
                    </el-descriptions-item>
                    <!-- <el-descriptions-item label="创建时间">{{qctItem.create_time}}</el-descriptions-item> -->
                </el-descriptions>
            </el-card>
			<div style="height: 8px"></div>
			<div>
                <!-- 检测物料qctmat -->
                <el-card style="width: 100%" header="检测物料" shadow="hover">
                    <sc-form-table
                    hideDelete
                    hideIndex
                    :tableHeight="200"
                    :pushType="pushType"
                    v-model="qctmatlist"
                    :addTemplate="mataddTemplate"
                    placeholder="暂无数据"
                    >
                        <el-table-column prop="type" label="物料">
                            <template #default="scope">
                                <span v-if="!scope.row.isEdit">{{ scope.row.material_name }}</span>
                                <xtSelect
                                    v-else
                                    :apiObj="apiObj"
                                    :labelField="'full_name'"
                                    v-model:obj="materialrow"
                                    v-model="scope.row.material"
                                    v-model:label="scope.row.full_name"
                                    style="width:100%"
                                    @change="materialrowChange"
                                >
                                    <el-table-column label="物料名称" prop="full_name"></el-table-column>
                                </xtSelect>
                            </template>
                        </el-table-column>
                        <el-table-column  label="用于输入">
                            <template #default="scope">
                                <el-switch :disabled="!scope.row.isEdit" v-model="scope.row.use_for_in" active-color="#13ce66" inactive-color="#666666"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column  label="用于输出">
                            <template #default="scope">
                                <el-switch :disabled="!scope.row.isEdit" v-model="scope.row.use_for_out" active-color="#13ce66" inactive-color="#666666"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="open" label="操作" width="125" align="center">
                            <template #default="scope">
                                <el-button
                                    v-if="scope.row.isEdit"
                                    text
                                    type="primary"
                                    size="small"
                                    @click="formTableAdd(scope.row,'mat')"
                                    >保存</el-button
                                >
                                <el-button
                                    v-else
                                    text
                                    type="primary"
                                    size="small"
                                    @click="formTableEdit(scope.row,'mat')"
                                    >编辑</el-button
                                >
                                <el-button
                                     v-if="!scope.row.isEdit"
                                    text
                                    type="danger"
                                    size="small"
                                    @click="formTableDel(scope.row.id,'mat')"
                                    >删除</el-button
                                >
                                
                            </template>
                        </el-table-column>
                    </sc-form-table>
				</el-card>
                 <!-- 检测项qcttestitem -->
				<el-card style="width: 100%" header="检测项" shadow="hover">
                    <sc-form-table
                    hideIndex
                    :tableHeight="300"
                    :pushType="pushType"
                    v-model="qcttestitemlist"
                    :addTemplate="defectaddTemplate"
                    placeholder="暂无数据"
                    >
                        <el-table-column prop="val" label="排序" width="80">
                            <template #default="scope">
                                <span v-if="!scope.row.isEdit">{{ scope.row.sort }}</span>
                                <el-input v-else v-model="scope.row.sort" placeholder="排序"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="time" label="检测项">
                            <template #default="scope">
                                <span v-if="!scope.row.isEdit">{{scope.row.testitem_name}}</span>
                                <xtSelect
                                    v-else
                                    :apiObj="apiObj2"
                                    v-model="scope.row.testitem"
                                    v-model:label="scope.row.testitem_name"
                                    v-model:obj="testitemrow"
                                    style="width:100%"
                                    @change="testitemrowChange"
                                >
                                    <el-table-column label="名称" prop="name"></el-table-column>
                                    <el-table-column label="描述" prop="description"></el-table-column>
                                </xtSelect>
                            </template>
                        </el-table-column>
                        <el-table-column prop="addto_wpr" label="类型">
                            <template #default="scope">
                                <el-tag v-if="!scope.row.isEdit" :type="scope.row.testitem_type == 20 ? 'success' : 'primary'">{{ scope.row.testitem_type == 20 ?  '操作项':'检测项' }}</el-tag>
                                <el-tag v-else :type="testitemrow.type == 20 ? 'success' : 'primary'">{{ scope.row.type == 20 ?  '操作项':'检测项' }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="addto_wpr" label="加入物料信息">
                            <template #default="scope">
                                <el-switch 
                                    :disabled="!scope.row.isEdit"
                                    v-model="scope.row.addto_wpr" 
                                ></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="备注">
                            <template #default="scope">
                            <span v-if="!scope.row.isEdit">{{ scope.row.note }}</span>
                            <el-input v-else v-model="testitemrow.description" placeholder="备注"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="open" label="操作" width="125" align="center">
                            <template #default="scope">
                                <el-button
                                    v-if="scope.row.isEdit"
                                    text
                                    type="primary"
                                    size="small"
                                    @click="formTableAdd(scope.row,'testitem')"
                                    >保存</el-button
                                >
                                <el-button
                                    v-else
                                    text
                                    type="primary"
                                    size="small"
                                    @click="formTableEdit(scope.row,'testitem')"
                                    >编辑</el-button
                                >
                                <el-button
                                    v-if="!scope.row.isEdit"
                                    text
                                    type="danger"
                                    size="small"
                                    @click="formTableDel(scope.row.id,'testitem')"
                                    >删除</el-button
                                >
                                
                            </template>
                        </el-table-column>
                    </sc-form-table>
				</el-card>
                <!-- 检测缺陷项qctdefect -->
                <el-card style="width: 100%" header="检测缺陷项" shadow="hover">
                    <sc-form-table
                    hideIndex
                    :pushType="pushType"
                    :tableHeight="300"
                    v-model="qctdefectlist"
                    :addTemplate="testitemaddTemplate"
                    placeholder="暂无数据"
                    >
                        <el-table-column prop="val" label="排序" width="80">
                            <template #default="scope">
                                <span v-if="!scope.row.isEdit">{{ scope.row.sort }}</span>
                                <el-input v-else v-model="scope.row.sort" placeholder="排序"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="time" label="缺陷项">
                            <template #default="scope">
                                <span v-if="!scope.row.isEdit">{{scope.row.defect_name}}</span>
                                <xtSelect
                                    v-else
                                    :apiObj="apiObj3"
                                    v-model="scope.row.defect"
                                    v-model:obj="defectrow"
                                    v-model:label="scope.row.defect_name"
                                    style="width:100%"
                                    @change="defectrowChange"
                                >
                                    <el-table-column label="名称" prop="name"></el-table-column>
                                    <el-table-column label="分类" prop="cate"></el-table-column>
                                    <el-table-column label="备注" prop="note"></el-table-column>
                                </xtSelect>
                            </template>
                        </el-table-column>
                        <el-table-column prop="val" label="判定表达式" min-width="150">
                            <template #default="scope">
                                <span v-if="!scope.row.isEdit">{{ scope.row.rule_expression }}</span>
                                <el-input v-else v-model="scope.row.rule_expression" placeholder="请输入判定表达式"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="分类">
                            <template #default="scope">
                                <el-tag v-if="scope.row.defect_okcate==20" type="warning">合格B类 </el-tag>
                                <span v-if="scope.row.defect_okcate==30" type="danger">不合格</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="备注">
                            <template #default="scope">
                                <span v-if="!scope.row.isEdit">{{ scope.row.note }}</span>
                                <el-input v-else v-model="scope.row.note" placeholder="备注"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="open" label="操作" width="125" align="center">
                            <template #default="scope">
                                <el-button
                                    v-if="scope.row.isEdit"
                                    text
                                    type="primary"
                                    size="small"
                                    @click="formTableAdd(scope.row,'defect')"
                                    >保存</el-button
                                >
                                <el-button
                                    v-else
                                    text
                                    type="primary"
                                    size="small"
                                    @click="formTableEdit(scope.row,'defect')"
                                    >编辑</el-button
                                >
                                <el-button
                                    v-if="!scope.row.isEdit"
                                    text
                                    type="danger"
                                    size="small"
                                    @click="formTableDel(scope.row.id,'defect')"
                                    >删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </sc-form-table>
				</el-card>
			</div>
		</div>
	</el-drawer>
</template>
<script>
export default {
	name: "qctDetail",
	props: {
		qctId: {
			type: String,
			default: "",
		},
	},
	data() {
		return {
			dialog: {
				check: false,
				save: false,
			},
            apiObj:this.$API.mtm.material.list,
            materials:[],
            apiObj2:this.$API.qm.testitem.list,
            testitemes:[],
            apiObj3:this.$API.qm.defect.list,
            defects:[],
			apiObjMat: null,
			apiObjDefect: null,
			apiObjTestItem: null,
			params: {},
			qctItem: {},
            qctmatlist:[], //物料
            qctdefectlist:[], 
            qcttestitemlist:[], 
			visible: false,
            tags_:{
                "purin":"入厂检验",
                "first":"首件检验",
                "prod":"成品检验",
                "process":"过程检验",
                "performance":"性能检验"
            },
            mataddTemplate:{
                qct: this.qctId,
                material: "",
                use_for_in:false,
                use_for_out:false,
                isEdit: true,
            },
            defectaddTemplate:{
                qct: this.qctId,
                defect: "",
                note:'',
                sort:'',
                isEdit: true,
                addto_wpr:false,
                rule_expression:'',
            },
            testitemaddTemplate:{
                qct: this.qctId,
                note:'',
                sort:'',
                testitem:'',
                isEdit: true,
            },
            defectrow:{},
            materialrow:{},
            testitemrow:{},
            pushType:'unshift',
		};
	},
	mounted() {
        this.apiObjMat = this.$API.inm.mioitem.list;
		this.apiObjDefect = this.$API.inm.mioitem.list;
		this.apiObjTestItem = this.$API.inm.mioitem.list;
        this.qctItem =this.$TOOL.data.get("qctCurrent");
        this.getLists();
	},
    watch:{
        // testitemrow:{
        //     handler(newVal,oldVal){
        //         console.log('newVal',newVal);
        //         console.log('oldVal',oldVal);
        //         this.testitemrowChange()
        //     },
        //     deep: true,
        // },
        // defectrow:{
        //     handler(newVal,oldVal){
        //         console.log('newVal',newVal);
        //         console.log('oldVal',oldVal);
        //         this.defectrowChange()
        //     },
        //     deep: true,
        // },
        // materialrow:{
        //     handler(newVal,oldVal){
        //         console.log('newVal',newVal);
        //         console.log('oldVal',oldVal);
        //         this.materialrowChange()
        //     },
        //     deep: true,
        // }
    },
	methods: {
		open() {
			this.visible = true;
		},
        getLists(){
            let that = this;
            that.qctmatlist = [],that.qctdefectlist =[],that.qcttestitemlist =[];
            that.$API.qm.qctmat.list.req({qct:that.qctItem.id,page:0}).then(res=>{
                res.forEach(item=>{
                    let obj = Object.assign({},item);
                    obj.isEdit = false;
                    that.qctmatlist.push(obj);
                })
            });
            that.$API.qm.qctdefect.list.req({qct:that.qctItem.id,page:0}).then(res=>{
                res.forEach(item=>{
                    let obj = Object.assign({},item);
                    obj.isEdit = false;
                    that.qctdefectlist.push(obj);
                })
                // that.qctdefectlist = res;
            });
            that.$API.qm.qcttestitem.list.req({qct:that.qctItem.id,page:0}).then(res=>{
                res.forEach(item=>{
                    let obj = Object.assign({},item);
                    obj.isEdit = false;
                    that.qcttestitemlist.push(obj);
                })
                // that.qcttestitemlist = res;
            });
        },
		//添加
		formTableAdd(row,type) {
            console.log('formTableAdd',row);
			let that = this,api = '';
            if(type=='defect'){
                if(row.id!==''&&row.id!==undefined&&row.id!==null){
                    api = that.$API.qm.qctdefect.update;
                }else{
                    row.note = that.defectrow.note;
                    api = that.$API.qm.qctdefect.create;
                }
            }else if(type=='mat'){
                if(row.id!==''&&row.id!==undefined&&row.id!==null){
                    api = that.$API.qm.qctmat.update;
                }else{
                    api = that.$API.qm.qctmat.create;
                }
            }else if(type=='testitem'){
                if(row.id!==''&&row.id!==undefined&&row.id!==null){
                    api = that.$API.qm.qcttestitem.update;
                }else{
                    row.note = that.testitemrow.description;
                    api = that.$API.qm.qcttestitem.create;
                }
            }
            this.$nextTick(() => {
                if(row.id!==''&&row.id!==undefined&&row.id!==null){
                    api.req(row.id,row).then((res) => {
                        that.$message.success("编辑成功");
                        that.getLists();
                        return res;
                    }).catch((err) => {
                        return err;
                    });
                }else{
                    api.req(row).then((res) => {
                        that.$message.success("添加成功");
                        that.getLists();
                        return res;
                    }).catch((err) => {
                        return err;
                    });
                }
            })
		},
        //添加
		formTableSave(row,type) {
			let that = this,api = '';
            if(type=='defect'){
                row.note = that.defectrow.note;
                api = that.$API.qm.qctdefect.create;
            }else if(type=='mat'){
                api = that.$API.qm.qctmat.create;
            }else if(type=='testitem'){
                row.note = that.testitemrow.description;
                api = that.$API.qm.qcttestitem.create;
            }
            this.$nextTick(() => {
                if(row.id!==''&&row.id!==undefined&&row.id!==null){
                    api.req(row).then((res) => {
                        that.$message.success("添加成功");
                        that.getLists();
                        return res;
                    }).catch((err) => {
                        return err;
                    });
                }else{
                    api.req(row).then((res) => {
                        that.$message.success("添加成功");
                        that.getLists();
                        return res;
                    }).catch((err) => {
                        return err;
                    });
                }
            })
		},
        formTableEdit(row,type) {
           if(type=='mat'){
                this.qctmatlist.forEach((item, index) => {
                    if (item.id == row.id) {
                        this.qctmatlist[index].isEdit = true;
                    }
                });
            }else if(type=='testitem'){
                this.qcttestitemlist.forEach((item, index) => {
                    if (item.id == row.id) {
                        this.qcttestitemlist[index].isEdit = true;
                    }
                });
            }else  if(type=='defect'){
                this.qctdefectlist.forEach((item, index) => {
                    if (item.id == row.id) {
                        this.qctdefectlist[index].isEdit = true;
                    }
                });
            }
            
        },
		//删除
		formTableDel(id,type) {
            let that = this,api = '';
            if(type=='defect'){
                api = that.$API.qm.qctdefect.delete;
            }else if(type=='mat'){
                api = that.$API.qm.qctmat.delete;
            }else if(type=='testitem'){
                api = that.$API.qm.qcttestitem.delete;
            }
			that.$confirm(`确定删除吗？`, "提示", {
				type: "warning",
			}).then(() => {
                api.req(id).then((res) => {
                    that.$message.success("删除成功");
                    that.getLists();
                    return res;
                }).catch((err) => {
                    return err;
                });
            }).catch(() => {});
		},
        materialrowChange(){
            let that = this;
            that.qctmatlist.forEach((item) => {
                if (item.id&&(item.material == that.materialrow.id)) {
                    that.$message.warning("该物料已存在");
                }
            });
        },
		defectrowChange(){
            let that = this;
            that.qctdefectlist.forEach((item) => {
                if (item.id&&(item.defect == that.defectrow.id)) {
                    that.$message.warning("该缺陷项已存在");
                }
            });
        },
        testitemrowChange(){
            let that = this;
            that.qcttestitemlist.forEach((item) => {
                if (item.id&&item.testitem == that.testitemrow.id) {
                    that.$message.warning("该检测项已存在");
                }
            });
        },
		//编辑
		check_edit(row) {
			this.mioitemId = row.id;
			this.objitem = row;
			this.dialog.check = true;
			this.$nextTick(() => {
				this.$refs.checkDialog.open("edit").setData(row);
			});
		},
	},
};
</script>
