<template>
  <div class="home">
    <!-- <h1>按钮的样式</h1>
    <y-button type="default" @click="test()">默认按钮</y-button>
    <y-button disabled type="default">默认按钮</y-button>
    <y-button type="gray">灰色按钮</y-button>
    <y-button disabled type="gray">灰色按钮</y-button>
    <y-button type="link">文字按钮</y-button>
    <y-button disabled type="link">文字按钮</y-button>
    <y-button type="danger">危险按钮</y-button>
    <y-button disabled type="danger">危险按钮</y-button>
    <y-button type="default" icon="ios-cloud-upload-outline">上传文件</y-button>
    <y-button type="default" icon="icon-jian"></y-button>
    <y-button type="gray" icon="icon-jia"></y-button>-->
    <!-- <h1>面包屑样式如下</h1>
    <y-breadcrumb>
      <y-breadcrumb-item to="/">首页</y-breadcrumb-item>
      <y-breadcrumb-item to="/breadcrumb">活动管理</y-breadcrumb-item>
      <y-breadcrumb-item>详情列表</y-breadcrumb-item>
      <y-breadcrumb-item>详情</y-breadcrumb-item>
    </y-breadcrumb>-->
    <!-- 分页的效果如下 -->
    <!-- <y-pagination
    :total="total"
    :current-page="pages"
    :page-size="size"
    :jump-to='jumpTo'
    v-on:pagechangeparent="pagechange">
    </y-pagination>-->
    <!-- 进度条的样式如下 -->
    <!-- <y-progress :percent="60" ></y-progress> -->
    <!-- 标签页面的样式如下 -->
    <!-- <y-tabs :value="3">
      <y-tabpane label="Tab1" name="1">我是内容1....</y-tabpane>
      <y-tabpane label="Tab2" name="2">我是内容2....</y-tabpane>
      <y-tabpane label="Tab3" name="3">我是内容3....</y-tabpane>
    </y-tabs>

    <y-tabs :value="3" card>
      <y-tabpane label="Tab1" name="1">我是内容1....</y-tabpane>
      <y-tabpane label="Tab2" name="2">我是内容2....</y-tabpane>
      <y-tabpane label="Tab3" name="3">我是内容3....</y-tabpane>
    </y-tabs>

    <y-tabs :value="3" sample>
      <y-tabpane label="Tab1" name="1">我是内容1....</y-tabpane>
      <y-tabpane label="Tab2" name="2">我是内容2....</y-tabpane>
      <y-tabpane label="Tab3" name="3">我是内容3....</y-tabpane>
    </y-tabs>-->
    <!-- 步骤条的样式如下 -->
    <!-- <div style="width:800px">
    <y-steps current="1">
      <y-step title="已完成" description="这里是步骤的描述信息"></y-step>
      <y-step title="进行中" description="这里是步骤的描述信息"></y-step>
      <y-step title="待进行" description="这里是步骤的描述信息"></y-step>
    </y-steps>
    <br/>
    <br/>
    <y-steps current="1" mini>
      <y-step title="已完成" description="这里是步骤的描述信息"></y-step>
      <y-step title="进行中" description="这里是步骤的描述信息"></y-step>
      <y-step title="待进行" description="这里是步骤的描述信息"></y-step>
    </y-steps>
    <br/>
    <br/>

    <y-steps :current="current">
      <y-step title="步骤1"></y-step>
      <y-step title="步骤2"></y-step>
      <y-step title="步骤3"></y-step>
      <y-step title="步骤4"></y-step>
    </y-steps>
    <br/>
    <y-button @click="step('next')" type="default">下一步</y-button>
    <y-button @click="step('prev')" type="default">上一步</y-button>

    -->
    <!-- 菜单的导航  -->
    <!-- <y-menu theme='dark' active-name="1">
     <y-menu-item name="1" >
       <i class="icon-calendar"></i>
       <span slot="title">我的产品</span>
     </y-menu-item>
       <y-sub-menu name="1">
         <template slot="title">
           <i class="icon-calendar"></i>
           <span slot="title">商品管理</span>
         </template>
         <y-menu-item name="1-1" >商品信息</y-menu-item>
         <y-menu-item name="1-2" >商品列表</y-menu-item>
         <y-menu-item name="1-3" >商品新增</y-menu-item>
         <y-menu-item name="1-4" >商品筛选</y-menu-item>
       </y-sub-menu>
       <y-sub-menu name="2">
         <template slot="title">
           <i class="icon-calendar"></i>
           <span slot="title">用户管理</span>
         </template>
         <y-menu-group title="超级管理">
           <y-menu-item name="2-1" >用户信息</y-menu-item>
           <y-menu-item name="2-2" >用户列表</y-menu-item>
         </y-menu-group>
         <y-menu-group title="普通管理">
           <y-menu-item name="2-3" >用户新增</y-menu-item>
           <y-menu-item name="2-4" >用户筛选</y-menu-item>
         </y-menu-group>
       </y-sub-menu>
     <y-menu-item name="4">
       <i class="icon-calendar"></i>
       <span slot="title">新闻管理</span>
     </y-menu-item>
     <y-menu-item name="5">
       <i class="icon-calendar"></i>
       <span slot="title">权限管理</span>
     </y-menu-item>
    </y-menu>-->
    <!-- 输入框的样式 -->
    <!-- <div style="width:200px; margin-left:50px;">
  <y-input clearable disabled type="text" placeholder="请输入内容..." />
  <y-input mini type="text" placeholder="请输入内容..." />
  <y-input icon="icon-home" iconAlign="left" type="text" placeholder="请输入内容..." />
  <y-input type="textarea" :rows="8" placeholder="请输入内容..." />

    -->
    <!-- 单选框的样式 -->
    <!-- 1==单选按钮 -->
    <!-- <y-radio v-model="checked" @change="change" >选项1</y-radio>
    <button @click="checked=!checked">Click me</button>-->
    <!-- 2==禁用按钮 -->
    <!-- <y-radio :value="true" disabled>选项666</y-radio>
    <y-radio disabled >选项1</y-radio>
      <y-radio-group v-model="current" @change="change">
        <y-radio label="0">苹果🍎</y-radio>
        <y-radio label="1">橘子🍊</y-radio>
        <y-radio label="2">香蕉🍌</y-radio>
        <y-radio label="3">栗子🌰</y-radio>
        <y-radio label="4">葡萄🍇</y-radio>
        <y-radio label="5" disabled>梨子🍐</y-radio>
      </y-radio-group>

      <y-radio-group value="2">
        <y-radio-button label="0" type="default">苹果</y-radio-button>
        <y-radio-button label="1" type="default">橘子</y-radio-button>
        <y-radio-button label="2" type="default">香蕉</y-radio-button>
    </y-radio--->
    <!-- 多选框的样式 -->
    <!-- <p>1==使用v-model来双向绑定</p>
  <y-checkbox v-model="checked">单选框 </y-checkbox>

  <p>2==使用disabled不可选</p>
  <y-checkbox-group :value="['苹果','香蕉']">
    <y-checkbox label="苹果" ></y-checkbox>
    <y-checkbox label="葡萄" ></y-checkbox>
    <y-checkbox label="香蕉" disabled></y-checkbox>
    <y-checkbox label="栗子" disabled></y-checkbox>
  </y-checkbox-group>

  <p>3==全选组合</p>
  <y-checkbox :value="checkAll" :indeterminate="indeterminate" @click.prevent.native="handelCheckAll">全选</y-checkbox>
  <y-checkbox-group v-model="check" @change="handelCheck">
    <y-checkbox label="苹果" ></y-checkbox>
    <y-checkbox label="香蕉" ></y-checkbox>
    <y-checkbox label="葡萄" ></y-checkbox>
    <y-checkbox label="栗子" ></y-checkbox>
    </y-checkbox-group>-->
    <!-- <p>开关的效果</p>
  <y-switch v-model="checked"></y-switch>
  <p>文字的效果</p>
  <y-switch :value="false" true-text="开" false-text="关"></y-switch>
  <p>禁用的效果</p>
  <y-switch :value="true" disabled></y-switch>
  <y-switch :value="false" disabled></y-switch>
  <p>其他颜色的效果</p>
  <y-switch :value="true"></y-switch>
  <y-switch :value="true" type="success"></y-switch>
  <y-switch :value="true" type="danger"></y-switch>
    <y-switch :value="true" type="warning"></y-switch>-->
    <!-- <p>下拉框基础用法</p>
  <y-select :width="200" v-model="select">
    <y-option v-for="(x,y) in fruit" :key="y" :value="x.value">
    {{x.label}}
    </y-option>
  </y-select>
  <p style="margin-top:50px">下拉框禁用用法</p>
    <y-select disabled :width="200"  v-model="select"></y-select>-->
    <!-- <p style="margin-top:50px">数字输入框的用法</p>
  <digital :value="5" mode="vertical"></digital>
  <digital :value="5" mode="vertical" disabled></digital>
  <digital :value="5" ></digital>
    <digital :value="5" disabled></digital>-->
    <!-- <p style="margin-top:50px">日历</p>
    <y-date-picker format="YYYY-MM-DD HH:mm:ss" ></y-date-picker>-->
    <!-- er>
  <y-date-picker format="YYYY-MM"></y-date-picker>
  <y-date-picker format="YYYY-MM-DD"></y-date-picker>
    <y-date-picker :value="[]"></y-date-p-->
    <!-- <p style="margin-top:50px">表单</p>
   <Form style="width:400px" :model="form"  :rules="rules" label-align="left" label-width="100">
    <FormItem label="用户名" prop="input">
      <y-input v-model="form.input"></y-input>
    </FormItem>
    <FormItem label="Select">
      <y-select v-model="form.select">
        <y-option v-for="(x,y) in select" :key="y" :value="x.value">{{x.label}}</y-option>
      </y-select>
    </FormItem>
    <FormItem label="DatePicker">
      <y-date-picker v-model="form.datepicker"></y-date-picker>
    </FormItem>
    <FormItem label="Radio">
      <y-radio-group v-model="form.radio">
        <y-radio label="0">男</y-radio>
        <y-radio label="1">女</y-radio>
        <y-radio label="2">妖</y-radio>
      </y-radio-group>
    </FormItem>
    <FormItem label="Checkbox">
      <y-checkbox-group v-model="form.checkbox">
        <y-checkbox label="0">男</y-checkbox>
        <y-checkbox label="1">女</y-checkbox>
        <y-checkbox label="2">妖</y-checkbox>
      </y-checkbox-group>
    </FormItem>
    <FormItem label="Switch">
      <y-switch true-text="是" false-text="否"></y-switch>
    </FormItem>
    <FormItem label="Text">
      <y-input type="textarea" placeholder="请输入..."></y-input>
    </FormItem>
    <FormItem>
      <y-button>提交</y-button>
      <y-button type="gray" style="margin-left: 10px">取消</y-button>
    </FormItem>
    </Form>-->
    <!-- 栅格 -->
    <!-- <p>1==通过基础的 24 分栏，迅速简便地创建布局。</p>
  <p>2==通过gutter设置分栏的间距。</p>
  <p>3==通过offset将列进行左右偏移。</p>
  <p>4==通过type为flex，align和justify来设置对其方式。</p>
   <br>
  <div style="background:#eee;color:#fff;width:600px">
    <y-row type="flex" justify="center" align="top">
      <y-col span="3" style="background:red">2栏布局</y-col>
      <y-col span="9" style="background:green">2栏布局</y-col>
    </y-row>
    <br>
    <y-row>
      <y-col span="8" style="background:red">3栏布局</y-col>
      <y-col span="8" style="background:green">3栏布局</y-col>
      <y-col span="8" style="background:red">3栏布局</y-col>
    </y-row>
    <br>
    <y-row :gutter="20">
      <y-col span="6"><div style="background:red">4栏布局</div></y-col>
      <y-col span="6"><div style="background:green">4栏布局</div></y-col>
      <y-col span="6"><div style="background:red">4栏布局</div></y-col>
      <y-col span="6"><div style="background:green">4栏布局</div></y-col>
    </y-row>
    <br>
    <y-row :gutter="20">
      <y-col span="6"><div style="background:red">4栏布局</div></y-col>
      <y-col span="6" offset="6"><div style="background:green">4栏布局,左边有偏格</div></y-col>
      <y-col span="6"><div style="background:red">4栏布局</div></y-col>
    </y-row>
    </div>-->
    <!-- <h3 style="margin-bottom:20px">卡片,全部用slot来呈现</h3>
  <div>
    <y-card>
      <img slot="img" src="../assets/demo.png" />
      <router-link slot="title" to="/">新闻的标题</router-link>
      <router-link slot="desc" to="/">这里是新闻的简介啊，这里是新闻的简介啊,这里是新闻的简介啊，这里是新闻的简介啊</router-link>
      <p slot="date">2018年9月16日</p>
    </y-card>

    </div>-->
    <!-- <h3 style="margin-bottom:20px; text-align:center">用element封装的表格</h3>
<div class="index" style="width:800px">
  <y-table :data="tableData5" border stripe>
    <y-table-column label="商品 ID" prop="id">
    </y-table-column>
    <y-table-column label="商品名称" prop="name">
    </y-table-column>
    <y-table-column label="描述" prop="desc">
    </y-table-column>
  </y-table>
    </div>-->
    <!-- <h3 style="margin-bottom:20px;">alert 警告提示</h3>

<y-alert type="success" showIcon closable title="成功提示" description="这里是成功了的信息的描述信息"></y-alert>
<y-alert type="info" showIcon closable title="消息提示"></y-alert>
<y-alert type="warning" showIcon closable title="警告提示"></y-alert>
    <y-alert type="error" showIcon closable title="错误提示"></y-alert>-->
    <!-- <h3>全局提示</h3>
<y-button type="default" @click="info">消息提示</y-button>
    <y-button type="default" @click="notice">通知</y-button>-->
    <!-- <h3 style="margin-top:100px">气泡提示</h3>
<y-poptip confirm title="您确认删除这条内容吗？" @ok="ok" @cancel="cancel" placement="right">
  <y-button>删除</y-button>
    </y-poptip>-->
    <!-- <y-tooltip  content="我是提示内容我是一段文字,我是一段文字" trigger="hover">
  <p>鼠标划过，我是一段文字</p>
    </y-tooltip>-->
    <!-- <y-button @click="d1=!d1">普通对话框</y-button>
<y-dialog v-model="d1" title="我是自定义标题">
  <p>我是自定义内容,自定义的内容呀,自定义的内容呀,自定义的内容呀,自定义的内容呀</p>
    </y-dialog>-->
    <!-- <y-button @click="d2=!d2">提示对话框</y-button>
<y-dialog v-model="d2" type="toast" icon="success" title="恭喜你">
  <y-input type="textarea" placeholder="请输入内容"></y-input>
    </y-dialog>-->
    <!-- <h3 style="margin-top:100px">上传功能</h3>

<y-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <y-button  type="default">点击上传</y-button>
  <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </y-upload>-->
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      isCollapse: true,
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ],
      d1: false,
      d2: false,
      tableData4: [],
      tableData5: [
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          desc: "荷兰优质淡奶，奶香浓而不腻"
        },
        {
          id: "12987123",
          name: "好滋好味鸡蛋仔",
          desc: "荷兰优质淡奶，奶香浓而不腻"
        },
        {
          id: "12987123",
          name: "好滋好味鸡蛋仔",
          desc: "荷兰优质淡奶，奶香浓而不腻"
        },
        {
          id: "12987123",
          name: "好滋好味鸡蛋仔",
          desc: "荷兰优质淡奶，奶香浓而不腻"
        },
        {
          id: "12987123",
          name: "好滋好味鸡蛋仔",
          desc: "荷兰优质淡奶，奶香浓而不腻"
        }
      ],
      ttext: 0,
      msg: "",
      total: 25,
      pages: 2,
      size: 5,
      jumpTo: 1,
      current: 0,
      checked: true,
      checkAll: false,
      indeterminate: false,
      check: [],
      select: "",
      fruit: [
        { label: "苹果", value: 0 },
        { label: "橘子", value: 1 },
        { label: "香蕉", value: 2 },
        { label: "栗子", value: 3 },
        { label: "葡萄", value: 4 }
      ],
      form: {
        switch: true,
        input: "",
        select: 0,
        datepicker: "",
        radio: "1",
        checkbox: ["0"]
      },
      rules: {
        input: [{ required: true, trigger: "blur" }]
      },
      columns1: [
        {
          title: "Name",
          key: "name"
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        }
      ],
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ]
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    pagechange() {},
    test() {
      alert("hahhh");
    },
    step(t) {
      this.current =
        t == "next"
          ? this.current >= 3
            ? 3
            : this.current + 1
          : this.current <= 0
          ? 0
          : this.current - 1;
    },
    change() {
      this.checked = !this.checked;
    },
    handelCheckAll(v) {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;

      if (this.checkAll) {
        this.check = ["苹果", "香蕉", "葡萄", "栗子"];
      } else {
        this.check = [];
      }
    },
    handelCheck(data) {
      if (data.length === 4) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else {
        this.indeterminate = false;
        this.checkAll = false;
      }
    },
    info() {
      this.$Message.config({
        type: "info",
        duration: 5,
        content: "5秒后关闭的",
        closable: true
      });
    },
    notice() {
      this.$Notice.success({
        title: "这是通知的消息",
        content: "这是通知的消息的描述啊",
        duration: 500
      });
    },
    ok() {
      console.log("你点了确定");
    },
    cancel() {
      console.log("你点了取消");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index {
  width: 800px;
  margin: 100px auto;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
