
<template>
    <ele-modal width="1160px" :visible="visible" v-if="visible" :append-to-body="true" :close-on-click-modal="true"
        custom-class="ele-dialog-form" title="选择物料" @update:visible="updateVisible">
        <header-title title="基本信息"></header-title>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="产品名称:" prop="name">
                        <el-input disabled v-model="form.name" readonly />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="产品编码:" prop="code">
                        <el-input disabled v-model="form.code" placeholder="自动带入" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="型号:" prop="modelType">
                        <el-input disabled v-model="form.modelType" placeholder="自动带入" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="牌号:" prop="brandNum">
                        <el-input disabled v-model="form.brandNum" placeholder="自动带入" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="规格:" prop="specification">
                        <el-input disabled v-model="form.specification" placeholder="自动带入" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="计量单位:" prop="measuringUnit">
                        <el-input disabled v-model="form.measuringUnit" placeholder="自动带入" />
                    </el-form-item>
                </el-col>
            </el-row>

            <header-title title="工序"> </header-title>

            <ele-pro-table ref="table" class="table" :needPage="false" :columns="columns" :datasource="form.taskList"
                row-key="id">
                <!-- 表头工具栏 -->
                <template v-slot:toolbar>
                    <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon"
                        @click="openEdit">新增</el-button>
                </template>

                <template v-slot:modelCategoryLevelCode="scope">

                    <el-form-item  :prop="'taskList.modelCategoryLevelCode'+ scope.$index" >
   
                        <el-input  v-model="scope.row.modelCategoryLevelCode" placeholder="请输入模具分类编码"
                            @click.native="openMould(scope.row, scope.$index)"></el-input>

                    </el-form-item>

                </template>

                <template v-slot:modelCategoryLevelName="scope">
                   
                    <el-form-item :prop="'taskList.modelCategoryLevelName'+ scope.$index" >
                        <el-input v-model="scope.row.modelCategoryLevelName" placeholder="请输入模具分类名称"
                            @click.native="openMould(scope.row, scope.$index)"></el-input>

                    </el-form-item>
                   


                </template>

                <!-- 操作列 -->
                <template v-slot:action="{ row, $index }">


                    <el-popconfirm class="ele-action" title="确定要删除当前工序吗？" @confirm="handleDel(row, $index)">
                        <template v-slot:reference>
                            <el-link type="danger" :underline="false" icon="el-icon-delete">
                                删除
                            </el-link>
                        </template>
                    </el-popconfirm>
                </template>


            </ele-pro-table>
        </el-form>

        <div slot="footer" class="footer">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="visible = false">返回</el-button>
        </div>

        <processModal ref="processRefs" @chooseProcess="chooseProcess"></processModal>

        <mouldChoose id="5" ref="mouldRef" @saveMould="saveMould"></mouldChoose>

    </ele-modal>
</template>
  
<script>
import processModal from '@/views/technology/productParam/components/processModal.vue';
import { categoryTaskPallet, getCategoryTaskPallet } from '@/api/material/list';
import mouldChoose from './mouldChoose.vue'
export default {
    components: {
        processModal,
        mouldChoose

    },
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object
    },
    data() {
        const defaultForm = {
            id: null,
            code: '',
            name: '',
            modelType: '',
            brandNum: '',
            specification: '',
            measuringUnit: '',
            taskList: []
        
        };
        return {
            defaultForm,
            // 表单数据
            form: {
                ...defaultForm,
              
            },
            // 表单验证规则
            rules: {
              
            },

            // 提交状态
            loading: false,
            current: null,


            columns: [


                {
                    prop: 'code',
                    label: '工序编码',
                    // sortable: 'custom',
                    showOverflowTooltip: true,
                    align: 'center',
                    minWidth: 110
                },
                {
                    prop: 'name',
                    label: '工序名称',
                    showOverflowTooltip: true,
                    align: 'center',
                    minWidth: 110
                },
                {
                    align: 'center',
                    prop: 'controlName',
                    label: '工序控制码',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'workCenterName',
                    label: '所属工作中心',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },

                {
                    prop: 'modelCategoryLevelCode',
                    label: '模具分类编码',
                    align: 'center',
                    slot: 'modelCategoryLevelCode',
                    minWidth: 150
                },
                {
                    prop: 'modelCategoryLevelName',
                    label: '模具分类名称',
                    align: 'center',
                    slot: 'modelCategoryLevelName',
                    minWidth: 150
                },

                {
                    columnKey: 'action',
                    label: '操作',
                    width: 160,
                    align: 'center',
                    resizable: false,
                    slot: 'action',
                    showOverflowTooltip: true
                }
            ],




            removeList: [],
            categoryId: null
        };
    },
    computed: {
        // 是否开启响应式布局
        styleResponsive() {
            return this.$store.state.theme.styleResponsive;
        }
    },
    methods: {


        /* 更新visible */
        updateVisible(value) {
            this.$emit('update:visible', value);
        },

        openEdit() {
            let _arr = this.$refs.table.getData();
            _arr.map((m) => {

                m.id = m.produceTaskId;
                delete m.produceTaskId;
                return {
                    ...m
                };
            });
            this.$refs.processRefs.open(_arr);
        },

        chooseProcess(data) {
            data.map((m) => {
                m['produceTaskId'] = m.id;
                delete m.id;
                return {
                    ...m
                };
            });
            this.$refs.table.setData([...data, ...this.$refs.table.getData()]);
            this.$forceUpdate()

        },

        handleDel(row, index) {
            let _arr = this.$refs.table.getData();
            _arr.splice(index, 1);
            this.$refs.table.setData(_arr);
            if (row?.id) {
                this.removeList.push(row.id);
            }
        },


        openMould(row, index) {
            this.$refs.mouldRef.open(row, index)
        },

        saveMould(row, idx) {
            let _arr = this.$refs.table.getData()
            this.$set(_arr[idx], 'modelCategoryLevelId', row.id)
            this.$set(_arr[idx], 'modelCategoryLevelCode', row.code)
            this.$set(_arr[idx], 'modelCategoryLevelName', row.name)
            this.$refs.table.setData([..._arr]);


        },



        async getCategoryTaskDetail() {
            const res = await getCategoryTaskPallet(this.categoryId);
            this.form.taskList = res
            this.$forceUpdate()
        },

        save() {

            this.$refs.form.validate(async (value) => {
                if (value) {
                    let _arr = this.$refs.table.getData();

                    let param = {
                        categoryId: this.categoryId,
                        taskList: _arr,
                        removeList: this.removeList
                    };
                    categoryTaskPallet(param)
                        .then((msg) => {
                            this.loading = false;
                            this.$message.success(msg);
                            this.updateVisible(false);
                            this.$emit('done');
                        })
                        .catch((e) => {
                            this.loading = false;
                            this.$message.error(e.message);
                        });
                }

            })

        }
    },

    watch: {
        async visible(visible) {
            if (visible) {
                if (this.data) {
                    this.categoryId = this.data.id;
                    this.$util.assignObject(this.form, {
                        ...this.data
                    });
                } else {
                }

                this.getCategoryTaskDetail();
            } else {
                this.removeList = []
                this.$refs.form.clearValidate();
                this.form = { ...this.defaultForm };
            }
        }
    }
};
</script>
  

<style lang="scss" scoped>
.table {
    .el-form-item {
        margin-bottom: 0 !important;
    }

 
}
.table    ::v-deep .el-form-item__content{
  margin-left: 0px !important;
}

</style>
