<template>
    <div>
        <div class="divborder leftDiv">
            <Tree class="treeDiv" :data="data1" ref="tree" @on-select-change="getTypeid()"></Tree>
        </div>
        <div class="rightDiv">
            <div class="divborder newSearchDiv">
                <div class="filter">
                    <label>仓库名称：</label>
                    <Input type="text" class="searchInput" v-model="name" clearable />
                </div>
                <div class="searchBtn">
                    <Button
                        type="primary"
                        class="twoWord"
                        icon="ios-search"
                        @click="search(1,10)"
                    >{{$t('1001')}}</Button>
                    <Button
                        type="success"
                        class="twoWord"
                        icon="md-add-circle"
                        @click="add()"
                    >{{$t('1002')}}</Button>
                    <Button
                        type="warning"
                        class="twoWord intervalRight"
                        icon="ios-create-outline"
                        @click="edit()"
                    >{{$t('1003')}}</Button>
                    <Button
                        type="primary"
                        class="fourWord"
                        icon="md-download"
                        @click="loadexcel()"
                    >{{$t('1005')}}</Button>
                    <Upload
                        style="display:inline-block"
                        ref="upload"
                        :action="action"
                        name="excel-file"
                        :headers="headers"
                        :show-upload-list="false"
                        :on-format-error="handleFormatError"
                        :on-success="handleSuccess"
                        :on-error="handleError"
                        :format="['xlsx']"
                    >
                        <Button
                            type="primary"
                            class="fourWord"
                            icon="md-cloud-upload"
                        >{{$t('1006')}}</Button>
                    </Upload>
                    <Button
                        type="primary"
                        class="fourWord"
                        icon="ios-cloud-download"
                        @click="Export()"
                    >{{$t('1007')}}</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:'650px'}">
                <p slot="header">
                    <span v-show="type==1">添加仓库信息</span>
                    <span v-show="type==2">修改仓库信息</span>
                </p>
                <div class="modal_body">
                    <div style="height:220px;">
                        <!-- <div class="row1"> -->
                        <div class="filter">
                            <label>
                                <i>*</i>仓库类别：
                            </label>
                            <Cascader
                                :data="data1"
                                v-model="category"
                                change-on-select
                                class="searchSelect"
                            ></Cascader>
                        </div>
                        <div class="filter">
                            <label>
                                <i>*</i> 仓库名称：
                            </label>
                            <Input type="text" class="searchInput" v-model="name1" />
                        </div>
                        <!-- </div> -->

                        <div class="filter">
                            <label>
                                <i>*</i>仓库地址：
                            </label>
                            <Input type="text" class="searchInput" v-model="address" />
                        </div>

                        <div class="filter">
                            <label>
                                <i>*</i>管理人：
                            </label>
                            <Input type="text" class="searchInput" v-model="manager" />
                        </div>
                        <div class="filter">
                            <label>
                                <i>*</i>电话：
                            </label>
                            <Input type="text" class="searchInput" v-model="phone" />
                        </div>
                        <div class="filter">
                            <label>
                                <i>*</i>手机：
                            </label>
                            <Input type="text" class="searchInput" v-model="mobile" />
                        </div>
                        <div class="filter row1" v-show="type==2">
                            <label>是否停用：</label>
                            <Checkbox v-model="isdel" style="width:25px"></Checkbox>
                        </div>

                        <div class="filter">
                            <label>{{$t("1030")}}：</label>
                            <Input
                                type="textarea"
                                v-model="remark"
                                class="searchInput MaxWidth"
                                :autosize="{minRows: 2,maxRows: 2}"
                            />
                        </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>
    </div>
</template>

<script>
import axios from "@/libs/api.request";

export default {
    data() {
        return {
            action: axios.publicPath + "wms/WaveHouse/ImportStorage",
            headers: {
                token: localStorage.getItem("token"),
                timestamp: localStorage.getItem("timestamp"),
                nonce: localStorage.getItem("nonce"),
                sign: localStorage.getItem("sign"),
            },
            data1: [],
            name: "",
            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: "typename",
                },
                {
                    title: "仓库名称",
                    key: "name",
                },
                {
                    title: "仓库编号",
                    key: "serial_number",
                },
                {
                    title: "仓库地址",
                    key: "address",
                },
                {
                    title: "仓库管理人",
                    key: "manager",
                },
                {
                    title: "电话",
                    key: "phone",
                },
                {
                    title: "手机",
                    key: "mobile",
                },
                {
                    title: "是否停用",
                    key: "isdel",
                },
                {
                    title: "备注",
                    key: "remark",
                },
            ],
            detailobj: {},
            modal: false,
            type: 1,
            category: [],
            name1: "",
            address: "",
            manager: "",
            phone: "",
            mobile: "",
            remark: "",
            isdel: false,
            typeid: "",
        };
    },
    created() {
        this.getCategory();
        this.search(1, 10);
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
    },
    methods: {
        getCategory() {
            this.request("/wms/WaveHouse/GetWaveHouseTypeTree", "", "get").then(
                (res) => {
                    // console.log(res.data);
                    if (res.data.ret == 1) {
                        this.total = res.data.total;
                        this.data1 = res.data.data.children;
                        let arr = res.data.data.children;
                        this.contentTree(this.data1);
                        console.log(this.data1);
                    }
                }
            );
        },
        contentTree(arr) {
            arr.forEach((ele) => {
                ele.disabled = false;
                ele.value = ele.id;
                ele.label = ele.name;
                ele.title = ele.name;
                if (
                    ele.children.length != 0 &&
                    ele.children != undefined &&
                    ele.children != null
                ) {
                    this.contentTree(ele.children);
                }
            });
        },
        getTypeid() {
            let node = this.$refs.tree.getSelectedNodes();
            if (node.length > 0) {
                this.typeid = node[0].id;
                this.search(1, 10);
            } else {
                this.typeid = "";
                this.search(1, 10);
            }
            console.log(this.typeid);
        },
        search(page, pagesize) {
            if (page == 1) {
                this.page = 1;
            }
            let data = {
                page: page,
                pageSize: pagesize,
                typeid: this.typeid, // 产线层级id
                name: this.name,
            };
            this.request("/wms/WaveHouse/GetWaveHouseList", data, "get").then(
                (res) => {
                    console.log(res.data);

                    if (res.data.ret == 1) {
                        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,
                        typeid: item.typeid,
                        typename: item.typename,
                        name: item.name,
                        serial_number: item.serial_number,
                        address: item.address,
                        manager: item.manager,
                        phone: item.phone,
                        mobile: item.mobile,
                        isdel: item.status == 0 ? "是" : "否",
                        remark: item.description,
                    });
                });
            }
            this.tableData1 = data;
        },
        add() {
            this.category = [];
            this.name1 = "";
            this.address = "";
            this.manager = "";
            this.phone = "";
            this.mobile = "";
            this.remark = "";
            this.type = 1;
            this.modal = true;
        },
        adddata() {
            let url = "",
                msg = "";
            let data = {
                typeid: this.category[this.category.length - 1],
                name: this.name1,
                address: this.address,
                linkman: this.manager,
                phone: this.phone,
                mobile: this.mobile,
                status: this.isdel == false ? 1 : 0,
                description: this.remark,
            };
            if (
                data.typeid == "" ||
                data.name == "" ||
                data.address == "" ||
                data.linkman == "" ||
                data.phone == "" ||
                data.mobile == ""
            ) {
                this.$Message.error("必选项不能为空");
                return false;
            }
            if (this.type == 1) {
                url = "/wms/WaveHouse/AddStorage";
                msg = "添加成功";
            } else {
                data.id = this.detailobj.id;
                url = "/wms/WaveHouse/UpdateStorage";
                msg = "修改成功";
            }

            this.request(url, data, "post").then((res) => {
                if (res.data.ret == 1) {
                    this.$Message.success(msg);
                    this.search(this.page, this.pagesize);
                    this.detailobj = {};
                    this.modal = false;
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        edit() {
            if (this.detailobj.id) {
                this.category = [];
                this.changeDetSelect(this.data1, this.detailobj.typeid);
                console.log(this.category);
                this.name1 = this.detailobj.name;
                this.address = this.detailobj.address;
                this.manager = this.detailobj.manager;
                this.phone = this.detailobj.phone;
                this.mobile = this.detailobj.mobile;
                this.isdel = this.detailobj.isdel == "是";
                this.remark = this.detailobj.remark;
                this.type = 2;
                this.modal = true;
            } else {
                this.$Message.error("请选择数据");
            }
            // this.type = 2;
            // this.modal = true;
        },
        changeDetSelect(arr, id) {
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].value == id) {
                    this.category.push(arr[i].value);
                } else {
                    if (
                        arr[i].children.length != 0 &&
                        arr[i].children != undefined &&
                        arr[i].children != null
                    ) {
                        this.category.push(arr[i].value);
                        this.changeDetSelect(arr[i].children, id);
                    }
                }
            }
        },
        closeadd() {
            this.modal = false;
            this.detailobj = {};
        },
        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);
        },
        handleFormatError(file) {
            this.$Message.error(
                this.$t("950396") + file.name + this.$t("950397")
            );
        },
        handleSuccess(res, file) {
            if (res.ret == 1) {
                this.$Message.success(this.$t("950398"));
                this.getCategory();
                this.search(1, 10);
            } else {
                if ((res.msg + "").indexOf(",") != -1) {
                    inittip(res.msg);
                } else {
                    this.$Message.error(this.$t(res.data));
                }
            }
        },
        handleError() {
            this.$Message.error(this.$t("2010006") + "!");
        },
        loadexcel() {
            axios
                .request({
                    url: "/config/download/GetTemplate?name=StorageList",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        window.location.href =
                            axios.publicPath + "" + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        Export() {
            let data = {
                page: this.page,
                pageSize: this.pagesize,
                typeid: this.typeid, // 产线层级id
                name: this.name,
            };
            this.request("/wms/WaveHouse/ExportStorage", data, "get").then(
                (res) => {
                    if (res.data.ret === 1) {
                        window.location.href =
                            axios.publicPath + "" + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
            );
        },
        // unloadexcel() {
        //     let file = this.readyFiles[0];
        //     const data = new FormData();
        //     data.append("file", file);
        //     data.append("type", 2);
        //     axios
        //         .request({
        //             url: "/tlm/Upload/Submit?templateName=TechToolList",
        //             data,
        //             method: "post"
        //         })
        //         .then(res => {
        //             if (res.ret === 1) {
        //                 this.$Message.success(this.$t("100378"));
        //             } else {
        //                 alert(res.data.msg);
        //             }
        //         })
        //         .catch(err => {
        //             alert(err.msg);
        //         });
        // },
        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>
.row1 {
    display: flex;
}
.buttonall button {
    margin: 5px 10px;
}
</style>
