<template>
    <div>
        <div class="flex">
            <div class="divborder leftDiv">
              <Tree class="treeDiv" :data="treeList" ref="tree" @on-select-change="getList()"></Tree>
            </div>
            <div class="rightDiv">
                <div class="divborder newSearchDiv">
                    <div class="filter" >
                        <label>刀具柜名称：</label>
                        <Input v-model="name" placeholder=" " class="searchInput" />
                    </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"
                            icon="ios-create-outline"
                            @click="edit()"
                        >{{$t('1003')}}</Button>
                        <Button type="error" class="twoWord"  icon="md-close-circle" @click="del()">{{$t('1004')}}</Button>
                    </div>
                </div>
                <div class="divborder newTableDiv">
                    <Table
                    class="tableClass"
                        :columns="columns"
                        :data="data1"
                        @on-current-change="handleRowChange"
                        highlight-row
                    ></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>
                <div class="addstaff" v-show="showStaff">
                    <div class="divborder">
                        <div class="buttonall">
                            <Button
                                type="success"
                                icon="md-add-circle"
                                @click="add2()"
                            >{{$t('1002')}}</Button>
                            <Button
                                type="warning"
                                icon="ios-create-outline"
                                @click="edit2()"
                            >{{$t('1003')}}</Button>
                            <Button
                                type="error"
                                icon="md-close-circle"
                                @click="del2()"
                            >{{$t('1004')}}</Button>
                        </div>
                        <Table
                            :columns="columns1"
                            :data="tableData"
                            @on-current-change="handleRowChange1"
                            highlight-row
                        ></Table>
                        <div style="margin: 10px;overflow: hidden">
                            <div style="float: right;">
                                <Page
                                    :total="total1"
                                    :current="page1"
                                    @on-change="changePage1"
                                    show-elevator
                                    show-sizer
                                    show-total
                                    @on-page-size-change="handlePageSize1"
                                    :page-size-opts="[10,20,30,40,100]"
                                ></Page>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加工具柜 -->
        <Modal class="newModalClass" :title="modaltitle" v-model="show" :styles="{width:'530px'}">
            <div class="filter">
                <label>
                    <i >*</i> 刀具柜名称：
                </label>
                <Input v-model="name1" placeholder=" " class="searchInput" />
            </div>
            <div class="filter">
                <label>
                   <i>*</i> 刀具柜编号：
                </label>
                <Input v-model="code" placeholder=" " class="searchInput" />
            </div>
            <div class="filter">
                <label>
                    <i>*</i> IP地址：
                </label>
                <Input v-model="ip" placeholder=" " class="searchInput" />
            </div>
            <div class="filter">
                <label>MAC地址：</label>
                <Input v-model="mac" placeholder=" " class="searchInput" />
            </div>
            <div class="filter">
                <label>COM口：</label>
                <Input
                    v-model="com"
                    placeholder=" "
                    type="number"
                    min="1"
                    max="256"
                    value="1"
                    class="searchInput"
                />
            </div>
            <div class="filter">
                <label>
                   <i>*</i> 打印方式：
                    <span>

                    </span>
                </label>
                <RadioGroup v-model="print" style="width:300px">
                    <Radio label="1" style="width:60px">COM</Radio>
                    <Radio label="2" style="width:60px">IP</Radio>
                    <Radio label="3" style="width:60px">USB</Radio>
                    <Radio label="4" style="width:60px">LPT</Radio>
                </RadioGroup>
            </div>
            <div class="filter">
                <label>端口设置：</label>
                <Input v-model="port" placeholder=" " class="searchInput" />
            </div>
            <div slot="footer">
                <Button type="primary" class="twoWord" @click="cancel()">取消</Button>
                <Button type="primary" class="twoWord" @click="submit()">确认</Button>
            </div>
        </Modal>
        <!-- 添加人员 -->
        <Modal v-model="showModel">
            <div class="filter">
                <label>
                    所属部门
                    <span>
                        <i
                            style="color:red;margin-left: 5px!important;margin-right: 3px!important;margin-top: -5px!important"
                        >*</i>
                    </span>
                </label>:
                <Select
                    v-model="depart"
                    label-in-value
                    clearable
                    style="width:200px;"
                    @on-change="getUser"
                    :disabled="disabled1"
                >
                    <Option
                        v-for="item in departList"
                        :value="item.id"
                        :key="item.id"
                    >{{ item.title }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>
                    人员姓名
                    <span>
                        <i
                            style="color:red;margin-left: 5px!important;margin-right: 3px!important;margin-top: -5px!important"
                        >*</i>
                    </span>
                </label>:
                <Select v-model="staff" clearable style="width:200px;" :disabled="disabled2">
                    <Option
                        v-for="item in staffList"
                        :value="item.id"
                        :key="item.id"
                    >{{ item.name }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>
                    权限
                    <span>
                        <i
                            style="color:red;margin-left: 5px!important;margin-right: 3px!important;margin-top: -5px!important"
                        >*</i>
                    </span>
                </label>:
                <CheckboxGroup
                    v-model="auth"
                    style="width:200px;display:inline;"
                    @on-change="getAuth"
                >
                    <Checkbox label="0" style="width:85px">领用权限</Checkbox>
                    <Checkbox label="1" style="width:85px">管理权限</Checkbox>
                </CheckboxGroup>
            </div>
            <div slot="footer">
                <Button type="primary" @click="cancel()">取消</Button>
                <Button type="primary" @click="submitStaff()">确认</Button>
            </div>
        </Modal>
        <Modal v-model="delmodal" title="提示">
            <p>确定删除吗？</p>
            <div slot="footer">
                <Button type="primary" @click="cancel()">取消</Button>
                <Button type="primary" @click="submitDel()">确认</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
export default {
    data () {
        return {
            modaltitle: '',
            name: '', // 刀具柜名称
            treeList: [], // 产线
            total: 0,
            page: 1,
            pagesize: 10,
            data1: [],
            columns: [
                {
                    title: this.$t('1008'),
                    key: 'order',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 70,
                    align: 'center'
                },
                {
                    title: '刀具柜名称',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '刀具柜编号',
                    key: 'number',
                    align: 'center'
                },
                {
                    title: '车间',
                    key: 'workshop',
                    align: 'center'
                },
                {
                    title: '产线',
                    key: 'line',
                    align: 'center'
                },
                {
                    title: 'IP地址',
                    key: 'ip',
                    align: 'center'
                },
                {
                    title: 'MAC地址',
                    key: 'mac',
                    align: 'center'
                },
                {
                    title: 'COM口',
                    key: 'com',
                    align: 'center'
                }
            ],
            cid: 0,
            show: false, // 模态框
            name1: '',
            code: '',
            ip: '',
            mac: '',
            com: 1,
            print: '',
            port: '',
            detailobj: {},
            type: 0, // 添加修改
            showStaff: false,
            showModel: false,
            departList: [],
            staffList: [],
            depart: 0,
            staff: 0,
            auth: [],
            total1: 0,
            page1: 1,
            pagesize1: 10,
            authObj: {},
            columns1: [
                {
                    title: this.$t('1008'),
                    key: 'order',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page1 - 1) * this.pagesize1 + 1
                        );
                    },
                    width: 70,
                    align: 'center'
                },
                {
                    title: '部门',
                    key: 'depart',
                    align: 'center'
                },
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '工号',
                    key: 'work_code',
                    align: 'center'
                },
                {
                    title: '领用权限',
                    key: 'use_auth',
                    align: 'center'
                },
                {
                    title: '管理权限',
                    key: 'manager_auth',
                    align: 'center'
                },
                {
                    title: '创建人',
                    key: 'create_name',
                    align: 'center'
                },
                {
                    title: '创建时间',
                    key: 'create_time',
                    align: 'center'
                }
            ],
            tableData: [],
            disabled1: false,
            disabled2: false,
            delmodal: false,
            delType: 0
        };
    },
    created () {
        this.menu_1();
        this.getDepart();
        // 格式化表格样式
        this.columns = this.$time.initTableTitle(this.columns)
        this.columns1 = this.$time.initTableTitle(this.columns1)
    },
    methods: {
        cancel () {
            this.show = false;
            this.showModel = false;
            this.delmodal = false;
        },
        // 获取树形图数据
        // 获取树形图数据
        menu_1 () {
            let url =
                '/config/UserLevel/GetCurrentUserProjectLevelExceptSection';
            this.commonRequest(url, '', 'get').then(res => {
                // console.log(res);
                if (res.data.ret == 1) {
                    this.treeList = res.data.data.children;
                    this.contentTree(this.treeList);
                    // console.log(this.treeList);
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },

        // 获取id
        getList () {
            let node = this.$refs.tree.getSelectedNodes();
            if (node.length > 0) {
                this.cid = node[0].id;
                this.search(1, 10);
                this.showStaff = false;
            }
        },

        // 动态获取工序
        getLine (value) {
            this.productname = value;
            console.log(this.productname);
            this.inilines();
        },
        getDepart () {
            this.commonRequest(
                '/config/ProjectSection/GetSections',
                '',
                'get'
            ).then(res => {
                if (res.data.ret == 1) {
                    this.departList = res.data.data;
                }
            });
        },
        getUser (value) {
            // console.log(value);
            let section = '';
            if (value) {
                section = value.value;
            } else {
                section = this.depart;
            }
            let data = { sectionid: section };
            this.commonRequest(
                '/config/ProjectUser/getUserListsBySectionId',
                data,
                'get'
            ).then(res => {
                if (res.data.ret == 1) {
                    // console.log(res.data.data);
                    this.staffList = res.data.data;
                }
            });
        },
        contentTree (arr) {
            arr.forEach(ele => {
                ele.disabled = false;
                ele.title = ele.name;
                if (
                    ele.children.length != 0 &&
                    ele.children != undefined &&
                    ele.children != null
                ) {
                    this.contentTree(ele.children);
                }
            });
        },

        // 查询
        search (page, pagesize) {
            var params = {
                sectionId: this.cid,
                name: this.name,
                page: page,
                pagesize: pagesize
            };
            let url = '/config/LineStorage/GetPagedLineStorage';
            this.commonRequest(url, params, 'get').then(res => {
                console.log(res.data);
                if (res.data.ret == 1) {
                    this.total = res.data.total;
                    let list = res.data.data;
                    this.renderTable(list);
                }
            });
        },
        renderTable (array) {
            let a = [];
            array.forEach(item => {
                a.push({
                    id: item.id,
                    name: item.storage_name,
                    number: item.storage_code,
                    sectionId: item.sectionId,
                    workshop: item.parentSectionName,
                    line: item.sectionName,
                    ip: item.ipaddress,
                    mac: item.macaddress,
                    com: item.com_port,
                    print: item.print_category,
                    port: item.print_port
                });
            });
            this.data1 = a;
        },
        // 工具柜的增删改
        add () {
            if (this.cid == 0) {
                this.$Message.error('请先选择车间或产线');
                return false;
            }
            this.name1 = '';
            this.code = '';
            this.ip = '';
            this.mac = '';
            this.com = 1;
            this.print = '';
            this.port = '';
            this.type = 1;
            this.show = true;
            this.modaltitle = this.$t('1002');
        },
        edit () {
            if (
                this.detailobj == {} ||
                this.detailobj == undefined ||
                this.detailobj == null
            ) {
                this.$Message.error('请选择数据');
                return false;
            }
            // console.log(this.detailobj);
            this.name1 = this.detailobj.name;
            this.code = this.detailobj.number;
            this.ip = this.detailobj.ip;
            this.mac = this.detailobj.mac;
            this.com = this.detailobj.com;
            this.print = '' + this.detailobj.print;
            this.port = this.detailobj.port;
            this.type = 2;
            this.modaltitle = this.$t('1003');
            this.show = true;
        },
        del () {
            if (this.detailobj.id) {
                this.delType = 1;

                this.delmodal = true;
            } else {
                this.$Message.error('请选择数据');
            }
        },
        submitDel () {
            let url = '';
            if (this.delType == 1) {
                url =
                    '/config/LineStorage/DeleteLineStorage?id=' +
                    this.detailobj.id;
            }
            if (this.delType == 2) {
                url =
                    '/config/LineStorageAuthority/DeleteStorageAuthority?id=' +
                    this.authObj.id;
            }
            this.commonRequest(url, '', 'post').then(res => {
                if (res.data.ret == 1) {
                    this.delmodal = false;
                    this.$Message.success('删除成功');
                    this.search(1, 10);

                    if (this.delType == 1) {
                        this.showStaff = false;
                    }

                    if (this.delType == 2) {
                        this.showStaff = true;
                        this.getStaffList();
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                    this.delmodal = false;
                }
            });
        },
        submit () {
            if (this.name1 == '' || this.code == '' || this.ip == '') {
                this.$Message.error('请输入必填选项');
                return false;
            }
            if (this.print == '') {
                this.$Message.error('请选择打印方式');
                return false;
            }
            let code = this.code.trim();
            // debugger
            var data = {
                name: this.name1,
                code: code,
                ipaddress: this.ip,
                macaddress: this.mac,
                sectionId: this.cid,
                com_port: this.com,
                print_category: this.print,
                print_port: this.port
            };
            let url = '';
            if (this.type == 1) {
                url = '/config/LineStorage/AddLineStorage';
            } else {
                url = '/config/LineStorage/EditLineStorage';
                data.id = this.detailobj.id;
            }
            this.commonRequest(url, data, 'post').then(res => {
                if (res.data.ret == 1) {
                    this.show = false;

                    if (this.type == 1) {
                        this.$Message.success(this.$t(1055));
                    } else {
                        this.$Message.success('编辑成功');
                    }
                    this.search(1, 10);
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        // 人员的增删改
        getAuth (value) {
            this.auth = value;
        },
        add2 () {
            this.disabled2 = false;
            this.disabled1 = false;
            this.depart = 0;
            this.staff = 0;
            this.auth = [];
            this.type = 1;
            this.showModel = true;
        },
        edit2 () {
            this.auth = [];
            if (this.authObj.id) {
                this.depart = this.authObj.sectionId;
                // this.getUser();
                // console.log(this.authObj.userId);
                this.staff = this.authObj.userId;
                this.disabled1 = true;
                this.disabled2 = true;
                if (this.authObj.useAuth == 1) {
                    this.auth.push('0');
                }
                if (this.authObj.managerAuth == 1) {
                    this.auth.push('1');
                }

                this.type = 2;
                this.showModel = true;

                // setTimeout(() => {
                //     this.showModel = true;
                // }, 1500);
            } else {
                this.$Message.error('请选择数据');
            }
        },
        del2 () {
            if (this.authObj.id) {
                this.delType = 2;

                this.delmodal = true;
            } else {
                this.$Message.error('请选择数据');
            }
        },
        submitStaff () {
            if (this.depart == 0 || this.staff == 0) {
                alert('请选择部门人员');
                return false;
            }
            if (this.auth.length == 0) {
                alert('请选择权限');
                return false;
            }
            let use_auth = 0,
                manager_auth = 0;

            for (let i = 0; i < this.auth.length; i++) {
                if (this.auth[i] == 0) {
                    use_auth = 1;
                }
                if (this.auth[i] == 1) {
                    manager_auth = 1;
                }
            }
            var data = {},
                tip = '',
                url = '';

            if (this.type == 1) {
                data = {
                    section_id: this.depart,
                    user_id: this.staff,
                    use_auth: use_auth,
                    manager_auth: manager_auth,
                    storage_id: this.detailobj.id
                };
                url = '/config/LineStorageAuthority/AddStorageAuthority';
                tip = this.$t(1055);
            } else {
                data = {
                    use_auth: use_auth,
                    manager_auth: manager_auth,
                    id: this.authObj.id
                };
                url = '/config/LineStorageAuthority/EditStorageAuthority';
                tip = this.$t(1060);
            }
            this.commonRequest(url, data, 'post').then(res => {
                if (res.data.ret == 1) {
                    this.showModel = false;
                    this.$Message.success(tip);
                    this.getStaffList();
                    this.authObj = {};
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        getStaffList () {
            if (this.detailobj.id) {
                let data = {
                    storage_id: this.detailobj.id,
                    page: this.page1,
                    pagesize: this.pagesize1
                };
                let url = '/config/LineStorageAuthority/GetStorageAuthorities';
                this.commonRequest(url, data, 'get').then(res => {
                    // console.log(res.data.data);
                    this.total1 = res.data.total;

                    this.renderAuthList(res.data.data);
                });
                this.showStaff = true;
            }
        },
        renderAuthList (arr) {
            let a = [];
            arr.forEach(item => {
                a.push({
                    id: item.id,
                    depart: item.sectionName,
                    name: item.userName,
                    sectionId: item.sectionId,
                    work_code: item.work_code,
                    userId: item.userId, // 工号
                    useAuth: item.use_auth,
                    managerAuth: item.manager_auth,
                    use_auth: item.use_auth == 1 ? '是' : '否',
                    manager_auth: item.manager_auth == 1 ? '是' : '否',
                    create_name: item.create_name,
                    create_time: item.create_time
                });
            });
            this.tableData = a;
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            this.getStaffList();
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.showStaff = false;
            this.data1 = this.search(this.page, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            this.showStaff = false;
            this.data1 = this.search(this.page, this.pagesize);
        },
        handleRowChange1 (currentRow, oldCurrentRow) {
            this.authObj = currentRow;
            this.depart = this.authObj.sectionId;
            this.getUser();
            // console.log(this.authObj);
        },
        handlePageSize1 (value) {
            this.pagesize1 = value;
            this.getStaffList();
        },
        changePage1 (value) {
            this.page1 = value;
            this.getStaffList();
        },
        commonRequest (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 lang="less" scoped>
.flex {
    display: flex;
}
.label {
    width: 100px;
}
</style>
