<template>
  <div class="room-info-content">
    <div v-loading="roomProfileLoading" class="header-content">
      <div class="avatar">
        <avatar :url="roomDetails.roomCover" size="small" />
      </div>
      <div class="right">
        <div class="text">{{ roomDetails.roomName }}</div>
      </div>
    </div>
    <div class="content-info">
      <el-collapse v-model="nActiveCollapseNames">
        <el-collapse-item title="" name="profileInfo">
          <template slot="title">
            <i class="el-icon-s-custom" />&nbsp;{{ $t('pages.roomInfo.section.profileInfo') }}
          </template>
          <div class="block-info">

            <div v-if="userProfile" class="flex-l">
              <div class="avatar">
                <avatar :url="userProfile.userAvatar" size="mini" />
              </div>
              <div class="right" style="margin-left: 20px;">
                <div class="text">{{ userProfile.userNickname }}</div>
              </div>
            </div>

            <div class="text-item">
              <el-row>
                <el-col :span="12">{{ $t('pages.roomInfo.label.roomId') }}：{{ roomDetails.id }}</el-col>
                <el-col :span="12">{{ $t('pages.roomInfo.label.account') }}：{{ getAccountText() }}</el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col :span="12">{{ $t('pages.roomInfo.label.userId') }}：{{ roomDetails.userId }}</el-col>
                <el-col :span="12" class="icon-item">{{ $t('pages.roomInfo.label.country') }}：
                  <flag-icon class="flag-icon" :code="roomDetails.countryCode" :tooltip="roomDetails.countryName" size="28" />
                </el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col :span="12">{{ $t('pages.roomInfo.label.status') }}：
                  <el-tag v-if="roomDetails.event === 'AVAILABLE'" size="mini" type="success">{{ $t('pages.roomInfo.status.available') }}</el-tag>
                  <el-tag v-else-if="roomDetails.event === 'ID_CHANGE'" size="mini" type="info">{{ $t('pages.roomInfo.status.idChange') }}</el-tag>
                  <el-tag v-else-if="roomDetails.event === 'WAITING_CONFIRMED'" size="mini" type="warning">{{ $t('pages.roomInfo.status.waitingConfirmed') }}</el-tag>
                  <el-tag v-else-if="roomDetails.event === 'CLOSE'" size="mini" type="danger">{{ $t('pages.roomInfo.status.close') }}</el-tag>
                  <el-tag v-else size="mini" type="danger">{{ $t('pages.roomInfo.status.unknown') }}</el-tag>
                </el-col>
                <el-col :span="12">{{ $t('pages.roomInfo.label.deleted') }}：
                  {{ getYesNoText(roomDetails.del) }}
                </el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col :span="12" class="icon-item">{{ $t('pages.roomInfo.label.platform') }}：
                  <div class="sys-icon">
                    <sys-origin-icon :icon="userProfile.sysOriginChild || userProfile.originSys" :desc="userProfile.originSys || userProfile.sysOriginChild" />
                  </div>
                </el-col>
              </el-row>
            </div>
            <div>
              <div>{{ $t('pages.roomInfo.label.notice') }}：{{ roomDetails.roomDesc }}</div>
            </div>
            <div class="text-item">
              <el-row>
                <el-col :span="12">
                  {{ $t('pages.roomInfo.label.createdAt') }}：{{ roomDetails.createTime }}
                </el-col>
                <el-col :span="12">
                  {{ $t('pages.roomInfo.label.updatedAt') }}：{{ roomDetails.updateTime }}
                </el-col>
              </el-row>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="" name="settingInfo">
          <template slot="title">
            <i class="el-icon-s-opportunity" />&nbsp;{{ $t('pages.roomInfo.section.settingInfo') }}
          </template>
          <div class="block-info">
            <div class="text-item">
              <el-row>
                <el-col :span="12">{{ $t('pages.roomInfo.label.roomPassword') }}：{{ roomDetails.setting.password ? roomDetails.setting.password : $t('pages.roomInfo.word.none') }}</el-col>
                <el-col :span="12">{{ $t('pages.roomInfo.label.joinGolds') }}：{{ roomDetails.setting.joinGolds || 0 }}</el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col :span="12">{{ $t('pages.roomInfo.label.memberCount') }}：{{ roomDetails.counter.memberCount }}/{{ roomDetails.setting.maxMember }}</el-col>
                <el-col :span="12">{{ $t('pages.roomInfo.label.adminCount') }}：{{ roomDetails.counter.adminCount }}/{{ roomDetails.setting.maxAdmin }}</el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col :span="12">{{ $t('pages.roomInfo.label.takeMicRole') }}：{{ roomDetails.setting.takeMicRole || '-' }}</el-col>
                <el-col :span="12">{{ $t('pages.roomInfo.label.mikeSize') }}：{{ roomDetails.setting.mikeSize || '-' }}</el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col :span="12">{{ $t('pages.roomInfo.label.touristMike') }}：{{ getPermissionText(roomDetails.setting.touristMike) }}</el-col>
                <el-col :span="12">{{ $t('pages.roomInfo.label.touristMsg') }}：{{ getPermissionText(roomDetails.setting.touristMsg) }}</el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col :span="12">{{ $t('pages.roomInfo.label.allowMusic') }}：{{ getPermissionText(roomDetails.setting.allowMusic) }}</el-col>
                <el-col :span="12">{{ $t('pages.roomInfo.label.adminLockSeat') }}：{{ getPermissionText(roomDetails.setting.adminLockSeat) }}</el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col :span="12">{{ $t('pages.roomInfo.label.showHeartbeat') }}：{{ getPermissionText(roomDetails.setting.showHeartbeat) }}</el-col>
              </el-row>
            </div>
          </div>
        </el-collapse-item>
        <!-- <el-collapse-item title="" name="propsInfo">
          <template slot="title">
            <i class="el-icon-s-opportunity" />&nbsp;装饰道具
          </template>
          <div class="block-info">
            <div v-if="roomDetails.useProps && roomDetails.useProps.length > 0" class="text-item flex-l">
              <el-tooltip v-for="(item, index) in roomDetails.useProps" :key="index" class="item" effect="dark">
                <div slot="content">
                  <div v-if="item.propsResources">
                    <div>ID:{{ item.propsResources.id }}</div>
                    <div>道具类型:{{ item.propsResources.type }}</div>
                    <div>道具编号:{{ item.propsResources.code }}</div>
                    <div>道具名称:{{ item.propsResources.name }}</div>
                  </div>
                  <div>过期时间:{{ item.expireTime | dateFormat('yyyy-MM-dd HH:mm:ss') }}</div>
                </div>

                <el-image
                  v-if="item.propsResources"
                  style="width: 50px; height: 50px"
                  :src="item.propsResources.cover"
                  :preview-src-list="[item.propsResources.cover]"
                />
              </el-tooltip>
            </div>
          </div>
        </el-collapse-item> -->
        <el-collapse-item title="" name="badgeInfo">
          <template slot="title">
            <i class="el-icon-s-opportunity" />&nbsp;{{ $t('pages.roomInfo.section.badgeInfo') }}
          </template>
          <div class="block-info">
            <div v-if="roomDetails.useBadges && roomDetails.useBadges.length > 0" class="text-item flex-l">
              <el-tooltip v-for="(item, index) in roomDetails.useBadges" :key="index" class="item" effect="dark">
                <div slot="content">
                  <div>ID:{{ item.id }}</div>
                  <div>{{ $t('pages.roomInfo.label.badgeName') }}:{{ item.badgeName }}</div>
                  <div>{{ $t('pages.roomInfo.label.badgeType') }}:{{ item.type }}</div>
                  <div>{{ $t('pages.roomInfo.label.badgeKey') }}:{{ item.badgeKey }}</div>
                  <div>{{ $t('pages.roomInfo.label.expireTime') }}:{{ item.expireTime | dateFormat('yyyy-MM-dd HH:mm:ss') }}</div>
                </div>
                <el-image
                  style="width: 50px; height: 50px"
                  :src="item.selectUrl"
                  :preview-src-list="[item.selectUrl]"
                />
              </el-tooltip>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import { getRoomProfileDetailsByRoomId } from '@/api/room'
import Avatar from '@/components/data/Avatar'
export default {
  name: 'RoomBaseInfo',
  components: { Avatar },
  props: {
    roomId: {
      type: String,
      required: true
    },
    activeCollapseNames: {
      type: Array,
      required: false,
      default: () => ['settingInfo', 'profileInfo']
    }
  },
  data() {
    return {
      nActiveCollapseNames: [],
      roomProfileLoading: true,
      roomDetails: {},
      userProfile: {},
      roomSettingInfo: {}
    }
  },
  watch: {
    roomId: {
      immediate: true,
      handler(newVal) {
        this.renderData(newVal)
      }
    },
    activeCollapseNames: {
      immediate: true,
      handler(newVal) {
        this.nActiveCollapseNames = newVal
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    getPermissionText(value) {
      return this.$t(value ? 'pages.roomInfo.word.allow' : 'pages.roomInfo.word.notAllow')
    },
    getYesNoText(value) {
      return this.$t(value ? 'pages.roomInfo.word.yes' : 'pages.roomInfo.word.no')
    },
    getAccountText() {
      const account = this.userProfile.account
      const specialAccount = this.userProfile.ownSpecialId && this.userProfile.ownSpecialId.account
      if (specialAccount) {
        return this.$t('pages.roomInfo.text.accountWithSpecial', {
          account,
          specialAccount,
          suffix: this.$t('pages.roomInfo.word.specialSuffix')
        })
      }
      return account
    },
    renderData(roomId) {
      const that = this
      that.roomProfileLoading = true
      getRoomProfileDetailsByRoomId(roomId).then(res => {
        that.roomProfileLoading = false
        const { body } = res
        that.roomDetails = body.profile || {}
        that.userProfile = body.userProfile || {}
      }).catch(er => {
        that.roomProfileLoading = false
        that.$emit('roomProfile')
      })
    }
  }
}
</script>
<style scoped lang="scss">
.room-info-content {
    .header-content {
         display: flex;
         justify-content: flex-start;
         .right {
           padding: 24px 0px 0px 20px;
         }
    }
    .block-info {
        position: relative;
        .text-item {
          height: 36px;
          line-height: 36px;
          font-size: 14px;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
        }
   }
   .icon-item {
    position: relative;
      .flag-icon {
        display: inline;
        position: absolute;
        bottom: -8px;
      }
      .sys-icon {
        display: inline;
        position: absolute;
        bottom: -3px;
      }
   }

}
</style>
