<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <div class="filter-container">
      <!-- 归属系统 -->
      <el-select
        v-model="listQuery.sysOrigin"
        :placeholder="$t('pages.roomProfile.filter.system')"
        style="width: 150px"
        class="filter-item"
        @change="handleSearch"
      >
        <el-option
          v-for="(item, index) in permissionsSysOriginPlatforms"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
          <span style="float: left;">
            <sys-origin-icon :icon="item.value" :desc="item.value"
          /></span>
          <span style="float: left;margin-left:10px">{{ item.label }}</span>
        </el-option>
      </el-select>

      <!-- 注销状态 -->
      <el-select
        v-model="listQuery.del"
        :placeholder="$t('pages.roomProfile.filter.deletedStatus')"
        style="width: 150px"
        class="filter-item"
        @change="handleSearch"
      >
        <el-option :label="$t('pages.roomProfile.filter.notDeleted')" value="0" />
        <el-option :label="$t('pages.roomProfile.filter.deleted')" value="1" />
      </el-select>

      <!-- 房间状态 -->
      <el-select
        v-model="listQuery.event"
        :placeholder="$t('pages.roomProfile.filter.roomStatus')"
        style="width: 150px"
        class="filter-item"
        clearable
        @change="handleSearch"
      >
        <el-option
          v-for="item in localizedRoomEvents"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>

      <!-- 房间ID -->
      <el-input
        v-model.trim="listQuery.roomId"
        :placeholder="$t('pages.roomProfile.filter.roomId')"
        clearable
        style="width: 220px;"
        class="filter-item"
      />

      <!-- 房间账号 -->
      <el-input
        v-model.trim="listQuery.roomAccount"
        :placeholder="$t('pages.roomProfile.filter.roomAccount')"
        clearable
        style="width: 220px;"
        class="filter-item"
      />

      <!-- 用户ID -->
      <div class="filter-item">
        <account-input
          v-model="listQuery.userId"
          :sys-origin="listQuery.sysOrigin"
          :placeholder="$t('pages.roomProfile.filter.userId')"
        />
      </div>

      <!-- 搜索 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        :disabled="listLoading"
        @click="handleSearch"
      >
        {{ $t('pages.roomProfile.filter.search') }}
      </el-button>

      <!-- 移除/拉黑成员 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleRemoveOrPullBlack"
      >
        {{ $t('pages.roomProfile.filter.removeOrBlacklist') }}
      </el-button>

      <!-- 权限变更 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleChangeRole"
      >
        {{ $t('pages.roomProfile.filter.roleChange') }}
      </el-button>
    </div>

    <!-- 表单 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      highlight-current-row
    >
      <!-- 封面 + 房间信息 -->
      <el-table-column :label="$t('pages.roomProfile.table.cover')" align="center" min-width="200">
        <template slot-scope="scope">
          <div class="room-profile flex-l">
            <!-- 封面 -->
            <div class="avatar">
              <el-image
                style="width: 100%; height: 100%;"
                :src="scope.row.roomCover"
                :preview-src-list="[scope.row.roomCover]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </div>

            <!-- 房间信息 -->
            <div class="info nowrap-ellipsis">
              <div class="nickname">
                <el-link
                  v-if="scope.row.roomName"
                  @click="queryRoomDetails(scope.row.id)"
                >
                  {{ scope.row.roomName }}
                </el-link>
              </div>
              <div class="account">{{ $t('pages.roomProfile.row.account') }}: {{ scope.row.roomAccount }}</div>
              <div class="desc">
                {{ scope.row.roomDesc }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>

      <!-- 房间信息 -->
      <el-table-column :label="$t('pages.roomProfile.table.roomInfo')" align="left" min-width="200">
        <template slot-scope="scope">
          <div style="margin: auto;">
            <div>
              {{ $t('pages.roomProfile.row.status') }}:
              <el-tag
                size="mini"
                :type="getRoomStatusTagType(scope.row.event)"
              >{{ getRoomStatusText(scope.row.event) }}</el-tag>
            </div>
            <div>ID: {{ scope.row.id }}</div>
          </div>
        </template>
      </el-table-column>

      <!-- 时间 -->
      <el-table-column prop="event" :label="$t('pages.roomProfile.table.time')" align="center" width="200">
        <template slot-scope="scope">
          <div>{{ $t('pages.roomProfile.row.createdAt') }}: {{ scope.row.createTime | dateFormat }}</div>
          <div>{{ $t('pages.roomProfile.row.updatedAt') }}: {{ scope.row.updateTime | dateFormat }}</div>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column fixed="right" :label="$t('pages.roomProfile.table.actions')" align="center" width="50">
        <template slot-scope="scope">
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-more" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- 复制ID -->
              <el-dropdown-item @click.native="copyContent(scope.row.id)"
                >{{ $t('pages.roomProfile.action.copyId') }}</el-dropdown-item
              >

              <!-- 编辑资料 -->
              <el-dropdown-item
                v-if="buttonPermissions.includes('room:profile:table:edit')"
                @click.native="handleUpdate(scope.row)"
                >{{ $t('pages.roomProfile.action.editProfile') }}</el-dropdown-item
              >

              <!-- 成员列表 -->
              <el-dropdown-item
                v-if="
                  buttonPermissions.includes(
                    'room:profile:table:query:member:list'
                  )
                "
                @click.native="queryRoomUserDetails(scope.row.id)"
                >{{ $t('pages.roomProfile.action.memberList') }}</el-dropdown-item
              >

              <!-- 访客记录 -->
              <el-dropdown-item
                v-if="
                  buttonPermissions.includes(
                    'room:profile:table:query:visitor:list'
                  )
                "
                @click.native="queryRoomVisitorLog(scope.row.id)"
                >{{ $t('pages.roomProfile.action.visitorLog') }}</el-dropdown-item
              >

              <!-- 活跃指标 -->
              <!-- <el-dropdown-item v-if="buttonPermissions.includes('room:profile:table:query:active:index')" @click.native="clickRoomActive(scope.row)">活跃指标</el-dropdown-item> -->

              <!-- 操作日志 -->
              <el-dropdown-item
                v-if="buttonPermissions.includes('room:profile:table:log')"
                @click.native="clickQueryRolesChangeLog(scope.row)"
                >{{ $t('pages.roomProfile.action.operationLog') }}</el-dropdown-item
              >

              <!-- 审批房间昵称 -->
              <el-dropdown-item
                v-if="buttonPermissions.includes('room:profile:table:approval')"
                @click.native="editApproval(scope.row, 'ROOM_NICKNAME')"
                >{{ $t('pages.roomProfile.action.approveRoomNickname') }}</el-dropdown-item
              >

              <!-- 审批房间头像 -->
              <el-dropdown-item
                v-if="buttonPermissions.includes('room:profile:table:approval')"
                @click.native="editApproval(scope.row, 'ROOM_AVATAR')"
                >{{ $t('pages.roomProfile.action.approveRoomAvatar') }}</el-dropdown-item
              >

              <!-- 审批房间公告 -->
              <el-dropdown-item
                v-if="buttonPermissions.includes('room:profile:table:approval')"
                @click.native="editApproval(scope.row, 'ROOM_NOTICE')"
                >{{ $t('pages.roomProfile.action.approveRoomNotice') }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 加载按钮 -->
    <div class="load-more flex-c">
      <el-button
        v-if="!listNotData"
        type="text"
        :disabled="listLoading"
        @click="renderData"
        >{{ $t('pages.roomProfile.action.loadMore') }}</el-button
      >
      <span v-else>{{ $t('pages.roomProfile.action.loadedAll') }}</span>
    </div>

    <!-- 房间详情组件 -->
    <room-deatils-drawer
      v-if="roomDeatilsDrawerVisible"
      :room-id="roomId"
      @close="roomDeatilsDrawerVisible = false"
    />

    <!-- 成员列表组件 -->
    <profile-user-drawer
      v-if="roomUserDeatilsDrawerVisible"
      :room-id="roomId"
      :sys-origin="listQuery.sysOrigin"
      @close="roomUserDeatilsDrawerVisible = false"
    />

    <!-- 访客记录组件 -->
    <visitor-log-drawer
      v-if="roomVisitorLogVisible"
      :room-id="roomId"
      :sys-origin="listQuery.sysOrigin"
      @close="roomVisitorLogVisible = false"
    />

    <!-- 编辑资料组件 -->
    <el-dialog
      :title="$t('pages.roomProfile.dialog.editRoomProfile')"
      :visible.sync="formVisible"
      :before-close="handleClose"
      width="450px"
    >
      <div v-loading="submitLoading">
        <el-form
          ref="form"
          class="i18n-form"
          :model="form"
          :rules="localizedRules"
          label-width="90px"
          style="margin-right: 28px"
        >
          <el-form-item :label="$t('pages.roomProfile.dialog.cover')" prop="roomCover">
            <el-upload
              class="upload-demo"
              action=""
              :http-request="httpRequest"
              :show-file-list="false"
              accept="image/png,image/jpg,image/jpeg"
            >
              <el-image
                v-if="form.roomCover"
                :src="form.roomCover"
                fit="fill"
                style="width: 50px; height: 50px"
              />
              <el-button v-loading="uploadLoading" size="small" type="primary"
                >{{ $t('pages.roomProfile.dialog.clickUpload') }}</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item :label="$t('pages.roomProfile.dialog.name')" prop="roomName">
            <el-input
              v-model.trim="form.roomName"
              type="text"
              :placeholder="$t('pages.roomProfile.dialog.roomName')"
              show-word-limit
              minlength="1"
              maxlength="24"
              resize="none"
              rows="6"
            />
          </el-form-item>
          <el-form-item :label="$t('pages.roomProfile.dialog.notice')">
            <el-input
              v-model.trim="form.roomDesc"
              type="textarea"
              :placeholder="$t('pages.roomProfile.dialog.roomNoticePlaceholder')"
              show-word-limit
              maxlength="160"
              resize="none"
              rows="6"
            />
          </el-form-item>
          <el-form-item :label="$t('pages.roomProfile.dialog.status')">
            <el-select
              v-model="form.event"
              :placeholder="$t('pages.roomProfile.filter.roomStatus')"
              style="width:100%;"
              class="filter-item"
            >
              <el-option
                v-for="item in localizedRoomEvents"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- 管理员数量 -->
          <el-form-item :label="$t('pages.roomProfile.dialog.adminCount')" prop="maxAdmin">
            <el-input
              v-model.number="form.maxAdmin"
              type="number"
              :placeholder="$t('pages.roomProfile.dialog.maxAdminCount')"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">{{ $t('pages.roomProfile.dialog.save') }}</el-button>
            <el-button @click="handleClose()">{{ $t('pages.roomProfile.dialog.cancel') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 移除/拉黑成员组件 -->
    <el-dialog
      :title="textOptTitle3"
      :visible.sync="formVisible3"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="400px"
    >
      <div v-loading="submitLoading3">
        <el-form
          ref="form"
          class="i18n-form i18n-form--narrow"
          :model="form3"
          label-width="50px"
          style="margin-left: 15px;"
        >
          <el-form-item :label="$t('pages.roomProfile.dialog.platform')">
            <el-input
              v-model.trim="listQuery.sysOrigin"
              :disabled="true"
              type="text"
            />
          </el-form-item>
          <el-form-item :label="$t('pages.roomProfile.dialog.room')" prop="roomAccount">
            <el-input
              v-model.trim="form3.roomAccount"
              :placeholder="$t('pages.roomProfile.filter.roomAccount')"
              type="text"
            />
          </el-form-item>
          <el-form-item :label="$t('pages.roomProfile.dialog.user')" prop="userAccount">
            <el-input
              v-model.trim="form3.userAccount"
              :placeholder="$t('pages.roomProfile.filter.userId')"
              type="text"
            />
          </el-form-item>
          <el-form-item :label="$t('pages.roomProfile.dialog.event')">
            <el-select
              v-model="form3.event"
              :placeholder="$t('pages.roomProfile.dialog.event')"
              style="width:100%;"
              class="filter-item"
            >
              <el-option
                v-for="item in localizedSysOperatingRoomUserEvent"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitRemoveOrPullBlackForm()"
              >{{ $t('pages.roomProfile.dialog.save') }}</el-button
            >
            <el-button @click="handleClose()">{{ $t('pages.roomProfile.dialog.cancel') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 权限变更组件 -->
    <el-dialog
      :title="textOptTitle4"
      :visible.sync="formVisible4"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="400px"
    >
      <div v-loading="submitLoading4">
        <el-form
          ref="form"
          class="i18n-form i18n-form--narrow"
          :model="form4"
          label-width="50px"
          style="margin-left: 15px;"
        >
          <el-form-item :label="$t('pages.roomProfile.dialog.platform')">
            <el-input
              v-model.trim="listQuery.sysOrigin"
              :disabled="true"
              type="text"
            />
          </el-form-item>
          <el-form-item :label="$t('pages.roomProfile.dialog.room')" prop="roomAccount">
            <el-input
              v-model.trim="form4.roomAccount"
              :placeholder="$t('pages.roomProfile.filter.roomAccount')"
              type="text"
            />
          </el-form-item>
          <el-form-item :label="$t('pages.roomProfile.dialog.user')" prop="userAccount">
            <el-input
              v-model.trim="form4.userAccount"
              :placeholder="$t('pages.roomProfile.filter.userId')"
              type="text"
            />
          </el-form-item>
          <el-form-item :label="$t('pages.roomProfile.dialog.permission')">
            <el-select
              v-model="form4.roles"
              :placeholder="$t('pages.roomProfile.dialog.permission')"
              style="width:100%;"
              class="filter-item"
            >
              <el-option
                v-for="(item, index) in localizedRoomRoles"
                :key="index"
                :label="item.name"
                :value="item.value"
                :disabled="item.value == 'HOMEOWNER'"
              />
              <el-option :key="localizedRoomRoles.length" :label="$t('pages.roomProfile.dialog.tourist')" value="TOURIST" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitChangeRoleForm()"
              >{{ $t('pages.roomProfile.dialog.save') }}</el-button
            >
            <el-button @click="handleClose()">{{ $t('pages.roomProfile.dialog.cancel') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 活跃指标 -->
    <room-active-charts
      v-if="roomActiveVisible"
      :room-id="roomId"
      @close="roomActiveVisible = false"
    />

    <!-- 操作日志 -->
    <room-operation-log
      v-if="roomOperationLogVisible"
      :room-id="roomId"
      @close="roomOperationLogVisible = false"
    />

    <el-dialog
      :title="textOptTitle"
      :visible="textOptVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="500px"
      top="170px"
    >
      <div v-loading="submitLoading">
        <div class="form-contetn">
          <el-form
            ref="form"
            class="i18n-form i18n-form--wide"
            :model="form"
            :rules="localizedRules"
            label-width="110px"
            style="text-align: center;"
          >
            <el-button
              type="primary"
              style="margin: auto 20px;"
              plain
              @click="pass()"
              >{{ $t('pages.roomProfile.dialog.approvePass') }}</el-button
            >
            <el-button
              type="danger"
              style="margin: auto 20px;"
              plain
              @click="notpass()"
              >{{ $t('pages.roomProfile.dialog.approveViolation') }}</el-button
            >
          </el-form>
        </div>
        <div slot="footer" style="text-align: right;">
          <el-button @click="handleClose()">{{ $t('pages.roomProfile.dialog.cancel') }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  pofileTable,
  updateProfile,
  removeOrPullBlackRoomUser,
  changeRole
} from "@/api/room";
import { getAccessImgUrl } from "@/api/oss";
import {
  roomEvents,
  sysOperatingRoomUserEvent,
  roomRoles
} from "@/constant/type";
import RoomDeatilsDrawer from "@/components/data/RoomDeatilsDrawer";
import ProfileUserDrawer from "./user-drawer";
import VisitorLogDrawer from "./room-visitor-log";
import { mapGetters } from "vuex";
import RoomActiveCharts from "./room-active-charts";
import RoomOperationLog from "./room-operation-log";
import { approvalData } from "@/api/approval";
import { copyText } from "@/utils";
function getFormData() {
  return {
    id: "",
    roomCover: "",
    roomName: "",
    roomDesc: "",
    countryCode: "",
    event: "",
    maxAdmin: 0
  };
}
// 权限变更
function getFormData4() {
  return {
    roomId: "",
    userAccount: "",
    roles: ""
  };
}
// 移除/拉黑成员
function getFormData3() {
  return {
    sysOrigin: "",
    roomAccount: "",
    userAccount: "",
    event: ""
  };
}
export default {
  components: {
    RoomDeatilsDrawer,
    ProfileUserDrawer,
    VisitorLogDrawer,
    RoomActiveCharts,
    RoomOperationLog
  },
  data() {
    return {
      updateProfileRow: {},
      roomRoles,
      roomOperationLogVisible: false,
      roomActiveVisible: false,
      pushTextHistoryLoading: false,
      pushTextHistory: [],
      list: [],
      listNotData: false,
      roomDeatilsDrawerVisible: false,
      roomUserDeatilsDrawerVisible: false,
      roomVisitorLogVisible: false,
      roomId: "",
      roomEvents,
      textOptVisible: false,
      textOptTitle: "",
      approveType: "",
      approvalUserId: "",
      approvalContent: "",
      approvalRoomId: "",
      sysOperatingRoomUserEvent,
      listQuery: {
        limit: 20,
        lastId: "",
        sysOrigin: "",
        roomId: "",
        roomAccount: "",
        userId: "",
        del: "0",
        event: ""
      },
      formVisible: false,
      form: getFormData(),
      form4: getFormData4(),
      submitLoading: false,
      submitLoading3: false,
      formVisible3: false,
      textOptTitle3: "",
      submitLoading4: false,
      formVisible4: false,
      textOptTitle4: "",
      form3: getFormData3(),
      listLoading: true,
      uploadLoading: false
    };
  },
  computed: {
    ...mapGetters(["permissionsSysOriginPlatforms", "buttonPermissions"]),
    localizedRoomEvents() {
      const roomEventNameMap = {
        AVAILABLE: "normal",
        CLOSE: "closed",
        WAITING_CONFIRMED: "waitingConfirmed",
        ID_CHANGE: "idChanged"
      };
      return this.roomEvents.map(item => ({
        ...item,
        name: this.$t(
          `pages.roomProfile.row.${roomEventNameMap[item.value] || "unknown"}`
        )
      }));
    },
    localizedRoomRoles() {
      const roomRoleNameMap = {
        HOMEOWNER: "homeowner",
        ADMIN: "admin",
        MEMBER: "member"
      };
      return this.roomRoles.map(item => ({
        ...item,
        name: this.$t(
          `pages.roomProfile.option.role.${roomRoleNameMap[item.value] || "member"}`
        )
      }));
    },
    localizedSysOperatingRoomUserEvent() {
      const roomUserEventNameMap = {
        SYS_PULL_BLACK_ROOM_USER: "blacklistUser",
        SYS_REMOVE_ROOM_PULL_BLACK_USER: "removeFromBlacklist",
        SYS_REMOVE_ROOM_USER: "kickOutRoom"
      };
      return this.sysOperatingRoomUserEvent.map(item => ({
        ...item,
        name: this.$t(
          `pages.roomProfile.option.event.${roomUserEventNameMap[item.value]}`
        )
      }));
    },
    localizedRules() {
      return {
        roomCover: [
          {
            required: true,
            message: this.$t("pages.roomProfile.validation.uploadCover"),
            trigger: "blur"
          }
        ],
        roomName: [
          {
            required: true,
            message: this.$t("pages.roomProfile.validation.inputRoomName"),
            trigger: "blur"
          }
        ],
        maxAdmin: [
          {
            required: true,
            message: this.$t("pages.roomProfile.validation.inputMaxAdmin"),
            trigger: "blur"
          },
          {
            type: "number",
            message: this.$t("pages.roomProfile.validation.mustBeNumber"),
            trigger: "blur"
          }
        ],
        countryId: [
          {
            required: true,
            message: this.$t("pages.roomProfile.validation.selectCountry"),
            trigger: "blur"
          }
        ]
      };
    }
  },
  created() {
    const that = this;
    const querySystem = this.permissionsSysOriginPlatforms[0];
    if (!querySystem) {
      return;
    }
    that.listQuery.sysOrigin = querySystem.value;
    this.renderData();
  },
  methods: {
    getRoomStatusText(event) {
      const roomEventNameMap = {
        AVAILABLE: "normal",
        CLOSE: "closed",
        WAITING_CONFIRMED: "waitingConfirmed",
        ID_CHANGE: "idChanged"
      };
      return this.$t(
        `pages.roomProfile.row.${roomEventNameMap[event] || "unknown"}`
      );
    },
    getRoomStatusTagType(event) {
      const roomEventTypeMap = {
        AVAILABLE: "success",
        ID_CHANGE: "info",
        WAITING_CONFIRMED: "warning",
        CLOSE: "danger"
      };
      return roomEventTypeMap[event] || "danger";
    },
    renderData(isClean) {
      const that = this;
      if (isClean === true) {
        that.list = [];
        that.listQuery.lastId = null;
      }
      that.listLoading = true;
      pofileTable(that.listQuery)
        .then(res => {
          that.listLoading = false;
          that.list = that.list.concat(res.body || []);
          that.listNotData = !res.body || res.body.length <= 0;
          if (that.list && that.list.length > 0) {
            that.listQuery.lastId = that.list[that.list.length - 1].id;
          }
        })
        .catch(er => {
          console.error(er);
          that.listLoading = false;
        });
    },
    copyContent(conent) {
      const that = this;
      if (!conent) {
        that.$opsMessage.fail();
        return;
      }
      copyText(conent)
        .then(res => {
          that.$opsMessage.success();
        })
        .catch(er => {
          that.$opsMessage.fail();
        });
    },

    // 审批房间
    editApproval(row, type) {
      this.approveType = type;
      this.approvalUserId = row.userId;
      this.approvalRoomId = row.id;
      if (type === "ROOM_NICKNAME") {
        this.approvalContent = row.roomName;
        this.textOptTitle = this.$t("pages.roomProfile.dialog.roomNicknameApproval");
      }
      if (type === "ROOM_AVATAR") {
        this.approvalContent = row.roomCover;
        this.textOptTitle = this.$t("pages.roomProfile.dialog.roomAvatarApproval");
      }
      if (type === "ROOM_NOTICE") {
        this.textOptTitle = this.$t("pages.roomProfile.dialog.roomNoticeApproval");
        this.approvalContent = row.roomDesc;
      }
      this.textOptVisible = true;
    },
    pass() {
      const that = this;
      that.listLoading = true;
      approvalData({
        approvalType: that.approveType,
        approvalStatus: "PASS",
        waitApprovalUser: that.getApprovalParams()
      })
        .then(res => {
          that.listLoading = false;
          that.textOptVisible = false;
          that.$opsMessage.success();
          that.renderData();
        })
        .catch(() => {
          that.listLoading = false;
        });
    },
    notpass() {
      const that = this;
      that.listLoading = true;
      approvalData({
        approvalType: that.approveType,
        approvalStatus: "NOT_PASS",
        waitApprovalUser: that.getApprovalParams()
      })
        .then(res => {
          that.listLoading = false;
          that.textOptVisible = false;
          that.$opsMessage.success();
          that.renderData();
        })
        .catch(() => {
          that.listLoading = false;
        });
    },
    getApprovalParams() {
      const that = this;
      const approvalParams = [
        {
          userId: that.approvalUserId,
          contentId: that.approvalRoomId,
          content: that.approvalContent
        }
      ];
      return approvalParams;
    },
    handleSearch() {
      this.renderData(true);
    },
    renderDataSuccess() {
      this.$message({
        message: "Successful",
        type: "success"
      });
      this.renderData();
    },

    // 移除/拉黑成员
    handleRemoveOrPullBlack() {
      this.textOptTitle3 = this.$t("pages.roomProfile.dialog.removeOrBlacklist");
      this.formVisible3 = true;
      this.form3 = {};
    },
    queryUserDetails(row) {
      this.userDeatilsDrawer = true;
      this.thatSelectedUserId = row.id;
    },

    // 权限变更
    handleChangeRole() {
      this.textOptTitle4 = this.$t("pages.roomProfile.dialog.roomPermissionChange");
      this.formVisible4 = true;
      this.form4 = {};
    },
    submitChangeRoleForm() {
      const that = this;
      that.submitLoading4 = true;
      that.form4.sysOrigin = that.listQuery.sysOrigin;
      changeRole(that.form4)
        .then(res => {
          if (res.status !== 200) {
            that.$opsMessage.fail(res.errorMsg);
          } else {
            that.$opsMessage.success();
          }
          that.submitLoading4 = false;
          that.formVisible4 = false;
          this.form4 = getFormData3();
          this.renderData();
        })
        .catch(er => {
          that.submitLoading4 = false;
          console.error(er);
          this.$emit("fail");
        });
    },
    httpRequest(file) {
      const that = this;
      that.uploadLoading = true;
      this.$simpleUploadFlie(file)
        .then(res => {
          that.uploadLoading = false;
          //console.log('2222', getAccessImgUrl(res.name))
          that.form.roomCover = getAccessImgUrl(res.name);
          // getAccessImgUrl(res.name).then((result) => {
          //   console.log('111111', result)
          //   that.form.roomCover = result.result
          // })
        })
        .catch(er => {
          that.uploadLoading = false;
        });
    },
    submitForm() {
      const that = this;
      that.$refs.form.validate(valid => {
        if (valid) {
          that.submitLoading = true;
          if (that.form.id) {
            updateProfile(that.form)
              .then(res => {
                that.submitLoading = false;
                that.formVisible = false;
                that.updateProfileRow.roomCover = that.form.roomCover;
                that.updateProfileRow.roomName = that.form.roomName;
                that.updateProfileRow.roomDesc = that.form.roomDesc;
                that.updateProfileRow.event = that.form.event;
                that.updateProfileRow.maxAdmin = that.form.maxAdmin;
                that.form = getFormData();
              })
              .catch(er => {
                that.submitLoading = false;
                that.$emit("fial", er);
              });
            return;
          }
        } else {
          console.error("error submit!!");
          return false;
        }
      });
    },

    // 房间资料详情
    queryRoomDetails(roomId) {
      this.roomDeatilsDrawerVisible = true;
      this.roomId = roomId;
    },

    // 成员列表
    queryRoomUserDetails(roomId) {
      this.roomUserDeatilsDrawerVisible = true;
      this.roomId = roomId;
    },
    handleClose() {
      this.textOptVisible = false;
      this.formVisible = false;
      this.formVisible2 = false;
      this.formVisible3 = false;
      this.formVisible4 = false;
      this.resetForm();
    },
    resetForm() {
      this.form = getFormData();
      this.form3 = getFormData3();
      this.form4 = getFormData4();
    },
    submitRemoveOrPullBlackForm() {
      const that = this;
      that.submitLoading3 = true;
      that.form3.sysOrigin = that.listQuery.sysOrigin;
      removeOrPullBlackRoomUser(that.form3)
        .then(res => {
          that.submitLoading3 = false;
          that.formVisible3 = false;
          that.resetForm();
          that.renderData(true);
        })
        .catch(er => {
          that.submitLoading3 = false;
          console.error(er);
          this.$emit("fail");
        });
    },

    // 编辑资料
    handleUpdate(row) {
      this.formVisible = true;
      this.updateProfileRow = row;
      this.form = Object.assign(this.form, row);
      // 强制转换为 number 类型
      this.form.maxAdmin = Number(row.setting.maxAdmin) || 0;
    },

    // 访客记录
    queryRoomVisitorLog(roomId) {
      this.roomVisitorLogVisible = true;
      this.roomId = roomId;
    },

    // 活跃指标
    clickRoomActive(row) {
      this.roomId = row.id;
      this.roomActiveVisible = true;
    },

    // 操作日志
    clickQueryRolesChangeLog(row) {
      this.roomId = row.id;
      this.roomOperationLogVisible = true;
    }
  }
};
</script>

<style scoped lang="scss">
.load-more {
  padding: 10px 0px;
}
.room-profile {
  text-align: left;
  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .info {
    padding: 0px 5px;
    width: 100%;
  }
}
</style>
