<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="43.5%"
    :before-close="handleClose"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :append-to-body="true"
    v-loading.fullscreen.lock="fullscreenLoading"
    class="dialogDetail_session"
  >
    <template slot="title">
      <div class="dialogDetail_title">
        <!-- <img
          style="width: 50px; height: 50px"
          src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          alt=""
        /> -->
        <div class="dialogDetail_title_text">{{ form.conversationName }}</div>
      </div>
    </template>
    <el-form>
      <el-form-item>
        <div style="margin-right: -20px">
          <div
            v-for="(item, index) in form.userRelList"
            :key="index"
            style="
              display: inline-block;
              text-align: center;
              margin-right: 20px;
            "
          >
            <div style="height: 50px">
              <div v-if="item.avatar">
                <div class="sessionManagement_icon_titleimg">
                  <el-image
                    style="width: 50px; height: 50px; border-radius: 4px"
                    :src="item.avatar"
                  ></el-image>
                  <div
                    v-if="item.owner == 1"
                    class="sessionManagement_icon_title_owner"
                  >
                    <div class="sessionManagement_icon_title_username">
                      群主
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="sessionManagement_icon_title">
                {{ item.userName.slice(-2) }}
                <div
                  v-if="item.owner == 1"
                  class="sessionManagement_icon_title_owner"
                >
                  <div class="sessionManagement_icon_title_username">群主</div>
                </div>
              </div>
            </div>
            <div>{{ item.userName }}</div>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="dialogDetail_list">
          <div>新成员是否可查看100条历史消息：</div>
          <div>{{ form.showHistoryType == 0 ? '不可查看' : '可查看' }}</div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="dialogDetail_list">
          <div>群是否可以被搜索：</div>
          <div>{{ form.searchable == 0 ? '不可搜索' : '可搜索' }}</div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="dialogDetail_list">
          <div>入群是否需要验证：</div>
          <div>{{ form.validationType == 0 ? '不验证' : '入群验证' }}</div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="dialogDetail_list">
          <div>@all 适用范围：</div>
          <div>
            {{ form.mentionAllAuthority == 0 ? '所有人使用' : '仅群主可@all' }}
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="dialogDetail_list">
          <div>群管理类型：</div>
          <div>
            {{ form.managementType == 0 ? '所以人可管理' : '仅群主可管理' }}
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="dialogDetail_listsEnd">
          <div>是否开启群禁言：</div>
          <div>{{ form.chatBannedType == 0 ? '不禁言' : '全体禁言' }}</div>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import * as api from '@/api/api'
export default {
  data() {
    return {
      fullscreenLoading: false,
      dialogVisible: false,
      form: {}
    }
  },
  methods: {
    // 关闭弹框
    handleClose() {
      this.dialogVisible = false
      this.$parent.search()
    },
    // d打开弹框
    openClose(val) {
      this.dialogVisible = true
      if (val) {
        this.dataList(val)
      }
    },
    // 会话详情
    dataList(val) {
      this.fullscreenLoading = true
      api
        .GET(`/conversation/detail/${val.id}`)
        .then(res => {
          if (res.code == 0) {
            this.form = res.data
            // unshift
            this.form.userRelList.find((item, index) => {
              if (item.owner == 1) {
                // 提取群主放在第一位
                let code = item
                this.form.userRelList.splice(index, 1)
                this.form.userRelList.unshift(code)
              }
            })
            this.fullscreenLoading = false
          }
        })
        .catch(() => {
          this.fullscreenLoading = false
        })
    }
  }
}
</script>
<style lang="less">
.dialogDetail_session {
  .el-dialog__body {
    padding: 30px 20px 6px;
  }
  .dialogDetail_title {
    display: flex;
    height: 50px;
    line-height: 50px;
    padding: 10px;
    .dialogDetail_title_text {
      margin-left: 10px;
      color: #1a1a1a;
      font-weight: 400;
      font-size: 16px;
    }
  }
  .dialogDetail_list {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e1e1e1;
  }
  .dialogDetail_listsEnd {
    display: flex;
    justify-content: space-between;
  }
  .sessionManagement_icon_titleimg {
    position: relative;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    height: 50px;
  }
  .sessionManagement_icon_title {
    width: 50px;
    height: 50px;
    background: #0f85ff;
    text-align: center;
    color: #fff;
    line-height: 50px;
    position: relative;
    border-radius: 4px;
  }
  .sessionManagement_icon_title_owner {
    width: 50px;
    height: 20px;
    position: absolute;
    z-index: 99;
    bottom: -10px;
    line-height: 20px;
  }
  .sessionManagement_icon_title_username {
    width: 40px;
    background: #fff;
    font-size: 12px;
    color: #0f85ff;
    border-radius: 10px;
    margin: 0 auto;
  }
}
</style>