<template>
  <el-dialog
    class="abow_dialog"
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="800px"
    @close="close"
  >
    <el-scrollbar style="height: 600px">
      <el-checkbox-group v-model="form.roles">
        <div
          v-for="(cate, index) in data"
          :key="'cate' + cate.id"
          :class="index === 0 ? 'top-line' : null"
        >
          <el-row class="table-layout" style="background: #f2f6fc">
            <el-checkbox :label="cate.id" @change="handleCheckAllChange(cate)">
              {{ cate.label }}
            </el-checkbox>
          </el-row>
          <el-row class="table-layout">
            <el-col
              v-for="c in cate.children"
              :key="c.id"
              :span="8"
              style="padding: 4px 0"
            >
              <el-checkbox :label="c.id" @change="handleCheckAllChange(c)">
                {{ c.label }}
              </el-checkbox>
            </el-col>
          </el-row>
        </div>
      </el-checkbox-group>
    </el-scrollbar>
    <template #footer>
      <el-button @click="close">{{ __('取 消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确 定') }}</el-button>
    </template>
  </el-dialog>
</template>
<script>
  import { getTree, doEdit } from '@/api/rights/group'
  import { translateTitle as __ } from '@/utils/i18n'
  export default {
    name: 'RoleDistribution',
    data() {
      return {
        form: {
          roles: [],
        },
        data: [],
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      this.initTree()
      this.title = this.__('权限分配')
    },
    methods: {
      __,
      close() {
        this.form.roles = []
        this.dialogFormVisible = false
      },
      async save() {
        if (this.form.row.rights_group_id) {
          this.form.row.rights_group_rights_ids = this.form.roles.toString()
          const { msg, status } = await doEdit(this.form.row)
          this.$baseMessage(msg, 'success', false, 'vab-hey-message-success')
          this.$emit('fetch-data')
          this.close()
        } else {
          return false
        }
      },
      handleCheckAllChange(node) {
        const arr = this.form.roles
        if (node.children.length > 0 && node.pid === 0) {
          if (arr.includes(node.id)) {
            this.checkAllChildren(node.children)
          } else {
            this.cancelAllChildren(node.children)
          }
        } else {
          if (arr.includes(node.id) && !arr.includes(node.pid)) {
            arr.push(node.pid)
          }
        }
      },
      checkAllChildren(childrens) {
        const arr = this.form.roles
        childrens.map((item) => {
          if (!arr.includes(item.id)) arr.push(item.id)
        })
      },
      cancelAllChildren(childrens) {
        const arr = this.form.roles
        childrens.map((obj) => {
          arr.splice(
            arr.findIndex((item) => item === obj.id),
            1
          )
        })
      },
      async initTree() {
        const { data } = await getTree(this.form)
        if (data) this.data = data
      },
      showDistribution(row) {
        let that = this
        const str = row.rights_group_rights_ids.split(',')
        if (str && str.length > 0) {
          const number = str.map(Number)
          this.form.roles = number
        }

        //去掉不存在的编号
        const menu_id_row = []
        for (const cat in this.data) {
          menu_id_row.push(this.data[cat].id)

          for (const c in this.data[cat].children) {
            menu_id_row.push(this.data[cat].children[c].id)
          }
        }

        for (var idx in this.form.roles) {
          var id = menu_id_row.indexOf(this.form.roles[idx])
          if (id == -1) {
            this.form.roles.splice(idx, 1)
            idx--
          }
        }

        this.form.row = Object.assign({}, row)
        this.dialogFormVisible = true
      },
    },
  }
</script>
<style lang="scss" scoped>
  .abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
      margin: 0 auto !important;
      height: 90%;
      overflow: hidden;
      .el-dialog__body {
        position: absolute;
        left: 0;
        top: 54px;
        bottom: 0;
        right: 0;
        padding: 0;
        z-index: 1;
        overflow: hidden;
        overflow-y: auto;
      }
    }
  }
</style>
