<template>
    <el-dialog title="物料" :visible.sync="materialsDialog" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false" width="770px">
        <div class="materials-dialog">
            <!-- <div class="materials-dialog-lf">
                <div class="title-pack clear-float pl-15 pr-15">
                    <span class="page-title-text">物料分类</span>
                </div>
                <Tree
                    :treeConfig="treeConfig"
                    @doTreeNodeClick="doTreeNodeClick">
                </Tree>
            </div> -->
            <div class="materials-dialog-rg clear-float">
                <div class="title-pack clear-float pl-15">
                    <span class="page-title-text">物料列表</span>
                </div>
                <div class="float-right clear-float mt-15 mb-15 mr-15">
                    <div class="float-left clear-float mr-10">
                        <el-input v-model="materialsSearchValue" size="mini" placeholder="请输入搜索关键字" :maxlength="20"></el-input>
                    </div>
                    <div class="float-left">
                        <el-button @click="doMaterialsSearchClick" size="mini" icon="el-icon-search">搜索</el-button>
                        <el-button @click="doMaterialsResetClick" size="mini">重置</el-button>
                    </div>
                </div>
                <div class="pl-15 pr-15 mt-15">
                    <Table :tableConfig="tableConfig" @onPageSizeChange="onPageSizeChange" @onCurrentPageChange="onCurrentPageChange" @doTableRowClick="doTableRowClick">
                    </Table>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer text-center">
            <el-button size="small" type="primary" icon="el-icon-check" @click="doMaterialsConfirmClick">保存</el-button>
            <el-button size="small" icon="el-icon-close" @click="doMaterialsCancelClick">取消</el-button>
        </span>

    </el-dialog>
</template>

<script>
// 引入自己的工具类

import Tree from './SelectMaterialsDialog/Tree';
import Table from './SelectMaterialsDialog/Table';

export default {
    components: {
        Tree,
        Table
    },
    props: {
        onlyCraftsRoute: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            // 列表配置
            tableConfig: {
                // 表格高度
                height: 380,
                // 表格数据
                data: [],
                // 是否有多选功能标识
                checkedToggle: false,
                // 列表显示配置
                fieldList: [
                    {
                        label: '物料编码',
                        value: 'code',
                        width: 100,
                        align: 'center'
                    },
                    { label: '物料名称', value: 'name' },
                    { label: '单位', value: 'unit' },
                    { label: '创建人', value: 'createUser' }
                ],
                // 分页配置
                paginationConfig: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 20
                }
            },
            // 树组件配置
            treeConfig: {
                // 数据
                data: [],
                // 是否选中第一个节点
                choseFirstNodeToggle: true
            },
            // 物料分类id
            materialsClassificationId: '',
            // 物料选择对话框开关标识
            materialsDialog: false,
            // 物料列表搜索关键字
            materialsSearchValue: '',
            // 物料列表点击选择物料数据
            materialsTableNodeClickValue: {}
        };
    },
    methods: {
        // 树组件节点点击
        doTreeNodeClick (treeNodeValue) {
            this.materialsClassificationId = treeNodeValue.id;
            // 根据物料分类id查询物料
            this.getMaterialsListDataByMaterialsClassificationId();
        },
        // 表格组件触发分页数量改变事件
        onPageSizeChange (pageSize) {
            this.tableConfig.paginationConfig.pageSize = pageSize;
            this.tableConfig.paginationConfig.currentPage = 1;
            // 根据物料分类id查询物料
            this.getMaterialsListDataByMaterialsClassificationId();
        },
        // 表格组件触发分页页数改变事件
        onCurrentPageChange (currentPage) {
            this.tableConfig.paginationConfig.currentPage = currentPage;
            // 根据物料分类id查询物料
            this.getMaterialsListDataByMaterialsClassificationId();
        },
        // 点击表格组件数据
        doTableRowClick (tableRowValue) {
            this.materialsTableNodeClickValue = tableRowValue;
        },
        // 点击物料列表搜索按钮
        doMaterialsSearchClick () {
            this.materialsCurrentPage = 1;
            this.materialsPageSize = 20;
            // 根据物料分类id查询物料
            this.getMaterialsListDataByMaterialsClassificationId();
        },
        // 点击物料列表重置按钮
        doMaterialsResetClick () {
            this.materialsSearchValue = '';
            this.materialsCurrentPage = 1;
            this.materialsPageSize = 20;
            // 根据物料分类id查询物料
            this.getMaterialsListDataByMaterialsClassificationId();
        },
        // 点击物料列表
        doMaterialsSelectClick (materialsValue) {
            this.materialsTableNodeClickValue = materialsValue;
        },
        // 点击选择物料对话框确认按钮
        doMaterialsConfirmClick () {
            this.materialsDialog = false;
            this.$emit(
                'doSelectMaterialsConfirmClick',
                this.materialsTableNodeClickValue
            );
            this.materialsTableNodeClickValue = {};
            // 清空数据，待优化
            this.tableConfig = {
                height: 380,
                data: [],
                fieldList: [
                    {
                        label: '物料编码',
                        value: 'code',
                        width: 100,
                        align: 'center'
                    },
                    { label: '物料名称', value: 'name' },
                    { label: '单位', value: 'unit' },
                    { label: '创建人', value: 'createUser' }
                ],
                paginationConfig: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 20
                }
            };
            this.materialsSearchValue = '';
        },
        // 点击物料选择对话框取消按钮
        doMaterialsCancelClick () {
            this.materialsDialog = false;
            this.materialsTableNodeClickValue = {};
            this.$emit('doSelectMaterialsCancelClick', {});
            // 清空数据，待优化
            this.tableConfig = {
                height: 380,
                data: [],
                fieldList: [
                    {
                        label: '物料编码',
                        value: 'code',
                        width: 100,
                        align: 'center'
                    },
                    { label: '物料名称', value: 'name' },
                    { label: '单位', value: 'unit' },
                    { label: '创建人', value: 'createUser' }
                ],
                paginationConfig: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 20
                }
            };
            this.materialsSearchValue = '';
        },
        // 根据物料分类id查询物料
        getMaterialsListDataByMaterialsClassificationId () {
            let queryParams = {
                pageNum: this.tableConfig.paginationConfig.currentPage,
                pageSize: this.tableConfig.paginationConfig.pageSize,
                criteria: this.materialsSearchValue
            };
            if (this.onlyCraftsRoute) {
                Object.assign(queryParams, { onlyCraftsRoute: true });
            }
            this.$fetch(
                'materiel-controller/getBytypeId-get',
                queryParams
            ).then(response => {
                this.tableConfig.paginationConfig.total = _.cloneDeep(
                    response.total
                );
                this.tableConfig.data = _.cloneDeep(response.list);
            });
        }
    },
    watch: {
        materialsDialog (newValue, oldValue) {
            // 根据物料分类id查询物料
            this.getMaterialsListDataByMaterialsClassificationId();
        }
    }
};
</script>

<style lang="scss">
// 物料弹窗样式
.materials-dialog {
    height: 540px;
    position: relative;

    // .materials-dialog-lf {
    //     position: absolute;
    //     width: 260px;
    //     height: 100%;
    //     overflow-y: auto;
    //     border: 1px solid #d2d3d5;
    //     background-color: #fff;

    //     .title-pack {
    //         height: 38px;
    //         line-height: 38px;
    //     }

    //     .filter-tree {
    //         height: 451px;
    //         overflow-y: auto;
    //     }
    // }
    .materials-dialog-rg {
        // margin-left: 270px;
        height: 100%;
        border: 1px solid #d2d3d5;
        background-color: #fff;

        .title-pack {
            height: 38px;
            line-height: 38px;
            border-bottom: 1px solid #d2d3d5;
        }
    }
}
</style>


