<template>
    <div class="app-container">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">
            {{ $t('common.add') }}</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="$t('物料编码')" align="center" prop="sapItemCode" />
            <el-table-column :label="$t('物料名称')" align="center" prop="itemName" />
            <el-table-column :label="$t('common.workstation_code')" align="center" prop="workstationCode" />
            <el-table-column :label="$t('common.workunit_code')" align="center" prop="workunitCode" />
            <el-table-column :label="$t('申请数量')" align="center" prop="applyNum" />
            <el-table-column width="100px" :label="$t('common.option')" 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)">{{ $t('common.del') }}</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="$t('产品编码')" prop="sapItemCode">
                            <el-input v-model="form.sapItemCode">
                                <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="$t('产品名称')" prop="itemName">
                            <el-input disabled v-model="form.itemName" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('common.workstation_code')" prop="workstationCode">
                            <el-input v-model="form.workstationCode">
                                <el-button slot="append" icon="el-icon-search" @click="handleWorkstationSelect" />
                            </el-input>

                        </el-form-item>
                        <WorkstationSelect ref="brSelectworkstation"
                            @onSelected="val => onWorkstationSelect(val, 'workstation')"
                            :workstationCode="form.workstationCode">
                        </WorkstationSelect>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('common.workunit')" prop="workunitCode">
                            <el-input v-model="form.workunitCode">
                                <el-button slot="append" icon="el-icon-search"
                                    @click="$refs.codeSelect.showFlag = true"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <WorkstationSelect ref="brSelectworkstation"
                    @onSelected="val => onWorkstationSelect(val, 'workstation')"
                    :workstationCode="form.workstationCode">
                </WorkstationSelect>
                <codeSelect ref="codeSelect" :workstationId="form.workstationId"
                    @onSelected="val => onWorkstationSelect(val, 'unit')"></codeSelect>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('申请数量')" prop="applyNum">
                            <el-input v-model="form.applyNum" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">{{ $t('common.confirm') }}</el-button>
                <el-button @click="cancel">{{ $t('common.cancel') }}</el-button>
            </div>
        </el-dialog>



        <!-- 
        <pagination v-show="total > 0 && $attrs.optType !== 'add'" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
    </div>
</template>

<script>


import codeSelect from "./codeSelect.vue";
import WorkstationSelect from "@/components/workstationSelect/simpletableSingle.vue";
import ItemSelect from "@/components/itemSelect/single.vue";
export default {
    name: "TmToolRequestItem",
    dicts: [
        "warehouse_desc"
    ],
    components: { ItemSelect, WorkstationSelect, codeSelect },
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            /**表格数据 */
            tableData: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,

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

            currentRowIdx: undefined,
            // 表单校验
            rules: {
            }
        };
    },
    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.$t('添加表体');
            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() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.optType == "add") {
                        this.tableData.unshift({ ...this.form });
                    }
                    this.showFlag = false;
                }
            });
            this.open = false;
        },

        handleWorkstationSelect() {
            this.$refs.brSelectworkstation.showFlag = true;
        },
        onWorkstationSelect(row, type) {
            console.log('row', type, row)
            if (row != undefined && row != null) {
                if (type === 'unit') {
                    // this.form.workunitName = row.workunitName
                    this.$set(this.form, 'workunitCode', row.workunitCode)
                    this.form.workstationId = row.workstationId;
                    this.form.workstationCode = row.workstationCode;
                    this.form.workstationName = row.workstationName;
                } else {
                    this.form.workstationId = row.workstationId;
                    this.form.workstationCode = row.workstationCode;
                    this.form.workstationName = row.workstationName;
                }
            }

        },
        /**删除行 */
        deleteRow(index) {
            this.tableData.splice(index, 1);
        },

        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>