<template>
  <div class="prayers-list" @click="handleclick">
    <!-- <u-navbar title="剑未配妥，出门已是江湖" @click-left="onClickBack" @click-right="onClickRight"></u-navbar> -->
    <div class="allList" v-if="activeShow">
      <div class="list">
        <!-- <swiper
          :display-multiple-items="3.3"
          :rebound="false"
          slidesPerdiv="auto"
          style="height: 555px"
          :height="555"
          class="swiper"
          :autoplay="false"
          @click="handleclick"
        >
          <swiper-item
            style="height: 555px"
            :height="680"
            v-for="(item, index) in list"
            :key="index" >-->

        <div class="listitem" v-for="(item, index) in list" :key="index">
          <div
            class="item"
            :class="{ active: active == element }"
            v-for="(element, s) in item.list"
            :key="s"
            @click="handleTitle(element)"
          >
            {{ element }}
          </div>
        </div>
        <!-- </swiper-item>
        </swiper> -->
      </div>
      <div class="tips" style="margin-top: 15px;">请选择祈愿类型</div>
      <div class="img_signal" v-if="!show"></div>
    </div>
    <div class="activeIndex" v-else>
      <div class="indexHome">{{active}}</div>
      <div class="textListContent" v-if="active">
        <div class="textList" v-for="(item, index) in textList[active]" :key="item" @click="handleItem(item, index)" :class="`text${index} ${activeText == item ? 'selectactive':''}`">
          {{ item }}
        </div>
      </div>
      <div class="textTips">请选择祈愿语</div>
      <div class="selcet">
        <div>您来自哪个省份？</div>
        <div class="selcetBut" @click="provinceShow = true">
          {{ province }}
          <van-icon class="mytest" name="arrow-down-fill" color="#fff" size="10"></van-icon>
        </div>
      </div>
      <div class="qiyuan" @click="handleqiyaun">
        <img
          height="70px"
          width="70px"
          mode="heightFix"
          src="/static/img/btn_wish@2x.png"
        ></img>
      </div>
    </div>
    <van-popup v-model="provinceShow" position="bottom">
      <van-picker
        title="选择省份"
        show-toolbar
        :columns="provinceList"
        @confirm="confirm"
        @cancel="provinceShow = false"
      />
    </van-popup>
    <!-- <van-picker :show="provinceShow" :columns="[provinceList]"
      @cancel="provinceShow = false"
			@confirm="confirm"
			@close="provinceShow = false" closeOnClickOverlay></van-picker> -->
  </div>
</template>

<script>
// import { Navigation, Pagination } from 'swiper'
// import { SwiperCore, Swiper, SwiperSlide } from 'swiper-vue2'
import { Toast } from 'vant'

// Import Swiper styles
// import 'swiper/swiper-bundle.css'
// import uNavbar from "udiv-ui/components/u-navbar/u-navbar.vue";
export default {
  components: {
    // uNavbar
  },
  data() {
    return {
      active: '',
      activeText: '',
      show: false,
      activeShow: true,
      province: '广东省',
      provinceShow: false,
      provinceList: [
        '北京',
        '天津',
        '河北省',
        '山西省',
        '内蒙古自治区',
        '辽宁省',
        '吉林省',
        '黑龙江省',
        '上海',
        '江苏省',
        '浙江省',
        '安徽省',
        '福建省',
        '江西省',
        '山东省',
        '河南省',
        '湖北省',
        '湖南省',
        '广东省',
        '广西壮族自治区',
        '海南省',
        '重庆',
        '四川省',
        '贵州省',
        '云南省',
        '西藏自治区',
        '陕西省',
        '甘肃省',
        '青海省',
        '宁夏回族自治区',
        '新疆维吾尔自治区',
        '台湾',
        '香港特别行政区',
        '澳门特别行政区',
        '海外'
      ],
      list: [
        {
          list: ['姻缘', '事业']
        },
        {
          list: ['健康', '财运']
        },
        {
          list: ['学业', '家庭']
        },
        {
          list: ['子嗣', '心想事成']
        },
        {
          list: ['国泰民安']
        }
      ],
      selectList: [],
      textList: {
        姻缘: [
          '愿你与命定之人早日相遇，携手共度余生，爱情美满，永不分离。',
          '愿你们的感情如春风化雨，温暖彼此心灵，彼此理解，共创幸福未来。',
          '愿真爱早日降临，甜蜜相伴，风雨同舟，共同书写一段动人的爱情故事。'
        ],
        事业: [
          '愿你在事业的道路上勇往直前，机遇常伴，步步高升。',
          '愿你突破瓶颈，展现才华，赢得尊重与成就，工作顺利心想事成。',
          '愿你在每一个挑战中找到新的成长力量，事业节节攀升，前途无量。'
        ],
        健康: [
          '愿你身体强健，活力满满，远离病痛，健康常伴。',
          '愿你拥有充沛的精力，每一天都充满健康与活力，生活快乐无忧。',
          '愿你心身和谐，健康平安，身体如松柏般坚韧，健康长寿。'
        ],
        财运: [
          '愿财源滚滚，福禄双全，财富如泉涌，心想事成。',
          '愿你精明理财，财富稳增，收获满满，生活富足无忧。',
          '愿你好运相随，财运亨通，所有的努力都化为丰厚的回报。'
        ],
        学业: [
          '愿你学有所成，智慧增进，每一次努力都为未来铺就光明之路。',
          '愿你学业精进，成绩辉煌，知识的殿堂中闪耀属于你的光芒。',
          '愿你不断超越自己，顺利通过每一场考试，学有所成，梦想成真。'
        ],
        家庭: [
          '愿家庭和睦，亲人健康，家人之间充满爱与温暖，幸福长久。',
          '愿每一个家人都幸福安康，家和万事兴，共享美好时光。',
          '愿家庭永远是你最温暖的港湾，彼此支持，家庭幸福，福气绵延。'
        ],
        子嗣: [
          '愿喜事连连，早得贵子，家中添丁，喜悦绵延不绝。',
          '愿天赐福气，子嗣安康，家门兴旺，福泽绵长。',
          '愿你迎来新生命的到来，健康平安，子孙满堂，家庭兴旺。'
        ],
        心想事成: [
          '愿你的梦想早日成真，所有的期待化为现实，心愿得偿。',
          '愿你在追逐梦想的路上一路顺风，所有愿望都实现，人生美满。',
          '愿你心中所愿如愿以偿，心想事成，生活充满惊喜与幸福。'
        ],
        国泰民安: [
          '愿国家昌盛，人民安居乐业，生活平安喜乐，世代和谐共荣。',
          '愿风调雨顺，国泰民安，天下太平，人人幸福安康。',
          '愿国家繁荣稳定，社会和谐，百姓安康，生活充满安宁与幸福。'
        ]
      }
    }
  },
  onLoad() {},
  created() {
    this.getRequest('/api/wx/pray/check',).then(res => {
      console.log('res', res)
      if(res){
        this.$router.replace('/prayers/show')
      }
    })
   },
  methods: {
    handleHome() {
      console.log('开启云上观灯', uni)
      uni.$u.route('/pages/home/home')
    },
    handleclick() {
      this.show = true
    },
    handleItem(item, index) {
      this.activeText = item
      // if(this.selectList.includes(item)) {
      //   this.selectList = this.selectList.filter((val) => val !== item)
      // } else {
      //   this.selectList.push(item)
      // }
    },
    confirm(val) {
      console.log('confirm', val)
      this.province = val
      this.provinceShow = false
    },
    handleTitle(item) {
      this.active = item
      this.activeText = this.textList[item] && this.textList[item][0]
      this.activeShow = false
    },
    handleqiyaun() {
      let param = {
        content: this.activeText,
        name: this.active,
        province: this.province
      }
      this.postRequest('/api/wx/pray/add', param).then(res =>{
        Toast('祈愿成功！')
        setTimeout(() => {
          this.$router.push('/prayers/show')
        }, 500)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.prayers-list {
  background: rgba(32, 21, 10, 0.7);
  border-radius: 0px 0px 0px 0px;
  background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/bg022.png) 100% 100% no-repeat;
  background-size: cover;
  height: calc(100vh - 100px);
  .img_signal {
    width: 76px;
    height: 106px;
    background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/img_signal@2x.png) 100% 100%
      no-repeat;
    background-size: cover;
    position: absolute;
    right: 50px;
    bottom: 30px;
    animation: handleAni 1s linear infinite;
    transition: all 1s;
  }
  .tips {
    width: 100%;
    text-align: center;
    
    color: #fff;
    font-size: 14px;
    line-height: 21px;
  }
  .allList {
    padding-top: 20px;
    .list {
      height: 555px;
      display: flex;
      overflow-x: scroll;
      overflow-y: hidden;
    }
  }
  .list {
    height: 555px;
    padding: 0 10px;
    .listitem {
      text-align: center;
      padding: 0 20px;

      .item {
        margin-top: 20px;
        // margin: 18px 20px 0 20px;
        width: 18px;
        height: 267px;
        background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/label@2x.png) 100% 100%
          no-repeat;
        background-size: cover;
        writing-mode: tb-rl;
        text-align: center;
        padding: 0 25px;
        position: relative;
        font-weight: 400;
        font-size: 15px;
        color: #8c4042;
        line-height: 23px;
        text-align: center;
      }
      .active {
        &:after {
          content: '';
          box-shadow: 0px 4px 53px 0px #fff86c, inset 0px 1px 1px 0px rgba(177, 156, 125, 0.7);
          position: absolute;
          height: 80%;
          width: 85%;
          top: 8.13333vw;
          left: 1.13333vw;
          border-radius: 25px;
          z-index: -1;
        }
      }
    }
  }
  .activeIndex {
    width: 100%;
    height: calc(100% - 50px);
    position: relative;
    padding-top: 20px;
    .indexHome {
      height: 500px;
      width: 28px;
      background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/label@2x.png) 100% 100%
        no-repeat;
      background-size: contain;
      writing-mode: tb-rl;
      padding: 0 50px;
      position: absolute;
      font-weight: 400;
      font-size: 30px;
      color: #8c4042;
      line-height: 45px;
      font-style: normal;
      display: flex;
      writing-mode: vertical-lr;
      text-align: center;
      justify-content: center;
      flex-direction: column;
      letter-spacing: 18px;
      left: calc(50% - 64px);
    }
    .qiyuan {
      position: absolute;
      bottom: 10px;
      right: 20px;
    }
    .selcet {
      position: absolute;
      width: 100%;
      bottom: 10px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      line-height: 14px;
      .selcetBut {
        border: 1px solid #d9d9d9;
        line-height: 48px;
        width: 120px;
        margin: 0 auto;
        padding: 0 15px;
        margin-top: 10px;
        height: 48px;
        border-radius: 10px;
        position: relative;
        .mytest {
          position: absolute;
          right: 25px;
          top: calc(50% - 5px);
        }
      }
    }
    .textTips {
      color: #fff;
      writing-mode: vertical-lr;
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      line-height: 14px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      position: absolute;
      top: calc(50% - 150px);
      left: calc(50% + 68px);
    }
    .textListContent {
      display: flex;
    }
    .textList {
      height: fit-content;
      padding: 20px 0;
      font-style: normal;
      display: flex;
      writing-mode: vertical-lr;
      text-align: center;
      justify-content: center;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 20px 20px 20px 20px;
      border: 1px solid #dcdcdc;
      position: absolute;
      font-weight: 400;
      font-size: 11px;
      top: 80px;
      color: #dcdcdc;
      width: 30px;
    }
    .selectactive {
      border: 1px solid #fff9b6;
      color: #fff9b6;
      background: rgba(255, 255, 255, 0.3);
    }
    .text0 {
      left: 30px;
    }
    .text1 {
      left: 80px;
      top: 156px;
    }
    .text2 {
      right: 30px;
    }
  }
}

@keyframes handleAni {
  from {
    right: 50px;
  }
  to {
    right: 30px;
  }
}
</style>
