<template>
  <div v-loading="loading">
    <v-form ref="form">
      <v-select
        v-model="value"
        :items="items"
        outlined
        dense
        label="权限范围"
        :rules="[v => !!v || '权限范围不能为空']"
      ></v-select>
    </v-form>

    <v-banner v-if="show">机构权限范围</v-banner>
    <div v-if="show" class="box">
      <v-treeview
        v-model="dataPermission"
        item-key="organization.organizationNo"
        item-text="organization.organizationName"
        item-children="child"
        :items="roles"
        hoverable
        selectable
        dense
        :open.sync="active"
        open-on-click
      />
    </div>
  </div>
</template>

<script>
import { getOrganizationTree } from '@/api/system'
import { getDataPermission } from '@/api/menu'
const specifiedCode = -1
export default {
  name: 'data-permission',
  props: {
    itemData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      loading: false,
      active: [],
      value: null,
      roles: [],
      items: [
        { text: '全部数据权限', value: -998 },
        { text: '指定部门数据权限', value: specifiedCode },
        { text: '本部门数据权限', value: -997 },
        { text: '本部门及以下数据权限', value: -996 },
        { text: '仅本人数据权限', value: -995 }
      ],
      dataPermission: []
    }
  },
  computed: {
    show () {
      return this.value === specifiedCode
    }
  },
  async created () {
    this.loading = true
    await this.getOrganization()
    await this.getPermission()
    this.loading = false
  },
  methods: {
    async getPermission () {
      try {
        const { data } = await getDataPermission({ entity: { roleId: this.itemData.id }, page: { current: 1, size: 9999 } })
        if (!data?.records || !data.records.length) {
          return
        }
        if (data.total === 1 && [-998, -997, -996, -995].includes(+data.records[0].roleValue)) {
          this.value = +data.records[0].roleValue
          return
        }
        this.value = specifiedCode

        this.dataPermission = data.records.map(item => item.roleValue)
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async getOrganization () {
      try {
        const { data } = await getOrganizationTree()
        this.roles = [data]
        this.active = [data.organization.organizationNo]
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    getValue () {
      if (!this.$refs.form.validate()) {
        return
      }
      const obj = {
        roleId: this.itemData.id,
        items: [
          {
            roleType: 0,
            roleValue: this.value
          }
        ]
      }
      if (this.value === specifiedCode) {
        obj.items = this.dataPermission.map(roleValue => {
          return {
            roleType: 0,
            roleValue,
            wrType: 0
          }
        })
      }
      return obj
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  max-height: 500px;
  overflow: auto;
}
</style>
