<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="del">{{$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" :title="addtitle" :styles="{width:'500px'}" v-model="addmodal">
            <div class="modal_body">
                <div class="filter">
                    <label>
                        <i>*</i>组名：
                    </label>
                    <Input v-model="groupname" type="text" class="searchInput middleWidth" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>包含设备：
                    </label>
                    <Select v-model="machines" :max-tag-count="1" class="searchSelect middleWidth nowropStyle" filterable multiple>
                        <Option
                            v-for="item in machineList"
                            :value="item.id"
                            :key="item.value"
                        >{{ item.name }}</Option>
                    </Select>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="addmodal = false">{{$t(1033)}}</Button>
                <Button type="primary" size="large" @click="addPost()">{{$t(1011)}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import axios from '@/libs/api.request';
export default {
    data () {
        return {
            page: 1,
            pagesize: 10,
            total: 0,
            addmodal: false,
            username: '',
            groupname: '',
            machines: '',
            addtitle: '设备分组设置',
            machineList: [], // 设备列表
            userlist: [], // 人员列表
            tableData1: [],
            type: 1, // 1添加 2修改
            obj: {},
            tableColumns1: [
                // {
                //     title: '全选',
                //     width: 60,
                //     type: 'selection'
                // },
                { // 列表字段属性集合
                    type: 'index2',
                    title: this.$t(1008),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h('span', params.index + (this.page - 1) * this.pagesize + 1)
                    },
                    width: 80
                },
                {
                    title: '组名',
                    key: 'group'
                },
                {
                    title: '包含设备',
                    key: 'machinename'
                },
                // {
                //     title: '人员',
                //     key: 'username'
                // },
                {
                    title: '添加时间',
                    key: 'createtime'
                }
            ]
        }
    },
    created () {
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    mounted () {
        this.search()
    },
    methods: {
        search () {
            var data = {
                page: this.page,
                pagesize: this.pagesize
            }
            axios
                .request({
                    url: '/dashboard/DashboardGroup/GetList',
                    params: data,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.data != undefined && res.data.data.length > 0) {
                        this.total = res.data.total
                        // this.tableData1 = res.data.data
                        res.data.data.forEach((item, index) => {
                            if (item) {
                                this.tableData1.push({
                                    id: item.id,
                                    machineid: item.machineid,
                                    userid: item.userid,
                                    username: item.username,
                                    group: item.group,
                                    machinename: item.machinename && item.machinename.length > 20 ? item.machinename.substring(0, 20) + '...' : item.machinename,
                                    createtime: item.createtime
                                })
                            }
                        })
                    } else {
                        this.total = 0
                        this.tableData1 = []
                    }
                });
        },
        add () {
            this.type = 1
            this.addmodal = true
            this.getMachines()
            // this.getUsers()
            this.groupname = ''
            this.machines = ''
            // this.username = ''
        },
        addPost () {
            // 添加
            if (this.groupname == '' || this.machines == '' || this.machines.length == 0) {
                this.$Message.error(this.$t('9000136'))
                return
            }
            if (this.type === 1) {
                var data = {
                    group: this.groupname,
                    machineid: this.machines.join()
                }
                var url = '/dashboard/DashboardGroup/Add'
            } else {
                var data = {
                    id: this.obj.id,
                    group: this.groupname,
                    machineid: this.machines.join()
                }
                var url = '/dashboard/DashboardGroup/Edit'
            }

            axios
                .request({
                    url: url,
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.addmodal = false
                        this.$Message.success(this.$t('1064'))
                        this.page = 1
                        this.pagesize = 10
                        this.ogj = {}
                        this.search()
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                });
        },
        // 获取设备
        getMachines () {
            var data = {
                name: '',
                count: 999999
            }
            axios
                .request({
                    url: '/config/Machine/ListNCMachines',
                    params: data,
                    method: 'get'
                })
                .then(res => {
                    this.machineList = []
                    if (res.data.data != undefined && res.data.data.length > 0) {
                        this.machineList = res.data.data
                    }
                });
        },
        // 获取人员
        // getUsers(){
        //     var data = {
        //         name:'',
        //         count:999999
        //     }
        //     axios
        //     .request({
        //     url: '/config/ProjectUser/GetAllUserByCurrentProjectId',
        //     params:data,
        //     method: 'get'
        //     })
        //     .then(res => {
        //         this.userlist = []
        //         if (res.data.data != undefined && res.data.data.length > 0) {
        //             this.userlist = res.data.data
        //         }
        //     });
        // },
        edit () {
            if (this.obj.id === undefined || this.obj === {}) {
                this.$Message.error(this.$t('1017'))
                return
            }
            this.type = 2
            this.addmodal = true
            this.getMachines()
            this.groupname = this.obj.group
            var machines = this.obj.machineid.split(',')
            this.machines = machines.map(function (item) {
                return parseInt(item)
            })
        },
        del () {
            if (this.obj.id === undefined || this.obj === {}) {
                this.$Message.error(this.$t('1017'))
                return
            }
            this.$Modal.confirm({
                title: this.$t('1018'),
                content: '',
                width: '290px',
                closable: true,
                okText: this.$t('1004'),
                onOk: () => {
                    axios.request({
                        url: '/dashboard/DashboardGroup/Delete?id=' + this.obj.id,
                        method: 'get'
                    }).then(res => {
                        this.$Spin.hide()
                        if (res.data.ret === 1) {
                            this.$Message.success(this.$t('1058'))
                            this.search()
                            this.obj = {}
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                        }
                    })
                }
            })
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow
        },
        changePage (value) {
            this.page = value
            this.search()
        },
        handlePageSize (value) {
            this.pagesize = value
            this.search()
        }
    },
    destroyed () {

    }
}
</script>

<style scoped>
.filter {
    display: flex;
}
.filter .iClass {
    color: red;
    display: inline-block;
    width: 8px;
}
</style>
