<template>
    <div>
        <div class="containerRole">
            <Row type="flex" :gutter="25" justify="start">
                <Spin size="large" fix v-if="spinShow"></Spin>
                <Col v-for="(item,index) in roleList" :key="index">
                    <role-group ref="roleGroup" :data-obj="item" @bindOption="bindOption" @delOption="delOption"></role-group>
                </Col>
                <Col span="2" offset="1">
                    <Button icon="md-add" type="primary" ghost @click="addRole()"></Button>
                </Col>
            </Row>
        </div>
        <br>
        <Alert class="alert">
            <Row type="flex">
                <Col span="20">
                    <span class="info-box">当前角色：{{currentRoleName}}</span>
                </Col>
                <Col span="3" offset="1">
                    <Button type="primary" :loading="saveLoading" long @click="finalSave">保存</Button>
                </Col>
            </Row>
            <Row v-show="currentRoleId">
                <template v-if="!customTip">
                    温馨提示：<span style="color: red">红色</span>的字体是菜单，<span style="color: green">绿色</span>的字是按钮
                </template>
                <template v-else>
                    <span>{{customTip}}</span>
                </template>
            </Row>
        </Alert>
        <br>
        <div class="containerMenuTree">
            <add-role-menu ref="addRoleMenu" :role-id="currentRoleId"></add-role-menu>
        </div>
        <add-role-modal ref="addRoleModal" :modal-show="modalShow" @cancelOption="cancelOption"
                        @saveOption="saveOption"></add-role-modal>
    </div>
</template>

<script>
import { getCompanyRoleList } from '../../../api/system/sys-staff-role-manager'
import AddRoleModal from './components/add-role-modal'
import RoleGroup from './components/role-group'
import { log } from '../../../libs/util'
import AddRoleMenu from './components/add-role-menu/index'
import { setRoleMenu } from '../../../api/system/system'

export default {
  name: 'WlStaffRoleManagerNew',
  components: { AddRoleMenu, RoleGroup, AddRoleModal },
  data () {
    return {
      collapseIndex: '', // 折叠面板绑定值
      modalShow: false, // 模态框显示
      roleList: [], // 角色列表数据
      spinShow: false, // 角色列表
      spinShow2: false, // 菜单
      saveLoading: false, // 保存loading
      bindData: [], // 绑定的数据
      currentRoleId: '', // 当前角色id
      currentRoleName: '' // 当前角色名称
    }
  },
  props: {
    customTip: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  methods: {
    // 角色列表数据
    getCompanyRoleList () {
      this.spinShow = true
      getCompanyRoleList().then(ret => {
        let data = ret.data
        let newRoleList = []
        if (data.errcode === 0) {
          if (data.data.length > 0) {
            data.data.forEach(item => {
              newRoleList.push(item)
            })
            this.roleList = newRoleList
            // 默认调取第一个角色的绑定数据
            if (this.roleList[0].id) {
              this.currentRoleId = this.roleList[0].id
              this.currentRoleName = this.roleList[0].name
              // this.$refs.addRoleMenu.createNewTreeData(this.roleList[0].id)
            }
          } else {
            this.roleList = newRoleList
            this.currentRoleId = ''
            this.currentRoleName = ''
          }
          this.spinShow = false
        } else {
          this.spinShow = false
          this.error(data)
        }
      })
    },
    // 角色按钮组组件-删除后操作
    delOption () {
      this.getCompanyRoleList()
    },
    // 角色按钮组组件-获取绑定数据后操作
    bindOption (val, roleId, roleName) {
      this.bindData = val
      this.currentRoleId = roleId
      this.currentRoleName = roleName
    },
    // 添加角色按钮处理
    addRole () {
      this.modalShow = true
      this.$refs.addRoleModal.formItem = {}
    },
    // 添加角色组件-保存操作
    saveOption () {
      this.modalShow = false
      this.getCompanyRoleList()
    },
    // 添加角色组件-取消操作
    cancelOption () {
      this.modalShow = false
    },
    // 最终保存
    finalSave () {
      let treeData = this.$refs.addRoleMenu.getTreeSelectNodes()
      const data = {
        menus: this.$common.xeUtils.map(treeData, item => item.id),
        role_id: this.currentRoleId
      }
      this.setRoleForMenu(data)
    },
    // 最终保存接口
    setRoleForMenu (data) {
      this.saveLoading = true
      setRoleMenu(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.saveLoading = false
          this.success('保存成功')
        } else {
          this.saveLoading = false
          this.error(data)
        }
      })
    },
    // 成功提示框
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    // 失败提示框
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    log('staffRoleManager', 'readme')
    this.getCompanyRoleList()
  },
  watch: {
  }
}
</script>

<style scoped>
    .alert {
        height: 80px;
    }

    .info-box {
        display: inline-block;
        line-height: 32px;
        font-weight: 600;
        font-size: 16px;
    }

    .containerRole {
        min-height: 100px;
        position: relative;
    }

    .containerMenu {
        position: relative;
    }

    .containerMenuTree {
        height: 400px;
        overflow-y: scroll;
        padding: 0 20% 50px;
    }

</style>
