<template>
  <div class="user-manage">
    <div class="filter-cont">
      <!-- 筛选 -->
      <el-select
        v-model="selectedGroup"
        :placeholder="$t('profile.pleaseselect')"
        size="medium"
        @change="onChangeFilter"
      >
        <el-option :label="$t('manage.allIdentity')" value="" />
        <el-option
          v-for="item in groupList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div class="content">
        <template v-if="!loading">
          {{ $t("manage.userTotal", { total }) }}
        </template>
      </div>
      <!-- 搜索 -->
      <el-input
        v-model="searchText"
        :placeholder="$t('manage.pleaseInputUserName')"
        class="search"
        size="medium"
        @keyup.enter.native="onClickSearch"
        @input="onClickSearch"
      >
        <i slot="suffix" class="el-icon-search el-input__icon" />
      </el-input>
      <!-- 批量操作 -->
      <el-select
        v-if="forums && forums.other && forums.other.can_edit_user_group"
        v-model="handleValue"
        :placeholder="$t('manage.batchOperate')"
        size="medium"
        class="el-select-margin"
        @change="onChangeGroup"
      >
        <el-option
          v-for="item in groupInviteList"
          :key="item.value"
          :label="$t('manage.set') + item.label"
          :value="item.value"
        />
      </el-select>
      <!-- 邀请链接 -->
      <el-dropdown
        v-if="forums && forums.other && forums.other.can_create_invite"
        class="handle-dropdown"
        placement="bottom"
        trigger="click"
        @command="handleCommandInvite"
      >
        <el-button type="primary" size="medium" class="create-url">{{
          $t("manage.generateInvitationUrl")
        }}</el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in groupInviteList"
            :key="index"
            :command="item.value"
          >
            {{ item.label + $t("manage.invitationUrl") }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="userList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="35" />
      <el-table-column :label="$t('manage.userName')" min-width="100">
        <template slot-scope="scope">
          <div class="flex">
            <avatar
              :user="{
                id: scope.row.id,
                username: scope.row.username,
                avatarUrl: scope.row.avatarUrl
              }"
              :size="30"
              :round="true"
            />
            <nuxt-link :to="`/user/${scope.row.id}`" class="user-name">{{
              scope.row.username
            }}</nuxt-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('manage.identity')">
        <template slot-scope="scope">
          {{
            scope.row.groups &&
              scope.row.groups.length > 0 &&
              scope.row.groups[0]
              ? scope.row.groups[0].name
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('profile.status')" min-width="60">
        <template slot-scope="scope">
          <template v-if="scope.row.status === 0">{{
            $t("manage.normal")
          }}</template>
          <span v-else class="red">{{ $t("manage.disable") }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('manage.circleAge')">
        <template slot-scope="scope">
          {{ scope.row.createdAt | formatDateDay }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        :label="$t('manage.lastUpdateAt')"
        width="140"
      >
        <template slot-scope="scope">{{ scope.row.updatedAt | formatDate }}</template>
      </el-table-column> -->
      <el-table-column
        v-if="
          forums &&
            forums.other &&
            (forums.other.can_edit_user_group ||
              forums.other.can_edit_user_status)
        "
        fixed="right"
        :label="$t('manage.operate')"
        width="80"
      >
        <template slot-scope="scope">
          <el-dropdown
            class="handle-dropdown"
            placement="bottom"
            trigger="click"
            @command="handleCommand"
          >
            <span class="el-dropdown-link">
              {{ $t("manage.modifyRole") }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <template
                v-if="
                  forums && forums.other && forums.other.can_edit_user_group
                "
              >
                <el-dropdown-item
                  v-for="(item, index) in groupInviteList"
                  :key="index"
                  :command="{ userId: scope.row._jv.id, command: item.value }"
                >{{ $t("manage.set") + item.label }}</el-dropdown-item>
              </template>
              <el-dropdown-item
                v-if="
                  forums &&
                    forums.other &&
                    forums.other.can_edit_user_status &&
                    scope.row.status === 0
                "
                :command="{ userId: scope.row._jv.id, command: 'disable' }"
              >{{ $t("manage.disable") }}</el-dropdown-item>
              <el-dropdown-item
                v-else-if="
                  forums &&
                    forums.other &&
                    forums.other.can_edit_user_status &&
                    scope.row.status === 1
                "
                :command="{ userId: scope.row._jv.id, command: 'normal' }"
              >{{ $t("manage.cancelDisable") }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        hide-on-single-page
        :pager-count="5"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import handleError from '@/mixin/handleError';
import { time2MinuteOrHour, dateDay } from '@/utils/time';
export default {
  name: 'UsersManage',
  filters: {
    formatDate(date) {
      return time2MinuteOrHour(date);
    },
    formatDateDay(date) {
      return dateDay(date);
    }
  },
  mixins: [handleError],
  props: {
    groupInviteList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      selectedGroup: '', // 筛选项 选中的用户组
      groupId: [], // 用于接口的用户组数组
      groupList: [], // 用户组列表
      handleValue: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      searchText: '',
      userList: [], // 用户列表
      selectedHandle: '', //  配置身份 选中的操作
      multipleSelection: [], // 多选
      layout: 'total, sizes, prev, pager, next, jumper',
      isPad: false
    };
  },
  computed: {
    forums() {
      return this.$store.state.site.info.attributes || {};
    },
    userInfo() {
      return this.$store.state.user.info.attributes || {};
    }
  },
  mounted() {
    this.getUserList();
    this.getGroupList();
  },
  methods: {
    // 获取用户组
    getGroupList() {
      this.$store.dispatch('jv/get', ['groups', {}]).then(res => {
        if (res && Array.isArray(res) && res.length > 0) {
          res.forEach(item => {
            this.groupList.push({
              label: item.name,
              value: item._jv.id
            });
          });
        }
      });
    },
    // 用户用户列表
    getUserList() {
      this.loading = true;
      const params = {
        include: 'groups',
        'page[number]': this.pageNum,
        'page[limit]': this.pageSize,
        'filter[group_id][]': this.groupId,
        'filter[username]': `*${this.searchText}*`
      };
      this.$store
        .dispatch('jv/get', ['users', { params }])
        .then(
          res => {
            if (res) {
              this.total = res._jv.json.meta.total;
              this.userList = res;
              this.reloadForums();
            }
          },
          e => {
            this.handleError(e);
          }
        )
        .finally(() => {
          this.loading = false;
        });
    },
    // 刷新一下站点信息
    async reloadForums() {
      try {
        await this.$store.dispatch('site/getSiteInfo');
      } catch (err) {
        console.log('getUserInfo err', err);
      }
    },
    // 搜索
    onClickSearch() {
      this.reloadList();
    },
    // 过滤用户组
    onChangeFilter(e) {
      if (e) {
        this.groupId = [e];
      } else {
        this.groupId = [];
      }
      this.reloadList();
    },
    // 重新加载列表
    reloadList() {
      this.pageNum = 1;
      this.getUserList();
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getUserList();
    },
    // 配置身份下拉框
    handleCommand(e) {
      if (e.command === 'disable' || e.command === 'normal') {
        const status = e.command === 'disable' ? 1 : 0;
        this.modifyUserStatus(status, e.userId);
      } else {
        this.modifyUserGroup(e.command, e.userId);
      }
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 批量操作
    onChangeGroup(val) {
      this.modifyUserGroup(val);
      this.handleValue = '';
    },
    // 编辑用户身份
    modifyUserGroup(groupId, userId) {
      if (
        this.forums
        && this.forums.other
        && !this.forums.other.can_edit_user_group
      ) {
        return this.$message.error(this.$t('core.permission_denied'));
      }
      const data = [];
      if (userId && groupId) {
        data.push({
          attributes: {
            id: userId,
            groupId: parseInt(groupId, 10)
          }
        });
      } else {
        if (this.multipleSelection && this.multipleSelection.length > 0) {
          for (let i = 0; i < this.multipleSelection.length; i += 1) {
            data.push({
              attributes: {
                id: this.multipleSelection[i].id,
                groupId: parseInt(groupId, 10)
              }
            });
          }
        } else {
          this.$message.error(this.$t('manage.selectUser'));
          return;
        }
      }
      const params = [
        {
          _jv: {
            type: 'users'
          }
        },
        {
          data: {
            data
          }
        }
      ];
      this.loading = true;
      this.$store
        .dispatch('jv/patch', params)
        .then(
          res => {
            if (res) {
              if (
                res._jv
                && res._jv.json
                && res._jv.json.data
                && res._jv.json.data.length > 0
                && res._jv.json.data[0].attributes
                && res._jv.json.data[0].attributes.error === 'Permission Denied'
              ) {
                return this.$message.error(this.$t('manage.modifyFail'));
              }
              this.$message.success(this.$t('discuzq.msgBox.modifySuccess'));
              this.getUserList();
            }
          },
          e => {
            this.handleError(e);
          }
        )
        .finally(() => {
          this.loading = false;
        });
    },
    // 修改用户状态
    modifyUserStatus(status, userId) {
      // 是否有编辑用户的权限
      if (
        this.forums
        && this.forums.other
        && !this.forums.other.can_edit_user_status
      ) {
        return this.$message.error(this.$t('core.permission_denied'));
      }
      // 不可以编辑自己
      if (+this.userInfo.id === +userId) {
        return this.$message.error(this.$t('core.no_edit_self'));
      }
      const params = {
        data: {
          attributes: {
            status
          }
        }
      };
      this.loading = true;
      this.$store
        .dispatch('jv/patch', [
          { _jv: { type: `users/${userId}` }},
          { data: params }
        ])
        .then(
          res => {
            if (res) {
              this.$message.success(this.$t('discuzq.msgBox.modifySuccess'));
              this.getUserList();
            }
          },
          e => {
            this.handleError(e);
          }
        )
        .finally(() => {
          this.loading = false;
        });
    },
    // 生成邀请链接
    handleCommandInvite(command) {
      this.createAdminInvite(command);
    },
    // 管理员创建邀请链接
    createAdminInvite(groupId) {
      const params = {
        data: {
          attributes: {
            group_id: groupId
          }
        }
      };
      this.$store
        .dispatch('jv/post', [{ _jv: { type: 'invite' }}, { data: params }])
        .then(
          res => {
            this.copyLink(res.code);
          },
          e => {
            this.handleError(e);
          }
        );
    },
    // 复制链接
    copyLink(code) {
      const oInput = document.createElement('input');
      if (process.client) {
        oInput.value = `${window.location.protocol}//${window.location.host}/site/partner-invite?code=${code}`;
        oInput.id = 'copyInput';
        document.body.appendChild(oInput);
        oInput.select();
        document.execCommand('Copy');
      }
      this.$message.success(this.$t('discuzq.msgBox.copySuccess'));
      setTimeout(() => {
        oInput.remove();
      }, 100);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";
.user-manage {
  overflow-x: auto;
}
.filter-cont {
  display: flex;
  align-items: center;
  .content {
    flex: 1;
    margin-left: 30px;
    @media screen and (max-width: 1005px) {
      margin-left: 5px;
      font-size: 12px;
    }
    .text-bold {
      font-weight: bold;
    }
  }
  .el-select {
    width: 120px;
    @media screen and (max-width: 1005px) {
      width: 110px;
    }
  }
  .el-select-margin {
    margin-left: 10px;
  }
  .el-input {
    width: 220px;
    @media screen and (max-width: 1005px) {
      width: 120px;
    }
  }
  .search {
    margin-left: 10px;
  }
}
.red {
  color: #fa5151;
}
.el-table {
  margin-top: 10px;
  ::v-deep thead th {
    color: #303133;
    background-color: #fafafa;
  }
}
.pagination {
  text-align: right;
  padding-top: 20px;
  padding-bottom: 20px;
  @media screen and (max-width: 1005px) {
    ::v-deep .el-pagination__sizes {
      display: none;
    }
  }
}
.handle-dropdown {
  .el-dropdown-link {
    color: #8590a6;
    cursor: pointer;
    &:hover {
      color: $color-blue-base;
    }
  }
}
.disable {
  cursor: no-drop;
  color: #8590a6;
}
::v-deep .el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: transparent;
  color: $color-blue-base;
}
.no-more {
  margin-top: 40px;
}
.user-name {
  margin-left: 10px;
  &:hover {
    color: $color-blue-base;
  }
}
.flex {
  display: flex;
  align-items: center;
}
.create-url {
  padding: 10px;
  margin-left: 10px;
}
</style>
