var globalComp = {};

function initComp() {
  var ufoEmpty = Vue.component('ufoEmpty', {
    name: 'ufoEmpty',
    render(h) {
      return h('div', '');
    }
  });

  var ufoAlert = Vue.component('ufoAlert', {
    name: 'ufoAlert',
    props: {
      title: {
        type: String,
        default() {
          return 'title'
        }
      },
      opts: {
        type: Object,
        default() {
          return {
            width: 400,
            height: 200,
          }
        }
      },
      ok: {
        type: Function
      },
      cancel: {
        type: Function
      }
    },
    methods: {
      setShow() {
        this.$dialog.dialog('open');
      },
      setHide() {
        this.$dialog.dialog('close');
      }
    },
    mounted() {
      let vm = this;

      setTimeout(() => {
        this.$dialog = $(this.$el).dialog({
          title: this.title,
          closed: true,
          cache: false,
          modal: true,
          ...this.opts,
          buttons: [{
            text:'确定',
            handler() {
              vm.ok && vm.ok();
              vm.setHide();
            }
          }, {
            text: '取消',
            handler() {
              vm.cancel && vm.cancel();
              vm.setHide();
            }
          }]
        });
      }, 50);
    },
    watch: {
      show(newVal) {
        if (newVal) {
        }
      }
    },
    render(h) {
      var head = h('div', {}, [
        this.$slots.header
      ]);

      var body = h('div', {}, [this.$slots.default || this.$slots.content]);

      return h('div', {}, [head, body]);
    },
  });

  var ufoTextBox = Vue.component('ufoTextBox', {
    name: 'ufoTextBox',
    props: {
      opts: {
        type: Object,
        default() {
          return {}
        }
      },
      value: {
        type: [String, Number],
        default() {
          return ''
        }
      }
    },
    data() {
      return {
        value_: this.value
      }
    },
    methods: {
      val() {
        return this.$textBox.getValue();
      }
    },
    watch: {
      value(newVal) {
        this.value_ = newVal;
        // this.$textBox && this.$textBox.setValue(newVal);
      }
    },
    mounted() {
      let vm = this;

      this.$textBox = $(this.$el).textbox(Object.assign(this.opts, {
        onChange(newVal) {
          vm.$emit('input', newVal);
        },
        value: this.value_
      }));
    },
    render(h) {
      return h('div', {}, []);
    },
  });

  var ufoSelectBox = Vue.component('ufoSelectBox', {
    name: 'ufoSelectBox',
    props: {
      opts: {
        type: Object,
        default() {
          return {}
        }
      },
      value: {
        type: [String, Number],
        default() {
          return ''
        }
      }
    },
    data() {
      return {
        value_: this.value
      }
    },
    methods: {
      val() {
        return this.$selectBox.getValue();
      }
    },
    watch: {
      value(newVal) {
        this.value_ = newVal;
        // this.$selectBox && this.$selectBox.setValue(newVal);
      }
    },
    mounted() {
      let vm = this;

      this.$selectBox = $(this.$el).combobox(Object.assign(this.opts, {
        onChange(newVal) {
          vm.$emit('input', newVal);
        },
        value: this.value_
      }));
    },
    render(h) {
      return h('div', {}, []);
    },
  });

  // var ufoTable = Vue.component('ufoTable', {

  // });

  var ufoButton = Vue.component('ufoButton', {
    name: 'ufoButton',
    props: ['opts'],
    mounted() {
      $(this.$el).linkbutton(this.opts);
    },
    render(h) {
      return h('div', {}, [this.$slots.default]);
    }
  });

  // var ufoUpload = Vue.component('ufoUpload', {

  // });

  globalComp = {
    ufoAlert,
    ufoEmpty,
    ufoTextBox,
    ufoSelectBox,
    // ufoTable,
    ufoButton,
    // ufoUpload
  }
}

initComp();