<template>
    <div class="elementWrap">
        <div class="ele-item">
            <label for="">下拉框：</label>
            <GuipSelect msg="Welcome to Your Vue.js App" :options="options"/>
        </div>
        <div class="ele-item">
            <label for="">表格：</label>
            <GuipTable msg="Welcome to Your Vue.js App" :tableData="tableData">
                <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="地址">
                    </el-table-column>
                    <el-table-column
                    prop="address1"
                    label="地址测试">
                </el-table-column>
            </GuipTable>
        </div>
        <div class="ele-item">
            <label for="">文本域：</label>
            <GuipTextarea :styleObject="styleObject"/>
        </div>
        <div class="ele-item">
            <label for="">单选框：</label>
            <el-radio  v-model="radio1" :label="1">选项一</el-radio>
            <el-radio  v-model="radio1" :label="2">选项二</el-radio>
        </div>
        
        <div class="ele-item">
            <label for="">单选框组：</label>
            <el-radio-group v-model="radio" @input="radioChange">
                <el-radio :label="3">备选项</el-radio>
                <el-radio :label="6">备选项</el-radio>
                <el-radio :label="9">备选项</el-radio>
            </el-radio-group>
        </div>
        <div class="ele-item">
            <label for="">常规按钮：</label>
            <GuipButton >默认按钮</GuipButton>
            <GuipButton type="mild" size="medium">轻度按钮</GuipButton>
            <GuipButton type="primary">按钮</GuipButton>
            <GuipButton type="success" :loading="false" :plain="plain">按钮</GuipButton>
            <GuipButton type="info" :loading="false" :plain="plain">按钮</GuipButton>
            <GuipButton type="warning" :loading="false" :plain="plain">按钮</GuipButton>
            <GuipButton type="danger" :loading="false" :plain="plain">按钮</GuipButton>
        </div>
        <div class="ele-item">
            <label for="">禁用按钮：</label>
            <GuipButton :disabled="true">默认按钮</GuipButton>
            <GuipButton type="primary" size="medium" :disabled="true">按钮</GuipButton>
            <GuipButton type="success" :disabled="true">按钮</GuipButton>
            <GuipButton type="info" :disabled="true">按钮</GuipButton>
            <GuipButton type="warning" :disabled="true">按钮</GuipButton>
            <GuipButton type="danger" :disabled="true">按钮</GuipButton>
        </div>
        <div class="ele-item">
            <label for="">三种尺寸按钮：</label>
            <GuipButton type="primary" >默认按钮</GuipButton>
            <GuipButton type="primary" size="medium">中等按钮</GuipButton>
            <GuipButton type="primary" size="small">小的按钮</GuipButton>
            <GuipButton type="primary" size="mini">迷你按钮</GuipButton>
        </div>
        <div class="ele-item">
            <label for="">自定义宽高按钮：</label>
            <GuipButton type="primary" :btnstyle="btnstyleObj">超长啊扭测试长的长的</GuipButton>
            <GuipButton type="primary" :btnstyle="btnstyleObj1">随便写的</GuipButton>
        </div>
        <div class="ele-item">
            <label for="">输入框：</label>
            <GuipInput :styleObject="styleObject1"/>
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
        </div>
      <!-- <GuipRadio />
      <GuipButton />
      <GuipConfirm />
      <GuipConfirm />
      <GiupInput />
      <GuipModal /> -->
      
    </div>
  </template>
  
  <script>
  // @ is an alias to /src
//   import GuipRadio from '@/components/GuipRadio.vue';
  import GuipButton from '@/components/GuipButton.vue';
//   import GuipConfirm from '@/components/GuipConfirm.vue';
  import GuipInput from '@/components/GuipInput.vue';
//   import GuipModal from '@/components/GuipModal.vue';
  import GuipSelect from '@/components/GuipSelect.vue';
  import GuipTable from '@/components/GuipTable.vue';
  import GuipTextarea from '@/components/GuipTextarea.vue'
  
  export default {
    name: 'HomeView',
    components: {
        GuipTextarea,
        GuipTable,
        // GuipRadio,
        GuipButton,
        // GuipConfirm,
        GuipInput,
        // GuipModal,
        GuipSelect
    },
    data(){
        return {
            input:'hahhahah',
            radio:3,
            radio1:5,
            btnstyleObj:{
                width: '247px',
                height: '44px',
                background: '#F2F7FF',
                borderRadius: '2px',
                fontSize:'14px',
                letterSpacing: '0.08em',
                color: '#006AFF !important'
            },
            btnstyleObj1:{
                width: '180px',
                height: '40px',
            },
            styleObject:{
                width:'200px',
                height:'40px'
            },
            styleObject1:{
                width:'200px',
                height:'38px'
            },
            plain:false,
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }],
            options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
        }
    },
    methods:{
        // 监听单选框组变化
        radioChange() {
            console.log(this.radio,'=====');
        }
    }
  }
  </script>
  <style lang="scss" scoped>
    .elementWrap{
        /* width: 100%; */
        padding: 30px 40px;
        .ele-item{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 30px;
            label{
                font-size: 16px;
                font-weight: bold;
                width: 100px;
                margin-right: 10px;
                text-align: left;
            }
        }
    }
</style>
  