<template>
  <view class="anchor-library">
    <view class="bg">
      <image
        class="bgImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="Return" @click="onBack">
      <image
        class="ReturnImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
        mode="scaleToFill"
      />
    </view>
    <view class="title">主播库</view>
    <view class="content">

      <scroll-view
      show-scrollbar="false"
        scroll-y="true"
        class="scroll"
        refresher-enabled="true"
        refresher-threshold="40"
        @refresherrefresh="onRefresherRefresh"
        lower-threshold="100"
        :refresher-triggered="triggered"
        v-if="AnchorList.length !== 0"
      >
        <uni-card class="card" v-for="(item, index) in AnchorList" :key="index">
          <view class="Profile">
            <image
              :src="item.headerIcon"
              style="width: 89.12rpx; height: 89.12rpx; border-radius: 72.25rpx"
              mode="scaleToFill"
            />
          </view>
          <view class="Individual">
            <view class="Name">{{ item.anchorId }}</view>

            <view class="Label">
              <view>
                <view
                  :class="{
                    Gendermale: item.gender === 1,
                    Genderfemale: item.gender === 2,
                  }"
                >
                  <image
                    v-if="item.gender === 2"
                    class="Genderimg"
                    src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/female.png"
                    mode="scaleToFill"
                  />
                  <image
                    v-else
                    class="Genderimg"
                    src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/male.png"
                    mode="scaleToFill"
                  />
                  <view class="age">{{ item.gender === 1 ? "男" : "女" }}</view>
                </view>
              </view>
              <view class="state">{{ item.country }}</view>
            </view>
          </view>
          <!-- <view class="handle"> -->
          <view class="handle">
            <view class="recompose" @click="onRecompose(item)">
              <image
                style="width: 46rpx; height: 46rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/recompose.png"
                mode="scaleToFill"
              />
            </view>
            <view class="expurgate" @click="onExpurgate(item)">
              <image
                style="width: 46rpx; height: 46rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
                mode="scaleToFill"
              />
            </view>
          </view>
        </uni-card>
      </scroll-view>
      <view v-else class="empty">暂无内容</view>
    </view>
    <view class="addition" @click="openPopupQuantity()"> </view>
  </view>
  <anchorLibrary class="createModule" ref="createModule" @Refresh="getAnchorList"></anchorLibrary>
  <modifyStreamer ref="modifyStreamer" class="createModule" :message="modifyStreamerMessage" @Refresh="getAnchorList"></modifyStreamer>
</template>

<script>
import request from "../../../components/request.js";
import anchorLibrary from "./addStreamer/addStreamer.vue";
import modifyStreamer from "./modifyStreamer/modifyStreamer.vue";
export default {
  data() {
    return {
      userinfo: {},
      AnchorList: [],
      triggered: false,
      modifyStreamerMessage: {},
    };
  },
  onLoad() {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.userinfo = res.data;
        this.getAnchorList();
      },
    });
  },
  methods: {
    // 重新编辑主播信息
    onRecompose(item) {
        this.modifyStreamerMessage = item;
        this.$refs.modifyStreamer.open();
    },
    // 删除主播信息
    onExpurgate(item) {
      const res = request({
        url: "anchor/deleteMyAnchor",
        method: "POST",
        data: {
          id: item.id,
        },
        userInfo: true,
      }).then((res) => {
        this.triggered = false;
        if (res.code == 200) {
          uni.showToast({
            title: "删除成功",
            icon: "success",
            duration: 2000,
          });
          this.getAnchorList();
        } else {
          uni.showToast({
            title: res.msg,
            icon: "success",
            duration: 2000,
          });
        }
      });
    },
    //获取主播列表
    getAnchorList() {
      const res = request({
        url: "anchor/list",
        method: "POST",
        data: {
          id: this.userinfo.id,
        },
        userInfo: true,
      }).then((res) => {
        this.triggered = false;
        if (res.code == 200) {
          this.AnchorList = res.data;
        } else {
          console.log(res.msg);
        }
      });
    },
    //打开弹窗，添加主播
    openPopupQuantity() {
      this.$refs.createModule.open();
    },
    // 下拉刷新
    onRefresherRefresh() {
      this.triggered = true;
      this.getAnchorList();
    },
    // 返回上一页
    onBack() {
      wx.navigateBack({
        delta: 1,
      });
    },
  },
  components: {
    anchorLibrary,
    modifyStreamer
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.Return {
  position: absolute;
  top: 110rpx;
  left: 35rpx;
  width: 46rpx;
  height: 46rpx;
}
.title {
  position: absolute;
  top: 120rpx;
  left: 335rpx;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
.scroll {
  position: absolute;
  top: 200rpx;
  left: 0;
  right: 0;
  height: 1300rpx;
  width: 100%;
}
.empty{
  position: absolute;
  top: 200rpx;
  left: 0;
  right: 0;
  height: 1300rpx;
  width: 100%;
  line-height: 1300rpx;
  text-align: center;
  font-size: 30rpx;
  color: #a3a3a3;
}
.card {
  width: 695rpx;
  height: 180rpx;
  background: #ffffff;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  margin-top: 20rpx;
}
.Profile {
  width: 89rpx;
  height: 89rpx;
  border-radius: 50rpx;
  background-color: #cccccc;
  margin-left: 27.5rpx;
}
.Gendermale {
  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/maleimg.png)
    no-repeat center;
  width: 56.3rpx;
  height: 29.58rpx;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  margin-right: 10rpx;
}
.Genderfemale {
  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/femaleimg.png)
    no-repeat center;
  width: 56.3rpx;
  height: 29.58rpx;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  margin-right: 10rpx;
}
.Individual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 37rpx;
}
.Name {
  width: 288.17rpx;
  font-size: 30.53rpx;
  color: #161616;
  font-weight: 500;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.time {
  margin-top: 13rpx;
  font-size: 23rpx;
  color: #a3a3a3;
}
.state {
  width: 56.3rpx;
  height: 30rpx;
  background: #f6f6f6;
  border-radius: 14rpx;
  line-height: 30rpx;
  font-size: 17rpx;
  color: #666666;
  padding: 0 15rpx;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  text-align: center;
}
.Label {
  margin-top: 15rpx;
  display: flex;
}
.age {
  font-size: 17rpx;
  color: #ffffff;
  margin-left: 10rpx;
}
.Genderimg {
  width: 14.22rpx;
  height: 14.22rpx;
  margin-left: 10rpx;
}
.species {
  display: flex;
  margin-left: 10rpx;
}
.species-text {
  font-size: 23rpx;
  color: #a3a3a3;
}
.species-num {
  font-size: 23rpx;
  color: #161616;
  font-weight: bold;
}
.handle {
  display: flex;
}
.recompose {
  width: 46rpx;
  height: 46rpx;
  margin-left: 90rpx;
}
.expurgate {
  width: 46rpx;
  height: 46rpx;
  margin-left: 40rpx;
}
.createModule {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 998;
  width: 100vw;
}
.addition {
  position: absolute;
  bottom: 200rpx;
  right: 100rpx;
  width: 150rpx;
  height: 150rpx;
  z-index: 998;
  border-radius: 50rpx;
  /* background-color: #ffffff; */
  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/addAnchor.png)
    no-repeat center;
  background-size: 100% 100%;
}
</style>
