<template>
  <view v-if="Display" class="Mask" @click="open()">
  <view @click.stop>
  <view class="container" >
    <image
    class="Fork"
    @click="open()"
      src="../../static/Fork.png"
      mode="scaleToFill"
    />
    <view class="Title">发布新PK</view>
    <view class="Individual">

    <view class="NameAnchor">
      <input class="NameAnchorcss" @input="NameAnchor" placeholder="主播名称" />
    </view>

      <view class="Gender">
      <uni-combox
        class="Gendercss"
        :candidates="Gender"
        placeholder="请选择性别"
        v-model="gender"
      ></uni-combox>
    </view>

    </view>


    <view class="Accountnumber">

      <wht-select v-model="country" :options="options" placeholder="请选择国家" />
 

      <view class="Coins">
        <uni-number-box class="number-box" v-model="numberCoins"></uni-number-box>
      </view>

    </view>

    <view class="Remarkscss" >
      <uni-easyinput type="textarea" v-model="remarks" placeholder="备注"></uni-easyinput>
    </view>

    <view class="Publish">
      <button @click="Publish()" class="Publishcss">发布</button>
    </view>

  </view>
</view>
</view>

</template>
<script>
import countryNamesArray from "../../components/NationalDictionary.js"


export default {
  data() {
    return {
      gender: "",
      Gender: ["男", "女"],
      Country:countryNamesArray,
      country: "",
      nameAnchor: "",
      numberCoins: "",
      remarks: "",
      Display: false,
      options: [
				{ label: '选项一', value: '1' },
				{ label: '选项二', value: '2' },
				{ label: '选项三', value: '3' }
			]
    };
  },
  onLoad() {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        
      },
    });
  },
  methods: {
    handleOverlayClick(event) {
      if (event.target === this.$el) {
        this.Display = false;
      }
    },
    open(){
        if (this.Display) {
          this.Display = false;
        } else {
          this.Display = true;
        }
    },
    //获取主播名称
    NameAnchor: function (event) {
      this.nameAnchor = event.target.value;
    },
    
    Publish(){
      console.log( this.nameAnchor, this.gender,this.country, this.numberCoins, this.remarks);
    }
  },
};
</script>

<style scoped>
.Mask{
  width: 100vw;
  height: 100vh;
  background: #00000076;
  display: flex;
  flex-direction: column-reverse;
}
.container {
  display: flex;
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  height: 900rpx;
}
.Fork{
  width: 50rpx;
  height: 50rpx;
  margin-top: 20rpx;
  /* margin-bottom: 40rpx; */
  margin-left: 90%;
}
.Title{
    width: 100%;
    height: 30rpx;
    font-size: 50rpx;
    font-weight: bold;
    text-align: center;
    margin-top: 40rpx;
    margin-bottom: 40rpx;
}
.Individual{
    display: flex;
    /* justify-content: center; */
}
.NameAnchor{
  margin: 40rpx;
}
.NameAnchorcss{
    width: 300rpx;
    height: 85rpx;
    border: 1rpx solid #ccc;
    border-radius: 10rpx;
    text-align: center;
}
.Gender{
  margin: 40rpx;
}
.Gendercss{
    width: 300rpx;
    height: 80rpx;
    text-align: center;
}
.Accountnumber{
    display: flex;
}
.Country{
 
}
.Countrycss{
  margin: 40rpx;
    width: 300rpx;
    height: 65rpx;
    text-align: center;
}
.Coins{
  margin: 40rpx;
  width: 300rpx;
  height: 65rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.number-box {
    text-align: center;
}
.Remarkscss{
    width: 90%;
    margin-top: 30rpx;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 50rpx;
    border-radius: 10rpx;
}
.Publish{
  margin-bottom: 50rpx;
  width: 90%;
  margin-left: 5%;
}
.Publishcss{
    background-color: #0048ff94;
}
</style>
