<template>
    <div class="ion-list" :class="[modeClass]">
        <slot></slot>
    </div>
</template>
<style lang="scss" src="./style.scss"></style>
<script type="text/javascript">
  /**
   * @component List
   * @description
   *
   * ## 列表组件 / List
   *
   * ### 概述
   * list有多重种风格的样式，有ios/android等等,对应ios/md模式.
   *
   *
   * ### 拓展
   * 此外, List组件也是`radioGroup`的管理域. 因为单选的确定需要一个父集. radio的使用需要开启`radioGroup`. 同时, v-model/事件等才能正常运行. 因为, List组件是radio-group的受体, 当点击radio时, radio向外寻找到这里, 传递v-model信息.
   *
   * ### 如何使用
   *
   * ```
   * // 引入
   * import { List, ListHeader, ItemGroup, Item, ItemDivider } from 'vimo'
   * // 安装
   * Vue.component(List.name, List)
   * Vue.component(ListHeader.name, ListHeader)
   * Vue.component(ItemGroup.name, ItemGroup)
   * Vue.component(Item.name, Item)
   * Vue.component(ItemDivider.name, ItemDivider)
   * // 或者
   * export default{
   *   components: {
   *    List, ListHeader, ItemGroup, Item, ItemDivider
   *  }
   * }
   * ```
   *
   * @props {string} [mode=ios]        - 样式模式
   * @props {Boolean} [radioGroup=false]  - 是否为radioGroup
   * @props {String} [value]  - 支持v-model
   * @props {Boolean} [disabled=false]  - 当前radio的禁用状态
   *
   * @usage
   * <!--普通使用-->
   * <template>
   *    <Page>
   *        <Header>
   *            <Navbar>
   *                <Title>List</Title>
   *            </Navbar>
   *         </Header>
   *        <Content class="outer-content">
   *            <List>
   *                <!--header-->
   *                <ListHeader>
   *                    <span>Contents</span>
   *                </ListHeader>
   *                <!--group-->
   *                <ItemGroup>
   *                    <Item button to="list.listForAll">ListForAll</Item>
   *                    <Item button :to="{name:'list.basicList'}">BasicList</Item>
   *                    <Item button :to="{name:'list.noLine'}">NoLine</Item>
   *                    <Item button :to="{name:'list.insetList'}">InsetList</Item>
   *                    <Item button :to="{name:'list.listDividers'}">ListDividers</Item>
   *                    <Item button :to="{name:'list.listHeaders'}">listHeaders</Item>
   *                    <Item button :to="{name:'list.iconList'}">IconList</Item>
   *                    <Item button :to="{name:'list.avatarList'}">AvatarList</Item>
   *                    <Item button :to="{name:'list.multi-lineList'}">Multi-lineList</Item>
   *                    <Item button :to="{name:'list.slidingList'}">SlidingList</Item>
   *                    <Item button :to="{name:'list.reorder'}">Reorder</Item>
   *                    <Item button :to="{name:'list.thumbnailList'}">ThumbnailList</Item>
   *                </ItemGroup>
   *            </List>
   *        </Content>
   *    </Page>
   * </template>
   *
   * <!--多列布局(两列三行)-->
   * <List>
   *    <ListHeader>
   *        <span>today</span>
   *    </ListHeader>
   *    <Item>
   *        <Avatar slot="item-left">
   *            <img src="./img/avatar-ts-woody.png">
   *        </Avatar>
   *        <Label>
   *            <h2>Woody</h2>
   *            <h3>Hello world</h3>
   *            <h4>This is third line</h4>
   *            <p>This town ain't big enough for the two of us!</p>
   *        </Label>
   *    </Item>
   *    <Item>
   *        <Avatar slot="item-left">
   *            <img src="./img/avatar-ts-buzz.png">
   *        </Avatar>
   *        <Label>
   *            <h2>Buzz Lightyear</h2>
   *            <h3>Hello world</h3>
   *            <p>My eyeballs could have been sucked from their sockets!</p>
   *        </Label>
   *    </Item>
   * </List>
   *
   * <!--Radio-->
   * <List radio-group v-model="fruits" :disabled="isListDisabled" @onChange="onChangeHandler">
   *    <ListHeader>Fruits</ListHeader>
   *    <Item>
   *        <Label>Apple</Label>
   *        <Radio value="apple" :disabled="isAppleDisabled" @onSelect="onSelectHandler"></Radio>
   *    </Item>
   *    <Item>
   *        <Label>Banana</Label>
   *        <Radio value="banana" color="danger" @onSelect="onSelectHandler"></Radio>
   *    </Item>
   *    <Item>
   *        <Label>Cherry (secondary color)</Label>
   *        <Radio value="cherry" color="secondary" @onSelect="onSelectHandler"></Radio>
   *    </Item>
   *    <Item>
   *        <Label>Disabled</Label>
   *        <Radio value="disabled" :disabled="true" @onSelect="onSelectHandler"></Radio>
   *    </Item>
   *    <Item>
   *        <Label>Default</Label>
   *        <Radio value="default" @onSelect="onSelectHandler"></Radio>
   *    </Item>
   * </List>
   *
   * @fires component:List#onChange
   *
   * @see component:Item
   * @demo #/list
   */
  export default {
    name: 'List',
    provide () {
      const _this = this
      return {
        listComponent: _this
      }
    },
    data () {
      return {
        // -------- Radio --------
        radioComponentList: [],
        isSendOut: false,
        timer: null
      }
    },
    props: {
      /**
       * mode 按钮风格 ios/window/android/we/alipay
       * */
      mode: {
        type: String,
        default () { return this.$config && this.$config.get('mode') || 'ios' }
      },
      /**
       * shouldEnable whether the item-sliding should be enabled or not
       * */
      sliding: Boolean,

      // -------- Radio --------
      radioGroup: Boolean,
      value: String,
      disabled: Boolean
    },
    watch: {
      value (val) {
        if (this.isSendOut) {
          this.isSendOut = false
        } else {
          this.radioComponentList.forEach((radioComponent) => {
            if (!radioComponent.isDisabled) {
              radioComponent.setChecked(val)
            }
          })
        }
      },
      disabled (isDisabled) {
        if (this.radioGroup) {
          this.disableAllRadio(isDisabled)
          this.onRadioChange(null)
        }
      }
    },
    computed: {
      // 环境样式
      modeClass () {
        return `list-${this.mode}`
      }
    },
    methods: {

      // -------- Radio --------
      /**
       * radio组件点击时执行这个命令
       * @private
       * */
      onRadioChange (value) {
        this.radioComponentList.forEach((radioComponent) => {
          if (!radioComponent.isDisabled) {
            radioComponent.setChecked(value)
          }
        })
        this.isSendOut = true
        /**
         * @event component:List#onChange
         * @description Radio组件数值变化时触发
         * @property {*} value - 变化值
         */
        this.$emit('input', value)
        this.$emit('onChange', value)
      },

      /**
       * 禁用全部radio
       * @private
       * */
      disableAllRadio (isDisable) {
        this.radioComponentList.forEach((radioComponent) => {
          radioComponent.setDisabled(isDisable)
        })
      },

      /**
       * 让radio组件记录自己
       * @private
       * */
      recordRadio (radioComponent) {
        this.radioComponentList.push(radioComponent)

        this.timer && window.clearTimeout(this.timer)
        this.timer = window.setTimeout(() => {
          this.radioComponentList.forEach((radioComponent) => {
            if (!radioComponent.isDisabled) {
              radioComponent.setChecked(this.value)
            }
          })
        }, 0)
      }
    },
    mounted () {
      // -------- Radio --------
      // 内部定义了Radio组件
      if (this.radioGroup) {
        this.disableAllRadio(this.disabled)
      }
    }
  }
</script>
