<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">
        <xd-remote-input
          style="width: 30%"
          :default-value="[{value:'value:Alaska', label:'label:Alaska'}]"
          v-model="remoteInput"
          :multiple="true"
          :remote-search="handleRemoteSearch"
        ></xd-remote-input>
      </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="remoteCascader" show level="1"></xd-json-view>
      </div>
      <div class="app-container__item-body">
        <xd-remote-cascader
          v-model="remoteCascader"
          :remote-search="handleChildren"
          multiple
        ></xd-remote-cascader>
      </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="xdCascadeSelect" show level="1"></xd-json-view>
      </div>
      <div class="app-container__item-body">
        <xd-cascade-select
          v-model="xdCascadeSelect"
          @loadChildren="handleChildren"
          :default-value="['22', '2016', '52607', ['52622']]"
          :disabled="false"
          :multiple="true"
        >
        </xd-cascade-select>
      </div>
    </div>
  </div>
</template>

<script>
  import XdRemoteInput from "@/components/XdRemoteInput";
  import XdRemoteCascader from "@/components/XdRemoteCascader";
  import XdCascadeSelect from "@/components/XdCascadeSelect";
  import XdJsonView from "@/components/XdJsonView";
  import axios from 'axios';

  export default {
    name: "titleList",
    components: {
      XdRemoteInput,
      XdRemoteCascader,
      XdCascadeSelect,
      XdJsonView
    },
    data(){
      return {
        remoteCascader: [],
        xdCascadeSelect: [],
        remoteInput: [],
        testResult: ["Alabama", "Alaska", "Arizona",
          "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};
      });
    },
    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;
        }
      }
    }

  }
</style>
