<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="workstationName" />
            <el-table-column label="工作单元名称" align="center" prop="workunitName" />
            <el-table-column label="申请数量" align="center" prop="applyNum" />
            <el-table-column label="单位" align="center" prop="unitOfMeasure" />
            <el-table-column width="100px" 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 :gutter="10">
                    <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('itemSelectRef')" />
                            </el-input>
                            <itemSelect ref="itemSelectRef" @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 :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="工作中心编码" prop="workstationCode">
                            <el-input v-model="form.workstationCode" disabled placeholder="请输入工作中心编码">
                                <el-button slot="append" icon="el-icon-search" @click="handleItemSelect('WorkstationSelectrRef')" />
                            </el-input>
                            <WorkstationSelect
                            ref="WorkstationSelectrRef"
                            :workunitName="form.workunitName"
                            @onSelected="onWorkstationSelected"
                            ></WorkstationSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工作中心名称" prop="workstationName">
                            <el-input disabled v-model="form.workstationName" placeholder="请输入工作中心名称" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="工作单元编码" prop="workunitCode">
                            <el-input v-model="form.workunitCode" disabled placeholder="请输入工作单元编码">
                                <el-button slot="append" icon="el-icon-search" @click="handleItemSelect('WorkunitSelectRef')" />
                            </el-input>
                            <WorkuintSelect
                            ref="WorkunitSelectRef"
                            :workstationName="form.workstationName"
                            @onSelected="onWorkunitSelect"/>
                          </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工作单元名称" prop="workunitName">
                            <el-input disabled v-model="form.workunitName" placeholder="工作单元名称" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="申请数量" prop="applyNum">
                            <el-input-number v-model="form.applyNum" :min="0" />
                            单位：{{form.unitOfMeasure}}
                        </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>



        <!--
        <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 WorkuintSelect from "@/components/workunitSelect/single.vue";
import WorkstationSelect from "@/components/workstationSelect/simpletableSingle.vue";
import ItemSelect from "@/components/itemSelect/single.vue";
export default {
    name: "TmToolRequestItem",
    dicts: [
        "warehouse_desc"
    ],
    components: { ItemSelect, WorkuintSelect, WorkstationSelect, codeSelect },
    props: {
        id: {
            type: String,
            default: ''
        },
        workunitCodes:{
            default: undefined
        },
        workstationCodes:{
            default: undefined
        },
        workstationNames: {
            default: undefined
        },
        workunitNames: {
            default: undefined
        }

    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            /**表格数据 */
            tableData: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,

            optType: "",

            indexs: null,
            // 总条数
            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,
                workunitName: null,
            },
            // 表单参数
            form: {
                itemId: null,
                sapItemCode: null,
                itemName: null,
                unitOfMeasure: null,
                applyNum: null,
                workstationCode: null,
                workunitCode: null,
                workstationCode: null,
                workstationId: null,
                workstationName: null,
                workunitName: null,
            },

            currentRowIdx: undefined,
            // 表单校验
            rules: {
            }
        };
    },
    watch: {
        workunitCodes(val) {
            this.form.workunitCode = val
        },
        workstationCodes(val) {
            this.form.workstationCode = val
        },
        workstationNames(val) {
            this.form.workstationName = val
        },
        workunitNames(val) {
            this.form.workunitName = val
        }
    },
    created() {
        if (this.$attrs.optType !== 'add') {
            this.getList();
        }
        console.log('workstationCodes', this.workstationCodes)
    },
    methods: {

        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加表体";
            this.optType = "add";
        },
        handleItemSelect(refName) {
            this.$refs[refName].showFlag = true;
        },
        onItemSelect(row) {
            if (row != undefined && row != null) {
                this.$set(this.form,'itemId',row.itemId)
                this.$set(this.form,'sapItemCode',row.sapItemCode)
                this.$set(this.form,'itemName',row.itemName)
                this.$set(this.form,'unitOfMeasure',row.unitOfMeasure)
            }
        },
        onWorkstationSelected(row){
          if(row) {
            this.$set(this.form,'workstationCode',row.workstationCode);
            this.$set(this.form,'workstationName',row.workstationName);
          }
        },
        onWorkunitSelect(row){
          if(row) {
            this.$set(this.form,'workunitCode',row.workunitCode);
            this.$set(this.form,'workunitName',row.workunitName);
          }
        },
        /**表单提交 */
        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;
            }
            if(this.form.applyNum==null){
                this.open=true;
                this.$modal.confirm('申请数量需要输入数字');
                return;
            }
            if(this.form.workstationCode==null){
                this.open=true;
                this.$modal.confirm('工作中心编码不能为空，请先选任务单');
                return;
            }
            if(this.form.workunitCode==null){
                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.$set(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 = JSON.parse(JSON.stringify(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;
                this.form.sapItemCode=null;
                this.form.itemName=null;
                this.form.applyNum=null;
                this.form.unitOfMeasure=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>
