<template>
  <div class="list">
    <dl
      v-infinite-scroll="getList"
      :infinite-scroll-disabled="disabled"
      infinite-scroll-immediate="false"
    >
      <dt>
        <div>头像</div>
        <div>uid</div>
        <div>加入时间</div>
        <div>到期时间</div>
        <div>操作</div>
      </dt>
      <dd v-for="item in list" :key="item.id">
        <div><img src="" alt="" /></div>
        <div>
          <div>
            <p>{{ item.privateUserId }}</p>
            <p>{{ item.privateUserName }}</p>
          </div>
        </div>
        <div>
          <p>数据缺失</p>
        </div>
        <div>
          <p>数据缺失</p>
        </div>
        <div>
          <div>
            <el-link
              type="success"
              :underline="false"
              @click="toPrivateChat(item)"
              >私聊</el-link
            >
          </div>
          <div>
            <el-link type="success" @click="prohibition(item)">{{
              item.isForbidden === 1 ? "取消禁言" : "禁言"
            }}</el-link>
          </div>
        </div>
      </dd>
    </dl>
    <p v-if="loading" class="load-tip">加载中...</p>
    <p v-if="!hasNext" class="load-tip">没有更多了...</p>
    <p v-else-if="!loading && hasNext" class="load-tip">下拉加载更多...</p>
    <forbidSpeak
      ref="forbidSpeakRef"
      :product-type="41"
      :product-id="groupId"
      :scope="2"
      @callback="forbidSpeakCallback"
    />
  </div>
</template>
<script>
import { removeCommentBlack } from "@/api/videoLive";
import forbidSpeak from "../../../components/forbidSpeak.vue";
export default {
  components: { forbidSpeak },
  props: {
    groupId: {
      type: Number,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    },
    hasNext: {
      type: Boolean,
      default: true
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentUserObj: {} // 当前操作的用户
    };
  },
  computed: {
    disabled() {
      return this.loading || !this.hasNext;
    }
  },
  methods: {
    modifyStateCallback(item) {
      this.$emit("modifyStateCallback", item);
    },
    prohibition(item) {
      if (item.isForbidden === 1) {
        this.$confirm(`您确定取消禁言?`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            removeCommentBlack({
              userPhone: item.privateUserId,
              productId: this.groupId,
              productType: 41
            }).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "取消禁言成功",
                  showClose: false,
                  type: "success"
                });
                item.isForbidden = 2;
                this.modifyStateCallback({
                  userId: item.privateUserId,
                  isForbidden: 2,
                  modifyType: 2
                });
              }
            });
          })
          .catch(() => {});
      } else {
        this.currentUserObj = item;
        const forbidSpeakRef = this.$refs.forbidSpeakRef;
        forbidSpeakRef.dialogFormVisible = true;
        forbidSpeakRef.formProhibition.userName = item.privateUserName;
        forbidSpeakRef.formProhibition.phone = item.privateUserId;
        forbidSpeakRef.formProhibition.content = item.content;
      }
    },
    forbidSpeakCallback() {
      this.currentUserObj.isForbidden = 1;
      this.modifyStateCallback({
        userId: this.currentUserObj.privateUserId,
        isForbidden: 1,
        modifyType: 2
      });
    },
    getList() {
      this.$emit("getList");
    },
    toPrivateChat(item) {
      this.$emit("toPrivateChat", item);
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  background: #fff;
}
dl {
  list-style: none;
  margin: 0;
  padding: 0;
  list-style: none;
  padding: 10px;
  dt {
    padding: 10px 0;
  }
  dd {
    margin: 0;
    padding: 0;
  }
  dt,
  dd {
    display: flex;
    border-bottom: 1px dashed #999;
    & > div {
      display: flex;
      // flex-direction: column;
      justify-content: center;
      padding: 6px 0;
      align-items: center;
    }
    & > div:nth-child(1) {
      width: 60px;
    }
    & > div:nth-child(2) {
      flex: 1;
      text-align: center;
    }
    & > div:nth-child(3) {
      width: 100px;
      text-align: center;
    }
    & > div:nth-child(4) {
      width: 100px;
      text-align: center;
    }
    & > div:nth-child(5) {
      display: block;
      width: 60px;
      text-align: right;
      & > div {
        text-align: right;
      }
    }
    p {
      font-size: 14px;
      margin: 0;
      line-height: 20px;
    }
    ::v-deep .el-button--medium {
      padding: 4px 8px;
    }
    img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
  }
}
.load-tip {
  text-align: center;
  line-height: 50px;
}
</style>
