<template>
    <div>
        <!-- <Tabs type="card" v-model="value">
            <TabPane label="功能组列表">
                <Row>
                    <Col span="20">
                        <Form :model="searchItem">
                            <Row>
                                <Col span="6">
                                    <FormItem>
                                        <Input clearable v-model="searchItem.name" placeholder="名称"></Input>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </Col>
                    <Col span="3" offset="1">
                        <Button type="success" @click="search">搜索</Button>
                    </Col>
                </Row>
                <template>
                    <Table :loading="loading" border :columns="columns" :data="dataList">
                        <template slot-scope="{ row }" slot="action">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="add">添加</Button>
                            <Button type="primary" size="small" style="margin-right: 5px" @click="update(row)">修改</Button>
                            <Button type="error" size="small" @click="del(row)">删除</Button>
                        </template>
                    </Table>
                </template>
                <br>
                <Row type="flex" justify="end">
                    <Page :total="total" @on-change="pageChange" :page-size="pageSize"/>
                </Row>
            </TabPane>
            <TabPane v-if="tabvalue===1" label="添加">
                <template>
                    <Row>
                        <Col span="10" offset="3">
                            <Form :model="formItem" :label-width="100">
                                <FormItem label="名称:">
                                    <Input v-model="formItem.name"></Input>
                                </FormItem>
                                <FormItem label="上级功能:">
                                    <Select clearable v-model="formItem.pid">
                                          <Option v-for="(item,index) in this.groupList" :key="index" :value="item.id">{{item.name}}</Option>
                                      </Select>
                                </FormItem>
                                <FormItem label="菜单类型:">
                                    <Select clearable v-model="formItem.type">
                                        <Option v-for="(item,index) in this.typeList" :key="index" :value="item.value">{{item.name}}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="位置:">
                                    <Select clearable v-model="formItem.my_class">
                                        <Option v-for="(item,index) in this.myClassList" :key="index" :value="item.value">{{item.name}}</Option>
                                    </Select>
                                </FormItem>
                            </Form>
                            <Button :loading="buttonloading" style="margin-left: 15px;margin-right: 15px" type="primary" @click="save">保存</Button>
                            <Button @click="close">取消</Button>
                        </Col>
                    </Row>
                </template>
            </TabPane>
            <TabPane v-if="tabvalue===2"  label="修改">
                <template>
                    <Row>
                        <Col span="10" offset="3">
                            <Form :model="updateformItem" :label-width="100">
                                <FormItem label="名称:">
                                    <Input v-model="updateformItem.name"></Input>
                                </FormItem>
                                <FormItem label="上级功能:">
                                    <Select clearable v-model="updateformItem.pid">
                                          <Option v-for="(item,index) in this.groupList" :key="index" :value="item.id">{{item.name}}</Option>
                                      </Select>
                                </FormItem>
                                <FormItem label="菜单类型:">
                                    <Select clearable v-model="updateformItem.type">
                                        <Option v-for="(item,index) in this.typeList" :key="index" :value="item.value">{{item.name}}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="位置:">
                                    <Select clearable v-model="updateformItem.my_class">
                                        <Option v-for="(item,index) in this.myClassList" :key="index" :value="item.value">{{item.name}}</Option>
                                    </Select>
                                </FormItem>
                            </Form>
                            <Button :loading="buttonloading" style="margin-left: 15px;margin-right: 15px" type="primary"  @click="updateForm">保存</Button>
                            <Button @click="close">取消</Button>
                        </Col>
                    </Row>
                </template>
            </TabPane>
        </Tabs>
        <Modal
                v-model="modal1"
                @on-ok="ok"
                >功能组
            <p style="margin-top: 20px">确实要删除吗？</p>
        </Modal> -->
    </div>
</template>

<script>
// import { findFunctionGroupPage, insertFunctionGroup, upFunctionGroup, delFunctionGroup, getFunctionGroup } from '@/api/system'

export default {
  name: 'functionGroupList'
  // data () {
  //   return {
  //     groupList: [], // 功能组
  //     searchItem: {
  //       name: ''
  //     },
  //     value: 0,
  //     buttonloading: false,
  //     loading: true,
  //     tabvalue: 1,
  //     formItem: {
  //       system_name: '',
  //       show_name: '',
  //       show_icon: '',
  //       interface_addr: '',
  //       function_group: '',
  //       status: '1',
  //       sort: '',
  //       remarks: ''
  //     },

  //     columns: [
  //       {
  //         title: '名称',
  //         key: 'name',
  //         align: 'center'
  //       },
  //       {
  //         title: '上级名称',
  //         key: 'pid',
  //         align: 'center',
  //         render: (h, params) => {
  //           let text = ''
  //           for (var i = 0; i < this.groupList.length; i++) {
  //             if (this.groupList[i].id === params.row.pid) {
  //               text = this.groupList[i].name
  //             }
  //           }
  //           return h('div', [
  //             h('span', text)
  //           ])
  //         }
  //       },
  //       {
  //         title: '菜单类型',
  //         key: 'type',
  //         align: 'center',
  //         render: (h, params) => {
  //           if (params.row.type === '1') {
  //             return h('div', [
  //               h('span', '底部菜单')
  //             ])
  //           } else {
  //             return h('div', [
  //               h('span', '我的菜单')
  //             ])
  //           }
  //         }
  //       },
  //       {
  //         title: '位置',
  //         key: 'my_class',
  //         align: 'center',
  //         render: (h, params) => {
  //           if (params.row.my_class === '1') {
  //             return h('div', [
  //               h('span', '我的应用')
  //             ])
  //           } else if (params.row.my_class === '2') {
  //             return h('div', [
  //               h('span', '我的操作')
  //             ])
  //           } else if (params.row.my_class === '3') {
  //             return h('div', [
  //               h('span', '我的权益')
  //             ])
  //           }
  //         }
  //       },
  //       {
  //         title: '操作',
  //         slot: 'action',
  //         width: 300,
  //         align: 'center'
  //       }
  //     ],
  //     dataList: [],
  //     total: 0,
  //     pageNo: 1,
  //     pageSize: 12,
  //     updateformItem: {},
  //     modal1: false,
  //     deleteRow: {},
  //     typeList: [
  //       {
  //         value: '1',
  //         name: '底部菜单'
  //       },
  //       {
  //         value: '2',
  //         name: '我的菜单'
  //       }
  //     ],
  //     myClassList: [
  //       {
  //         value: '1',
  //         name: '我的应用'
  //       },
  //       {
  //         value: '2',
  //         name: '我的操作'
  //       },
  //       {
  //         value: '3',
  //         name: '我的权益'
  //       }
  //     ]
  //   }
  // },

  // methods: {
  //   del (value) {
  //     this.modal1 = true
  //     this.deleteRow = value
  //   },

  //   ok () {
  //     delFunctionGroup(this.deleteRow).then(ret => {
  //       if (ret.data.errcode === 0) {
  //         this.$Message.success('成功')
  //         this.init()
  //       } else {
  //         this.$Message.error(ret.data.errmsg)
  //       }
  //     })
  //   },

  //   close () {
  //     this.value = 0
  //     this.tabvalue = 1
  //   },

  //   search () {
  //     this.pageNo = 1
  //     this.init()
  //   },

  //   save () {
  //     this.buttonloading = true
  //     let data = this.$common.xeUtils.clone(this.formItem)
  //     insertFunctionGroup(data).then(ret => {
  //       this.buttonloading = false
  //       if (ret.data.errcode === 0) {
  //         this.$Message.success('成功')
  //         this.value = 0
  //         this.tabvalue = 1
  //         this.formItem = {}
  //         this.init()
  //       } else {
  //         this.$Message.error(ret.data.errmsg)
  //       }
  //     })
  //   },

  //   add () {
  //     this.value = 1
  //     this.tabvalue = 1
  //   },

  //   update (value) {
  //     this.value = 1
  //     this.tabvalue = 2
  //     let data = this.$common.xeUtils.clone(value)
  //     data.last_update_by = this.$store.state.user.severUserInfo.data.id // 当前登录人id
  //     this.updateformItem = data
  //   },

  //   updateForm () {
  //     let data = this.$common.xeUtils.clone(this.updateformItem)
  //     upFunctionGroup(data).then(ret => {
  //       this.buttonloading = false
  //       if (ret.data.errcode === 0) {
  //         this.$Message.success('成功')
  //         this.value = 0
  //         this.tabvalue = 1
  //         this.formItem = {}
  //         this.init()
  //       } else {
  //         this.$Message.error(ret.data.errmsg)
  //       }
  //     })
  //   },

  //   pageChange (value) {
  //     this.pageNo = value
  //     this.init()
  //   },

  //   init () {
  //     let data = {
  //       pageNo: this.pageNo,
  //       pageSize: this.pageSize,
  //       name: this.searchItem.name
  //     }
  //     this.getGroupList()
  //     findFunctionGroupPage(data).then(ret => {
  //       if (ret.data.errcode === 0) {
  //         this.total = ret.data.data.totalRecord
  //         this.dataList = ret.data.data.results
  //         this.loading = false
  //       }
  //     })
  //   },

  //   getGroupList () {
  //     getFunctionGroup().then(ret => {
  //       if (ret.data.errcode === 0) {
  //         this.groupList = ret.data.data
  //         console.log(this.groupList)
  //       } else {
  //         this.$Message.error(ret.data.errmsg)
  //       }
  //     })
  //   }
  // },
  // mounted () {
  //   this.init()
  // }
}
</script>

<style scoped>

</style>
