<template>
  <view
    class="mask"
    @click.stop="close"
    :class="{visible:visible||isShow}"
  >
    <view class="dialog-main" @click.stop="">
      <image mode="widthFix" class="banner" :src="banner" />
      <view class="content">
        <view class="item" v-for="item in list" :key="item.id" @click="constellation(item)">
          <image :src="'https://ttmini.yizhiwechat.com/constellationPavilion/constellationIcon/'+item.id+'.png'" mode="aspectFit" />
          <view class="name">{{item.name}}</view>
          <view class="date">{{item.date}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'yt-constellation',
  props: {
    visible: {
      type:Boolean,
      default:false
    },
    banner: {
      type: String,
      default: 'https://ttmini.yizhiwechat.com/constellationPavilion/constellationIcon/banner.jpg'
    }
  },
  data() {
    return {
      isShow:false,
      resolve:null,
      reject:null
    }
  },
  data() {
    return {
      list: [
        { id:4,name:'白羊座',date:'3.21~4.19' },
        { id:5,name:'金牛座',date:'4.20~5.20' },
        { id:6,name:'双子座',date:'5.21~6.21' },
        { id:7,name:'巨蟹座',date:'6.22~7.22' },
        { id:8,name:'狮子座',date:'7.23~8.22' },
        { id:9,name:'处女座',date:'8.23~9.22' },
        { id:10,name:'天秤座',date:'9.23~10.23' },
        { id:11,name:'天蝎座',date:'10.24~11.22' },
        { id:12,name:'射手座',date:'11.23~12.21' },
        { id:1,name:'摩羯座',date:'12.22~1.19' },
        { id:2,name:'水瓶座',date:'1.20~2.18' },
        { id:3,name:'双鱼座',date:'2.19~3.22' }
      ]
    }
  },
  methods: {
    show(){
      if(this.reject){
        this.reject()
        this.resolve = null
        this.reject = null
      }
      return new Promise((resolve,reject)=>{
        this.isShow = true
        this.resolve = resolve
        this.reject = reject
      })
    },
    close(){
      this.isShow = false
      this.$emit('update:visible', false)
    },
    constellation(event){
      this.close()
      this.$emit('change',event)
      this.resolve && this.resolve(event)
    }
  }
};
</script>

<style lang="scss" scoped>
@keyframes fade-top {
  0%{opacity:0;transform: translate(-50%,-55%);}
  100%{opacity:1;transform: translate(-50%,-50%);}
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(19, 11, 50,.8);
  z-index: 300;
  display: none;
  
}
.visible{
  display: block!important;
}
.dialog-main {
  background-color: #fff;
  border-radius: 30rpx;
  width: 700rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  animation: fade-top 300ms linear ;
  .banner {
    width: 100%;
    height: 200rpx;
    display: block;
    border-radius: 30rpx 30rpx 0 0;
  }
  .content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    padding: 48rpx 16rpx 24rpx;
  }
}
.item{
  flex: 0 0 25%;
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-bottom: 24rpx;
  image{
    width: 146rpx;
    height: 146rpx;
  }
  .name{
    font-size: 30rpx;
  }
  .date{
    font-size: 24rpx;
  }

}
</style>
