<template>
    <div class="content">
        <template>
            <Tabs type="card" v-model="value" @on-click="tabChange" name="tab1">
                <TabPane label="角色列表" tab="tab1" name="0">
                    <role-list ref="roleList" @switchTab1="switchTab1" @switchTab2="switchTab2"></role-list>
                </TabPane>
                <TabPane label="添加角色" tab="tab1" name="1" v-if="typeAdd">
                    <add-role ref="addRole" @switchTab="switchTab"></add-role>
                </TabPane>
                <TabPane label="修改角色" tab="tab1" name="2" v-if="typeUpdate">
                    <add-role ref="addRole" :row="row"></add-role>
                </TabPane>
                <TabPane label="角色分配" tab="tab1" name="3" v-if="typeallocation">
                    <div class="allocation">
                        <Row>
                            <Col span="7" offset="1">
                                角色名称：<span>{{this.row1.name}}</span>
                            </Col>
                            <Col span="7">
                                英文名称：<span>{{this.row1.enname}}</span>
                            </Col>
                            <Col span="7">
                                角色类型：<span>{{this.row1.role_type}}</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="7" offset="1">
                                数据范围：
                                <span v-if="this.row1.data_scope==='1'">所有数据</span>
                                <span v-if="this.row1.data_scope==='2'">所在公司及以下数据</span>
                                <span v-if="this.row1.data_scope==='3'">所在公司数据</span>
                                <span v-if="this.row1.data_scope==='4'">所在部门及以下数据</span>
                                <span v-if="this.row1.data_scope==='5'">所在部门数据</span>
                                <span v-if="this.row1.data_scope==='8'">仅本人数据</span>
                                <span v-if="this.row1.data_scope==='9'">按明细设置</span>
                            </Col>
                        </Row>
                    </div>
                    <div class="button">
                        <Row>
                            <Col span="7" offset="1">
                                <Button shape="circle" @click="allocationList">角色分配</Button>
                            </Col>
                        </Row>
                    </div>
                    <template>
                        <Table :loading="tableLoading" max-height="500" stripe :columns="tittle" :data="data1">
                            <template slot-scope="{ row }" slot="action">
                                <Button type="error" size="small" @click="delUserFromRole(row)">移除</Button>
                            </template>
                        </Table>
                    </template>
                </TabPane>
            </Tabs>
        </template>
        <Modal
                v-model="allocationmodal"
                title="分配角色"
                width="1200"
                @on-ok="ok"
                @on-cancel="cancel">
            <Row :gutter="16">
                <Col span="8">
                    <div class="card">
                        <Card class="cardStyle">
                            <p style="font-weight: bold">机构名称</p>
                            <Tree :data="TreeData" @on-select-change="getUserList"></Tree>
                        </Card>
                    </div>
                </Col>
                <Col span="16">
                    <Transfer
                            :data="data3"
                            :target-keys="targetKeys3"
                            :list-style="listStyle"
                            :render-format="render3"
                            :operations="['To left','To right']"
                            filterable
                            @on-change="handleChange3">
                    </Transfer>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>

import roleList from './components/role-list'
import addRole from './components/add-role'
import { log } from '../../../libs/util'
import {
  delUserFromRole,
  getForRoleList,
  getRoleUserList,
  setAllotUser,
  userForRoleList
} from '../../../api/system/system'

export default {
  name: 'WlRoleManager',
  data () {
    return {
      tableLoading: false,
      allocationmodal: false,
      value: '0',
      typeAdd: true,
      typeUpdate: false,
      typeallocation: false,
      row: {},
      row1: {},
      tittle: [
        {
          title: '归属公司',
          key: 'company_name',
          align: 'center'
        },
        {
          title: '登录名',
          key: 'login_name',
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '电话',
          key: 'phone',
          align: 'center'
        },
        {
          title: '手机号',
          key: 'mobile',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          minWidth: 350
        }
      ],
      data1: [],
      company_name: [],
      TreeData: [],
      treeData1: [],
      selected: [],
      rightData: [],
      data3: [],
      targetKeys3: [],
      listStyle: {
        width: '300px',
        height: '300px'
      }
    }
  },
  components: {
    addRole,
    roleList
  },
  mounted () {
    log('roleManager', 'readme')
  },
  methods: {
    render3 (item) {
      return item.label
    },
    handleChange3 (newTargetKeys) {
      this.$emit('change', newTargetKeys)
      this.targetKeys3 = newTargetKeys
    },
    switchTab (value) {
      this.value = value
      this.$refs.roleList.init()
    },
    switchTab1 (value1, value2) {
      this.row = value2
      this.value = value1
      this.typeAdd = false
      this.typeUpdate = true
    },
    switchTab2 (value1, value2) {
      this.row1 = value2
      this.value = value1
      this.typeAdd = false
      this.typeallocation = true
      const data = {
        role_id: this.row1.id
      }
      this.tableLoading = true
      userForRoleList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data1 = ret.data.data
          this.tableLoading = false
        } else {
          this.$Message.error(ret.data.errmsg)
          this.tableLoading = false
        }
      })
    },
    tabChange () {
      this.$refs.addRole.clean()
    },
    ok () {
      const data = {
        role_id: this.row1.id,
        user_id: this.targetKeys3
      }
      setAllotUser(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success(ret.data.data)
          this.UserForRoleList()
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    cancel () {
      // this.$Message.info('Clicked cancel')
    },
    allocationList () {
      this.data3 = []
      this.targetKeys3 = []
      this.allocationmodal = true
      this.company_name = this.data1
      this.selected = this.$common.xeUtils.clone(this.data1)
      getForRoleList().then(ret => {
        let data = ret.data.data
        for (let i = 0; i < data.length; i++) {
          data[i].title = data[i].name
        }
        this.TreeData = this.$common.toTree(data, 'children', 'id', 'parent_id')
      })
    },
    getUserList (value) {
      const data = {
        company_id: value[0].id,
        parent_ids: value[0].parent_ids
      }
      getRoleUserList(data).then(ret => {
        let data = ret.data.data
        this.data3 = []
        data.forEach(item => {
          this.data3.push({
            key: item.id, pid: item.parent_id, label: item.name + ' - ' + item.login_name, display: false
          })
        })
        this.selected.forEach(item => {
          this.targetKeys3.push(item.id
          )
        })
      })
    },
    delUserFromRole (value) {
      const data = {
        user_id: value.id,
        role_id: this.row1.id
      }
      delUserFromRole(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('删除成功！')
          this.UserForRoleList()
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    UserForRoleList () {
      const data = {
        role_id: this.row1.id
      }
      this.tableLoading = true
      userForRoleList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data1 = ret.data.data
          this.tableLoading = false
        } else {
          this.$Message.error(ret.data.errmsg)
          this.tableLoading = false
        }
      })
    }

  },
  watch: {
    value (value) {
      if (value === '0') {
        this.typeAdd = true
        this.typeUpdate = false
        this.typeallocation = false
      }
    }
  }
}
</script>

<style scoped>
    .allocation span {
        font-weight: bold;

    }

    .allocation {
        margin-bottom: 20px;
    }

    .button {
        margin-bottom: 20px;
    }

    .card {
        text-align: left;
    }

    .cardStyle {
        width: 380px;
        height: 300px;
        overflow: auto;
        overflow-x: hidden;
    }
</style>
