<template>
    <el-dialog
        :title="titleMap[mode]"
        v-model="visible"
        width="1000px"
        :size="1000"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="产品编号" prop="material">
                <el-select
                    v-model="material"
                    placeholder="产品编号"
                    clearable
                    style="width:100%"
                >
                    <el-option
                        v-for="item in materialOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <sc-form-table ref="table" v-model="formList" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
                <el-table-column prop="type" label="工序" min-width="100">
                    <template #default="scope">
                        <span v-if="!scope.row.change">{{ scope.row.processName }}</span>
                        <el-select v-else v-model="scope.row.process" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="val" label="加工数量" width="100">
                    <template #default="scope">
                        <el-input v-model="scope.row.count_use" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="val" label="合格数量" width="100">
                    <template #default="scope">
                        <el-input v-model="scope.row.count_ok" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="不合格数量" align="center">
                    <el-table-column prop="val" label="原因1" width="100">
                        <template #default="scope">
                            <el-input v-model="scope.row.count_no1" placeholder="不合格数量1"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="val" label="原因2" width="100">
                        <template #default="scope">
                            <el-input v-model="scope.row.count_no2" placeholder="不合格数量2"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="val" label="原因3" width="100">
                        <template #default="scope">
                            <el-input v-model="scope.row.count_no3" placeholder="不合格数量3"></el-input>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="type" label="操作人" min-width="120" align="center">
                    <template #default="scope">
                        <span style="display:flex">
                            <el-input readonly v-model="scope.row.handle_user"></el-input>
                            <ehsUserSelect :listIndex="index" :multiple="false" @submit="getReceptionist"/>
                        </span>
                        <!-- <el-select v-model="scope.row.handle_user" placeholder="请选择">
                            <el-option v-for="item in typeDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select> -->
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="操作" min-width="90" align="center">
                    <template #default="scope">
                        <el-link type="primary" @click="submitRecord(scope.row)" >确定 </el-link>
                    </template>
                </el-table-column>
            </sc-form-table>
        </el-form>
        <el-footer>
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button @click="resetForm">取消</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
        </el-footer>
    </el-dialog>
</template>
<script>
import { index } from 'd3';

    export default {
        emits: ["success", "closed"],
        props:{
            mtask: { type: String, default: '' },
            materialId: { type: String, default: '' },
        },
        data() {
            return {
                loading: false,
                mode: "add",
                titleMap: {
                    add: "新增记录",
                    edit: "编辑记录",
                    show: "查看记录",
                },
                form:{},
                addTemplate: {
					process: '',
                    processName: '',
                    count_use:1,
                    count_ok: 1,
                    count_no1: 1,
                    count_no2: 1,
                    count_no3: 1,
                    handle_user:'',
                    user_name:'',
                    change:true
				},
                formList: [],
                material:'',
                visible: false,
                isSaveing: false,
                setFiltersVisible: false,
                options: [],
                materialOptions:[],
            };
        },
        mounted() {
            this.getProcess();
            this.getFormList();
        },
        methods: {
            getFormList(){
                this.$API.mtm.route.list.req({page:0,material:this.materialId}).then((res) => {
                res.forEach(item=>{
                    let obj = {
                        process: item.process,
                        processName: item.process_name,
                        count_use:1,
                        count_ok: 1,
                        count_no1: 0,
                        count_no2: 0,
                        count_no3: 0,
                        handle_user:'',
                        user_name:'',
                        change:false
                    }
                    this.formList.push(obj)
                    })
                })
            },
            //获取工序列表
			getProcess(){
				var res = this.$API.mtm.process.list.req({page:0}).then(res=>{
					this.options = res;
				});
			},
            pushRow(){
				let obj = {
					process: '',
                    processName:"",
                    count_use:1,
                    count_ok: 1,
                    count_no1: 1,
                    count_no2: 1,
                    count_no3: 1,
                    handle_user:'',
                    user_name:'',
                    change:true
				}
				this.formList.push(obj);
			},
			deleteRow(){
				this.$refs.table.deleteRow(0)
			},
            //显示
            open(mode = "add") {
                this.mode = mode;
                this.visible = true;
                return this;
            },
            getList(){
                this.$API.mtm.material.list.req({page:0}).then(res=>{
                    this.options = res;
                })
            },
            getReceptionist(data) {
                // 子组件调用父组件的方法并传参
                console.log(data);
                console.log(data.listIndex);
                debugger;
            },
            //提交
            submit() {
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        try {
                            var res;
                            this.form.pu_plan = this.puPlan;
                            if (this.mode == "add") {
                                res = await this.$API.pum.planitem.create.req(this.form);
                            } else if (this.mode == "edit") {
                                res = await this.$API.pum.planitem.update.req(this.form.id,this.form);
                            }
                            this.isSaveing = false;
                            this.$emit("success", this.form, this.mode);
                            this.visible = false;
                            this.$message.success("操作成功");
                        } catch (err) {
                            //可以处理校验错误
                            this.isSaveing = false;
                            return err;
                        }
                    }
                });
            },
            //表单注入数据
            setData(data) {
                Object.assign(this.form, data);
            },
            //设置过滤项
            setFilters(filters) {
                this.selectionFilters = filters;
                this.setFiltersVisible = true;
            },
        },
    };
</script>
  