<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin:0px;">
            <div>
                <div class="filter">
                <label><span v-text="$t(950115)">类型</span>：</label>
                <Select class="searchSelect" v-model="type" label-in-value clearable>
                    <Option :value="1" v-text="$t('950095')">网页 </Option>
                    <Option :value="2" v-text="$t('950096')">客户端 </Option>
                    <Option :value="3" v-text="$t('950097')">手机app </Option>
                </Select>
                </div>
                <div class="filter">
                <label><span v-text="$t(300080)">名称</span>：</label>
                    <Input class="searchInput" v-model="name" type="text" />
                </div>
            </div>
            <div class="searchBtn">
                <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,pagesize)">{{$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>
        <!-- table开始 -->
        <div class="divborder newTableDiv">
            <Table class="tableClass"  @on-selection-change="selected_change"  @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>
        <!-- table结束 -->
        <!-- 添加模态框 -->
        <Modal class="newModalClass" :title="$t('1002')" v-model="add_modal"   :styles="{width:'690px'}" >
            <div class="modal_body">
                <div style="display:inline-block;width:280px;height:400px;vertical-align:top;overflow-y:scroll">
                    <Tree :data="add_tree_data" ref="tree"></Tree>
                </div>
                <div style="display:inline-block;width:350px;height:400px;vertical-align:top;">
                    <div class="filter">
                        <label><i>*</i>{{$t(800106)}}：</label>
                        <Input v-model="addObj.name" type="text" placeholder="" class="searchInput"/>
                    </div>
                    <div class="filter">
                        <label><i>*</i>{{$t(800107)}}：</label>
                        <Input v-model="addObj.description" type="text" placeholder="" class="searchInput"/>
                    </div>
                    <div class="filter">
                        <label><i>*</i>{{$t(800108)}}：</label>
                        <Input v-model="addObj.value" type="text" placeholder="" class="searchInput"/>
                    </div>
                     <div class="filter">
                        <label>Url：</label>
                        <Input v-model="addObj.url" type="text" class="searchInput"/>
                    </div>
                    <div class="filter">
                      <label>{{$t(950115)}}：</label>
                       <RadioGroup v-model="addObj.type">
                            <Radio label="1" style="width:60px;">
                                <span v-text="$t('950095')">网页</span>
                            </Radio>
                            <Radio label="2" style="width:60px;">
                                <span v-text="$t('950096')">客户端</span>
                            </Radio>
                            <Radio label="3" style="width:60px;">
                                <span v-text="$t('950097')">手机app</span>
                            </Radio>
                        </RadioGroup>
                    </div>
                    <div class="filter">
                        <label>{{$t(950093)}}：</label>
                        <Input v-model="addObj.sorting" type="number"  class="searchInput"/>
                    </div>
                    <div class="filter">
                        <label>{{$t(920172)}}：</label>
                        <Input v-model="addObj.icon" type="text"  class="searchInput"/>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="add_modal=false" v-text="$t('1033')">取消</Button>
                <Button type="primary" size="large" @click="add_data()" v-text="$t('900306')">保存</Button>
            </div>
        </Modal>
        <!-- 添加模态框结束 -->
         <!-- 修改模态框 -->
        <Modal class="newModalClass" :title="$t('1003')" v-model="edit_modal"   :styles="{width:'690px'}" >
            <div class="modal_body">
                <div style="display:inline-block;width:280px;height:400px;vertical-align:top;vertical-align:top;overflow-y:scroll">
                    <Tree :data="edit_tree_data" ref="edit_tree"></Tree>
                </div>
                <div style="display:inline-block;width:350px;height:400px;vertical-align:top;">
                    <div class="filter">
                        <label><i>*</i>{{$t(800106)}}：</label>
                        <Input v-model="editObj.name" type="text"  class="searchInput"/>
                    </div>
                    <div class="filter">
                        <label><i>*</i>{{$t(800107)}}：</label>
                        <Input v-model="editObj.description" type="text"  class="searchInput"/>
                    </div>
                    <div class="filter">
                        <label><i>*</i>{{$t(800108)}}：</label>
                        <Input v-model="editObj.value" type="text" class="searchInput"/>
                    </div>
                     <div class="filter">
                        <label>Url：</label>
                        <Input v-model="editObj.url" type="text" class="searchInput"/>
                    </div>
                    <div class="filter">
                      <label>{{$t(950115)}}：</label>
                       <RadioGroup v-model="editObj.type">
                            <Radio :label="1" style="width:60px;">
                                <span v-text="$t('950095')">网页</span>
                            </Radio>
                            <Radio :label="2" style="width:60px;">
                                <span v-text="$t('950096')">客户端</span>
                            </Radio>
                            <Radio :label="3" style="width:60px;">
                                <span v-text="$t('950097')">手机app</span>
                            </Radio>
                        </RadioGroup>
                    </div>
                    <div class="filter">
                        <label>{{$t(950093)}}：</label>
                        <Input v-model="editObj.sorting" type="number" class="searchInput"/>
                    </div>
                    <div class="filter">
                        <label>{{$t(920172)}}：</label>
                        <Input v-model="editObj.icon" type="text" class="searchInput"/>
                    </div>
                </div>

            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="edit_modal=false" v-text="$t('1033')">取消</Button>
                <Button type="primary" size="large" @click="edit_datapost()" v-text="$t('900306')">保存</Button>
            </div>
        </Modal>
        <!-- 修改模态框结束 -->
    </div>
</template>
<script>
import axios from '@/libs/api.request';
export default {
    data () {
        return {
            type: '', // 类型
            name: '', // 名称
            total: 0, // 数据总量
            page: 1, // 页码
            pagesize: 10, // 页面条数
            tableData1: [], // 表格数据
            obj: {}, // 当前对象
            clone_obj: {}, // 深拷贝复制对象
            addObj: {}, // 添加模态框对象
            add_modal: false, // 添加模态框，默认隐藏
            add_tree_data: [], // 添加模态框的树
            editObj: {}, // 添加模态框对象
            edit_modal: false, // 修改模态框
            edit_tree_data: [], // 修改模态框的树
            ids: [], // 多选数据的ids集合
            tableColumns1: [ // 表头
                {
                    title: '全选',
                    align: 'center',
                    width: 50,
                    type: 'selection'
                },
                { // 列表字段属性集合
                    type: 'index2',
                    align: 'center',
                    title: this.$t(1008),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h('span', params.index + (this.page - 1) * this.pagesize + 1)
                    },
                    width: 60
                },
                {
                    title: this.$t(300080),
                    align: 'center',
                    key: 'name'
                },
                {
                    title: this.$t(100044),
                    align: 'center',
                    key: 'describe'
                },
                {
                    title: this.$t(800108),
                    align: 'center',
                    key: 'power'
                },
                {
                    title: 'Url',
                    align: 'center',
                    key: 'url'
                }
            ]
        }
    },
    created () {
        this.search()
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        search (page, pagesize) { // 查询接口
            var params = {
                page: page,
                pagesize: pagesize,
                type: this.type,
                name: this.name
            }
            this.axios.request({
                url: '/config/UserPower/getPowerList', //
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.mockTableData1(res.data.data)
                    this.total = res.data.total
                    this.page = res.data.page
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        mockTableData1 (tablelist) { // 转换数据，并赋值给列表数据容器tableData1
            let data = []
            var vm = this
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        name: vm.$t(item.name),
                        describe: item.description,
                        power: item.value,
                        parent_power: item.parentvalue ? item.parentvalue : vm.$t('800110'),
                        url: item.url
                    })
                }
            })
            this.tableData1 = data
            // console.log(this.tableData1);
        },
        add () { // 点击添加按钮
            this.addObj = {
                type: '1'
            } // 点击添加按钮清空添加对象
            this.initadd_tree()
            this.add_modal = true
        },
        initadd_tree () {
            var params = {
                // roleid:this.obj.id
            }
            this.axios.request({
                url: '/config/UserPower/GetUserPowerTree', //
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.add_tree_data = []
                    this.edit_tree_data = []
                    let data = res.data.data.children
                    data.forEach(item => {
                        let data = {}
                        data.id = item.id
                        data.title = this.$t(item.title)
                        data.expand = false
                        data.children = this.getchildren(item)
                        this.add_tree_data.push(data)
                        this.edit_tree_data.push(data)
                    })
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        getchildren (item) {
            let arry = []
            if (item.children != [] && item.children != null && item.children.length > 0) {
                item.children.forEach(child => {
                    let data = {}
                    data.id = child.id
                    data.title = this.$t(child.title)
                    data.expand = child.expand
                    data.children = this.getchildren(child)
                    arry.push(data)
                })
            }
            return arry
        },
        add_data () { // 添加数据
            const urldata = this.$refs.tree.getSelectedNodes()

            this.addObj.parent = urldata.length < 1 ? 0 : urldata[0].id
            // this.addObj.parentvalue = urldata[0].title
            this.addObj.sorting = parseInt(this.addObj.sorting)
            var data = this.addObj
            this.axios.request({ // 查询接口
                url: '/config/UserPower/addPower', //
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1')) // 添加成功
                    this.search(1, this.pagesize)
                    this.add_modal = false
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        changePage (value) { // 页码改变
            this.page = value
            this.search(this.page, this.pagesize)
        },
        handlePageSize (value) { // pagesize改变
            this.pagesize = value
            this.search(1, this.pagesize)
        },
        handleRowChange (currentRow, oldCurrentRow) { // 点击某一行时触发函数
            this.obj = currentRow
            this.clone_obj = this.$time.deepClone(currentRow) // 深拷贝
        },
        selected_change (val) { // 数据多选时函数
            var arr = []
            val.forEach((item) => {
                arr.push(item.id)
            })
            this.ids = arr
        },
        edit () { // 修改
            if (!this.obj.id) {
                this.$Message.error(this.$t('1043'))
                return false
            }
            var params = {
                id: this.obj.id
            }
            this.axios.request({
                url: '/config/UserPower/getPower', //
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.editObj = res.data.data[0]
                    this.editObj.url = this.editObj.parentvalue
                    this.initadd_tree()
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
            //  this.editobj=this.$time.deepClone(this.clone_obj)
            this.edit_modal = true
        },
        edit_datapost () {
            const urldata = this.$refs.edit_tree.getSelectedNodes()
            if (urldata.length < 1) {
                this.$Message.error(this.$t('8000014'))
                return false
            }
            this.editObj.parent = urldata[0].id
            this.editObj.parentvalue = urldata[0].title
            this.editObj.sorting = parseInt(this.editObj.sorting)
            var data = this.editObj
            this.axios.request({ // 查询接口
                url: '/config/UserPower/editPower', //
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1')) // 添加成功
                    this.search(1, this.pagesize)
                    this.edit_modal = false
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        del () { // 删除
            if (this.ids.length < 1) {
                this.$Message.error(this.$t('1950469'))
                return false
            }
            this.confirm()
        },
        confirm () {
            this.$Modal.confirm({
                title: this.$t('1018'),
                content: '',
                width: '290px',
                closable: true,
                okText: this.$t('1004'),
                onOk: () => {
                    var data = {
                        ids: this.ids
                    }
                    this.axios.request({ // 查询接口
                        url: '/config/userpower/Deletes', //
                        data,
                        method: 'post'
                    }).then(res => {
                        if (res.data.ret === 1) {
                            this.search(1, this.pagesize)
                            this.$Message.success(this.$t('1')) // 添加成功
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                        }
                    })
                },
                onCancel: () => {
                    this.$Message.error(this.$t(1059))
                }
            })
        }

    }
}
</script>
<style lang="less" scoped>

</style>
