<template>
  <div class="app-container">
    <div class="app-container__item">
      <div class="app-container__item-h1">抽奖 - 转盘</div>
      <div class="app-container__item-body-value">
        <xd-json-view :data="remoteInput" show level="1"></xd-json-view>
      </div>
      <div class="app-container__item-body">
        <div></div>
        <div class="container-font">
          <hr>
          <div class="list">
            <div><div>特别鸣谢</div></div>
            <div><div>Charles Yang</div></div>
            <div><div>Marvel</div></div>
          </div>
          <hr>
        </div>
        <div class="container-cloud">
          <div class="sun"></div>
          <div class="cloud default"></div>
          <div class="cloud small"></div>
          <div class="cloud middle"></div>
          <div class="cloud bigger"></div>
        </div>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">抽奖 - 跑马灯</div>
      <div class="app-container__item-body-value">
        <xd-json-view :data="remoteInput" show level="1"></xd-json-view>
      </div>
      <div class="app-container__item-body">
        <div></div>
        <xd-run-horse-lamp></xd-run-horse-lamp>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">抽奖 - 转盘</div>
      <div class="app-container__item-body-value">
        <xd-json-view :data="remoteInput" show level="1"></xd-json-view>
      </div>
      <div class="app-container__item-body">
        <div></div>
        <xd-roulette-prize></xd-roulette-prize>
      </div>
    </div>
  </div>
</template>

<script>
  import XdRemoteInput from "@/components/XdRemoteInput";
  import XdRemoteCascader from "@/components/XdRemoteCascader";
  import XdJsonView from "@/components/XdJsonView";
  import axios from 'axios';
  import XdRunHorseLamp from "@/components/XdRunHorseLamp";
  import XdRoulettePrize from "@/components/XdRoulettePrize.vue";

  export default {
    name: "lotteryIndex",
    components: {
      XdRoulettePrize,
      XdRunHorseLamp,
      XdRemoteInput,
      XdRemoteCascader,
      XdJsonView
    },
    data(){
      return {
        remoteCascader: [],
        remoteInput: [],
        testResult: ["Alabama", "Alaska", "Arizona",
          "Arkansas", "California", "Colorado",
          "Connecticut", "Delaware", "Florida",
          "Georgia", "Hawaii", "Idaho", "Illinois",
          "Indiana", "Iowa", "Kansas", "Kentucky",
          "Louisiana", "Maine", "Maryland",
          "Massachusetts", "Michigan", "Minnesota",
          "Mississippi", "Missouri", "Montana",
          "Nebraska", "Nevada", "New Hampshire",
          "New Jersey", "New Mexico", "New York",
          "North Carolina", "North Dakota", "Ohio",
          "Oklahoma", "Oregon", "Pennsylvania",
          "Rhode Island", "South Carolina",
          "South Dakota", "Tennessee", "Texas",
          "Utah", "Vermont", "Virginia",
          "Washington", "West Virginia", "Wisconsin",
          "Wyoming"],
        testResultList: [],


        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9zYW5kYm94LWMuanVmdWJhby5jbiIsImlhdCI6MTY0MDE0NDI0MywiZXhwIjoxNjQwMjMwNjQzLCJhY2NvdW50X2lkIjo4LCJtZXJjaGFudF9pZCI6IjBfb05ua2M2SHVtd1JqV0Nja3c3WFBxdmNpbWJyWSIsInBsYXRmb3JtX2NvZGUiOiJ3eCIsImlwIjoiMTAuMC4yLjQiLCJjaGVja3N1bSI6ImFhYmNkNzJhNTRlYmE0MjI3MGMyODYzNzI1MTk5ODEyIn0.e7AgEQKtj_Ju7-_FQbTEdqZTpKs1DtX2RVe8ZH-MKoE',
        getCity: 'http://sandbox-c.jufubao.cn/api/pb/city/getsub',
      }
    },
    created(){
      this.testResultList = this.testResult.map((item,index) => {
        return {value: `value:${item}`, label: `label:${item}`, id: index};
      });

      XdBus.addEvent('param', (data) => {
        this.remoteInput = data
      })
    },
    methods: {
      handleRemoteSearch(query, resolve){
        console.log(query);
        setTimeout(() => {
          let list = this.testResultList.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
          resolve(list)
        }, 500);
      },

      handleChildren({level, select, item}, resolve) {
        console.log('handleChildren', level, select, item)
        axios({
          method: 'get',
          url: this.getCity,
          params: {
            token: this.token,
            parent_code: level === 0 ? 0 : select.value
          }
        })
          .then((res) => {
            let temp = [];
            res.data.result.map((item) => {
              temp.push({...item, value: item['city_code'], label: item['name']});
            });
            resolve({
              list: temp, //数据列表(必选)
              isChildren: level < 3, //是否有子集(必选)
              placeholder: '请选择城市', //占位符(必选)
              custom: 1, //自定义字段
              params: {a: 1, b: 2} //自定义字段
            });
            loading.close();
            console.log('handleChildren', temp);
          })
          .catch((error) => {

          });

      },
      handleChange(list) {
        console.log('handleChange', list)
      }
    }
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 20px;

    &__item {
      margin-bottom: 20px;

      &-h1 {
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        font-weight: bold;
        background: #efefef;
        font-size: 16px;
        text-align: left;
        margin-bottom: 30px;
      }

      &-body {
        padding: 0 20px;

        &-value {
          padding-bottom: 10px;
        }
      }
    }

  }

  .container-font {
    position: relative;
    padding-top: 100px;
    width: 960px;
    height: 500px;
    font-size: 36px;
    text-transform: uppercase;

    .list {
      height: 50px;
      overflow: hidden;
    }
    .list div div {
      background-color: #42c58a;
    }

    .list div:first-child div {
      background-color: #4ec7f3;
    }

    .list div:last-child div {
      background-color: #DC143C;
    }

    .list > div > div {
      display: inline-block;
      height: 50px;
      color:#fff;
      margin-bottom: 50px;
      padding: 4px 12px;
      box-sizing: content-box;
    }
    .list div:first-child {
      animation: dropdown 5s linear infinite alternate;
    }


    @keyframes dropdown {

      //停留0-30%
      0% { margin-top: 0;}
      30% { margin-top: 0;}

      //停留 35%-65%
      35% { margin-top: -100px;}
      65% { margin-top: -100px;}

      //停留 75%-100%
      70% { margin-top:-200px;}
      100% { margin-top:-200px;}


    }
  }








  .container-cloud {
    padding-top: 50px;
    position: relative;
    width: 1000px;
    height: 600px;
    background-image: linear-gradient(to bottom, #c9dbe9 0%, #fff 100%);

    .sun {
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 200px;
      top: 50px;
      left: 150px;
      float: left;
      background-image: linear-gradient(to bottom, #ff3c00, #ffa600);
      box-shadow: 0 0 60px #ff0000b6;
    }

    .cloud {
      position: absolute;
      margin: 0 auto;
      width: 200px;
      height: 60px;
      border-radius: 200px;
      background-color: #fff;
    }

    .cloud::before,
    .cloud::after {
      position: relative;
      content: '';
      background-color: #fff;
      width: 100px;
      height: 80px;
      top: -15px;
      left: 10px;
      display: block;
      border-radius: 100px;
      transform: rotate(30deg)
    }

    .cloud::after {
      left: 60px;
      top: -100px;
      width: 100px;
      height: 100px;
      border-radius: 100px;
    }

    &:hover .default {
      animation: moveClouds 5s ease-out infinite normal;
    }

    //
    //&:hover .small {
    //  animation: moveClouds 6s ease-in-out alternate-reverse;
    //}
    //
    //&:hover .middle {
    //  animation: moveClouds 8s cubic-bezier(0.5, 0.5, 0.5, 0.5) alternate;
    //}
    //
    //&:hover .bigger {
    //  animation: moveClouds 10s ease-out infinite reverse;
    //}

    .default {
      top: 100px;
      left: -200px;
      transform: scale(0.8);
    }

    .small {
      top: 70px;
      transform: scale(0.5);
    }

    .middle {
      top: 120px;
      left: 150px;
      transform: scale(0.7);
    }

    .bigger {
      top: 200px;
      left: -250px;
      opacity: 0.6;
      transform: scale(1.2);
    }

    @keyframes moveClouds {
      0% {
        margin-left: 1200px
      }

      100% {
        margin-left: 0;
      }
    }

  }




</style>
