<template>
  <view
    v-if="Display"
    :class="[Display ? 'create-module' : 'close-animation ', 'Mask']"
    @click="open()"
  >
    <view @click.stop class="containers">
      <view class="container">
        <image
          class="Fork"
          @click="open()"
          src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Fork.png"
          mode="scaleToFill"
        />
        <view class="Titlecss">
          <view class="Star"></view>
          <view class="Title"></view>
          <view class="Star"></view>
        </view>

        <!-- <view class="Individual"> -->
        <view class="AnchorSelection">
        <view class="NameAnchor">
          <input
            class="NameAnchorcss"
            cursor-color="#666666"
            placeholder-style="color:#666666"
            @input="NameAnchor"
            placeholder="主播名称"
            @blur="blur"
            :value="nameAnchor"
          />
          <view v-if="nameAnchor === '' && Hint === true" class="Hint"
            >请检查主播名称是否正确</view
          >
        </view>
        <view class="AnchorSelectioncss" @click="chooseMyStreamer">选择我的主播</view>
      </view>
        <!-- </view> -->

        <view class="Accountnumber">
          <view class="Coins country">
            <wht-select
              style="width: 350rpx"
              backgroundColor="#ffffff"
              placeholderColor="#666666"
              textColor="#666666"
              borderColor="#ffffff"
              @change="country"
              :options="Country"
              :filterable="filterable"
              placeholder="请选择国家"
              :value="countrys"
            />
            <view v-if="countrys === '' && Hint === true" class="Hint">请选择国家</view>
          </view>
          <view class="Gender">
            <view class="Gendercs">
              <view class="Gendercss">
                <wht-select
                  style="width: 300rpx"
                  backgroundColor="#ffffff"
                  placeholderColor="#666666"
                  textColor="#666666"
                  borderColor="#ffffff"
                  @change="gender"
                  :options="Gender"
                  placeholder="性别"
                  :value="genders"
                />
              </view>
              <view class="Gendericoncss">
                <image
                  v-if="genders === 0"
                  class="Gendericon"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/ask.png"
                  mode="scaleToFill"
                />
                <image
                  v-if="genders === 1"
                  class="Gendericon"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/man.png"
                  mode="scaleToFill"
                />
                <image
                  v-if="genders === 2"
                  class="Gendericon"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/girl.png"
                  mode="scaleToFill"
                />
              </view>
            </view>
            <view v-if="genders === 0 && Hint === true" class="Hintcss">请选择性别</view>
          </view>
        </view>

        <view class="goldCoin">
          <view class="number-box">
            <view class="number-box-title">金币数量:</view>
            <uni-number-box
              :max="9999999999"
              background="#03ABA8"
              v-model="numberCoins"
            ></uni-number-box>
            <view class="number-box-title">单位:</view>
            <view class="number-box-unit">K</view>
          </view>
          <view v-if="numberCoins === '' && Hint === true" class="Hint"
            >请填写金币数量</view
          >
        </view>

        <view class="time">
          <uni-datetime-picker
            type="datetime"
            hide-second="true"
            v-model="datetimesingle"
          />
          <view v-if="datetimesingle === '' && Hint === true" class="Hint"
            >请选择日期</view
          >
        </view>
        <view class="goldCoin">
          <view class="number-box">
            <view class="number-box-title">选择场数:</view>
            <uni-number-box background="#03ABA8" v-model="session"></uni-number-box>
            <view class="number-box-title">次</view>
          </view>
          <view v-if="session === '' && Hint === true" class="Hint">请填写场数</view>
        </view>
        <view class="Remarkscss">
          <uni-easyinput
            type="textarea"
            v-model="remarks"
            placeholder="备注"
            maxlength="-1"
          ></uni-easyinput>
        </view>

        <view class="Publish">
          <button @click="Publish()" class="Publishcss">发布</button>
        </view>
      </view>
    </view>
  </view>
  <!-- 弹窗 -->
  <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
    <view class="popup-container">
      <view class="popup-title">点击选择我的主播</view>
      <scroll-view show-scrollbar="false" scroll-y="true" class="scroll" v-if="AnchorList.length !== 0">
      <!--  -->
      <view class="card" v-for="(item, index) in AnchorList" :key="index">
            <view
              class="card-content"
              @click="Select(item.id, item)"
              :style="{
                background: selectedId === item.id ? '#b8ff8c74' : '#ffffff',
              }"
            >
              <view class="Avatarimg">
                <image class="avatar" :src="item.headerIcon" mode="scaleToFill" />
              </view>
              <view class="NameMoney">
                <view class="TimeMoney">
                  <view class="NameMoney_Name">{{ item.anchorId }}</view>
                </view>
                <view class="TimeMoney">
                  <view class="TimeMoney_country">{{ item.country }}</view>
                </view>
              </view>

            </view>
          </view>
        <!--  -->
      </scroll-view>
      <view v-if="AnchorList.length === 0" class="no-data"><view class="no-data-text">暂无数据</view></view>
      <view class="popup-btn">
        <button class="invite" type="primary" @click="invite()">确认</button>
        <button class="cancel" type="default" @click="close()">取消</button>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import optionsArray from "../../components/NationalDictionary.js";
import request from "../../components/request.js";

export default {
  data() {
    return {
      genders: 0, //性别
      Gender: [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ],
      Country: optionsArray,
      countrys: "", //国家
      nameAnchor: "", //主播名称
      numberCoins: "", //金币数量
      session: "", //场数
      remarks: "", //备注
      Display: false,
      Hint: false,
      datetimesingle: "", //日期
      id: null, //用户id
      sendingTime: "", //发送时间
      filterable: true, //是否可搜索
      AnchorProfilePicture: "", //主播头像
      AnchorList: [], //主播列表
      selectedId: null, //选择的主播
      selectedIddata: null, //选择的主播数据
    };
  },
  mounted() {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.id = res.data.id;
      },
    });
  },
  methods: {
    //关闭弹窗
    close() {
      this.$refs.popup.close();
    },
    //确认选择
    invite(){
      if (this.selectedId) {
        this.nameAnchor = this.selectedIddata.anchorId;
        this.AnchorProfilePicture = this.selectedIddata.headerIcon.split("/").pop();
        this.genders = this.selectedIddata.gender;
        this.countrys = this.selectedIddata.country;
        this.close();
      } else {
        uni.showToast({
          title: "请选择主播",
          icon: "none",
          duration: 2000,
        });
      }
    },
    //选中的主播
    Select(id, item) {
      if (this.selectedId !== id) {
      this.selectedId = id;
      this.selectedIddata = item;
      } else {
        this.selectedId = null;
        this.selectedIddata = null;
      }
    },
    //获取主播列表
    getAnchorList() {
      const res = request({
        url: "anchor/list",
        method: "POST",
        data: {
          id: this.id,
        },
        userInfo: true,
      }).then((res) => {
        this.triggered = false;
        if (res.code == 200) {
          this.AnchorList = res.data;
        } else {
          console.log(res.msg);
        }
      });
    },
    //选择我的主播
    chooseMyStreamer(){
      this.$refs.popup.open("center");
      this.getAnchorList() 
    },
    //性别
    gender(item) {
      this.genders = item.value;
    },
    //国家
    country(item) {
      this.countrys = item.value;
    },

    handleOverlayClick(event) {
      if (event.target === this.$el) {
        this.Display = false;
        this.Hint = false;
      }
    },
    open() {
      if (this.Display) {
        this.Display = false;
        this.Hint = false;
        this.nameAnchor = "";
        this.genders = 0;
        this.numberCoins = "";
        this.remarks = "";
        this.datetimesingle = "";
        this.countrys = "";
        this.session = "";
      } else {
        this.Display = true;
      }
    },
    //获取主播名称以及头像地址
    blur(event) {
      if (this.nameAnchor !== event.target.value) {
        this.nameAnchor = event.target.value;
        uni.showLoading({
          title: "正在验证主播",
          mask: true,
        });
        uni.request({
          url: "https://python.yolojt.com/api/" + this.nameAnchor,
          success: (res) => {
            if (res.data.code === 200) {
              uni.hideLoading();
              uni.showToast({
                title: "查询成功",
                icon: "none",
                duration: 3000,
              });
              this.AnchorProfilePicture = res.data.data;
            } else {
              uni.hideLoading();
              uni.showToast({
                title: "未查询到该主播",
                icon: "none",
                duration: 3000,
              });
            }
          },
          fail: function (res) {
            uni.hideLoading();
            uni.showToast({
              title: "网络请求失败",
              icon: "none",
              duration: 3000,
            });
          },
        });
      } else {
        return;
      }
    },
    async Publish() {
      //判断是否为空
      if (
        this.nameAnchor === "" ||
        this.genders === 0 ||
        this.numberCoins === "" ||
        this.countrys === "" ||
        this.datetimesingle === "" ||
        this.session === "" ||
        this.AnchorProfilePicture === ""
      ) {
        this.Hint = true;
        return;
      }
      //判断备注中是否有特殊字符
      if (this.remarks.includes(this.nameAnchor)) {
        uni.showToast({
          title: "备注中不能包含主播昵称",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      //格式化日期
      const isoString = this.datetimesingle.replace(" ", "T");
      const timestamp = Date.parse(isoString);
      if (isNaN(timestamp)) {
        throw new Error(`Invalid date format: ${this.datetimesingle}`);
      }
      this.sendingTime = Math.floor(timestamp / 1000);
      const secondsTimestamp = Math.floor(Date.now() / 1000);

      if (this.sendingTime < secondsTimestamp) {
        uni.showToast({
          title: "日期不能早于当前时间",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      //发送请求
      uni.showLoading({
        title: "发布中...",
        mask: true,
      });
      const res = await request({
        url: "pk/addPkData",
        method: "POST",
        data: {
          anchorId: this.nameAnchor,
          pkTime: this.sendingTime,
          sex: this.genders,
          country: this.countrys,
          coin: this.numberCoins,
          remark: this.remarks,
          senderId: this.id,
          anchorIcon: this.AnchorProfilePicture,
          pkNumber: this.session,
        },
        userInfo: true,
      });
      if (res.code === 200) {
        this.Display = false;
        this.Hint = false;
        this.nameAnchor = "";
        this.genders = 0;
        this.numberCoins = "";
        this.remarks = "";
        this.datetimesingle = "";
        this.session = "";
        this.AnchorProfilePicture = "";
        uni.hideLoading();
        uni.showToast({
          title: "发布成功",
          icon: "success",
          duration: 2000,
        });
        this.$emit('publishSuccess');
      } else {
        uni.hideLoading();
        uni.showToast({
          title: res.msg,
          icon: "none",
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style scoped>
/* 定义动画 */
/* 原始进入动画 */
@keyframes slide-in {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 新增关闭动画 */
@keyframes slide-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* 进入动画类 */
.create-module {
  animation: slide-in 0.3s ease-in-out;
}

/* 关闭动画类 */
.close-animation {
  animation: slide-out 0.3s ease-in-out forwards;
}

.Mask {
  width: 100vw;
  height: 100vh;
  background: #00000076;
  display: flex;
  flex-direction: column-reverse;
}
.Hint {
  color: rgb(255, 0, 0);
  font-size: 20rpx;
  margin-left: 30rpx;
  margin-top: 10rpx;
}
.Hintcss {
  color: rgb(255, 0, 0);
  font-size: 20rpx;
  margin-left: 30rpx;
  margin-top: 20rpx;
}
.containers {
  background-color: #ffffff;
  border-radius: 50rpx;
}
.container {
  display: flex;
  background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/bgv.png);
  background-size: 100% 100%;
  flex-direction: column;
  width: 100%;
  height: 1300rpx;
  border-radius: 50rpx;
  box-shadow: 0 0 10rpx #ccc;
}
.Fork {
  width: 46rpx;
  height: 46rpx;
  margin-top: 20rpx;
  /* margin-bottom: 40rpx; */
  margin-left: 90%;
}
.Titlecss {
  width: 100%;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Star {
  width: 50rpx;
  height: 50rpx;
  background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/star.png);
  background-size: 100% 100%;
}
.Title {
  width: 430rpx;
  height: 70rpx;
  background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Publishpk.png);
  background-size: 100% 200%;
  background-position: 0 100%;
  margin-left: 26rpx;
  margin-right: 26rpx;
}
.Individual {
  display: flex;
  /* justify-content: center; */
}
.NameAnchor {
  width: 90%;
  margin: 40rpx;
}
.time {
  width: 90%;
  margin-left: 5%;
  margin-top: 50rpx;
}
.AnchorSelection{
  display: flex;
  align-items: center;
}
.NameAnchorcss {
  width: 99%;
  height: 85rpx;
  background-color: #ffffff;
  border: 1rpx solid #bfbfbf;
  border-radius: 10rpx;
  text-align: center;
}
.AnchorSelectioncss{
  width: 30%;
  height: 60rpx;
  margin: 40rpx;
  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
  color: #ffffff;
  font-weight: bold;
  font-size: 18rpx;
  text-align: center;
  line-height: 60rpx;
  border-radius: 20rpx;
}
.Gender {
  width: 310rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.Gendercs {
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
.Gendercss {
  width: 200rpx;
  height: 60rpx;
}
.Gendericoncss {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: 1rpx solid #ff9d0067;
  margin-left: 20rpx;
  margin-top: 10rpx;
}
.Gendericon {
  width: 40rpx;
  height: 40rpx;
  /* margin-top: 10rpx;
  margin-right: 40rpx; */
}
.Accountnumber {
  display: flex;
  justify-content: center;
  margin-bottom: 60rpx;
  margin-top: 50rpx;
}
.Coins {
  width: 400rpx;
  height: 65rpx;
  /* display: flex; */
  margin-right: 10rpx;
  /* flex-direction: column; */
}
.country {
  margin-left: 10rpx;
}
.goldCoin {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.number-box {
  display: flex;
  justify-content: center;
  text-align: center;
}
.number-box-title {
  color: #191919;
  font-size: 30rpx;
  margin-right: 22rpx;
  margin-left: 17rpx;
}
.number-box-unit {
  color: #03aba8;
  width: 48rpx;
  height: 48rpx;
  border: 1rpx solid #03aba8;
  border-radius: 50%;
  line-height: 48rpx;
  text-align: center;
  /* color: #003cff5a; */
}
.Remarkscss {
  width: 90%;
  margin-top: 30rpx;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 50rpx;
  border-radius: 10rpx;
}

.Publish {
  margin-bottom: 40rpx;
  width: 90%;
  margin-left: 5%;
}
.Publishcss {
  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
  /* color: #33ff00; */
  color: #ffffff;
  font-weight: bold;
  border-radius: 50rpx;
}
.popup-container{
  width: 600rpx;
  height: 800rpx;
  background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
  background-position: center;
  border-radius: 10px;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-title{
  color: #161616;
  font-size: 36.26rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  margin-top: 30rpx;
}
.scroll{
  width: 90%;
  height: 500rpx;
}
.card{
  margin-top: 15rpx;
}
.card-content {
  /* width: 445rpx; */
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  /* border: 2px solid #afafaf; */
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: rgb(127, 127, 127);
}
.Avatarimg {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background-color: #dddddd;
  margin-right: 20rpx;
  margin-left: 20rpx;
}
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.NameMoney {
  display: flex;
  flex-direction: column;
}
.TimeMoney {
  width: 300rpx;
  display: flex;
  font-weight: bold;
  font-size: 27rpx;
  color: #161616;
}
.NameMoney_Name {
  width: 400rpx;
  text-align: left;
  font-weight: bold;
  font-size: 27rpx;
  color: #161616;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.TimeMoney_country{
  margin-top: 10rpx;
  width: 400rpx;
  text-align: left;
  font-size: 20rpx;
  color: #666;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.popup-btn {
  display: flex;
  justify-content: space-around;
  margin-top: 50rpx;
}
.invite {
  width: 225.19rpx;
  height: 78.24rpx;
  font-size: 28.63rpx;
  line-height: 80rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
}
.cancel {
  width: 225.19rpx;
  height: 78.24rpx;
  font-size: 28.63rpx;
  line-height: 80rpx;
  margin-left: 30rpx;
  color: #03aba8;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  border: 1rpx solid #03aba8;
}
.no-data{
  width: 90%;
  height: 500rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.no-data-text{
  color: #999;
  font-size: 28rpx;
  font-weight: bold;
}
</style>
