<template>
  <div>
    <p>bootstrap4 应用</p>
    <b-alert show>Default Alert</b-alert>
    <hr>
    <p>文件上传 选择的文件：<span v-for="f in fileuploadfiles" :key="f.id">{{f.name}} </span></p>
    <fileupload class="btn btn-primary" :post-action="`/upload.do`" :multiple="true" :thread="5" :drop="false" :drop-directory="false" v-model="fileuploadfiles" ref="upload">
      <i class="fa fa-plus"></i> 选择文件
    </fileupload>
    <hr>
    <p>选择（多选、搜索） 选择的值：{{multiselectvalue}}</p>
    <multiselect v-model="multiselectvalue" :options="multiselectoptions"></multiselect>
    <hr> {{form[5].value | formatDate('YYYY-MM-DD')}}
    <reportform :url="url" :form="form" @search="search" />
    <div style="height: 500px;">
      <tree :data="treeData" show-checkbox multiple allow-batch whole-row @item-click="itemClick" />
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    testChange() {
      return this.form[0].value
    }
  },
  data() {
    return {
      url: 'http://xxxxx?aaa=xxx',
      fileuploadfiles: [],
      multiselectvalue: null,
      multiselectoptions: ['list', 'of', 'options'],
      form: [{
        name: 'input1',
        value: 'test',
        // inputCol: 2,
        label: '分中心下下1',
        // labelCol: 3,
        type: 'text',
        required: true,
        placeholder: 'xxxx是大多数多',
        format: null,
        msg: 'xxxxxxxxxxx'
      }, {
        name: 'input2',
        value: '',
        inputCol: 2,
        label: '分中心',
        labelCol: 1,
        type: 'text',
        required: true,
        placeholder: null,
        format(value) {
          return value.toLowerCase()
        },
        msg: 'xxxxxxxxxxx',
        maxlength: 10,
        pattern: "[A-z]{3}"
      }, {
        name: 'input3',
        value: '',
        inputCol: 2,
        label: '分中心',
        labelCol: 1,
        type: 'number',
        required: true,
        placeholder: null,
        format: null,
        hide: false,
        max: 20,
        min: 10
      }, {
        name: 'input4',
        value: {
          value: 2,
          text: '第二个'
        },
        inputCol: 2,
        label: '分中心',
        labelCol: 1,
        type: 'select',
        required: true,
        optionName: 'text',
        optionValue: 'value',
        options: [{
          value: 1,
          text: '第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个'
        }, {
          value: 2,
          text: '第二个'
        }, {
          value: 3,
          text: '第三个'
        }]
      }, {
        name: 'input41',
        value: '',
        inputCol: 2,
        label: '分中心',
        labelCol: 1,
        type: 'singleselect',
        required: true,
        // optionName: 'text',
        // optionValue: 'value',
        options: [{
          value: 1,
          text: '第4个'
        }, {
          value: 2,
          text: '第5个'
        }, {
          value: 3,
          text: '第6个'
        }]
      }, {
        name: 'input5',
        value: new Date(),
        inputCol: 5,
        label: '开始时间',
        labelCol: 4,
        type: 'date',
        required: false,
        placeholder: '请选择开始时间',
        config: {
          format: 'YYYY-MM-DD',
          minDate: new Date(),
          maxDate_name: 'input6'
        }
      }, {
        name: 'input6',
        value: new Date(),
        inputCol: 5,
        label: '结束时间',
        labelCol: 1,
        type: 'date',
        required: false,
        placeholder: '请选择结束时间',
        config: {
          format: 'YYYY-MM-DD',
          minDate: new Date(),
          minDate_name: 'input5'
        }
      }, {
        name: 'input633',
        value: [{ text: 'Adonis', language: 'JavaScript' }],
        inputCol: 5,
        label: 'ssss',
        labelCol: 1,
        type: 'multiselect',
        required: true,
        optionName: 'text',
        optionValue: 'language',
        placeholder: '请选择',
        options: [
          { text: 'Vue.jsVue.jsVue.jsVue.jsVue.jsVue.jsVue.jsVue.jsVue.jsVue.jsVue.jsVue.jsVue.js', language: 'JavaScript' },
          { text: 'Adonis', language: 'JavaScript' },
          { text: 'Rails', language: 'Ruby' },
          { text: 'Sinatra', language: 'Ruby' },
          { text: 'Laravel', language: 'PHP' },
          { text: 'Phoenix', language: 'Elixir' }
        ]
      }, {
        name: 'empty1',
        inputCol: 5,
        labelCol: 1
      }, {
        name: 'ssd3e3',
        value: [],
        inputCol: 5,
        label: 'sdsfd山东省',
        labelCol: 1,
        type: 'singlesearch',
        required: true,
        optionName: 'text',
        placeholder: '请输入搜索',
        options: [
          { text: 'Vue.js', language: 'JavaScript' },
          { text: 'Adonis', language: 'JavaScript' },
          { text: 'Rails', language: 'Ruby' },
          { text: 'Sinatra', language: 'Ruby' },
          { text: 'Laravel', language: 'PHP' },
          { text: 'Phoenix', language: 'Elixir' }
        ]
      }, {
        // 布局用的，不需要type
        name: 'empty2',
        inputCol: 1,
        labelCol: 1
      }, {
        name: 'input6332',
        value: [],
        inputCol: 7,
        label: 'haha哈哈',
        labelCol: 1,
        type: 'search',
        required: false,
        optionName: 'managerInfo',
        placeholder: '请输入搜索',
        url: 'http://192.168.1.215:8089/hngs-web-dataReport-server/common/getAllBaseManagerName',
        param: { name: 'xxx', stationid: 3 },
        likeSearch: false
      }, {
        name: 'sdsd3334',
        value: [],
        inputCol: 4,
        label: 'dddd都是',
        labelCol: 2,
        labelOffset: 1,
        type: 'multisearch',
        required: false,
        optionName: 'roadInfo',
        optionValue: 'roadId',
        placeholder: '请输入搜索',
        url: 'http://192.168.1.215:8089/hngs-web-dataReport-server/common/getBaseRoadByManager1',
        param: {},
        linkage: ['input6332-managerId:managerId']
      }, {
        name: 'button1',
        type: 'button',
        col: 3,
        align: 'right',
        // 不设置默认查询和重置
        buttons: [{
          variant: 'secondary',
          name: '自定义按钮',
          icon: 'thermometer-2',
          click: function() {
            alert('click')
          }
        }, {
          variant: 'secondary',
          name: '自定义按钮',
          click: function() {
            alert('click1')
          }
        }]
      }, {
        name: 'button2',
        type: 'option',
        col: 3,
        align: 'center',
        // 不设置默认查询和重置
        options: [{
          variant: 'secondary',
          icon: 'university',
          name: '保存',
          click: function() {
            alert('click')
          }
        }]
      }, {
        name: 'radiostest',
        value: 2,
        inputCol: 3,
        label: '单选框',
        labelCol: 2,
        type: 'radios',
        required: true,
        valueField: 'value1',
        textField: 'text1',
        radios: [{
          text1: '男',
          value1: 1
        }, {
          text1: '女',
          value1: 2
        }]
      }, {
        name: 'checkboxestest',
        value: [2],
        inputCol: 2,
        label: '复选框',
        labelCol: 1,
        type: 'checkboxes',
        // required: true,
        valueField: 'value1',
        textField: 'text1',
        state: null,
        checkboxes: [{
          text1: '第一个',
          value1: 1
        }, {
          text1: '第二个',
          value1: 2
        }]
      }],
      treeData: [{
          "text": "Same but with checkboxes",
          "children": [{
              "text": "initially selected",
              "selected": true
            },
            {
              "text": "custom icon",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "initially open",
              "icon": "fa fa-folder icon-state-default",
              "opened": true,
              "children": [{
                "text": "Another node"
              }]
            },
            {
              "text": "custom icon",
              "icon": "fa fa-warning icon-state-warning"
            },
            {
              "text": "disabled node",
              "icon": "fa fa-check icon-state-success",
              "disabled": true
            }
          ]
        },
        {
          "text": "Same but with checkboxes",
          "opened": true,
          "children": [{
              "text": "initially selected",
              "selected": true
            },
            {
              "text": "custom icon",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "initially open",
              "icon": "fa fa-folder icon-state-default",
              "opened": true,
              "children": [{
                "text": "Another node"
              }]
            },
            {
              "text": "custom icon",
              "icon": "fa fa-warning icon-state-warning"
            },
            {
              "text": "disabled node",
              "icon": "fa fa-check icon-state-success",
              "disabled": true
            }
          ]
        },
        {
          "text": "And wholerow selection"
        }
      ]
    }
  },
  methods: {
    search(param) {
      console.log(param)
    },
    itemClick() {}
  },
  watch: {
    'testChange': function(val, old) {
      console.log(val, old)
      // this.confirm('sssss')
    }
  }
}
</script>