<template>
  <div>
    <ht-table
      @load="userRoleLoad"
      :data="userRoleList"
      :pageResult="rolePageResult"
      :selection="true"
      :show-export="false"
      :show-custom-column="false"
      :default-querys="[{property: 'account_', value: data.account}]"
      quick-search-props="roleName"
      ref="userRoleTable"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:toolbar>
        
          <el-button size="small" @click="divertClick" icon="icon-zhuanyi" :disabled="isDisabled" type="primary"
            >转移</el-button
          >
          <el-button size="small" @click="copyClick" icon="icon-copy" :disabled="isDisabled"
            >复制</el-button
          >
           <el-popover
          placement="bottom"
          v-model="visible"
          >
          <span><i class="el-icon-question" style="color:rgb(255, 153, 0);margin-right:5px"></i>确定删除？</span>
          <div class="bottom-btn" style="text-align:right">
            <el-button size="mini" type="text" @click="handleCancel">取消</el-button>
            <el-button size="mini" type="primary" @click="deleteUserRole">确认</el-button>
          </div>
          <el-button
            slot="reference"
            style="marginLeft:10px"
            icon="icon-application-delete"
            :disabled="isDisabled"
            >删除</el-button>
        </el-popover>
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column prop="roleName" label="名称" />
        <ht-table-column prop="alias" label="编码" width="300" />
      </template>
    </ht-table>
    <!--用户选择对话框  -->
    <ht-user-dialog
      ref="eipUserDialog"
      @on-confirm="eipUserDialogOk"
      append-to-body
    />
  </div>
</template>

<script>
  import uc from '@/api/uc.js'
  import req from '@/request.js'
  const eipUserDialog = () => import('@/components/dialog/EipUserDialog.vue')
  export default {
    name: 'userRoleList',
    props: ['data'],
    components: {eipUserDialog},
    computed: {
      delOrgUser: function () {
        return window.context.uc + '/api/org/v1/orgUser/delOrgUser'
      },
    },
    data() {
      return {
        userRoleList: [], //用户所属角色
        rolePageResult: {
          page: 1,
          pageSize: 20,
          total: 0,
        },
        selectRoles: [], //选择的角色
        type: '', //1、转移，2、复制
        isDisabled:true,
      selectedList:[],
      visible:false
      }
    },
    watch: {
      'data.account': {
        handler(newValue, oldValue) {
          if (newValue && oldValue && newValue != oldValue) {
            this.$nextTick(() => {
              this.$refs.userRoleTable.load()
            })
          }
        },
        deep: true,
        immediate: true,
      },
      selectedList:{
      handler(val){
        this.isDisabled = val.length < 1 ? true : false
      },
      deep:true
    }
    },
    methods: {
      handleCancel(){
        this.visible = false
      },
      handleSelectionChange(selection){
      this.selectedList = selection
    },
      //转移
      divertClick() {
        this.type = ''
        this.selectRoles = []
        let selectSelection = this.$refs.userRoleTable.selection
        if (selectSelection && selectSelection.length == 0) {
          this.$message.error('请选择要转移的角色')
          return
        }
        for (let k = 0; k < selectSelection.length; k++) {
          this.selectRoles.push(selectSelection[k].alias)
        }
        this.type = '1'
        this.$refs['eipUserDialog'].showDialog()
      },
      //复制
      copyClick() {
        this.type = ''
        this.selectRoles = []
        let selectSelection = this.$refs.userRoleTable.selection
        if (selectSelection && selectSelection.length == 0) {
          this.$message.error('请选择要复制的角色')
          return
        }
        for (let k = 0; k < selectSelection.length; k++) {
          this.selectRoles.push(selectSelection[k].alias)
        }
        this.type = '2'
        this.$refs['eipUserDialog'].showDialog()
      },
      //选择用户确认事件
      eipUserDialogOk(data) {
        if (data && data.length > 0) {
          let accounts = []
          for (let k = 0; k < data.length; k++) {
            if (data[k].account != this.data.account) {
              accounts.push(data[k].account)
            }
          }
          let map = {
            accounts: accounts,
            codes: this.selectRoles,
            type: this.type,
          }
          if ((this.type = '1')) {
            //转移
            map.account = this.data.account
          }
          uc.operatingUserRoles(map).then((res) => {
            if (res.state) {
              this.$message.success(res.message)
              this.$nextTick(() => {
                this.$refs.userRoleTable.load()
              })
            }
          })
        }
      },
      //删除角色
      deleteUserRole() {
        this.visible = false
        let codes = []
        let selectSelection = this.$refs.userRoleTable.selection
        if (selectSelection && selectSelection.length == 0) {
          this.$message.error('请选择要删除的角色')
          return
        }
        for (let k = 0; k < selectSelection.length; k++) {
          codes.push(selectSelection[k].alias)
        }
        req
          .remove(
            window.context.uc +
              `/api/role/v1/roleUser/delUserRoles?account=${
                this.data.account
              }&codes=${codes.join(',')}`
          )
          .then((res) => {
            if (res.data.state) {
              this.$message.success(res.data.message)
              this.$refs.userRoleTable.load()
            }
          })
      },
      //查询所属角色
      userRoleLoad(param, cb) {
        uc.userRolePage(param)
          .then((response) => {
            if (response) {
              this.userRoleList = response.rows
              this.rolePageResult = {
                page: response.page,
                pageSize: response.pageSize,
                total: response.total,
              }
            }
          })
          .finally(() => cb())
      },
    },
  }
</script>
<style scoped lang="scss">
::v-deep .el-main {
  position: relative;
  .toolbar-panel {
    position: absolute;
    right: 0;
  }
}
</style>