<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 :style="{paddingBottom: '20px'}">
          <el-button type="primary" @click="handleClick(1)">测试通信(传参)(父传子)</el-button>
          <el-button type="primary" @click="handleClick(2)">测试通信(抽奖)(子传父)</el-button>
        </div>
        <iframe src="/lottery/lottery" id="xd-iframe" class="app-container__item-body-iframe" frameborder="1"></iframe>
      </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";

  export default {
    name: "lotteryIndex",
    components: {
      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('result', (data) => {
        this.remoteInput = data;
      })
    },
    methods: {
      handleClick(type){
        if(type === 1) XdBus.send('param', this.testResult, false,'xd-iframe');
        if (type === 2) XdBus.send('lottery', {a: 1, b: 2}, false, 'xd-iframe');
      },
      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;
        }

        &-iframe {
          width: 1000px;
          height: 600px;
        }
      }
    }

  }
</style>
