<template>
    <div class="ion-title">
        <div class="toolbar-title" :class="[modeClass]"
             :style="{color:titleColor}"
             @click="titleClick" v-html="titleInner"></div>
    </div>
</template>
<script type="text/javascript">
  /**
   * @component Toolbar/Title
   * @description
   *
   *
   * ## 文档标题 / Title
   *
   * 设置顶部的title及document.title, 请使用ref获取Title组件的setTitle方法, 使用该方法会同步设置document.title(默认)
   *
   * ### 等级
   *
   * 只有在Navbar组件中的Title组件才会自动更新`document.title`的值,
   *
   *
   * ### 如何引入
   *
   * ```
   * // 引入
   * import { Toolbar, Buttons, Title } from 'vimo'
   * // 安装
   * Vue.component(Toolbar.name, Toolbar)
   * Vue.component(Title.name, Title)
   * Vue.component(Buttons.name, Buttons)
   * ```
   *
   *
   * ### 如果在支付宝中
   * 如果在支付宝中, 则使用支付宝的方式设置title及其壳子的title, 可用方法如下:
   *
   * - setTitle
   * - reset
   *
   * @props {String} [mode=ios] - 模式
   * @props {String} [title] - 标题
   * @fires component:Title#title:click
   * @see component:Toolbar
   * @usage
   * <template>
   *  <Page>
   *    <Header>
   *      <Navbar>
   *        <Title ref="title">Demo</Title>
   *      <Navbar>
   *    </Header>
   *    <Content>
   *      <h1>这里是内容</h1>
   *    </Content>
   *  </Page>
   * </template>
   *
   * ...
   *
   * computed: {
   *   titleComponent () {
   *     return this.$refs.title
   *   }
   * },
   * methods: {
   *   setAllTitle () {
   *      this.titleComponent.setTitle('title')
   * }
   *
   * */
  import { isPresent } from '../../util/type'

  export default {
    name: 'Title',
    inject: {
      appComponent: {
        from: 'appComponent',
        default: null
      },
      headerComponent: {
        from: 'headerComponent',
        default: null
      },
      navbarComponent: {
        from: 'navbarComponent',
        default: null
      }
    },
    data () {
      return {
        titleColor: null,
        titleInner: this.title
      }
    },
    props: {
      /**
       * mode 按钮风格
       * */
      mode: {
        type: String,
        default () { return isPresent(this.$config) && this.$config.get('mode', 'ios') || 'ios' }
      },
      /**
       * 设置的title值
       * */
      title: String
    },
    watch: {
      title () {
        this.titleInner = this.getTitle()
        if (this.isTitleInNavbar) {
          this.setTitle(this.titleInner)
        }
      }
    },
    computed: {
      modeClass () {
        return `toolbar-title-${this.mode}`
      },
      // 这个title组件在navbar中
      isTitleInNavbar () {
        return !!this.navbarComponent
      },
      // 包裹当前组件的Header在App组件中
      isHeaderInApp () {
        return !!this.appComponent && !!this.headerComponent && !!this.navbarComponent
      }
    },
    methods: {
      /**
       * @function getTitle
       * @description
       * 获取Title组件中的title, 兼容各种模式
       * @return {String}
       * */
      getTitle () {
        let _title = ''
        /**
         * 组件获取了传入的title值，之后通过全局注册的$setTitle方法
         * 设置document.title（此处做了兼容）
         * */
        if (this.title) {
          // prop传入title值
          // eg: <Title title="Toolbar"></Title>
          _title = this.title.trim()
        } else if (this.$slots.default && this.$slots.default[0] && this.$slots.default[0].text) {
          // 如果是直接写在ion-title中的值
          // eg: <Title>Toolbar</Title>
          _title = this.$slots.default[0].text.trim()
        } else if (this.$slots.default && this.$slots.default[0] && this.$slots.default[0].tag && this.$slots.default[0].children[0].text) {
          // 如果是这届下载ion-title中的值，并且包含一层标签的情况
          // eg: <Title>
          //      <span>Toolbar</span>
          //      <span>-</span>
          //      <span>Test</span>
          //    </Title>
          // -> Toolbar-Test
          this.$slots.default.forEach((item) => {
            if (item.children && item.children.length > 0 && item.children[0] && item.children[0].text) {
              _title += item.children[0].text.trim()
            }
          })
        }
        return _title
      },

      /**
       * @function setTitle
       * @description
       * 修改Header的title, 目前可用平台: H5/Alipay/Dingtalk
       * @param {String|Object} title - title
       * @param {String|Object} title.title - title
       * @param {String|Object} title.image - image
       * @param {boolean} [changeDocTitle=true] - 是否设置doc的title, 默认是同步设置的
       * */
      setTitle (title, changeDocTitle = true) {
        let _title = {}
        if (typeof title === 'string') {
          _title.title = title
          this.titleInner = title
        } else if (typeof title === 'object' && title.image) {
          _title.title = null
          _title.image = title.image
          this.titleInner = `<img src="${title.image}">`
        }
        if (changeDocTitle) {
          // 设置document的title, 这部分由$app处理
          this.$app && this.$app.setDocTitle(_title)
        }
      },

      /**
       * @function setTitleColor
       * @description
       * 设置Title文字的颜色
       * @param {String} color - color, 例如 #ff0000
       * */
      setTitleColor (color) {
        this.titleColor = color
      },

      /**
       * @function reset
       * @description
       * 重置Title文字的颜色, 目前可用平台: Alipay
       * */
      reset () {
        this.titleColor = null
        this.$platform && this.$platform.resetNavbarOptionButton && this.$platform.resetNavbarOptionButton()
      },

      /**
       * 初始化
       * 只在Navbar中的Title才会具有更新Title的特性!
       * 且, 一个Page只能拥有一个Navbar, 当在Navbar中设置Title, 则Title的方法
       * 将赋予页面Page(document.title),
       * @private
       * */
      init () {
        this.titleInner = this.getTitle()
        if (this.isTitleInNavbar) {
          this.setTitle(this.titleInner)
        }
        if (this.isHeaderInApp) {
          window.VM.$title = this
        }

        this.$root.$on('title:click', () => {
          this.$emit('title:click')
        })
      },

      /**
       * 点击标题时触发事件
       * @private
       * */
      titleClick () {
        if (this.isTitleInNavbar) {
          /**
           * @event component:Title#title:click
           * @description 点击title时触发
           */
          this.$emit('title:click', this)
        }
      }
    },
    mounted () {
      this.init()
    },
    activated () {
      // BugFix: #15, keep-alive模式下不更新title的问题
      if (this.isTitleInNavbar) {
        this.setTitle(this.titleInner)
      }
      if (this.isHeaderInApp) {
        window.VM.$title = this
      }
    }
  }
</script>
