<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv">
        <div class="searchBtn">
            <Button type="success" class="twoWord" icon="md-add-circle" @click="add()">{{$t('1002')}}</Button>
            <Button type="warning" class="twoWord" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</Button>
            <Button type="error" class="twoWord" icon="md-close-circle" @click="dele()">{{$t('1004')}}</Button>
        </div>
      </div>
        <div class="divborder newTableDiv">
            <Table
               class="tableClass"
                @on-current-change="handleRowChange"
                highlight-row
                :data="tableData1"
                :columns="tableColumns1"
            ></Table>
            <div class="pageDiv">
                <div class="pageDirection">
                    <Page
                        :total="total"
                        :current="page"
                        @on-change="changePage"
                        show-elevator
                        show-sizer
                        show-total
                        @on-page-size-change="handlePageSize"
                        :page-size-opts="[10,20,30,40,100]"
                    ></Page>
                </div>
            </div>
        </div>
        <Modal class="newModalClass" v-model="modal" :styles="{width:'400px'}">
            <p slot="header">
                <span v-show="type==1">添加仓库类别</span>
                <span v-show="type==2">修改仓库类别</span>
            </p>
            <div>
                <div class="filter">
                    <label>上级仓库类别：</label>
                    <Cascader
                        :data="stores"
                        v-model="superiorStore"
                        change-on-select
                        :disabled="type == 2"
                        class="searchSelect"
                    ></Cascader>
                    <!-- <Select v-model="superiorStore" clearable style="width:200px;">
                        <Option v-for="item in stores" :value="item.id" :key="item.code"></Option>
                    </Select>-->
                </div>
                <div class="filter">
                    <label>
                        <i>*</i> 当前仓库类别：
                    </label>
                    <Input type="text" class="searchInput" v-model="currentStore" />
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="closeadd()">{{$t('1033')}}</Button>
                <Button type="primary" size="large" @click="adddata()">{{$t('1011')}}</Button>
            </div>
        </Modal>
  </div>
</template>

<script>
export default {
    data () {
        return {
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    }
                },
                {
                    title: '类别名称',
                    key: 'name'
                },
                {
                    title: '上级类别',
                    key: 'parentName'
                }
            ],
            detailobj: {},

            superiorStore: [],
            currentStore: '',
            stores: [],
            modal: false,
            type: 1
        };
    },
    created () {
        this.search(1, 10);
        this.getCategory();
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        search (page, pagesize) {
            this.page = page;
            this.pagesize = pagesize;

            let data = {
                page: page,
                pageSize: pagesize
            };
            this.request(
                '/wms/WaveHouse/GetWaveHouseTypeList',
                data,
                'get'
            ).then(res => {
                console.log(res.data.data);
                // console.log()
                if (res.data.ret == 1) {
                    // console.log(res.data.data);
                    // this.page=res.data.page
                    // this.pagesize=res.data.pagesize
                    this.total = res.data.total;
                    this.tableData1 = res.data.data;
                    this.renderTable(res.data.data);
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        renderTable (arr = []) {
            let data = [];
            if (arr.length > 0) {
                arr.forEach(item => {
                    data.push({
                        id: item.id,
                        name: item.name,
                        parentName:
                            item.parentName == 0 ? '顶级类别' : item.parentName,
                        pid: item.pid
                    });
                });
            }
            this.tableData1 = data;
            // console.log(this.tableData1)
        },
        getCategory () {
            this.request('/wms/WaveHouse/GetWaveHouseTypeTree', '', 'get').then(
                res => {
                    // console.log(res.data);
                    if (res.data.ret == 1) {
                        // console.log(res.data.data);

                        let arr = res.data.data.children;
                        this.stores = [
                            {
                                value: 0,
                                label: '顶级',
                                children: arr
                            }
                        ];
                        this.contentTree(arr);
                    }
                }
            );
        },
        contentTree (arr) {
            arr.forEach(ele => {
                ele.disabled = false;
                ele.value = ele.id;
                ele.label = ele.name;
                if (
                    ele.children.length != 0 &&
                    ele.children != undefined &&
                    ele.children != null
                ) {
                    this.contentTree(ele.children);
                }
            });
        },
        add () {
            this.superiorStore = [];
            this.currentStore = '';
            this.modal = true;
            this.type = 1;
        },
        adddata () {
            if (this.currentStore == '') {
                this.$Message.error('请输入当前仓库类别');
                return false;
            }
            let parentid = this.superiorStore[this.superiorStore.length - 1];
            let data = {
                parentid: parentid,
                name: this.currentStore
            };
            // return
            if (this.type == 1) {
                this.request(
                    '/wms/WaveHouse/AddStorageType',
                    data,
                    'post'
                ).then(res => {
                    if (res.data.ret == 1) {
                        this.$Message.success('添加成功');
                        this.modal = false;
                        this.search(this.page, this.pagesize);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
            } else {
                data.id = this.detailobj.id;
                this.request(
                    '/wms/WaveHouse/UpdateStorageType',
                    data,
                    'post'
                ).then(res => {
                    if (res.data.ret == 1) {
                        this.$Message.success('修改成功');
                        this.modal = false;
                        this.search(this.page, this.pagesize);
                        this.detailobj = {};
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
            }
        },
        edit () {
            if (this.detailobj.id) {
                if (this.detailobj.pid == 0) {
                    this.superiorStore = [0];
                } else {
                    this.superiorStore = [0, this.detailobj.pid];
                }

                this.currentStore = this.detailobj.name;
                this.type = 2;
                this.modal = true;
            } else {
                this.$Message.error('请选择数据');
            }
        },
        closeadd () {
            this.modal = false;
        },
        dele () {
            if (
                this.detailobj === undefined ||
                this.detailobj.id === undefined ||
                this.detailobj.id === 0
            ) {
                this.$Message.error(this.$t('1017'));
                return false;
            } else {
                this.$Modal.confirm({
                    title: this.$t('1018'),
                    content: '',
                    width: '290px',
                    closable: true,
                    okText: this.$t('1004'),
                    onOk: () => {
                        let data = {
                            id: this.detailobj.id
                        };
                        this.request(
                            '/wms/WaveHouse/DelStorageType',
                            data,
                            'post'
                        ).then(res => {
                            if (res.data.ret == 1) {
                                this.$Message.success(this.$t('1058'));
                                // this.tableData1 = this.search(
                                //     this.page,
                                //     this.pagesize
                                // );
                                this.detailobj = {};
                                this.search(1, this.pagesize);
                            } else {
                                this.$Message.error(this.$t(res.data.msg));
                            }
                        });
                    }
                });
            }
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            // console.log(this.detailobj);
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.search(1, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            this.search(this.page, this.pagesize);
        },
        request (url, data, type) {
            if (type == 'get') {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type
                    })
                    .then(res => {
                        return res;
                    })
                    .catch(error => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type
                    })
                    .then(res => {
                        return res;
                    })
                    .catch(error => error);
            }
        }
    }
};
</script>

<style scoped>
.row {
    display: flex;
}
</style>
