<template>
  <div class="auth-group-selector">
    <span :style="{ color: name ? '#333' : '#999' }">{{ name || '请选择' }}</span>
    <el-button size="mini" style="margin-left: 10px" @click="show = true">点击选择</el-button>
    <el-dialog title="选择权限组" :visible.sync="show" append-to-body custom-class="auth-select-dialog" width="940px">
      <auth-group-panel ref="panel" :is-select="true" @select="onSelect" :selected="id"></auth-group-panel>
    </el-dialog>
  </div>
</template>
<script>
import AuthGroupPanel from './auth-group-panel'
import { groupPage } from '@/api/system/authGroup'
export default {
  components: { AuthGroupPanel },
  model: { prop: 'id', event: 'change' },
  props: ['id'],
  data() {
    return {
      show: false,
      name: ''
    }
  },
  watch: {
    id() {
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (!this.id) {
        this.name = ''
      } else {
        groupPage({ id: this.id }).then((res) => {
          let data = res.data.data.records[0]
          data && (this.name = data.permName)
        })
      }
    },
    onSelect(id, name) {
      this.$emit('change', id)
      this.name = name
      this.show = false
    }
  }
}
</script>
<style lang="scss">
.auth-group-selector {
}
.auth-select-dialog {
  .el-dialog__body {
    width: 900px;
    height: 700px;
  }
}
</style>
