<template>
    <el-dialog title="新增" append-to-body :modelValue="openShow" width="70%" @close="closeDialog" fullscreen>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="模板编码:" prop="code">
                        <el-input v-model="ruleForm.code"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="模板名称:" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="模板类型:" prop="templateType">
                        <el-select v-model="ruleForm.templateType" placeholder="请选择" clearable filterable>
                            <el-option v-for="(item,index) in processTemplateList"  :label="item.dictValue"  :value="item.dictKey"> </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                 <el-col :span="8">
                    <el-form-item label="作业中心:" prop="workCenterId">
                        <el-select v-model="ruleForm.workCenterId" placeholder="请选择" clearable filterable>
                            <el-option label="作业中心1"  value="1"> </el-option>
                            <el-option label="作业中心2"  value="2"> </el-option>
                            <el-option label="作业中心3"  value="3"> </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                 <!-- <el-col :span="8">
                    <el-form-item label="生产标识:" prop="shengchanbiaoshi">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="生产标识1"  value="1"> </el-option>
                            <el-option label="生产标识2"  value="2"> </el-option>
                            <el-option label="生产标识3"  value="3"> </el-option>
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <el-col :span="8">
                     <el-form-item label="镀种分类:" prop="platingType">
                        <el-select v-model="ruleForm.platingType" placeholder="请选择" clearable filterable>
                            <el-option v-for="(item,index) in platingTypeList"  :label="item.plateType"  :value="item.id"> </el-option>
                          
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8"> 
                    <el-form-item label="优先级:" prop="priority">
                        <el-input-number v-model="ruleForm.priority" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="16"> 
                    <el-form-item label="备注:" prop="remarks">
                        <el-input v-model="ruleForm.remarks" type="textarea" :rows="3"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            
        </el-form>

        <div style="margin-bottom: 12px;" v-if="moldAddMore">
            <el-button type="primary" @click="addTable">插入一行</el-button>
            <el-button type="danger" @click="delTable">删除行</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column prop="processNo" label="工序号" align="center">
                <template #header>
                    <span><i style="color:red">*</i>工序号</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.processNo" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="processCode" label="工序代码" align="center">
                <template #header>
                    <span><i style="color:red">*</i>工序代码</span>
                </template>
                <template #default="scope">
                     <el-select v-model="scope.row.processCode" placeholder="请选择" @change="processChange(scope.row,scope.$index)" clearable filterable>
                        <el-option v-for="(item,index) in processList"  :label="item.code"  
                        :value="item.id"> </el-option>
                        
                    </el-select>
                </template>
            </el-table-column>
             <el-table-column prop="processName" label="工序名称" align="center">
               
                <template #default="scope">
                    <span>{{ scope.row.processName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="craftCode" label="工艺能力" align="center">
                <template #header>
                    <span><i style="color:red">*</i>工艺能力</span>
                </template>
                <template #default="scope">
                      <el-select v-model="scope.row.craftCode" placeholder="请选择" clearable filterable>
                        <el-option label="工艺能力1"  value="1"> </el-option>
                        <el-option label="工艺能力2"  value="2"> </el-option>
                        <el-option label="工艺能力3"  value="3"> </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="workHours" label="工时(分钟)" align="center">
                <template #header>
                    <span><i style="color:red">*</i>工时(分钟)</span>
                </template>
                <template #default="scope">
                    <el-input-number v-model="scope.row.workHours" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                </template>
            </el-table-column>
             <el-table-column prop="proDes" label="工序描述" align="center">
                <template #header>
                    <span><i style="color:red">*</i>工序描述</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.proDes" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="partName" label="主工序" align="center">
                <template #header>
                    <span><i style="color:red">*</i>主工序</span>
                </template>
                <template #default="scope">
                     <el-select v-model="scope.row.isMain" placeholder="请选择" clearable filterable>
                        <el-option label="是"  value="1"> </el-option>
                        <el-option label="否"  value="2"> </el-option>
                    </el-select>
                </template>
            </el-table-column>
        </el-table>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import { getDictionary } from '@/api/system/dict';
import { getProcessesTeams,add,update,getDetail} from "@/api/processManagement/processTemplate";
import { getList} from "@/api/processManagement/basicProcesses";
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
        moldAddMore: {
            type: Boolean,
            default: false
        },
        updateRow:{
            type:Object,
            default:{}
        }
    },
    data() {
        return {
            processTemplateList:[],
            platingTypeList:[],
            processList:[],
            openShow: false,
            tableData: [],
            ruleForm:{
                code:'',
                name:'',
                workCenterId:'',
                platingType:'',
                priority:''
            },
            rules:{
                code:[{ required: true, message: '请输入', trigger: 'blur' },],
                name:[{ required: true, message: '请输入', trigger: 'blur' },],
                workCenterId:[{ required: true, message: '请选择', trigger: 'blur' },],
                platingType:[{ required: true, message: '请选择', trigger: 'blur' },],
                priority:[{ required: true, message: '请选择', trigger: 'blur' },],
                templateType:[{ required: true, message: '请选择', trigger: 'blur' },],
            },
        }
    },
    mounted() {
        this.openShow = this.showDialog
        
        this.getDictionary()
        this.getProcessesTeams()
        this.getProcessList()

        if(!this.moldAddMore){
            // this.ruleForm = this.updateRow
            // console.log(98989,this.updateRow)
            this.getDetail()
        }
    },
    methods: {
        getDetail(){
             getDetail(this.updateRow.id).then(res => {
                this.ruleForm = res.data.data.dsProModelEntity;
                this.tableData = res.data.data.dsProDetailEntityList;
                });
        },
         getDictionary() {
            getDictionary({ code: 'processTemplateType' }).then(res => {
                this.processTemplateList = res.data.data
            })
        },
        getProcessesTeams(){
            getProcessesTeams({current:1,size:99999}).then(res => {
                this.platingTypeList = res.data.data
            })
        },
        getProcessList(){
             getList(1,99999).then(res => {
                this.processList = res.data.data.records
            })
        },
        closeDialog() {
            this.openShow = false
            this.$emit('closeDialog');
        },
        // 插入一行
        addTable() {
            this.tableData.push({
                processNo: null,
                processCode: null,
                processName: null,
                craftCode: null,
                workHours: null,
                proDes: null,
                isMain:null
            })
        },
        // 删除一行
        delTable(row, index) {
            this.tableData.splice(index, 1)
        },
        
        // 工序代码选择
        processChange(row,index){
            let selected = this.processList.find((item) => item.id == row.processCode)
            row.processName = selected.name
        },

        submit(){
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let query ={
                            ...this.ruleForm,
                            tableData:this.tableData
                        }
                    // 修改
                    if(!this.moldAddMore){
                        update(query).then(res=>{
                            this.$message({
                                type: 'success',
                                message: '操作成功!',
                            });
                            this.$emit('closeDialog');
                        })
                    }else{
                       
                        // 新增
                        add(query).then(res=>{
                            this.$message({
                                type: 'success',
                                message: '操作成功!',
                            });
                            this.$emit('closeDialog');
                        })
                    }
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped></style>