<template>
  <div class="app-container">
    <div class="app-container__item">
      <div class="app-container__item-h1">搜索模块</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-json-view :data="xdSearchValue" show level="1"></xd-json-view>
        </div>
        <xd-search
          time-type
          date-filter
          main-filter-key="main_key"
          :main-filter="null"
          :main-filter-index="4"
          :main-filter-stretch="false"
          main-filter-type=""
          v-model="xdSearchValue"
          :list="searchList"
          :remote-search="handleRemoteSearch"
          size="medium"
          @onSearch="handleSearch"
          @onDone="handleDone"
        >
        </xd-search>
      </div>
    </div>
  </div>
</template>

<script>
  import XdJsonView from "@/components/XdJsonView";
  import XdSearch from "@/components/XdSearch";
  import XdBaseDynamicField from "@/components/XdBaseDynamicField";
  import {genUpToken} from './../scripts/qiniu'
  import XdTableForm from "@/components/XdTableForm";
  import testData from "@/dome/base/form/testData";
  import cityData from "@/cityData"
  import axios from 'axios';
  let id = 0;

  export default {
    name: 'AppForm',
    components: {
      XdTableForm,
      XdBaseDynamicField,
      XdSearch,
      XdJsonView
    },
    data() {
      return {
        xdSearchValue: [],
        XdBaseFieldValue: {},
        list: [
          {"label": "万利达集团", "value": 4},
          {"label": "万利达集团-2", "value": 5},
          {"label": "深圳万利达移动通信设备有限公司", "value": 6},
          {"label": "味多美", "value": 7},
          {"label": "味多美", "value": '7'},
        ],

        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9zYW5kYm94LWMuanVmdWJhby5jbiIsImlhdCI6MTY0MDE0NDI0MywiZXhwIjoxNjQwMjMwNjQzLCJhY2NvdW50X2lkIjo4LCJtZXJjaGFudF9pZCI6IjBfb05ua2M2SHVtd1JqV0Nja3c3WFBxdmNpbWJyWSIsInBsYXRmb3JtX2NvZGUiOiJ3eCIsImlwIjoiMTAuMC4yLjQiLCJjaGVja3N1bSI6ImFhYmNkNzJhNTRlYmE0MjI3MGMyODYzNzI1MTk5ODEyIn0.e7AgEQKtj_Ju7-_FQbTEdqZTpKs1DtX2RVe8ZH-MKoE',
        getCity: 'http://sandbox-c.jufubao.cn/api/pb/city/getsub',



        //远程搜索
        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: [],

        searchList: [
          //input
          {
            label: '订单号:', //label
            ele: 'el-input', //package 名称
            valueKey: 'order_id', //form[valueKey]
            value: '', //v-model
            placeholder: '输入订单号',

          },

          //单位区间显示
          {
            label: '按价格:',
            ele: 'xd-input-range',
            valueKey: 'price_range',
            value: null,
            disabled: false,
            setting: {
              unit: '%',
              icon: 'xd_admin_iconfont xdicon_jiage',
              selectWidth: '110px',
              selectMultiple: false,
              selectPlaceholder: '请选择',
              select: [
                {"label": "分销价", "value": 'dist_price'},
                {"label": "市场价", "value": 'market_price'},
                {"label": "进货价", "value": 'purchase_price'},
              ],
            },
          },

          //多选选择
          {
            label: '加盟商:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'product_type_m', //form[valueKey]
            value: [], //v-model
            placeholder: '请选择加盟商',
            multiple: true, //多选
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },

          //远程搜索选择
          {
            label: '远程搜索:', //label
            ele: 'xd-select-remote', //package 名称
            valueKey: 'product_type_remote', //form[valueKey]
            value: [], //v-model //多选为数组 单选为字符串
            placeholder: '输入关键字进行搜索',
            multiple: false, //多选
          },

          //单选选择
          {
            label: '加盟商:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'product_type', //form[valueKey]
            value: '', //v-model
            placeholder: '请选择加盟商',
            multiple: false,
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },

          //状态选择
          {
            label: '状态:', //label
            ele: 'xd-select-status', //package 名称
            valueKey: 'status', //form[valueKey]
            value: '', //v-model
            isAll: true,
            backValueType: '', //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2]
            placeholder: '请选择',
            list: 'status', //status=>状态  best=>推荐  associate=>关联 yes=>是否 open=> 是否开启  check=>审核
          },

          //区间输入
          {
            label: '卡号区间:', //label
            ele: 'xd-range', //package 名称
            valueKey: ['start_card', 'end_card'], //form[valueKey]
            value: ['', ''], //v-model
            placeholder: ['开始卡号', '结束卡号'],
            width: 400
          },

          //插槽
          {
            label: '插槽:', //label
            ele: 'slot', //package 名称
            slot: 'time',
          },

          //时间插件
          {
            label: '添加时间:', //label
            ele: 'xd-date', //package 名称
            valueKey: ['start_time', 'end_time'], //form[valueKey]
            value: [], //v-model
            format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
            formatValue: 'timestamp', //输出时间格式
            placeholder: ['开始时间', '结束时间'],
          },

          //单时间显示
          {
            label: '活动时间:', //label
            ele: 'xd-date-one', //package 名称
            valueKey: 'date-one', //form[valueKey]
            value: '', //v-model
            format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
            formatValue: 'timestamp', //输出时间格式
            placeholder: '添加活动时间',
          },

          //组合时间组合
          {
            label: '时间筛选:', //label
            ele: 'xd-date-filter',
            children: [
              {
                ele: 'xd-select-list', //package 名称
                valueKey: 'order_type', //form[valueKey]
                value: '', //v-model
                placeholder: '选择下单时间',
                list: [
                  {"label": "万利达集团", "value": 4},
                  {"label": "中国联通", "value": 5},
                  {"label": "中国移动", "value": 6},
                  {"label": "味多美", "value": 7},
                ]
              },
              {
                ele: 'xd-date', //package 名称
                valueKey: ['fitler_start_time', 'fitler_end_time'], //form[valueKey]
                value: [], //v-model
                format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
                formatValue: 'timestamp', //输出时间格式
                placeholder: ['开始时间', '结束时间'],
              },
            ],
          },

          //远程搜索（单选）
          {
            label: '品牌单选:',
            ele: 'xd-remote-select',
            valueKey: 'remote-select-one',
            value: [
              {value: 'value:Alaska', label: 'label:Alaska'}
            ],
            className: 'input40',
            placeholder: '请选择品牌',
            multiple: false, //是否为多选
            remoteSearch: (query, resolve) => {
              this.handleRemoteSearch({query}, resolve)
            },
            rules: [
              {required: true, message: '请选择品牌', trigger: 'change'},
            ]
          },


          //树框级联（单选）
          {
            label: '树框级联:', //label
            ele: 'xd-cascade', //package 名称
            valueKey: 'cascade', //form[valueKey]
            value: ['yizhi'], //v-model

            disabled: false,
            list: testData,
            setting: {
              isGeRoot: true, //当子集合选择返回父节点选
              filterable: true, //是否过滤操作
              clearable: true, //是否清楚操作
              collapseTags: true, //多选是否清楚操作
              multiple: false, //是否多选
            },
            rules: [
              {required: true, message: '请选择数据', trigger: 'blur'},
            ],
            inline: false,
            notice: '如：设置16:00前下单，最早可提前2小时；16:00后下单，最早可提前1天。<br />若：用户在16点前下单，最早可选择当前下单时间往后2小时的时间；16点后下单，最早只能选择第2天。'
          },

          //树框级联（多选）
          {
            label: '树框级联:', //label
            ele: 'xd-cascade', //package 名称
            valueKey: 'cascade-more', //form[valueKey]
            value: ['yizhi'], //v-model

            disabled: false,
            list: testData,
            setting: {
              isGeRoot: true, //当子集合选择返回父节点选
              filterable: true, //是否过滤操作
              clearable: true, //是否清楚操作
              collapseTags: true, //多选是否清楚操作
              multiple: true, //是否多选
            },
            rules: [
              {required: true, message: '请选择数据', trigger: 'blur'},
            ],
            inline: false,
            notice: '如：设置16:00前下单，最早可提前2小时；16:00后下单，最早可提前1天。<br />若：用户在16点前下单，最早可选择当前下单时间往后2小时的时间；16点后下单，最早只能选择第2天。'
          },

          //远程选择(单选)
          {
            label: '远程单择:',
            ele: 'xd-remote-select-list',
            valueKey: 'sub_company_id',
            value: '',
            placeholder: '请选择展示企业',
            setting:{
              multiple: false, //是否为多选
            },
            handleCustom:({action, data}) =>{
              setTimeout(()=>{
                data.cb([
                  {label:1, value:1},
                  {label:2, value:2},
                  {label:3, value:3},
                  {label:4, value:4},
                ])
              },2000)
            },
          },
          //远程选择(多选)
          {
            label: '远程多选:',
            ele: 'xd-remote-select-list',
            valueKey: 'sub_company_more',
            value: '',
            setting:{
              multiple: true, //是否为多选
            },
            placeholder: '请选择展示企业',
            handleCustom:({action, data}) =>{
              setTimeout(()=>{
                data.cb([
                  {label:1, value:1},
                  {label:2, value:2},
                  {label:3, value:3},
                  {label:4, value:4},
                ])
              },2000)
            },
          },

          //远程选择(多选)
          {
            label: '远程级联:',
            ele: 'xd-remote-cascade',
            valueKey: 'xd-remote-cascade',
            value: '',
            placeholder: '请选择展示企业',
            props: {
              lazy: true,
              checkStrictly: true,
              multiple: false,
              emitPath:false,
              lazyLoad (node, resolve) {
                const { level } = node;
                setTimeout(() => {
                  const nodes = Array.from({ length: level + 1 })
                    .map(item => ({
                      value: ++id,
                      label: `选项${id}`,
                      leaf: level >= 2
                    }));
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(nodes);
                }, 1000);
              }
            }
          },
        ]


      }
    },
    watch: {
      XdBaseFieldValue(value){
        console.log('XdBaseFieldValue',value)
      }
    },

    created(){
      this.testResultList = this.testResult.map(item => {
        return {value: `value:${item}`, label: `label:${item}`};
      });

    },



    methods:{

      /**
       * @description 获取配送区域
       * @param node 上级城市对象
       * @param resolve 回调地址
       */
      getDataRegionList(node, resolve) {
        let city = {
          0: [{"city_code":"1","name":"\u5317\u4eac","parent_id":"0"},{"city_code":"31","name":"\u65b0\u7586","parent_id":"0"},{"city_code":"4","name":"\u91cd\u5e86","parent_id":"0"},{"city_code":"19","name":"\u5e7f\u4e1c","parent_id":"0"},{"city_code":"3","name":"\u5929\u6d25","parent_id":"0"},{"city_code":"15","name":"\u6d59\u6c5f","parent_id":"0"},{"city_code":"52993","name":"\u6e2f\u6fb3","parent_id":"0"},{"city_code":"20","name":"\u5e7f\u897f","parent_id":"0"},{"city_code":"11","name":"\u5185\u8499\u53e4","parent_id":"0"},{"city_code":"30","name":"\u5b81\u590f","parent_id":"0"},{"city_code":"21","name":"\u6c5f\u897f","parent_id":"0"},{"city_code":"32","name":"\u53f0\u6e7e","parent_id":"0"},{"city_code":"14","name":"\u5b89\u5fbd","parent_id":"0"},{"city_code":"24","name":"\u8d35\u5dde","parent_id":"0"},{"city_code":"27","name":"\u9655\u897f","parent_id":"0"},{"city_code":"8","name":"\u8fbd\u5b81","parent_id":"0"},{"city_code":"6","name":"\u5c71\u897f","parent_id":"0"},{"city_code":"29","name":"\u9752\u6d77","parent_id":"0"},{"city_code":"22","name":"\u56db\u5ddd","parent_id":"0"},{"city_code":"12","name":"\u6c5f\u82cf","parent_id":"0"},{"city_code":"5","name":"\u6cb3\u5317","parent_id":"0"},{"city_code":"26","name":"\u897f\u85cf","parent_id":"0"},{"city_code":"84","name":"\u9493\u9c7c\u5c9b","parent_id":"0"},{"city_code":"16","name":"\u798f\u5efa","parent_id":"0"},{"city_code":"9","name":"\u5409\u6797","parent_id":"0"},{"city_code":"2","name":"\u4e0a\u6d77","parent_id":"0"},{"city_code":"17","name":"\u6e56\u5317","parent_id":"0"},{"city_code":"23","name":"\u6d77\u5357","parent_id":"0"},{"city_code":"25","name":"\u4e91\u5357","parent_id":"0"},{"city_code":"28","name":"\u7518\u8083","parent_id":"0"},{"city_code":"18","name":"\u6e56\u5357","parent_id":"0"},{"city_code":"13","name":"\u5c71\u4e1c","parent_id":"0"},{"city_code":"7","name":"\u6cb3\u5357","parent_id":"0"},{"city_code":"10","name":"\u9ed1\u9f99\u6c5f","parent_id":"0"}],
          1: [{"city_code":"jfb1","name":"\u5317\u4eac","parent_id":"1"},{"city_code":"bj-test1","name":"\u5317\u4eac-\u6d4b\u8bd5","parent_id":"1"}],
          jfb1: [{"city_code":"2812","name":"\u987a\u4e49\u533a","parent_id":"jfb1"},{"city_code":"2807","name":"\u95e8\u5934\u6c9f","parent_id":"jfb1"},{"city_code":"2803","name":"\u5d07\u6587\u533a","parent_id":"jfb1"},{"city_code":"2810","name":"\u5927\u5174\u533a","parent_id":"jfb1"},{"city_code":"2814","name":"\u6000\u67d4\u533a","parent_id":"jfb1"},{"city_code":"2801","name":"\u897f\u57ce\u533a","parent_id":"jfb1"},{"city_code":"2804","name":"\u5ba3\u6b66\u533a","parent_id":"jfb1"},{"city_code":"2953","name":"\u5e73\u8c37\u533a","parent_id":"jfb1"},{"city_code":"2816","name":"\u5bc6\u4e91\u533a","parent_id":"jfb1"},{"city_code":"3065","name":"\u5ef6\u5e86\u533a","parent_id":"jfb1"},{"city_code":"2802","name":"\u4e1c\u57ce\u533a","parent_id":"jfb1"},{"city_code":"2901","name":"\u660c\u5e73\u533a","parent_id":"jfb1"},{"city_code":"2805","name":"\u4e30\u53f0\u533a","parent_id":"jfb1"},{"city_code":"72","name":"\u671d\u9633\u533a","parent_id":"jfb1"},{"city_code":"2806","name":"\u77f3\u666f\u5c71\u533a","parent_id":"jfb1"},{"city_code":"2808","name":"\u623f\u5c71\u533a","parent_id":"jfb1"},{"city_code":"2800","name":"\u6d77\u6dc0\u533a","parent_id":"jfb1"},{"city_code":"2809","name":"\u901a\u5dde\u533a","parent_id":"jfb1"}],
          2812: [{"city_code":"51130","name":"\u5149\u660e\u8857\u9053","parent_id":"2812"},{"city_code":"51125","name":"\u5317\u77f3\u69fd\u9547","parent_id":"2812"},{"city_code":"51147","name":"\u6768\u9547\u5730\u533a","parent_id":"2812"},{"city_code":"51126","name":"\u5317\u52a1\u9547","parent_id":"2812"},{"city_code":"51141","name":"\u4ec1\u548c\u5730\u533a","parent_id":"2812"},{"city_code":"51139","name":"\u5357\u6cd5\u4fe1\u5730\u533a","parent_id":"2812"},{"city_code":"51134","name":"\u674e\u9042\u9547","parent_id":"2812"},{"city_code":"51138","name":"\u5357\u5f69\u9547","parent_id":"2812"},{"city_code":"51127","name":"\u5317\u5c0f\u8425\u9547","parent_id":"2812"},{"city_code":"51136","name":"\u9a6c\u5761\u5730\u533a","parent_id":"2812"},{"city_code":"51135","name":"\u9f99\u6e7e\u5c6f\u9547","parent_id":"2812"},{"city_code":"51140","name":"\u725b\u680f\u5c71\u5730\u533a","parent_id":"2812"},{"city_code":"51142","name":"\u80dc\u5229\u8857\u9053","parent_id":"2812"},{"city_code":"51146","name":"\u65fa\u6cc9\u8857\u9053","parent_id":"2812"},{"city_code":"51131","name":"\u540e\u6c99\u5cea\u5730\u533a","parent_id":"2812"},{"city_code":"51133","name":"\u674e\u6865\u9547","parent_id":"2812"},{"city_code":"51128","name":"\u5927\u5b59\u5404\u5e84\u9547","parent_id":"2812"},{"city_code":"51149","name":"\u8d75\u5168\u8425\u9547","parent_id":"2812"},{"city_code":"51137","name":"\u6728\u6797\u9547","parent_id":"2812"},{"city_code":"51143","name":"\u77f3\u56ed\u8857\u9053","parent_id":"2812"},{"city_code":"51132","name":"\u7a7a\u6e2f\u8857\u9053","parent_id":"2812"},{"city_code":"51129","name":"\u9ad8\u4e3d\u8425\u9547","parent_id":"2812"},{"city_code":"51144","name":"\u53cc\u4e30\u8857\u9053","parent_id":"2812"},{"city_code":"51145","name":"\u5929\u7afa\u5730\u533a","parent_id":"2812"},{"city_code":"51148","name":"\u5f20\u9547","parent_id":"2812"},{"city_code":"qweq123","name":"\u5e73\u65b9\u8857\u9053","parent_id":"2812"}]
        };

        let params = {city_code: 0, page_size: 10000};
        if (node.level > 0) {
          params['city_code'] = node['value'];
        }
        if (city[params['city_code']]) {
          let res = city[params['city_code']];
          if (node['level'] === 0) {
            res.splice(0, 0, {
              name: '全国',
              city_code: '0',
              leaf: true
            })
          }
          let temp = this.$xdHelper.idToSelectData(res, 'name', 'city_code', false);
          console.log('getDataRegionList',temp);
          temp.filter(item => {
            if (!item['leaf']) {
              item['leaf'] = false;
              //街道下无子节点
              if (node.level === 3) {
                item['leaf'] = true;
              }
            }
            return item;
          });
          console.log('resolve', temp);
          resolve(temp)
        }
        else {
          resolve([]);
        }
      },


      handleCilck(){
        this.$refs['testForm'].submitAll()
          .then(valid =>{
            console.log('submit', valid, this.$refs['testForm'].getAllFormData())
          })
          .catch((valid) => {
            console.error(valid)
          })

      },

      handleRemoteSearch({query}, resolve){
        setTimeout(() => {
          let list = this.testResultList.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
          resolve(list)
        }, 500);
      },

      handleSearch({form, action}){
        console.log('handleSearch', form, action)
      },

      handleDone({form, action}){
        console.log('handleDone', form, action)
      },

      handleSumit(form){
        console.log('handleSumit', form)
      },

      /**启动上传图片*******=======================================*/
      /**
       * @description 上传到本地服务器成功返回值时刻触发，设置url字段
       */
      handleApiSuccessUrl(result, resolve) {
        resolve(result.data['ObjectURL'])
      },
      /**
       * @description 上传参数设置
       * @param file
       * @param resolve
       */
      handleGetParamsAndHeader(file, resolve) {
        resolve({
          params: {
            token: genUpToken({
              accoutKey: 'bP3Ca5dtSJBNaWwMkihfhuE30CbAZnYrNzQm6eMN',
              serviceKey: 'pPNgWwRL3_Jlj7cPtpYbkhXn01EOZTtUhOs3NqZM',
              webSiteName: 'e56buystatic',
              staticUrl: 'http://static.e56buy.com',
            }),
            key: 'Xd' + this.$xdHelper.randomChar(30)
          }
        });
      },

      handleSuccess(res) {
        console.log(res)
      }
      /**启动上传图片*******=======================================*/
    }
  }

</script>

<style lang="scss" scoped>
  .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;
        }
      }
    }

  }

  @media screen and (max-width: 768px) {
    .app-container{
      padding:10px 0;
      &__item {
        &-body {
          padding: 0 0px;
        }
      }
    }
  }
</style>
