<template>
  <Container :needPadding="true">
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">Weiling-Mobile-Ui组件库</WlHeader>
    </template>
    <template v-slot:main>
      <div v-for="menu in list" :key="menu.id">
        <Title>{{ menu.title }}</Title>
        <div v-for="item in menu.children" :key="item.link">
          <div class="wrap">
            <WlButton block type="default" @onClick="onClick(item)">{{ item.name }}</WlButton>
          </div>
        </div>
      </div>
    </template>
  </Container>
</template>
<script>
import Title from "./components/Title";
import Container from "./components/Container";
/*
 * @Author: yangxin
 * @Date: 2021-09-18 11:12:20
 * @Last Modified by: yangxin
 * @Last Modified time: 2022-07-02 13:54:11
 */
export default {
  name: "README",
  components: { Container, Title },
  data() {
    return {
      list: [
        {
          title: "基础组件",
          id: "2",
          children: [
            {
              name: "Button 按钮",
              id: "2-1",
              link: "/Common/WlButton",
            },
            {
              name: "Pic 图片",
              id: "2-2",
              link: "/Common/WlPic",
            },
            {
              name: "Search 搜索",
              id: "2-3",
              link: "/Common/WlSearch",
            },
            {
              name: "Header 头部",
              id: "2-4",
              link: "/Common/WlHeader",
            },
            {
              name: "Input 输入框",
              id: "2-5",
              link: "/Common/WlInput",
            },
            {
              name: "WlTextarea 多行输入框",
              id: "2-6",
              link: "/Common/WlTextarea",
            },
            {
              name: "WlStaffName 试用版名称",
              id: "2-7",
              link: "/Common/WlStaffName",
            },
            {
              name: "User 用户",
              id: "2-8",
              link: "/Common/WlUser",
            },
            {
              name: "UserGroups 多个用户",
              id: "2-9",
              link: "/Common/WlUserGroups",
            },
            {
              name: "FixedMenu 固定菜单",
              id: "2-10",
              link: "/Common/WlFixedMenu",
            },
          ],
        },
      ],
    };
  },
  methods: {
    onClick(item) {
      const { link } = item;
      window.parent.postMessage(link, window.parent.location.href);
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  margin: 0 j(10) j(10) 0;
}
</style>
