<template>
  <div>
    <ht-sidebar-dialog
      :title="`组织角色授权【${role.name}】`"
      :visible="dialogVisible"
      :before-close="handleClose"
      append-to-body
      width="1040px"
    >
      <ht-table
        :data="orgs"
        v-if="dialogVisible"
        @load="loadData"
        :pageResult="pageResult"
        :selection="true"
        :show-export="false"
        :show-custom-column="false"
        @selection-change="handleSelectionChange"
        :quick-search-props="[
          {prop: 'uo.NAME_', label: '组织名'},
          {prop: 'uo.CODE_', label: '组织编码'}
        ]"
        ref="htTable"
      >
        <template v-slot:toolbar>
          <el-button-group>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="showOrgDialog"
              >加入组织</el-button
            >
            <el-button
              size="small"
              style="margin-left:10px"
              :disabled="isDisabled"
              @click="remove"
              >删除</el-button
            >
          </el-button-group>
        </template>
        <template>
          <ht-table-column
            type="index"
            width="50"
            align="center"
            label="序号"
          />
          <ht-table-column prop="id" label="主键" :sortable="true" hidden />
          <ht-table-column prop="name_" label="组织名" :sortable="true">
            <template slot-scope="scope">
              <span>
                {{ scope.row.name }}
              </span>
            </template>
          </ht-table-column>
          <ht-table-column prop="code" label="组织编码" />
          <ht-table-column prop="isInherit" label="是否可继承">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isInherit"
                :active-value="1"
                :inactive-value="0"
                @change="updateInheritStatus(scope.row)"
              ></el-switch>
            </template>
          </ht-table-column>
        </template>
      </ht-table>
    </ht-sidebar-dialog>
    <ht-org-post-dialog
      ref="eipOrgDialog"
      @on-confirm="orgConfirm"
      append-to-body
    ></ht-org-post-dialog>
  </div>
</template>

<script>
import EipOrgDialog from '@/components/dialog/EipOrgDialog.vue'
export default {
  components: {
    EipOrgDialog
  },
  data() {
    return {
      dialogVisible: false,
      role: {},
      orgs: [],
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      selectedList: [],
      isDisabled: true
    }
  },

  watch: {
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    showDialog(role) {
      this.selectedList = []
      this.role = role
      this.dialogVisible = true
    },
    loadData(param, cb) {
      this.$http
        .post(
          `${window.context.uc}/api/org/v1/orgRoles/getRoleOrgs?roleId=${this.role.id}`,
          param
        )
        .then(resp => {
          this.pageResult.total = resp.data.total
          this.orgs = resp.data.rows
          this.$nextTick(() => {
            cb.call()
          })
        })
    },
    showOrgDialog() {
      this.$refs.eipOrgDialog.showDialog()
    },
    orgConfirm(selection) {
      if (!selection || selection.length == 0) {
        return
      }
      let orgIds = selection.map(item => item.id)
      let roleId = this.role.id
      let vo = {orgIds, roleId}
      let this_ = this
      this.$http
        .post(`${window.context.uc}/api/org/v1/orgRoles/saveRoleOrg`, vo)
        .then(resp => {
          if (resp.data && resp.data.state) {
            this_.$message.success(resp.data.message)
          }
          this_.$refs.htTable.load()
        })
    },
    remove() {
      let selection = this.$refs.htTable.selection
      if (selection.length == 0) {
        this.$message.warning('请选择要删除的数据')
        return
      }
      this.$confirm(`确定要删除选中的${selection.length}条数据?`)
        .then(() => {
          let orgIds = selection.map(item => item.id)
          let roleId = this.role.id
          this.$http
            .post(`${window.context.uc}/api/org/v1/orgRoles/removeRoleOrgs`, {
              orgIds,
              roleId
            })
            .then(resp => {
              if (resp.data && resp.data.state) {
                this.$message.success(resp.data.message)
              }
              this.$refs.htTable.load()
            })
        })
        .catch(() => {})
    },
    updateInheritStatus(row) {
      let orgId = row.id
      let roleId = this.role.id
      let param = {
        orgIds: [orgId],
        roleId
      }
      this.$refs.htTable.loading = true
      this.$http
        .post(
          `${window.context.uc}/api/org/v1/orgRoles/updateInheritStatus`,
          param
        )
        .then(resp => {
          this.$refs.htTable.loading = false
          if (resp.data && resp.data.state) {
            this.$message.success(resp.data.message)
          }
        })
    },
    handleSelectionChange(selection) {
      this.selectedList = selection
    }
  }
}
</script>

<style lang="scss" scoped></style>