
<template>
  <el-dialog title="选择权限组" :close-on-click-modal="false"
    class="JNPF-dialog JNPF-dialog_center transfer-dialog" lock-scroll append-to-body
    v-bind="$attrs" width="800px" :modal-append-to-body="false" v-on="$listeners" @open="onOpen">
    <permissionGroup v-model="selectedData" ref="roleTransfer" multiple auth v-loading="loading" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeTransfer">{{$t('common.cancelButton')}}</el-button>
      <el-button type="primary" @click="confirm">{{$t('common.confirmButton')}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getModelData, setModelData } from '@/api/permission/authorize'
import permissionGroup from './permissionGroup'
export default {
  name: 'transfer',
  components: { permissionGroup },
  props: {
    id: {
      type: String,
      default: ''
    },
    systemId: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      selectedData: [],
      treeData: [],
      loading: false,
    }
  },
  methods: {
    onOpen() {
      this.dataInit()
    },
    closeTransfer() {
      this.$emit('update:visible', false)
    },
    confirm() {
      let query = { itemType: 'portalManage', objectType: 'Role', objectId: this.selectedData }
      query.systemId = this.systemIdw
      setModelData(this.id, query).then(res => {
        this.$message({
          type: 'success',
          message: res.msg,
          duration: 1000,
          onClose: () => {
            this.closeTransfer()
          }
        });
      })
    },
    dataInit() {
      this.loading = true
      this.selectedData = []
      getModelData(this.id, 'Role').then(res => {
        this.selectedData = res.data.ids
        this.$nextTick(() => {
          this.$refs.roleTransfer && this.$refs.roleTransfer.init(this.selectedData)
        })
        this.loading = false
      })
    },
  }
}
</script>