<template>
    <el-dialog class="ele-dialog-form" title="抽样质检参数" :visible.sync="visible" :before-close="handleClose"
        :close-on-click-modal="false" :close-on-press-escape="false" width="1000px">

        <el-button type="primary" size="mini" @click="addItem">添加</el-button>

        <el-table :data="paramList" tooltip-effect="dark" style="width: 100%; margin-top: 10px;" :header-cell-style="{
            background: '#F0F3F3',
            border: 'none'
        }">


            <el-table-column label="名称">
                <template slot-scope="{ row }">
                    <el-input clearable v-model="row.name" />
                </template>
            </el-table-column>

            <el-table-column label="默认值">
                <template slot-scope="{ row }">
                    <el-input clearable v-model="row.value" />
                </template>
            </el-table-column>


            <el-table-column label="类型">
                <template slot-scope="{ row }">
                    <el-select v-model="row.type">
                        <el-option label="物理性能" :value="1" />
                        <el-option label="金相" :value="2" />
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column label="排序">
                <template slot-scope="{ row }">
                    <el-input clearable v-model="row.sort" />
                </template>
            </el-table-column>


            <el-table-column width="120" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="delItem(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>




        </el-table>


        <template v-slot:footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" :loading="loading" @click="save">
                保存
            </el-button>
        </template>

    </el-dialog>
</template>

<script>
import producetask from '@/api/technology/production';
export default {
    props: {
        taskId: String
    },
    data() {
        
        return {
            visible: true,
            loading: false,

            paramList: [
            ],
            removeIds: []
        };
    },

    created() {
        this.getDetails()
    },
    methods: {

        getDetails() {
            producetask.byTaskId(this.taskId).then(res => {
                this.paramList = res
            })
        },
        handleClose() {
           this.$emit('close')

        },

        addItem() {
            this.paramList.push({
                taskId: this.taskId,
                name: null,
                value: null,
                type: null,
                sort: null


            })
        },

        delItem(index, row) {
            this.paramList.splice(index, 1)
            if(row && row.id) {
           this.removeIds.push(row.id)
            }
        },

        save() {
            let param = {
                paramList: this.paramList,
                removeIds: this.removeIds
            }
            producetask.saveBatch(param).then(res => {
                this.handleClose()
             })
        }
    }
}
</script>