<template>
  <div>
    <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:'740px'}">
            <p slot="header">
                <span v-show="type==1">添加储位类别</span>
                <span v-show="type==2">修改储位类别</span>
            </p>
            <div style="width:740px">
                <div style="display:flex">
                    <div class="filter" >
                        <label>上级储位类别：</label>
                        <!-- <Select v-model="superiorStore" clearable style="width:200px;">
                            <Option v-for="item in stores" :value="item.id" :key="item.code"></Option>
                        </Select>-->
                        <Cascader
                          class="searchSelect"
                            :data="stores"
                            v-model="superiorStore"
                            change-on-select
                            :disabled="type == 2"
                        ></Cascader>
                    </div>
                    <div class="filter">
                        <label>
                            <i>*</i>当前储位类别：
                            <span>

                            </span>
                        </label>
                        <Input type="text" class="searchInput" v-model="currentStore" />
                    </div>
                </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: 'parent'
                }
            ],
            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) {
            let data = {
                page: page,
                pageSize: pagesize
            };
            this.request('/wms/Location/GetLocationTypeList', data, 'get').then(
                res => {
                    if (res.data.ret == 1) {
                        console.log(res.data.data);

                        this.total = res.data.total;
                        this.renderTable(res.data.data);
                    }
                }
            );
        },
        renderTable (arr = []) {
            let data = [];
            if (arr.length > 0) {
                arr.forEach(item => {
                    data.push({
                        id: item.id,
                        name: item.name,
                        parent: item.parent == 0 ? '顶级类别' : item.parent,
                        pid: item.parentid
                    });
                });
            }
            this.tableData1 = data;
        },
        getCategory () {
            this.request(
                '/wms/Location/GetLocationTypeListNoPage',
                '',
                'get'
            ).then(res => {
                console.log(res.data);
                if (res.data.ret == 1) {
                    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);
                }
            });
        },
        closeadd () {
            this.modal = false;
        },
        add () {
            this.superiorStore = [];
            this.currentStore = '';
            this.modal = true;
            this.type = 1;
        },
        adddata () {
            let parentid = this.superiorStore[this.superiorStore.length - 1];
            if (this.superiorStore.length == 0) {
                this.$Message.error('请选择上级储位类别');
                return false;
            }
            if (this.currentStore == '') {
                this.$Message.error('请填写当前储位类别');
                return false;
            }
            let data = {
                pid: '' + parentid,
                name: this.currentStore
            };
            // return
            if (this.type == 1) {
                this.request(
                    '/wms/Location/AddLocationType',
                    data,
                    'post'
                ).then(res => {
                    if (res.data.ret == 1) {
                        this.$Message.success('添加成功');
                        this.modal = false;
                        this.getCategory();
                        this.search(1, 10);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
            } else {
                data.id = '' + this.detailobj.id;
                this.request(
                    '/wms/Location/UpdateLocationType',
                    data,
                    'post'
                ).then(res => {
                    if (res.data.ret == 1) {
                        this.$Message.success('修改成功');
                        this.modal = false;
                        this.getCategory();
                        this.search(1, 10);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
            }
        },
        edit () {
            if (this.detailobj.id) {
                this.superiorStore = [];
                this.changeDetSelect(this.stores, this.detailobj.pid);
                console.log(this.superiorStore);
                this.currentStore = this.detailobj.name;
                this.type = 2;
                this.modal = true;
            } else {
                this.$Message.error('请选择数据');
                return false;
            }
            // this.type = 2;
            // this.modal = true;
        },
        changeDetSelect (arr, id) {
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].value == id) {
                    this.superiorStore.push(arr[i].value);
                } else {
                    if (
                        arr[i].children.length != 0 &&
                        arr[i].children != undefined &&
                        arr[i].children != null
                    ) {
                        this.superiorStore.push(arr[i].value);
                        this.changeDetSelect(arr[i].children, id);
                    }
                }
            }
        },
        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/Location/DelLocationType',
                            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.getCategory();
                                this.search(1, 10);
                            } 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.tableData1 = this.search(this.page, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            // this.tableData1 = 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>
</style>
