<template>
  <a-modal
    v-model="visible"
    :title="title"
    destroy-on-close
    v-bind="{ width: 850 }"
    :mask-closable="false"
    @ok="save"
    @cancel="
      () => {
        visible = false
      }
    "
  >
    <div :class="$style.warp">
      <a-row>
        <a-col :span="12" :class="$style.tree">
          未授予
          <sd-org-role-tree
            ref="rolesTree"
            :group-id="groupId"
            @treeSelect="treeSelect"
          ></sd-org-role-tree>
        </a-col>
        <a-col :span="12">
          已授予
          <sd-table
            :columns="columns"
            sortable
            :data-source.sync="data"
            :custom-row="customRow"
            :pagination="false"
            row-key="code"
          />
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script>
import { message } from 'ant-design-vue'
import OrgService from './org-service'
import components from './_import-components/sd-org-role-besigned-role-import'

export default {
  name: 'SdOrgRoleBesignedRole',
  metaInfo: {
    title: 'SdOrgRoleBesignedRole',
  },
  components,
  props: {
    groupId: {
      type: String,
      default: function() {
        return null
      },
    },
  },
  data() {
    return {
      title: '',
      visible: false,
      data: [],
      columns: [
        {
          title: '角色',
          dataIndex: 'name',
        },
      ],
      loadingMsg: null,
      unid: null,
    }
  },

  methods: {
    show(title, unid) {
      this.title = title
      this.unid = unid
      this.visible = true
      this.getDefaultValue()
    },
    getDefaultValue() {
      return new Promise((resolve) => {
        this.loadingMsg = message.loading({
          key: this.msgKey,
          content: '处理中...',
          duration: 0,
        })
        return OrgService.roles
          .getParentRoles({
            id: this.unid,
          })
          .then((res) => {
            if (res.status === 200) {
              this.data = res.data
              this.visible = true
            } else {
              message.error(res.data?.message || '处理失败')
            }
          })
          .catch(() => message.error('处理失败'))
          .finally(() => {
            this.loadingMsg?.()
            resolve()
          })
      })
    },
    customRow(record, index) {
      return {
        on: {
          dblclick: () => {
            this.data = this.data.filter((item) => {
              return item.id !== record.id
            })
          },
        },
      }
    },
    treeSelect(info) {
      const rolePath = this.$refs.rolesTree.getPrantNodes('code', info.code)
      const inPath = rolePath.find((item) => {
        return item.code === this.unid
      })
      if (inPath) {
        message.error('不能添加父级角色和本身角色')
        return
      }

      const data = this.data.filter((item) => {
        return item.code === info.code
      })

      if (data.length === 0) {
        this.data.push({
          id: info.key,
          name: info.text,
          ...info,
        })
      }
    },

    save() {
      const ids = this.data.map((item) => {
        return item.code
      })
      this.loadingMsg = message.loading({
        key: this.msgKey,
        content: '处理中...',
        duration: 0,
      })
      return OrgService.roles
        .beAddRoles({
          id: this.unid,
          account: ids.join(','),
        })
        .then((res) => {
          if (res.status === 200) {
            message.success('处理成功')
            this.visible = false
            this.$emit('feedback', true)
          } else {
            message.error(res.data?.message || '处理失败')
          }
        })
        .catch(() => message.error('处理失败'))
        .finally(() => {
          this.loadingMsg?.()
        })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.warp {
  .tree {
    overflow: scroll;
  }
}
</style>
