<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" justify="end">
                <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>
        </Alert>
        <br>
        <div class="containerMenu">
            <Spin size="large" fix v-if="spinShow2"></Spin>
            <Collapse v-model="collapseIndex" :accordion="true">
                <Panel ref="panel" v-for="(item,index) in collapseList" :name="item.id" :key="index">
                    <span style="font-size: 16px">{{item.name}}</span>
                    <div slot="content">
                        <div v-for="(itemCheck,index) in item.child" :value="itemCheck.id" :key="index">
                            <check-list ref="checkList" :bind-data="bindData" :single-list="itemCheck"></check-list>
                        </div>
                    </div>
                </Panel>
            </Collapse>
        </div>
        <add-role-modal ref="addRoleModal" :modal-show="modalShow" @cancelOption="cancelOption"
                        @saveOption="saveOption"></add-role-modal>
    </div>
</template>

<script>
import {
  getCompanyRoleList,
  getCompanyMenuList,
  getMenuForRoleList,
  setRoleForMenu
} from '../../../api/system/sys-staff-role-manager'
import AddRoleModal from './components/add-role-modal'
import CheckList from './components/check-list'
import RoleGroup from './components/role-group'
import { log } from '../../../libs/util'

export default {
  name: 'WlStaffRoleManager',
  components: { RoleGroup, CheckList, AddRoleModal },
  data () {
    return {
      collapseIndex: '', // 折叠面板绑定值
      modalShow: false, // 模态框显示
      roleList: [], // 角色列表数据
      collapseList: [], // 折叠面板数据
      spinShow: false, // 角色列表
      spinShow2: false, // 菜单
      saveLoading: false, // 保存loading
      bindData: [], // 绑定的数据
      currentRoleId: '', // 当前角色id
      currentRoleName: '' // 当前角色名称
    }
  },
  methods: {
    // 折叠面板数据
    getCompanyMenuList () {
      this.spinShow2 = true
      getCompanyMenuList().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let newData = this.$common.toTree(data.data, 'child', 'id', 'parent_id')
          newData.forEach((item, index) => {
            if (item.id === '1') {
              item.child.forEach((item2, index2) => {
                this.collapseList.push(item2)
              })
            }
          })
          if (this.collapseList.length !== 0 && this.collapseList[0].id) {
            this.collapseIndex = this.collapseList[0].id
            this.handleCollapseData(this.collapseList)
            this.spinShow2 = false
          } else {
            this.spinShow2 = false
          }
        } else {
          this.spinShow2 = false
          this.error(data)
        }
      })
    },
    // 三级数据处理
    handleCollapseData (val) {
      val.forEach(level1 => {
        level1.flag = false
        level1.child.forEach(level2 => {
          level2.flag = false
          level2.child.forEach(level3 => {
            level3.flag = false
          })
        })
      })
    },
    // 角色列表数据
    getCompanyRoleList () {
      this.spinShow = true
      getCompanyRoleList().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let newRoleList = []
          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.getMenuForRoleList({ role_id: this.roleList[0].id })
            }
          }
          this.spinShow = false
        } else {
          this.spinShow = false
          this.error(data)
        }
      })
    },
    // 获取当前角色绑定数据接口(供初始化调用)
    getMenuForRoleList (data) {
      getMenuForRoleList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.bindData = data.data
        } else {
          this.error(data)
        }
      })
    },
    // 角色按钮组组件-删除后操作
    delOption () {
      this.getCompanyRoleList()
    },
    // 角色按钮组组件-获取绑定数据后操作
    bindOption (val, roleId, roleName) {
      this.bindData = val
      this.currentRoleId = roleId
      this.currentRoleName = roleName
      // 初始化
      this.handleCollapseData(this.collapseList)
    },
    // 添加角色按钮处理
    addRole () {
      this.modalShow = true
      this.$refs.addRoleModal.formItem = {}
    },
    // 添加角色组件-保存操作
    saveOption () {
      this.modalShow = false
      this.getCompanyRoleList()
    },
    // 添加角色组件-取消操作
    cancelOption () {
      this.modalShow = false
    },
    // 最终保存
    finalSave () {
      this.collapseList.forEach(item => {
        item.child.forEach(item2 => {
          if (item2.flag === true) {
            item.flag = true
          }
        })
      })
      // console.log('保存源数据', this.collapseList)
      let menus = []
      this.collapseList.forEach(level1 => {
        if (level1.flag === true) {
          menus.push(level1.id)
        }
        level1.child.forEach(level2 => {
          if (level2.flag === true) {
            menus.push(level2.id)
          }
          level2.child.forEach(level3 => {
            if (level3.flag === true) {
              menus.push(level3.id)
            }
          })
        })
      })
      // console.log('保存菜单', menus)
      const data = {
        menus: menus,
        role_id: this.currentRoleId
      }
      this.setRoleForMenu(data)
    },
    // 最终保存接口
    setRoleForMenu (data) {
      this.saveLoading = true
      setRoleForMenu(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()
    this.getCompanyMenuList()
  },
  watch: {
    collapseList () {
      // 默认展开第一个panel
      this.$nextTick(() => {
        let pannelKey = this.$refs.panel
        if (pannelKey) {
          pannelKey[0].isActive = true
        }
      })
    }
  }
}
</script>

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

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

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

    .containerMenu {
        position: relative;
    }

</style>
