<template>
    <div>
        <Row type="flex" :gutter="20" justify="space-between">
            <Col span="8">
                <tree-list ref="treeList" @change="treeSelAction"></tree-list>
            </Col>
            <Col span="16">
                <Card>
                    <Tabs type="card" :animated="false" @on-click="tabChange" v-model="tabIndex">
                        <TabPane label="用户列表" name="list">
                            <user-list ref="userList" :companyId="currentCompanyId"
                                       @updateOption="updateOption"></user-list>
                        </TabPane>
                        <TabPane :label="optionName" name="option">
                            <user-option ref="userOption" :companyId="currentCompanyId" :optionState="optionState"
                                         :formData="formData" :roleData="roleData"
                                         @cancelOption="cancelOption" @saveOption="saveOption"></user-option>
                        </TabPane>
                    </Tabs>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import {} from '../../../api/system/system'
import UserOption from './components/user-option/index'
import UserList from './components/user-list/index'
import TreeList from './components/tree-list/index'
import { log } from '../../../libs/util'

export default {
  name: 'WlUserManagerNew',
  components: { TreeList, UserList, UserOption },
  data () {
    return {
      tabIndex: 'list',
      optionName: '添加用户',
      optionState: false, // 添加false（默认） 修改true
      formData: {},
      roleData: {},
      treeLoading: false,
      tableLoading: false,
      currentCompanyId: '',
      currentCompanyName: ''
    }
  },
  methods: {
    tabChange (val) {
      if (val === 'list') {
        this.optionName = '添加用户'
        this.optionState = false
      } else {
        this.formData = {
          company_id: this.currentCompanyId,
          company_name: this.currentCompanyName,
          login_flag: '1', // 是否允许登录
          user_type: '3' // 用户类型（普通用户）
        }
        this.$refs.userOption.currentRoleList = []
      }
    },
    treeSelAction (id, name) {
      this.optionName = '添加用户'
      this.optionState = false
      this.tabIndex = 'list'
      // console.log('当前选中id', id)
      // console.log('当前选中name', name)
      this.currentCompanyId = id
      this.currentCompanyName = name
    },
    updateOption (val) {
      this.optionName = '修改用户'
      this.optionState = true
      this.$refs.userOption.getUserInfoAction({ id: val, contain_role: '1' })
      this.tabIndex = 'option'
    },
    cancelOption () {
      this.tabIndex = 'list'
      this.optionName = '添加用户'
    },
    saveOption () {
      this.tabIndex = 'list'
      this.optionName = '添加用户'
      this.$refs.userList.getUserListAction()
    }
  },
  mounted () {
    log('userManager', 'readme')
  }
}
</script>

<style scoped>
</style>
