<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      :quick-search-props="[{prop: 'b.FULLNAME_', label: '管理员'}]"
      ref="htTable"
      :show-custom-column="false"
      :show-export="false"
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <el-button
            size="small"
            @click="showDialog()"
            icon="el-icon-plus"
            type="primary"
            >添加</el-button
          >
          <ht-delete-button
            :url="demDeleteUrl"
            :htTable="$refs.htTable"
            @after-delete="afterDelete"
            parameter="id"
            :disabled="isDisabled"
            >删除</ht-delete-button
          >
        </el-button-group>
      </template>
      <template>
        <ht-table-column type="index" width="58" align="center" label="序号" />
        <ht-table-column
          prop="userName"
          label="管理员"
          width="128"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row, column, $index}">
            <el-link
              type="primary"
              @click="handleCommand({row: row, command: 'editOrgAuthPage'})"
              title="点击编辑"
              >{{ row.userName }}</el-link
            >
          </template>
        </ht-table-column>

        <ht-table-column prop="orgName" label="管理的组织" width="150" />
        <ht-table-column prop="demName" label="所属维度" width="100" />
        <ht-table-column prop="orgPerms" label="组织权限" width="180">
          <template v-slot="{row}">
            <el-tag
              v-if="row.orgPerms && row.orgPerms.indexOf('add') >= 0"
              type="info"
              >增加</el-tag
            >
            <el-tag
              v-if="row.orgPerms && row.orgPerms.indexOf('delete') >= 0"
              type="info"
              >删除</el-tag
            >
            <el-tag
              v-if="row.orgPerms && row.orgPerms.indexOf('edit') >= 0"
              type="info"
              >修改</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column prop="userPerms" label="组织人员权限" width="180">
          <template v-slot="{row}">
            <el-tag
              v-if="row.userPerms && row.userPerms.indexOf('add') >= 0"
              type="info"
              >增加</el-tag
            >
            <el-tag
              v-if="row.userPerms && row.userPerms.indexOf('delete') >= 0"
              type="info"
              >删除</el-tag
            >
            <el-tag
              v-if="row.userPerms && row.userPerms.indexOf('edit') >= 0"
              type="info"
              >修改</el-tag
            >
            <el-tag
              v-if="row.userPerms && row.userPerms.indexOf('setMaster') >= 0"
              type="info"
              >设置主组织</el-tag
            >
            <el-tag
              v-if="row.userPerms && row.userPerms.indexOf('setPos') >= 0"
              type="info"
              >设置岗位</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column prop="posPerms" label="组织岗位权限" width="180">
          <template v-slot="{row}">
            <el-tag
              v-if="row.posPerms && row.posPerms.indexOf('add') >= 0"
              type="info"
              >增加</el-tag
            >
            <el-tag
              v-if="row.posPerms && row.posPerms.indexOf('delete') >= 0"
              type="info"
              >删除</el-tag
            >
            <el-tag
              v-if="row.posPerms && row.posPerms.indexOf('edit') >= 0"
              type="info"
              >修改</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column prop="orgauthPerms" label="分级权限" width="180">
          <template v-slot="{row}">
            <el-tag
              v-if="row.orgauthPerms && row.orgauthPerms.indexOf('add') >= 0"
              type="info"
              >增加</el-tag
            >
            <el-tag
              v-if="row.orgauthPerms && row.orgauthPerms.indexOf('delete') >= 0"
              type="info"
              >删除</el-tag
            >
            <el-tag
              v-if="row.orgauthPerms && row.orgauthPerms.indexOf('edit') >= 0"
              type="info"
              >修改</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column prop="rolePerms" label="组织角色权限" width="180">
          <template v-slot="{row}">
            <el-tag
              v-if="row.rolePerms && row.rolePerms.indexOf('add') >= 0"
              type="info"
            >
              增加
            </el-tag>
            <el-tag
              v-if="row.rolePerms && row.rolePerms.indexOf('delete') >= 0"
              type="info"
            >
              删除
            </el-tag>
          </template>
        </ht-table-column>
        <!-- <ht-table-column prop="layoutPerms" label="布局权限" width="100">
          <template v-slot="{ row }">
            <el-tag
              v-if="row.layoutPerms && row.layoutPerms.indexOf('add') >= 0"
              type="info">增加</el-tag
            >
            <el-tag
              v-if="row.layoutPerms && row.layoutPerms.indexOf('delete') >= 0"
              type="info">删除</el-tag
            >
            <el-tag
              v-if="row.layoutPerms && row.layoutPerms.indexOf('edit') >= 0"
              type="info">修改</el-tag
            >
          </template>
        </ht-table-column> -->
      </template>
    </ht-table>

    <el-dialog
      width="50%"
      :title="dialogTitle"
      :visible="dialogVisible"
      :before-close="handleClose"
      :destroy-on-close="true"
      :append-to-body="true"
    >
      <el-form v-model="orgAuth" v-form id="authForm">
        <ht-form-item
          label="用户账号"
          prop="name"
          label-width="100px"
          v-show="false"
        >
          <ht-input v-model="orgAuth.account" />
        </ht-form-item>
        <ht-form-item label="组织管理员" prop="name" label-width="100px">
          <!--          <ht-input-->
          <!--            v-model="orgAuth.userName"-->
          <!--            autocomplete="off"-->
          <!--            :validate="{ required: true }"-->
          <!--            :disabled="true"-->
          <!--          ></ht-input>-->
          <!--          <el-button type="primary" icon="el-icon-user" @click="selectUser"-->
          <!--            >选择用户</el-button-->
          <!--          >-->
          <ht-user-selector-input
            v-model="orgAuth.userName"
            placeholder="选择用户"
            :append-to-body="true"
            :single="true"
            @input="valueChange"
            :config="{account: 'orgAuth.account'}"
          />
        </ht-form-item>
        <ht-form-item label="是否全选">
          <el-button icon="icon-test" @click="selectAll">{{
            isSelectAll
          }}</el-button>
        </ht-form-item>
        <ht-form-item label="组织权限" prop="code" label-width="100px">
          <ht-checkbox
            v-model="orgAuth.orgPerms"
            :options="checkValue"
            :validate="{required: false}"
            @input="checkClick"
          />
        </ht-form-item>
        <ht-form-item label="组织人员权限" prop="code" label-width="100px">
          <ht-checkbox
            v-model="orgAuth.userPerms"
            :options="userCheckValue"
            :validate="{required: false}"
            @input="checkClick"
          />
        </ht-form-item>
        <ht-form-item label="组织岗位权限" prop="code" label-width="100px">
          <ht-checkbox
            v-model="orgAuth.posPerms"
            :options="checkValue"
            :validate="{required: false}"
            @input="checkClick"
          />
        </ht-form-item>
        <ht-form-item label="分级权限" prop="code" label-width="100px">
          <ht-checkbox
            v-model="orgAuth.orgauthPerms"
            :options="checkValue"
            :validate="{required: false}"
            @input="checkClick"
          />
        </ht-form-item>
        <!-- <ht-form-item label="布局权限" prop="code" label-width="100px">
          <ht-checkbox
            v-model="orgAuth.layoutPerms"
            :options="checkValue"
            :validate="{ required: false }"
            @input="checkClick"
          />
        </ht-form-item> -->
        <ht-form-item label="组织角色权限" prop="code" label-width="100px">
          <ht-checkbox
            v-model="orgAuth.rolePerms"
            :options="
              checkValue.filter(item => {
                return item.key != 'edit'
              })
            "
            :validate="{required: false}"
            @input="handleRolePermsChange"
          ></ht-checkbox>
        </ht-form-item>
        <ht-form-item
          label="可选角色"
          prop="role"
          label-width="100px"
          v-if="orgAuth.rolePerms"
        >
          <div style="display: inline-block">
            <el-tag
              type="info"
              v-for="(item, index) in selectedRoles"
              :key="'roles_' + index"
              style="margin: 0 5px;"
              closable
              @close="handleRemoveRole(item.code)"
            >
              {{ item.name }}
            </el-tag>
          </div>
          <el-button @click="showRoleDialog">选择</el-button>
        </ht-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!readOnly">
        <el-button @click="dialogCancle('dialogVisible')">{{
          $t('eip.common.cancel')
        }}</el-button>
        <ht-submit-button
          :url="saveRoleUrl"
          :model="orgAuth"
          :isSubmit="isSubmit"
          :requestMethod="requestMethod"
          scopeName="editDemForm"
          @before-save-data="beforeSaveData"
          @after-save-data="afterSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </el-dialog>

    <ht-load-data
      :url="loadDataUrl"
      context="uc"
      @after-load-data="afterLoadData"
    ></ht-load-data>
    <ht-user-dialog
      ref="eipUserDialog"
      @on-confirm="addUnderUser"
      single
      append-to-body
    />
    <ht-role-dialog
      ref="eipRoleSelector"
      append-to-body
      @on-confirm="roleDialogConfirm"
    />
  </div>
</template>
<script>
//分级组织管理
import org from '@/api/org.js'
import EipUserDialog from '@/components/dialog/EipUserDialog.vue'
import EipRoleDialog from '@/components/dialog/EipRoleDialog.vue'

export default {
  name: 'org-auth-page',
  props: ['orgCode', 'demCode'],
  components: {
    EipUserDialog,
    EipRoleDialog
  },
  computed: {
    demDeleteUrl: function() {
      return window.context.uc + '/api/org/v1/orgAuth/deleteOrgAuth'
    },
    saveRoleUrl: function() {
      let preUrl = window.context.uc + '/api/org/v1/orgAuth'
      preUrl += '/saveOrgAuth'
      if (this.orgAuth.id) {
        this.orgAuth.account = this.orgAuth.userAccount
        this.orgAuth.orgCode = this.orgCode
        this.orgAuth.demCode = this.demCode
      }
      return preUrl
    },
    requestMethod: function() {
      return 'POST'
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisibleMenuPerm: false,
      isSubmit: true,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      loadDataUrl: '',
      menuPerm: {},
      allowRoles: [],
      readOnly: false,
      orgAuth: {
        account: '', //登录账号
        demCode: '',
        layoutPerms: 'show',
        orgCode: '',
        orgPerms: '',
        orgauthPerms: '',
        posPerms: '',
        userId: '',
        userName: '',
        userPerms: '',
        roleConfig: ''
      },
      checkValue: [
        {key: 'add', value: '增加'},
        {key: 'delete', value: '删除'},
        {key: 'edit', value: '修改'}
      ],
      userCheckValue: [
        {key: 'add', value: '增加'},
        {key: 'delete', value: '删除'},
        {key: 'edit', value: '修改'},
        {key: 'setMaster', value: '设置主组织'},
        {key: 'setPos', value: '设置岗位'}
      ],
      isSelectAll: '全选',
      dialogTitle: '',
      selectedRoles: [],
      selectedList: [],
      isDisabled: true
    }
  },
  watch: {
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    rowClick(row, column, event) {
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
    },
    checkClick() {
      let checkBoxs = document
        .getElementById('authForm')
        .querySelectorAll('input[type="checkbox"]')
      for (let index = 0; index < checkBoxs.length; index++) {
        if (!checkBoxs[index].checked) {
          this.isSelectAll = '全选'
          return
        }
      }
      this.isSelectAll = '取消全选'
    },
    setDemDefault(row) {
      org.setDemDefault(row.code).then(() => {
        this.$refs.htTable.load()
      })
    },
    handleClose() {
      this.dialogVisible = false
      // this.$refs["orgAuthForm"].resetField();
      this.orgAuth = {
        account: '',
        demCode: '',
        layoutPerms: 'show',
        orgCode: '',
        orgPerms: '',
        orgauthPerms: '',
        posPerms: '',
        userId: '',
        userName: '',
        userPerms: '',
        roleConfig: ''
      }
      this.selectedRoles.splice(0)
      this.loadDataUrl = ''
    },
    handleCloseMenuPerm() {
      this.dialogVisibleMenuPerm = false
    },
    showDialog(row) {
      this.isSelectAll = '全选'
      this.dialogVisible = true
      if (row) {
        this.dialogTitle = '编辑管理员权限'
        this.loadDataUrl = `/api/org/v1/orgAuth/getOrgAuth?id=${row.id}`
      } else {
        this.dialogTitle = '添加管理员权限'
        this.orgAuth = {name: '', code: ''}
      }
    },
    dialogCancle(dialogVisible) {
      this[dialogVisible] = false
      this.orgAuth = {
        account: '',
        demCode: '',
        layoutPerms: 'show',
        orgCode: '',
        orgPerms: '',
        orgauthPerms: '',
        posPerms: '',
        userId: '',
        userName: '',
        userPerms: '',
        roleConfig: ''
      }
      this.selectedRoles.splice(0)
      this.loadDataUrl = ''
    },
    loadData(param, cb) {
      org
        .getOrgAuthPage(param, {orgCode: this.orgCode})
        .then(response => {
          this.data = response.rows
          this.$emit('orgAuthData', this.data)
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    handleCommand(params) {
      this.readOnly = false
      switch (params.command) {
        case 'editOrgAuthPage':
          this.isSelectAll = '全选'
          this.showDialog(params.row)
          break
        default:
          break
      }
    },
    async beforeSaveData() {
      if (this.selectedRoles) {
        this.orgAuth.roleConfig = JSON.stringify(this.selectedRoles)
      } else {
        this.orgAuth.roleConfig = '[]'
      }
      this.isSubmit = true
    },
    afterSaveData() {
      this.dialogVisible = false
      this.isSelectAll = '全选'
      this.$refs.htTable.load()
    },
    afterDelete() {
      this.$refs.htTable.load()
    },
    afterLoadData(data) {
      if (this.dialogVisible) {
        this.orgAuth = data
        if (data.roleConfig) {
          let roles = JSON.parse(data.roleConfig)
          this.$set(this, 'selectedRoles', roles)
        } else {
          this.$set(this, 'selectedRoles', [])
        }
        this.isSelectAllFun()
        setTimeout(() => this.$validator.validateAll('editDemForm'), 500)
      }
    },
    isSelectAllFun() {
      if (
        this.orgAuth['orgPerms'] !== 'add,edit,delete' ||
        this.orgAuth['userPerms'] !== 'add,edit,delete,setMaster,setPos' ||
        this.orgAuth['posPerms'] !== 'add,edit,delete' ||
        this.orgAuth['orgauthPerms'] !== 'add,edit,delete' ||
        this.orgAuth['layoutPerms'] !== 'add,edit,delete' ||
        this.orgAuth['rolePerms'] !== 'add,delete'
      ) {
        this.isSelectAll = '全选'
      } else {
        this.isSelectAll = '取消全选'
      }
    },
    selectUser() {
      this.$refs.eipUserDialog.showDialog()
    },
    addUnderUser(selection) {
      if (!selection || selection.length != 1) {
        this.$message.error('有且只能有一个用户')
        return
      }
      for (let user of selection) {
        this.orgAuth.account = user.account
        // this.orgAuth.userName = user.fullname
        this.$set(this.orgAuth, 'userName', user.fullname)
        this.orgAuth.orgCode = this.orgCode
        this.orgAuth.demCode = this.demCode
      }
    },
    selectAll() {
      //全选操作
      if (this.isSelectAll === '全选') {
        this.isSelectAll = '取消全选'
        this.$set(this.orgAuth, 'orgPerms', 'add,edit,delete')
        this.$set(this.orgAuth, 'userPerms', 'add,edit,delete,setMaster,setPos')
        this.$set(this.orgAuth, 'posPerms', 'add,edit,delete')
        this.$set(this.orgAuth, 'orgauthPerms', 'add,edit,delete')
        this.$set(this.orgAuth, 'layoutPerms', 'add,edit,delete')
        this.$set(this.orgAuth, 'rolePerms', 'add,delete')
      } else {
        this.isSelectAll = '全选'
        this.$set(this.orgAuth, 'orgPerms', '')
        this.$set(this.orgAuth, 'userPerms', '')
        this.$set(this.orgAuth, 'posPerms', '')
        this.$set(this.orgAuth, 'orgauthPerms', '')
        this.$set(this.orgAuth, 'layoutPerms', '')
        this.$set(this.orgAuth, 'rolePerms', '')
      }
    },
    valueChange() {
      this.orgAuth.orgCode = this.orgCode
      this.orgAuth.demCode = this.demCode
    },
    showRoleDialog() {
      this.$refs['eipRoleSelector'].showDialog()
    },
    roleDialogConfirm(selection) {
      if (!selection || selection.length == 0) {
        this.$set(this, 'selectedRoles', [])
        return
      }
      this.$set(
        this,
        'selectedRoles',
        selection.map(item => {
          let {code, name} = item
          return {code, name}
        })
      )
    },
    handleRemoveRole(code) {
      this.$set(
        this,
        'selectedRoles',
        this.selectedRoles.filter(item => {
          return !(item.code === code)
        })
      )
    },
    handleRolePermsChange() {
      if (!this.orgAuth.rolePerms) {
        this.selectedRoles.splice(0)
      }
      this.checkClick()
    },
    handleSelectionChange(selection) {
      this.selectedList = selection
    }
  }
}
</script>
<style scoped lang="scss">
div[aria-invalid='true'] >>> .el-input__inner,
div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
::v-deep .el-table {
  .cell {
    padding: 7px 10px;
    .el-tag.el-tag--info {
      margin-right: 7px;
      margin-bottom: 10px;
    }
  }
  .el-table__cell.is-center {
    text-align: left;
  }
}
::v-deep .pagination-panel {
  display: flex;
  justify-content: end;
}
::v-deep .inputs.ht-form-inputs__inline {
  display: inline-block;
  width: 100%;
}
</style>