var miniapp = Vue.component('miniapp-panel', {
  name: 'panel',
  props: {
    title: {
      type: String,
      default () {
        return '';
      }
    }
  },
  render(h) {
    var title = h('div', {
      class: {
        title: true
      },
      domProps: {
        innerHTML: this.title
      }
    });

    var appTitle = h('div', {
      'class': {
        'app-title': true
      }
    });

    var body = h('div', {
      'class': {}
    }, this.$slots.default);

    return h('div', {
      'class': {
        'app-frame': true
      }
    }, [title, appTitle, body]);
  }
});

var selectComp = Vue.component('selectComp', {
  name: 'selectComp',
  props: ['id', 'type', 'cb'],
  render(h) {
    var vm = this;

    var btn = h('div', {
      'class': {
        'select-comp__mask__btn': true
      },
      domProps: {
        innerHTML: '编辑'
      },
      on: {
        click(e) {
          vm.cb && vm.cb(e, vm.id, vm.type)
        }
      }
    }, []);

    var mask = h('div', {
      'class': {
        'select-comp__mask': true
      }
    }, []);

    return h('div', {
      'class': {
        'select-comp': true
      }
    }, [mask, btn, this.$slots.default]);
  },
  methods: {}
});

var bannerEditor = Vue.component('bannerEditor', {
  name: 'bannerEditor',
  data() {
    let vm = this;

    return {
      list: [{
        val: 1,
        sel: 2
      }, {
        val: 3,
        sel: 4
      }],
      btn: {
        onClick(row, index) {
          vm.list.splice(index, 1);
        }
      },
      addBtn: {
        onClick() {
          vm.list.push({
            val: 3,
            sel: 8
          });
        }
      }
    }
  },
  methods: {
    onClick(i) {
      
    }
  },
  template: `
    <div style="text-align: center;">
      <table class="banner-table">
        <tbody>
          <tr v-for="i, index in list">
            <th style="width: 50px;">
              {{index + 1}}
            </th>

            <th style="width: 30%;">
            图片
            </th>

            <th style="width: 40%;">
              <div>
              <ufoTextBox v-model="i.val"></ufoTextBox>
              </div>
              
              <div>
              <ufoSelectBox v-model="i.sel"></ufoSelectBox>
              </div>
            </th>

            <th style="width: 20%">
              <ufoButton :opts="btn">删除</ufoButton>
            </th>

          </tr>
        </tbody>
      </table>
      <div>
        <ufoButton :opts="addBtn">增加</ufoButton>
      </div>
    </div>
  `
});

var banner = Vue.component('banner', {
  name: 'banner',
  props: {
    imgUrl: {
      type: String,
      default () {
        return '/images/banner-img.png'
      }
    }
  },
  methods: {
    edit(e, id, type) {
      this.$refs.edit.setShow();
    }
  },
  render(h) {
    var vm = this

    var image = h('img', {
      'class': {
        banner: true
      },
      attrs: {
        src: this.imgUrl,
        width: '100%'
      }
    });

    return h(selectComp, {
      props: {
        cb: vm.edit
      }
    }, [image, h(globalComp.ufoAlert, {
      props: {
        title: '轮播图资源位',
        opts: {
          width: 700,
          height: 600
        }
      },
      ref: 'edit'
    }, [h(bannerEditor)])])
  }
});

var hotEditor = Vue.component('hotEditor', {
  name: 'hotEditor',
  template: `
    <div>
      hoteditor
    </div>
  `
});

var hot = Vue.component('hot', {
  name: 'hot',
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    edit() {
      this.$refs.edit.setShow();
    }
  },
  render(h) {
    var vm = this;

    var title = h('div', {
      'class': {
        'hot-title': true
      },
      domProps: {
        innerHTML: '热门系列'
      }
    });

    var items = Array.apply(null, this.list).map(function() {
      return h('img', {
        'class': {
          'hot-image': true
        },
        attrs: {
          src: '/images/item_bg.png'
        }
      });
    })

    var body = h('div', {
      'class': {
        'hot-body': true
      }
    }, [items]);

    var s = h(selectComp, {
      props: {
        cb: vm.edit
      }
    }, [title, body, h(globalComp.ufoAlert, {
      ref: 'edit'
    }, [h(hotEditor)])])

    return h('div', {
      style: {
        'background-color': 'white'
      }
    }, [s]);
  }
});

var tabEditor = Vue.component('tabEditor', {
  template: `<div>tabEditor</div>`
});

var tab = Vue.component('tab', {
  name: 'tab',
  methods: {
    edit() {
      this.$refs.edit.setShow();
    }
  },
  render(h) {
    var vm = this;

    var imageUrl = '/images/floor-recommend.png';

    var image = h('img', {
      'class': {
        banner: true
      },
      attrs: {
        src: imageUrl,
        width: '100%'
      }
    });

    return h(selectComp, {
      props: {
        cb: vm.edit
      }
    }, [image, h(globalComp.ufoAlert, {
      ref: 'edit'
    }, [h(tabEditor)])])
  }
});

var divide = Vue.component('divide', {
  name: 'divide',
  render(h) {
    return h('div', {
      'class': {
        divide: true
      }
    });
  }
});

var sortTabEditor = Vue.component('sortTabEditor', {
  template: `<div>sortTabEditor</div>`
});


var sortTab = Vue.component('tab', {
  name: 'sortTab',
  methods: {
    edit() {
      this.$refs.edit.setShow();
    }
  },
  render(h) {
    var vm = this;

    var imageUrl = '/images/sort_item.png';

    var image = h('img', {
      'class': {
        banner: true
      },
      attrs: {
        src: imageUrl,
        width: '100%'
      }
    });

    return h(selectComp, {
      props: {
        cb: vm.edit
      }
    }, [image, h(globalComp.ufoAlert, {
      ref: 'edit'
    }, [h(sortTabEditor)])])
  }
});

var smartFloor = Vue.component('smart-floor', {
  name: 'smart-floor',
  functional: true,
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  render(h, ctx) {
    function appropriateListComponent() {
      var item = ctx.props.item;

      if (item.type === 1) return banner;
      if (item.type === 2) return hot;
      if (item.type === 3) return tab;
      if (item.type === 4) return sortTab;

      return globalComp.ufoEmpty;
    }

    return h(appropriateListComponent(), ctx.data, ctx.children)
  }
});