<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.function_group_name" placeholder="功能组"></Input>
                                    </FormItem>
                                </Col>
                                <Col span="6" offset="1">
                                    <FormItem>
                                        <Input clearable v-model="searchItem.card_no" 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.user_id" v-if="false"></Input>
                                    <Button class="search-btn" @click="chooseMechanismAction">
                                        <Icon type="ios-search"/>
                                        选择人员
                                    </Button>
                                </FormItem>
                                <FormItem label="用户：">
                                    <Input v-model="formItem.nickname" readonly></Input>
                                </FormItem>
                                <FormItem label="身份证号：">
                                    <Input v-model="formItem.card_no" readonly></Input>
                                </FormItem>
                                <FormItem label="功能组：">
                                     <Select clearable v-model="formItem.function_group_id" placement="top">
                                          <Option v-for="(item,index) in this.groupList" :key="index" :value="item.id">{{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.user_id" v-if="false"></Input>
                                    <Button class="search-btn" @click="chooseMechanismAction">
                                        <Icon type="ios-search"/>
                                        选择人员
                                    </Button>
                                </FormItem>
                                <FormItem label="用户：">
                                    <Input v-model="updateformItem.nickname"></Input>
                                </FormItem>
                                <FormItem label="身份证号：">
                                    <Input v-model="updateformItem.card_no"></Input>
                                </FormItem>
                                <FormItem label="功能组：">
                                     <Select clearable v-model="updateformItem.function_group_id">
                                          <Option v-for="(item,index) in this.groupList" :key="index" :value="item.id">{{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>
        <option-modal ref="optionModal" :modal-title="modalTitle" :modal-type="modalType"
                      :modalWidth="modalWidth" @saveOption="saveOption"></option-modal> -->
    </div>
</template>

<script>
// import { findFunctionGroupUserPage, insertFunctionGroupUser, upFunctionGroupUser, delFunctionGroupUser, getFunctionGroup } from '@/api/system'
// import OptionModal from './components/option-modal'

export default {
  name: 'functionGroupUserList'
  // components: { OptionModal },
  // data () {
  //   return {
  //     groupList: [], // 功能组
  //     userList: [], // 人员列表
  //     searchItem: {
  //       card_no: '',
  //       function_group_name: ''
  //     },
  //     value: 0,
  //     buttonloading: false,
  //     loading: true,
  //     tabvalue: 1,
  //     formItem: {
  //       user_id: '',
  //       nickname: '',
  //       card_no: ''
  //     },

  //     modalTitle: '',
  //     modalType: '',
  //     modalWidth: 800,

  //     columns: [
  //       {
  //         title: '人员',
  //         key: 'nickname',
  //         align: 'center'
  //       },
  //       {
  //         title: '身份证号',
  //         key: 'card_no',
  //         align: 'center'
  //       },
  //       {
  //         title: '功能组',
  //         key: 'function_group_id',
  //         align: 'center',
  //         render: (h, params) => {
  //           let text = ''
  //           for (var i = 0; i < this.groupList.length; i++) {
  //             if (this.groupList[i].id === params.row.function_group_id) {
  //               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: {}
  //   }
  // },

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

  //   ok () {
  //     delFunctionGroupUser(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)
  //     insertFunctionGroupUser(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)
  //     upFunctionGroupUser(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,
  //       card_no: this.searchItem.card_no,
  //       function_group_name: this.searchItem.function_group_name
  //     }
  //     this.getGroupList()
  //     findFunctionGroupUserPage(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
  //       } else {
  //         this.$Message.error(ret.data.errmsg)
  //       }
  //     })
  //   },

  //   chooseMechanismAction () {
  //     this.$refs.optionModal.modalAction()
  //     this.modalTitle = '选择人员'
  //   },

  //   saveOption (user_id, nickname, card_no) {
  //     this.$refs.optionModal.modalAction()
  //     this.formItem.user_id = user_id
  //     this.formItem.nickname = nickname
  //     this.formItem.card_no = card_no

  //     this.updateformItem.user_id = user_id
  //     this.updateformItem.nickname = nickname
  //     this.updateformItem.card_no = card_no
  //   }

  // },
  // mounted () {
  //   this.init()
  // }
}
</script>

<style scoped>

</style>
