text: // import 'weui';
  import FastClick from 'fastclick';
  import weui from '../src/zweui';
  
  FastClick.attach(document.body);
  
  /* dialog */
  document.querySelector('#alertBtn').addEventListener('click', function () {
      weui.alert('自定义标题的alert', function () {
          console.log('ok');
      }, {
          title: '自定义标题'
      });
  });
  
  
  /* confirm */
  document.querySelector('#confirmBtn').addEventListener('click', function () {
      weui.confirm('自定义标题的confirm', function () {
          console.log('yes');
      }, function () {
          console.log('no');
      }, {
          title: '自定义标题'
      });
  });
  
  
  /* toast */
  document.querySelector('#toastBtn').addEventListener('click', function () {
      weui.toast('操作成功', {
          duration: 3000,
          className: 'bears'
      });
  });
  
  
  /* loading */
  document.querySelector('#loadingBtn').addEventListener('click', function () {
      var loading = weui.loading('loading');
      setTimeout(function () {
          loading.hide();
      }, 3000);
  });
  
  
  /* actionSheet */
  document.querySelector('#actionSheetBtn').addEventListener('click', function () {
      weui.actionSheet([
          {
              label: '拍照',
              onClick: function () {
                  console.log('拍照');
              }
          }, {
              label: '从相册选择',
              onClick: function () {
                  console.log('从相册选择');
              }
          }, {
              label: '其他',
              onClick: function () {
                  console.log('其他');
              }
          }
      ], [
          {
              label: '取消',
              onClick: function () {
                  console.log('取消');
              }
          }
      ], {
          title: 'actionTitle',
          className: 'custom-classname',
          onClose: function () {
              console.log('关闭');
          }
      });
  });
  
  
  /* topTips */
  document.querySelector('#topTipsBtn').addEventListener('click', function () {
      weui.topTips('请填写正确的字段', {
          duration: 3000,
          className: 'custom-classname',
          callback: function () {
              console.log('close');
          }
      });
  });
  
  
  /* picker */
  // 普通选择器
  document.querySelector('#pickerBtn').addEventListener('click', function () {
      weui.picker([{
          label: '飞机票',
          value: 0
      }, {
          label: '火车票(disabled)',
          disabled: true,
          value: 1
      }, {
          label: '的士票',
          value: 2
      }, {
          label: '住宿费',
          value: 3
      }, {
          label: '礼品费(disabled)',
          value: 4,
          disabled: true,
      }, {
          label: '活动费',
          value: 5
      }, {
          label: '通讯费',
          value: 6
      }, {
          label: '补助',
          value: 7
      }, {
          label: '通讯费',
          value: 8
      }, {
          label: '其他',
          value: 9
      }], {
          defaultValue: [2],
          className: 'custom-classname',
          onChange: function (result) {
              //console.log(item, index);
              console.log(result);
          },
          onConfirm: function (result) {
              console.log('confirm');
              console.log(result);
          },
          id: 'picker',
          title: '单列选择器',
          desc: '单列选择器描述',
      });
  });
  
  // 时间选择器
  document.querySelector('#datePickerBtn').addEventListener('click', function () {
      weui.datePicker({
          start: '2016-12-29',
          end: '2030-12-29',
          /**
           * https://zh.wikipedia.org/wiki/Cron
           * cron 表达式后三位
           * 示例：
           *  * * *                每天
           *  5 * *                每个月的5日
           *  1-10 * *             每个月的前10日
           *  1,5,10 * *           每个月的1号、5号、10号
           *  *\/2 * *             每个月的 1、3、5、7...日，注意写的时候斜杠“/”前面没有反斜杠“\”，这是因为是注释所以需要转义
           *  * 2 0                2月的每个周日
           *  * * 0,6              每个周末
           *  * * 3                每周三
           */
          cron: '* */2 0',
          defaultValue: [2017, 7, 9],
          onChange: function (result) {
              console.log(result);
          },
          onConfirm: function (result) {
              console.log(result);
          },
          id: 'datePicker',
          title: '日期选择器'
      });
  });
  
  // 多列选择器
  document.querySelector('#multiPickerBtn').addEventListener('click', function () {
      weui.picker([
          {
              label: '1',
              value: '1'
          }, {
              label: '2',
              value: '2'
          }, {
              label: '3',
              value: '3'
          }
      ], [
          {
              label: 'A',
              value: 'A'
          }, {
              label: 'B',
              value: 'B'
          }, {
              label: 'C',
              value: 'C'
          }
      ], {
          defaultValue: ['3', 'A'],
          onChange: function (result) {
              console.log(result);
          },
          onConfirm: function (result) {
              console.log(result);
          },
          id: 'multiPickerBtn',
          onClose: function () {
              console.log('onClose');
          },
          title: '多列选择器'
      });
  });
  
  // 级联选择器
  document.querySelector('#cascadePickerBtn').addEventListener('click', function () {
      weui.picker([
          {
              label: '广东',
              value: 0,
              children: [
                  {
                      label: '广州',
                      value: 0,
                      children: [
                          {
                              label: '海珠',
                              value: 0
                          }, {
                              label: '番禺',
                              value: 1
                          }
                      ]
                  }, {
                      label: '佛山',
                      value: 1,
                      children: [
                          {
                              label: '禅城',
                              value: 0
                          }, {
                              label: '南海',
                              value: 1
                          }
                      ]
                  }
              ]
          }, {
              label: '广西',
              value: 1,
              children: [
                  {
                      label: '南宁',
                      value: 0,
                      children: [
                          {
                              label: '青秀',
                              value: 0
                          }, {
                              label: '兴宁',
                              value: 1
                          }
                      ]
                  }, {
                      label: '桂林',
                      value: 1,
                      children: [
                          {
                              label: '象山',
                              value: 0
                          }, {
                              label: '秀峰',
                              value: 1
                          }
                      ]
                  }
              ]
          }
      ], {
          depth: 3,
          defaultValue: [0, 1, 1],
          onChange: function (result) {
              console.log(result);
          },
          onConfirm: function (result) {
              console.log(result);
          },
          id: 'cascadePicker2',
          title: '嵌套选择器'
      });
  });
  
  // 时间选择器
  document.querySelector('#distPickerBtn').addEventListener('click', function () {
      weui.distPicker({
          depth: 3,
          defaultValue: [110000, 110100, 110101],
          onChange: function (result) {
              console.log(result);
          },
          onConfirm: function (result) {
              console.log(result);
          },
          id: 'distPicker',
          className: 'distPicker',
          desc: '省市区三级联动',
          title: '地区选择器'
      });
  });
  
  /* searchbar */
  weui.searchBar('#searchBar');
  
  
  /* slider 因为需要获取长度，所以必须要在slider显示的时候才调用weui.slider*/
  var isSetSlider = false;
  
  function setSlider() {
      if (isSetSlider) return;
      isSetSlider = true;
  
      // 普通slider
      var sliderValue = document.getElementById('sliderValue');
      weui.slider('#slider', {
          defaultValue: 50,
          onChange: function (percent) {
              sliderValue.innerHTML = Math.round(percent);
              console.log(percent);
          }
      });
  
      // 带step的slider
      var sliderStepValue = document.getElementById('sliderStepValue');
      weui.slider('#sliderStep', {
          step: 10,
          defaultValue: 40,
          onChange: function (percent) {
              sliderStepValue.innerHTML = Math.round(percent);
              console.log(percent);
          }
      });
  
      // 分块的slider
      var sliderBlockValue = document.getElementById('sliderBlockValue');
      weui.slider('#sliderBlock', {
          step: 100 / 3,
          defaultValue: 33.333,
          onChange: function (percent) {
              sliderBlockValue.innerHTML = Math.round(percent);
              console.log(percent);
          }
      });
  }
  
  
  /* tab */
  weui.tab('#tab', {
      defaultIndex: 0,
      onChange: function (index) {
          console.log(index);
  
          if (index == 3) {
              setSlider(); // 设置slider
          }
      }
  });
  
  
  /* form */
  // 约定正则
  var regexp = {
      regexp: {
          IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/,
          VCODE: /^.{4}$/
      }
  };
  
  // 失去焦点时检测
  weui.form.checkIfBlur('#form', regexp);
  
  // 表单提交
  document.querySelector('#formSubmitBtn').addEventListener('click', function () {
      weui.form.validate('#form', function (error) {
          console.log(error);
          if (!error) {
              var loading = weui.loading('提交中...');
              setTimeout(function () {
                  loading.hide();
                  weui.toast('提交成功', 3000);
              }, 1500);
          }
      }, regexp);
  });
  
  
  /* 图片自动上传 */
  var uploadCount = 0, uploadList = [];
  var uploadCountDom = document.getElementById('uploadCount');
  weui.uploader('#uploader', {
      url: 'http://' + location.hostname + ':8002/upload',
      auto: true,
      type: 'file',
      fileVal: 'fileVal',
      compress: {
          width: 1600,
          height: 1600,
          quality: .8
      },
      onBeforeQueued: function (files) {
          if (['image/jpg', 'image/jpeg', 'image/png', 'image/gif'].indexOf(this.type) < 0) {
              weui.alert('请上传图片');
              return false;
          }
          if (this.size > 10 * 1024 * 1024) {
              weui.alert('请上传不超过10M的图片');
              return false;
          }
          if (files.length > 5) { // 防止一下子选中过多文件
              weui.alert('最多只能上传5张图片，请重新选择');
              return false;
          }
          if (uploadCount + 1 > 5) {
              weui.alert('最多只能上传5张图片');
              return false;
          }
  
          ++uploadCount;
          uploadCountDom.innerHTML = uploadCount;
      },
      onQueued: function () {
          uploadList.push(this);
          console.log(this);
      },
      onBeforeSend: function (data, headers) {
          console.log(this, data, headers);
          // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
          // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部
  
          // return false; // 阻止文件上传
      },
      onProgress: function (procent) {
          console.log(this, procent);
      },
      onSuccess: function (ret) {
          console.log(this, ret);
      },
      onError: function (err) {
          console.log(this, err);
      }
  });
  
  // 缩略图预览
  document.querySelector('#uploaderFiles').addEventListener('click', function (e) {
      var target = e.target;
  
      while (!target.classList.contains('weui-uploader__file') && target) {
          target = target.parentNode;
      }
      if (!target) return;
  
      var url = target.getAttribute('style') || '';
      var id = target.getAttribute('data-id');
  
      if (url) {
          url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');
      }
      var gallery = weui.gallery(url, {
          className: 'custom-name',
          onDelete: function () {
              weui.confirm('确定删除该图片？', function () {
                  --uploadCount;
                  uploadCountDom.innerHTML = uploadCount;
  
  
                  for (var i = 0, len = uploadList.length; i < len; ++i) {
                      var file = uploadList[i];
                      if (file.id == id) {
                          file.stop();
                          break;
                      }
                  }
                  target.remove();
                  gallery.hide();
              });
          }
      });
  });
  
  
  /* 图片手动上传 */
  var uploadCustomFileList = [];
  
  // 这里是简单的调用，其余api请参考文档
  weui.uploader('#uploaderCustom', {
      url: 'http://localhost:8002/upload',
      auto: false,
      onQueued: function () {
          uploadCustomFileList.push(this);
      }
  });
  
  // 手动上传按钮
  document.getElementById('uploaderCustomBtn').addEventListener('click', function () {
      uploadCustomFileList.forEach(function (file) {
          file.upload();
      });
  });
  
  // 缩略图预览
  document.querySelector('#uploaderCustomFiles').addEventListener('click', function (e) {
      var target = e.target;
  
      while (!target.classList.contains('weui-uploader__file') && target) {
          target = target.parentNode;
      }
      if (!target) return;
  
      var url = target.getAttribute('style') || '';
      var id = target.getAttribute('data-id');
  
      if (url) {
          url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');
      }
      var gallery = weui.gallery(url, {
          onDelete: function () {
              weui.confirm('确定删除该图片？', function () {
                  var index;
                  for (var i = 0, len = uploadCustomFileList.length; i < len; ++i) {
                      var file = uploadCustomFileList[i];
                      if (file.id == id) {
                          index = i;
                          break;
                      }
                  }
                  if (index !== undefined) uploadCustomFileList.splice(index, 1);
  
                  target.remove();
                  gallery.hide();
              });
          }
      });
  });
  