<template>
  <ht-sidebar-dialog
    title="分配外部系统管理员"
    :visible="dialogVisible"
    width="1040px"
    :before-close="handleClose"
    close-on-click-modal
  >
    <ht-table
      v-if="dialogVisible"
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      :show-export="false"
      :show-custom-column="false"
      :default-querys="defualtQuerys"
      :quick-search-props="[
        {prop: 'MANAGER_NAME_', label: '姓名'},
        {prop: 'MANAGER_ID_', label: '账号'}
      ]"
      ref="htTable"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <el-button
            size="small"
            type="primary"
            @click="showUserDialog()"
            icon="el-icon-plus"
            >加入用户</el-button
          >
          <ht-delete-button
            :url="roleDeleteUrl"
            :htTable="$refs.htTable"
            :sysCode="sysCode"
            pk="id"
            parameter="ids"
            :ignore-tenant="true"
            :disabled="isDisabled"
            >删除</ht-delete-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="userName"
          label="用户名称"
          width="300"
          :sortable="true"
          :show-overflow-tooltip="true"
        />
        <ht-table-column prop="account" label="账号" :sortable="true" />
      </template>
    </ht-table>
    <ht-user-dialog
      ref="eipUserDialog"
      @on-confirm="userDialogOnConfirm"
      append-to-body
    />
  </ht-sidebar-dialog>
</template>
<script>
import uc from '@/api/uc.js'
import EipUserDialog from '@/components/dialog/EipUserDialog.vue'
export default {
  props: {},
  components: {
    EipUserDialog
  },
  computed: {
    roleDeleteUrl: function() {
      return `${window.context.portal}/portalBizSystem/v1/deleteAuthByIds`
    }
  },
  data() {
    return {
      dialogVisible: false,
      isSubmit: true,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      defualtQuerys: [],
      tenantTypeId: '',
      tenantId: '',
      sysCode: '',
      selectedList: [],
      isDisabled: true
    }
  },
  watch: {
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  created() {},
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    showDialog(sysCode) {
      this.sysCode = sysCode
      this.dialogVisible = true
    },
    dialogCancle() {
      this.dialogVisible = false
    },
    loadData(param, cb) {
      let q = {
        sysCode: this.sysCode
      }
      param = {
        ...param,
        params: q
      }
      this.$http
        .post('${portal}/portalBizSystem/v1/getAuthUserBySystemCode', param)
        .then(
          resp => {
            let response = resp.data
            this.data = response.value.rows.map(item => {
              return {
                ...item,
                userId: item.managerId,
                userName: item.managerName
              }
            })
            this.pageResult = {
              page: response.value.page,
              pageSize: response.value.pageSize,
              total: response.value.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    showUserDialog() {
      this.$refs.eipUserDialog.showDialog()
    },
    userDialogOnConfirm(selection) {
      if (!selection || selection.length == 0) {
        this.$message.error('请至少选择一个用户')
        return
      }
      const userIds = []
      for (let user of selection) {
        userIds.push(user.id)
      }
      let userIdsParam = userIds.join(',')
      this.$http
        .get(
          '${portal}/portalBizSystem/v1/addAuthByUserIdAndSysCode?sysCode=' +
            this.sysCode +
            '&userIds=' +
            userIdsParam
        )
        .then(result => {
          if (result.data.state) {
            this.$message({
              message: result.data.message,
              type: 'success',
              showClose: true
            })
            this.$refs.htTable.load()
            return
          }
          this.$message.error(result.data.message || '设置管理员失败')
        })
    },
    handleSelectionChange(selection) {
      this.selectedList = selection
    }
  }
}
</script>
<style scoped>
div[aria-invalid='true'] >>> .el-input__inner,
div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
</style>