<template>
    <div class="app-container">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">
            新增</el-button>
        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="物料编码" align="center" prop="sapItemCode" />
            <el-table-column label="物料名称" align="center" prop="itemName" />
            <el-table-column label="申请数量" align="center" prop="applyNum" />
            <el-table-column width="150px" label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="{ $index}">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteRow($index)">删除</el-button>
                    <el-button size="mini" type="text" icon="el-icon-update" @click="updateRow($index)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加或修改调拨料申请对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="产品编码" prop="sapItemCode">
                            <el-input v-model="form.sapItemCode" placeholder="请输入产品编码">
                                <el-button slot="append" icon="el-icon-search" @click="handleItemSelect" />
                            </el-input>
                            <itemSelect ref="brSelectpro" @onSelected="onItemSelect">
                            </itemSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="产品名称" prop="itemName">
                            <el-input disabled v-model="form.itemName" placeholder="请输入产品名称" />
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
          <el-form-item label="申请数量" prop="applyNum">
            <el-input-number v-model="form.applyNum" :min="0" />
          </el-form-item>
        </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import codeSelect from "./codeSelect.vue";
import ItemSelect from "@/components/itemSelect/single.vue";
export default {
    name: "TmToolRequestItem",
    dicts: [
        "warehouse_desc"
    ],
    components: { ItemSelect, codeSelect },
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            /**表格数据 */
            tableData: [],

            indexs: null,
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,

            optType: "add",
            // 总条数
            total: 0,
            // 刀模版物料申请单表格数据
            tmToolRequestItemList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                
                itemId: null,
                sapItemCode: null,
                itemName: null,
                applyNum: null,
            },
            // 表单参数
            form: { 
                itemId: null,
                sapItemCode: null,
                itemName: null,
                applyNum: null,
            },

            currentRowIdx: undefined,
            // 表单校验
            rules: {
                sapItemCode: [
                    { required: true, message: "产品编码不能为空", trigger: "blur" }
                ],
                applyNum: [
                    { required: true, message: "申请数量不能为空", trigger: "blur" }
                ],
            }
        };
    },
    watch: {

    },
    created() {
        if (this.$attrs.optType !== 'add') {
            this.getList();
        }
    },
    methods: {
        // onItemSelect(list) {
        //     // console.log(list, 'list')
        //     const datas = list.map(item => {
        //         return {
        //             toolWarehouseId: item.toolWarehouseId,
        //             toolMachinesId: item.toolMachinesId,
        //             type: item.type,
        //             toolCode: item.toolCode,
        //             toolName: item.toolName,
        //             itemCode: item.itemCode,
        //             sapItemCode: item.sapItemCode,
        //             itemName: item.itemName,
        //             local: item.local,
        //             processId: Number(item.processId),
        //             processName: item.processName,
        //             warehouse: item.warehouse,
        //             warehouseDesc: item.warehouseDesc,
        //         }
        //     })
        //     this.tmToolRequestItemList = this.tmToolRequestItemList.concat(datas)
        //     this.$emit('sum')
        // },

        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加表体";
            this.optType = "add";
        },

        handleItemSelect() {
            this.$refs.brSelectpro.showFlag = true;
        },
        onItemSelect(row) {
            if (row != undefined && row != null) {
                this.form.itemId = row.itemId;
                this.form.sapItemCode = row.sapItemCode;
                this.form.itemName = row.itemName;
            }
        },

        /**表单提交 */
        submitForm() {
            if(this.form.sapItemCode==null){
                this.open = true;
                this.$modal.confirm('物料编码不能为空');
                return;
            }
           
            if(this.form.applyNum==0){
                this.open = true;
                this.$modal.confirm('申请数量需要输入数字');
                return;
            }
          
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.optType == "add") {
                        this.tableData.unshift(JSON.parse(JSON.stringify(this.form)));
                    }else if(this.optType == "edit"){
                        this.tableData[this.indexs]=JSON.parse(JSON.stringify(this.form));
                    }
                    this.showFlag = false;
                }
            });
            this.open = false;
        },
        /**删除行 */
        deleteRow(index) {
            this.tableData.splice(index, 1);
        },
        /**修改*/
        updateRow(index){
            console.log(index);
            this.indexs=index;
            this.form = this.tableData[index];
            this.open = true;
            this.optType = "edit";
        },

        handleRemove(row, index) {
            console.log(row, index)
            // this.tags.splice(this.tags.indexOf(tag), 1)
            this.tmToolRequestItemList.splice(this.tmToolRequestItemList.indexOf(row), 1)
            this.$emit('sum')
        },
        // 取消按钮
        cancel() {
            this.open = false;
            // this.reset();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 表单重置
        reset() {
            this.form = {
                itemId: null,
                sapItemCode: null,
                itemName: null,
                applyNum: null,
                workunitId: null,
                workunitName: null,
                workunitCode: null,
                workstationCode: null,
                workstationId: null,
                workstationName: null,
            };
            this.resetForm("form");
        },




        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.toolRequestItemId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        }
    }
};
</script>