<template>
  <div>
    <form-data ref="configForm" class="pt-5" :items="formConfig"></form-data>
    <v-treeview
      v-loading="!roles.length"
      selectable
      dense
      v-model="selected"
      :items="roles"
      item-disabled="mark"
      item-key="id"
      item-text="label"
      />
  </div>
</template>

<script>
import FormData from '@/components/Form/list'

export default {
  name: 'user-edit',
  components: { FormData },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    itemData: {
      type: Object,
      default: () => {}
    },
    roles: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      selected: [],
      rolesData: [],
      formConfig: {
        options: [
          {
            type: 'text',
            key: 'roleName',
            value: null,
            label: '请输入角色名称 *',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入角色名称']
          }
        ]
      }
    }
  },
  created () {
    // 获取路由
    if (this.isEdit) this.initRoles()
  },
  methods: {
    initRoles () {
      this.formConfig.options.forEach(e => (e.value = this.itemData[e.key]))
      this.selected = this.itemData.menuIds.split(',').map(_i => +_i)
      // console.log('init', this.selected)
    },
    getValue () {
      // console.log(this.selected)
      return {
        menuIds: this.selected.toString(),
        roleName: this.formConfig.options.find(e => e.key === 'roleName').value
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
