<template>
  <Epic :activeStory="activeStory">
    <Tabbar slot="tabbar">
      <TabbarItem @click="activeStory = 'root1'" :selected="activeStory == 'root1'" text='Магазин'>
        <vkui-icon name="market_outline" size="24" />
      </TabbarItem>
    </Tabbar>
    <Root id="root1" :activeView="activeView" key="root1">
      <VKView id="view1" activePanel='main'>
        <Panel id='main' theme='gray'>
          <PanelHeader>
            Демо
          </PanelHeader>
          <Group>
            <Header>
              <template v-slot:aside>
                2 новых сообщения
              </template>
              <template v-slot:indicator>
                <Counter>NEW!</Counter>
              </template>
              Group Header
            </Header>
            <List>
              <Cell description="Главный велосипедист">
                <template v-slot:before>
                  <Avatar src="https://sun1-15.userapi.com/c855524/v855524300/b0afc/aeWSmsWBK6w.jpg?ava=1" />
                </template>
                <template v-slot:indicator>
                  <Counter>NEW!</Counter>
                </template>
                Никита Горшок
                <template v-slot:aside>
                  2 новых сообщения
                </template>
              </Cell>
            </List>
          </Group>
          <Group title='Форма'>
            <FormLayout>
              <FormStatus state="error">
                <template v-slot:title>
                  Некорректный мобильный номер
                </template>
                Необходимо корректно ввести номер в международном формате
              </FormStatus>
              <Input top="Мобильный телефон" value="+7 12 344 15 48" type='tel' status='error' />
              <Input top="Код подтверждения" />
            </FormLayout>
          </Group>

          <Group title='Кнопки'>
            <Div>
              <Button level='primary' size='xl'>
                <template v-slot:after>
                  <Counter>NEW!</Counter>
                </template>
                Primary
              </Button>
            </Div>
            <Div>
              <Button level='secondary' size='xl'>
                <template v-slot:after>
                  <Counter>NEW!</Counter>
                </template>
                Secondary
              </Button>
            </Div>
            <Div>
              <Button level='commerce' size='xl'>
                <template v-slot:after>
                  <Counter>NEW!</Counter>
                </template>
                Commerce
              </Button>
            </Div>
            <Div>
              <Button level='outline' size='xl'>
                <template v-slot:after>
                  <Counter>NEW!</Counter>
                </template>
                Outline
              </Button>
            </Div>
            <Div>
              <Button level='destructive' size='xl'>
                <template v-slot:after>
                  <Counter>NEW!</Counter>
                </template>
                Destructive
              </Button>
            </Div>
          </Group>

          <Group title='Горизонтальный режим'>
            <UsersStack :photos="[
            'https://sun9-1.userapi.com/c850624/v850624456/9f63e/c2_IbBit7I8.jpg?ava=1',
            'https://sun9-6.userapi.com/c851528/v851528416/e0360/1UfQ8aSIGVA.jpg?ava=1']"
            size='m'>Настя и Jean пойдут на это мероприятие</UsersStack>
          </Group>

          <Group title='Вертикальный режим'>
            <UsersStack :photos="[
            'https://sun9-9.userapi.com/c847219/v847219582/1eac9d/jxtvce2MwZk.jpg?ava=1',
            'https://pp.userapi.com/c834200/v834200315/1039ea/iFd9WUOdmDo.jpg?ava=1',
            'https://sun9-20.userapi.com/c850332/v850332555/115030/JyNJrr4cytY.jpg?ava=1',
            'https://sun9-18.userapi.com/c850024/v850024671/16f784/jDmN7V0YVb4.jpg?ava=1',
            'https://sun9-18.userapi.com/c850024/v850024671/16f784/jDmN7V0YVb4.jpg?ava=1',
            'https://sun9-18.userapi.com/c850024/v850024671/16f784/jDmN7V0YVb4.jpg?ava=1']"
            :vertical=true :count=3 size='m'>Алексей, Илья, Михаил<br />и ещё 3 человека</UsersStack>
          </Group>

          <Group>
            <Tabs theme="header" type="buttons">
              <HorizontalScroll>
                <TabsItem>
                  <template v-slot='after'>
                    <Counter>8</Counter>
                  </template>
                  <vkui-icon name="market_outline" size="24" />
                  Все
                </TabsItem>
                <TabsItem selected>
                  <template v-slot='after'>
                    <Counter>24</Counter>
                  </template>
                  <vkui-icon name="market_outline" size="24" />
                  Люди
                </TabsItem>
                <TabsItem>
                  <template v-slot='after'>
                    <Counter>2</Counter>
                  </template>
                  <vkui-icon name="market_outline" size="24" />
                </TabsItem>
                <TabsItem>
                  Музыка
                </TabsItem>
              </HorizontalScroll>
            </Tabs>
          </Group>
        </Panel>
      </VKView>
    </Root>
  </Epic>
</template>


<script>
import Epic from './components/Epic/Epic'
import Root from './components/Root/Root'
import VKView from './components/VKView/VKView'
import Panel from './components/Panel/Panel'
import PanelHeader from './components/PanelHeader/PanelHeader'
import PanelHeaderContent from './components/PanelHeaderContent/PanelHeaderContent'
import Touch from './components/Touch/Touch'
import Tappable from './components/Tappable/Tappable'
import Button from './components/Button/Button'
import Header from './components/Header/Header'
import HeaderButton from './components/HeaderButton/HeaderButton'
import HeaderContext from './components/HeaderContext/HeaderContext'
import HorizontalScroll from './components/HorizontalScroll/HorizontalScroll'
import Group from './components/Group/Group'
import Gallery from './components/Gallery/Gallery'
import List from './components/List/List'
import Cell from './components/Cell/Cell'
import CellButton from './components/CellButton/CellButton'
import Counter from './components/Counter/Counter'
import Checkbox from './components/Checkbox/Checkbox'
import Div from './components/Div/Div'
import ActionSheet from './components/ActionSheet/ActionSheet'
import ActionSheetItem from './components/ActionSheetItem/ActionSheetItem'
import Alert from './components/Alert/Alert'
import Avatar from './components/Avatar/Avatar'
import File from './components/File/File'
import FixedLayout from './components/FixedLayout/FixedLayout'
import Footer from './components/Footer/Footer'
import FormLayout from './components/FormLayout/FormLayout'
import FormLayoutGroup from './components/FormLayoutGroup/FormLayoutGroup'
import FormStatus from './components/FormStatus/FormStatus'
import FormField from './components/FormField/FormField'
import InfoRow from './components/InfoRow/InfoRow'
import Input from './components/Input/Input'
import Link from './components/Link/Link'
import Progress from './components/Progress/Progress'
import Radio from './components/Radio/Radio'
import Spinner from './components/Spinner/Spinner'
import ScreenSpinner from './components/ScreenSpinner/ScreenSpinner'
import Search from './components/Search/Search'
import Select from './components/Select/Select'
import SelectMimicry from './components/SelectMimicry/SelectMimicry'
import VKSwitch from './components/Switch/Switch'
import Tabs from './components/Tabs/Tabs'
import TabsItem from './components/TabsItem/TabsItem'
import Tabbar from './components/Tabbar/Tabbar'
import TabbarItem from './components/TabbarItem/TabbarItem'
import Slider from './components/Slider/Slider'
import UsersStack from './components/UsersStack/UsersStack'


import '@urapywka/vkui-icons'
import '@urapywka/vkui-icons/dist/vkui-icons.css'

export default {
  name: 'app',
  data: () => ({
    activeStory: 'root1',
    activeView: 'view1',
    activePanel: 'main',
    popout2: false,
    contextOpened: false,
    progress: 10,
    sw1: false,
    sw2: true,
    radio1: "4",
    input: '',
    sex: undefined,
    slider: .5,
    search: 'test',
  }),
  components: {
    Epic,
    Root,
    VKView,
    Panel,
    PanelHeader,
    PanelHeaderContent,
    Touch,
    Tappable,
    Button,
    Header,
    HeaderButton,
    HeaderContext,
    HorizontalScroll,
    Group,
    Gallery,
    List,
    Cell,
    CellButton,
    Counter,
    Checkbox,
    Div,
    ActionSheet,
    ActionSheetItem,
    Alert,
    Avatar,
    File,
    FixedLayout,
    Footer,
    FormLayout,
    FormLayoutGroup,
    FormStatus,
    FormField,
    InfoRow,
    Input,
    Link,
    Progress,
    Radio,
    Spinner,
    ScreenSpinner,
    Search,
    Select,
    SelectMimicry,
    VKSwitch,
    Tabs,
    TabsItem,
    Tabbar,
    TabbarItem,
    Slider,
    UsersStack,
  },
  methods: {
    test (e) {
      e.preventDefault()
    },
    openSheet () {
      this.popout2 = true;
    }
  }
}
</script>

<style>
@import './styles/common.css';

hr {
  border: none;
  border-bottom: 2px dashed #eee;
  margin: 40px 0;
}
</style>
