<script>
export default {
  name: 'EsLabel',
  componentsName: 'EsLabel',
  inheritAttrs: false,
  props: {
    contents: {
      type: [Object, String],
      default() {
        return '';
      }
    },
    text: String,
    rules: {
      type: [Array, Object],
      default() {
        return {};
      }
    },
    icon: {
      type: String,
      default: ''
    },
    img: {
      type: String,
      default: ''
    },
    image: {
      type: String,
      default: ''
    },
    hide: {
      type: Boolean,
      default: false
    },
    tips: {
      type: [String, Object],
      default: ''
    },
    before: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: String,
      default: '120px'
    },
    plain: Boolean,
    events: Object,
    event: Function
  },
  computed: {
    isRequired() {
      let flag = false;
      if (Array.isArray(this.rules)) {
        this.rules.forEach((item) => {
          if (Object.prototype.hasOwnProperty.call(item, 'required')) {
            flag = item.required;
            return flag;
          }
        });
      } else {
        if (Object.prototype.hasOwnProperty.call(this.rules, 'required')) {
          flag = this.rules.required;
        }
      }
      return flag;
    }
  },
  data() {
    return {
      placeholders: this.placeholder
    };
  },
  mounted() {},
  methods: {
    handleClick(e, type, obj) {
      e.stopPropagation();
      e.preventDefault();
      if (type) {
        if (this.events && this.events[type]) {
          let params = obj ? [obj, e, this] : [e, this];
          if (typeof this.events[type] === 'function') {
            this.events[type]('click', ...params);
          } else if (
            this.events[type]['click'] &&
            typeof this.events[type]['click'] === 'function'
          ) {
            this.events[type]['click'](...params);
          }
        }
      } else {
        this.event && this.event(this, e);
        this.$emit('click', this, e);
      }
    },
    handleMouseenter(e, type, obj) {
      e.stopPropagation();
      e.preventDefault();
      if (type && this.events && this.events[type]) {
        let params = obj ? [obj, e, this] : [e, this];
        if (typeof this.events[type] === 'function') {
          this.events[type]('mouseenter', ...params);
        } else if (
          this.events[type]['mouseenter'] &&
          typeof this.events[type]['mouseenter'] === 'function'
        ) {
          this.events[type]['mouseenter'](...params);
        }
      }
    },
    handleMouseleave(e, type, obj) {
      e.stopPropagation();
      e.preventDefault();
      if (type && this.events && this.events[type]) {
        let params = obj ? [obj, e, this] : [e, this];
        if (typeof this.events[type] === 'function') {
          this.events[type]('mouseleave', ...params);
        } else if (
          this.events[type]['mouseleave'] &&
          typeof this.events[type]['mouseleave'] === 'function'
        ) {
          this.events[type]['mouseleave'](...params);
        }
      }
    }
  },
  render(h) {
    let i = 0;
    let doms = [];
    if (!this.hide) {
      if (this.$slots.prepend) {
        doms.push(this.$slots.prepend);
      }
      if (typeof this.contents === 'string') {
        if (this.contents || this.text) {
          doms.push(this.contents || this.text);
        }
        if (this.icon) {
          if (
            this.icon.indexOf('es-icon-') > -1 ||
            this.icon.indexOf('el-icon-') > -1
          ) {
            doms.push(
              h('i', {
                class: [
                  this.icon,
                  this.events && this.events['icon'] ? 'es-pointer' : ''
                ],
                on: {
                  click: (e) => {
                    this.handleClick(e, 'icon');
                  },
                  mouseenter: (e) => {
                    this.handleMouseenter(e, 'icon');
                  },
                  mouseleave: (e) => {
                    this.handleMouseleave(e, 'icon');
                  }
                }
              })
            );
          } else if (this.icon.indexOf('&#') > -1) {
            doms.push(
              h(
                'i',
                {
                  class: [
                    'es-label-icon',
                    'es-icon',
                    this.events && this.events['icon'] ? 'es-pointer' : ''
                  ],
                  on: {
                    click: (e) => {
                      this.handleClick(e, 'icon');
                    },
                    mouseenter: (e) => {
                      this.handleMouseenter(e, 'icon');
                    },
                    mouseleave: (e) => {
                      this.handleMouseleave(e, 'icon');
                    }
                  }
                },
                [this.icon]
              )
            );
          } else {
            let icon =
              this.icon.indexOf('es-') > -1
                ? 'es-icon-' + this.icon.replace('es-', '')
                : 'el-icon-' + this.icon.replace('el-', '');
            doms.push(
              h('i', {
                class: [
                  icon,
                  'es-label-icon',
                  this.events && this.events['icon'] ? 'es-pointer' : ''
                ],
                on: {
                  click: (e) => {
                    this.handleClick(e, 'icon');
                  },
                  mouseenter: (e) => {
                    this.handleMouseenter(e, 'icon');
                  },
                  mouseleave: (e) => {
                    this.handleMouseleave(e, 'icon');
                  }
                }
              })
            );
          }
        }
        if (this.image || this.img) {
          doms.push(
            h('img', {
              class: [
                'es-label-img',
                this.events && (this.events['image'] || this.events['img'])
                  ? 'es-pointer'
                  : ''
              ],
              attrs: { src: this.image || this.img },
              on: {
                click: (e) => {
                  this.handleClick(e, this.image ? 'image' : 'img');
                },
                mouseenter: (e) => {
                  this.handleMouseenter(e, this.image ? 'image' : 'img');
                },
                mouseleave: (e) => {
                  this.handleMouseleave(e, this.image ? 'image' : 'img');
                }
              }
            })
          );
        }
        if (this.tips) {
          if (typeof this.tips === 'string') {
            if (this.before) {
              doms.unshift(
                h('es-tips', {
                  props: { contents: this.tips }
                })
              );
            } else {
              i = doms.length;
              doms.push(
                h('es-tips', {
                  props: { contents: this.tips }
                })
              );
            }
          } else {
            if (this.before) {
              doms.unshift(
                h('es-tips', {
                  props: { ...this.tips }
                })
              );
            } else {
              i = doms.length;
              doms.push(
                h('es-tips', {
                  props: { ...this.tips }
                })
              );
            }
          }
        }
      } else {
        for (let i in this.contents) {
          switch (i) {
            case 'text':
              doms.push(this.contents[i]);
              break;
            case 'icon':
              if (
                this.contents[i].indexOf('es-icon-') > -1 ||
                this.contents[i].indexOf('el-icon-') > -1
              ) {
                doms.push(
                  h('i', {
                    class: [
                      this.contents[i],
                      this.events && this.events['icon'] ? 'es-pointer' : ''
                    ],
                    on: {
                      click: (e) => {
                        this.handleClick(e, 'icon');
                      },
                      mouseenter: (e) => {
                        this.handleMouseenter(e, 'icon');
                      },
                      mouseleave: (e) => {
                        this.handleMouseleave(e, 'icon');
                      }
                    }
                  })
                );
              } else if (this.contents[i].indexOf('&#') > -1) {
                doms.push(
                  h(
                    'i',
                    {
                      class: [
                        'es-label-icon',
                        'es-icon',
                        this.events && this.events['icon'] ? 'es-pointer' : ''
                      ],
                      on: {
                        click: (e) => {
                          this.handleClick(e, 'icon');
                        },
                        mouseenter: (e) => {
                          this.handleMouseenter(e, 'icon');
                        },
                        mouseleave: (e) => {
                          this.handleMouseleave(e, 'icon');
                        }
                      }
                    },
                    [this.contents[i]]
                  )
                );
              } else {
                let icon =
                  this.contents[i].indexOf('es-') > -1
                    ? 'es-icon-' + this.contents[i].replace('es-', '')
                    : 'el-icon-' + this.contents[i].replace('el-', '');
                doms.push(
                  h('i', {
                    class: [
                      icon,
                      'es-label-icon',
                      this.events && this.events['icon'] ? 'es-pointer' : ''
                    ],
                    on: {
                      click: (e) => {
                        this.handleClick(e, 'icon');
                      },
                      mouseenter: (e) => {
                        this.handleMouseenter(e, 'icon');
                      },
                      mouseleave: (e) => {
                        this.handleMouseleave(e, 'icon');
                      }
                    }
                  })
                );
              }
              break;
            case 'img':
              doms.push(
                h('img', {
                  class: [
                    'es-label-img',
                    this.events && this.events['img'] ? 'es-pointer' : ''
                  ],
                  attrs: { src: this.contents[i] },
                  on: {
                    click: (e) => {
                      this.handleClick(e, 'img');
                    },
                    mouseenter: (e) => {
                      this.handleMouseenter(e, 'img');
                    },
                    mouseleave: (e) => {
                      this.handleMouseleave(e, 'img');
                    }
                  }
                })
              );
              break;
            case 'image':
              doms.push(
                h('img', {
                  class: [
                    'es-label-img',
                    this.events && this.events['image'] ? 'es-pointer' : ''
                  ],
                  attrs: { src: this.contents[i] },
                  on: {
                    click: (e) => {
                      this.handleClick(e, 'image');
                    },
                    mouseenter: (e) => {
                      this.handleMouseenter(e, 'image');
                    },
                    mouseleave: (e) => {
                      this.handleMouseleave(e, 'image');
                    }
                  }
                })
              );
              break;
            case 'tips':
              if (typeof this.contents[i] === 'string') {
                if (this.before) {
                  doms.unshift(
                    h('es-tips', {
                      props: { contents: this.contents[i] }
                    })
                  );
                } else {
                  i = doms.length;
                  doms.push(
                    h('es-tips', {
                      props: { contents: this.contents[i] }
                    })
                  );
                }
              } else {
                if (this.before) {
                  doms.unshift(
                    h('es-tips', {
                      props: { ...this.contents[i] }
                    })
                  );
                } else {
                  i = doms.length;
                  doms.push(
                    h('es-tips', {
                      props: { ...this.contents[i] }
                    })
                  );
                }
              }
              break;
          }
        }
      }
      if (this.$slots.append) {
        if (i > 0) {
          doms.splice(i, 0, this.$slots.append);
        } else {
          doms.push(this.$slots.append);
        }
      }
      if (this.plain) {
        doms.push('：');
      }
      return h(
        'span',
        {
          class: { 'es-label': true, 'es-is-required': this.isRequired },
          on: { click: this.handleClick }
        },
        doms
      );
    } else {
      return '';
    }
  }
};
</script>
