<template>
  <div class="clear-mg">
    <PageTable ref="userTable" action="RoleUserMgQueryUserOfRole" :columnsFn="tableColumns1" :initParam="formSearch">
      <Form ref="roleFormSearch" slot="search-bar" :model="formSearch" :label-width="100">
        <Row>
          <Col span="8">
            <Form-item prop="userCode" :label="$t('module.userManage.account')">
              <Input type="text" v-model="formSearch.userCode" maxlength="30"></Input>
            </Form-item>
          </Col>
          <Col span="8">
            <Form-item prop="userName" :label="$t('module.userManage.name')">
              <Input type="text" v-model="formSearch.userName" maxlength="30" ></Input>
            </Form-item>
          </Col>
          <Col span="8">
            <Form-item prop="enabled" :label="$t('common.status')">
              <Select v-model="formSearch.enabled" clearable>
                <Option value="1">{{$t('common.enable')}}</Option>
                <Option value="0">{{$t('common.disable')}}</Option>
              </Select>
            </Form-item>
          </Col>
        </Row>
      </Form>
      <div slot="table-bar">
        <Button type="ghost" icon="plus-round" @click="addUser()">{{$t('common.create')}}</Button>
        <Button type="ghost" icon="trash-a" @click="deleteUser">{{$t('common.delete')}}</Button>
      </div>
    </PageTable>

    <!-- 添加用户列表 -->
    <Modal v-model="modal" width="930">
      <div>
        <PageTable ref="searchUserTable" action="RoleUserMgQueryOtherUserOfRole" :columnsFn="tableColumns1" :initParam="addUserFormSearch" :isTableHeight="false">
          <Form ref="otherUserOfRoleForm" slot="search-bar":model="addUserFormSearch" :label-width="100">
            <Row>
              <Col span="8">
                <Form-item prop="userCode" :label="$t('module.userManage.account')">
                  <Input type="text" v-model="addUserFormSearch.userCode" maxlength="30"></Input>
                </Form-item>
              </Col>
              <Col span="8">
                <Form-item prop="userName" :label="$t('module.userManage.name')">
                  <Input type="text" v-model="addUserFormSearch.userName" maxlength="30"></Input>
                </Form-item>
              </Col>
              <Col span="8">
                <Form-item prop="enabled" :label="$t('common.status')">
                  <Select v-model="addUserFormSearch.enabled" clearable>
                    <Option value="1">{{$t('common.enable')}}</Option>
                    <Option value="0">{{$t('common.disable')}}</Option>
                  </Select>
                </Form-item>
              </Col>
            </Row>
          </Form>
          <div slot="handle-bar">
            <Button type="text" :loading="saveLoading" @click="reSetSearchOtherUser(1)">{{$t('common.reset')}}</Button>
            <Button type="ghost" :loading="saveLoading" @click="searchOtherUser(1)">{{$t('common.search')}}</Button>
          </div>
        </PageTable>
      </div>
      <div slot="footer" class="run-modal-ftbButton">
        <Button type="primary" @click="addUserToRole()">{{$t('common.confirm')}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    roleId: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      formSearch: {
        roleId: this.roleId,
        userCode: "",
        userName: "",
        enabled: ""
      },
      addUserFormSearch: {
        roleId: this.roleId,
        userCode: "",
        userName: "",
        enabled: ""
      },
      modal: false,
      saveLoading: false,
      baseData: [],
      currnodeId: "CR000",
      userListStore: {},
      userList: [],
      selectList: [],
      defaultProps: {
        children: "children",
        label: "name",
        depId: "CR000"
      }
    };
  },
  created() {
    this.$emit("SetPageActions", [
      {
        text: this.$t('common.reset'),
        theme: "ghost",
        handle: this.formReset
      },
      {
        text: this.$t('common.search'),
        theme: "warning",
        handle: this.search
      },
    ]);
  },

  methods: {
    tableColumns1(){
      return [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: this.$t("module.role.account_LDAP"),
          key: "userCode"
        },
        {
          title: this.$t("module.userManage.account"),
          key: "userName"
        },
        {
          title: this.$t("common.status"),
          align: "center",
          key: "enabled",
          render: (h, params) => {
            const row = params.row;
            const color = row.enabled == 1 ? "blue" : "red";
            const text = row.enabled == 1 ? this.$t("module.userManage.enabled") : this.$t("module.userManage.frozen");

            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: color
                }
              },
              text
            );
          }
        },
        {
          title: this.$t('module.userManage.type'),
          key: "type",
          width: 140,
          render: (h, params) => {
            return h(
              "span",
              this.userTypeText(params.row.type)
            );
          }
        }
      ]
    },
    search(page) {
      this.$refs["userTable"].load(this.formSearch, page);
    },
    searchOtherUser(page) {
      this.$refs["searchUserTable"].load(this.addUserFormSearch, page);
    },
    reSetSearchOtherUser(page) {
      this.$refs["otherUserOfRoleForm"].resetFields();
      this.searchOtherUser(1);
    },
    addUser() {
      this.modal = true;
      this.$refs["otherUserOfRoleForm"].resetFields();
      this.searchOtherUser(1);
      this.$nextTick(() => {
        this.$refs.searchUserTable.tableH = 300;
      })
    },
    addUserToRole() {
      let deleteStr = this.getIds("searchUserTable");
      if (deleteStr == "" && typeof id != "string") {
        this.$Message.warning({
          content: this.$t("module.role.warning.selectUsers"),
          duration: 1.5
        });
        return;
      }

      $store
        .dispatch("RoleUserMgAddUserToRole", {
          roleId: this.roleId,
          userIds: deleteStr
        })
        .then(res => {
          if (res.statusCode == 0) {
            this.$Message.success({
              content: this.$t("module.role.warning.createSuccessfully"),
              duration: 3
            });
            this.search();
            this.modal = false;
            return;
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 3
            });
          }
        });
    },
    deleteUser() {
      let deleteStr = this.getIds();
      if (deleteStr == "") {
        this.$Message.warning({
          content: this.$t("module.userManage.warning.selectDeleteUser"),
          duration: 1.5
        });
        return;
      }
      new $confirm(this.$t("module.userManage.warning.ensureToDelete"), this).then(() => {
        $store
          .dispatch("RoleUserMgDeleteUserFromRole", {
            roleId: this.roleId,
            userIds: deleteStr
          })
          .then(res => {
            if (res.statusCode == 0) {
              this.$Message.success({
                content: this.$t("module.userManage.warning.deleteSuccessfully"),
                duration: 3
              });
              this.search();
              return;
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 3
              });
            }
          });
      });
    },
    getIds(tableName) {
      tableName = tableName == undefined ? "userTable" : tableName;

      let list = this.$refs[tableName].getSelectioned() || [];
      let ids = [];
      for (let u of list) {
        ids.push(u.userId);
      }
      return ids.join(",");
    },
    formReset() {
      this.$refs["roleFormSearch"].resetFields();
      this.search(1);
    },
    userTypeText(type) {
      switch (type) {
        case 0:
          return this.$t('module.userManage.systemUser');
        case 1:
          return this.$t('module.userManage.LDAPUser');
        case 2:
          return this.$t('module.userManage.customUser');
        default:
          return ''
      }
    },
  }
};
</script>
<style lang="less">
.transfer-panel-empty {
  display: block;
  color: #b4bccc;
}
.group-person-item + .transfer-panel-empty {
  display: none;
}
.group-person-select + .transfer-panel-empty {
  display: none;
}
.group-person-select {
  width: 100%;
  padding: 5px 10px;
  margin-bottom: 1px;
}
</style>
