<template>
    <div>
        <van-nav-bar
                title="cell"
                left-arrow
                @click-left="back"
        />
        <div class="page">
            <ul>
                <li class="section">
                    <y-cell title="标题" value="文字" is-link></y-cell>
                    <div><br/></div>
                    <y-cell-group split-alignment dis-radius dis-border bottom-border>
                        <y-cell title="标题" value="文字" is-link></y-cell>
                        <y-cell title="标题2" value="文字2"></y-cell>
                        <y-cell title="标题3"></y-cell>
                        <y-cell title="标题4" is-link></y-cell>
                        <y-cell title="标题31">
                            <template slot="icon"><span class="a">i</span></template>
                            <div>
                                舍得离开房
                            </div>
                            <template slot="rightIcon"><span class="a">推</span></template>
                        </y-cell>
                        <y-cell title="标题3">
                            <div class="test">
                                舍得离开房间
                            </div>
                        </y-cell>

                        <y-cell title="出生日期">
                            <y-check-group v-model="sex" radio>
                                <y-checkbox value="1" custom-class="abc">男</y-checkbox>
                                <y-checkbox value="-1" btnChecked>女</y-checkbox>
                            </y-check-group>
                        </y-cell>
                    </y-cell-group>
                </li>
                <li class="section">
                    <y-cell-group>
                        <y-cell-select title="国家多级" :list="areaListMore" v-model="ccc" :tip-value="['广东省','广东省','广州3']" placeholder="请选择一个国家"></y-cell-select>
                        <y-cell-select v-model="birth" title="出生年月" type="date" max-year="2020"
                                       min-year="2010"></y-cell-select>
                        <y-cell title="标题2" value="文字2"></y-cell>
                        <y-cell title="标题2" value="文字2"></y-cell>
                    </y-cell-group>
                </li>

                <li class="section">
                    <y-cell-group dis-border bottom-border>
                        <y-cell-select title="国家" :list="areaList" v-model="ccc" placeholder="请选择一个国家" dis-padding-horizontal></y-cell-select>
                        <y-cell-field title="标题" v-model="titlea" type="password" dis-padding-horizontal></y-cell-field>
                        <y-cell-mobile title="手机号码"
                                       dis-padding-horizontal
                                       v-model="mobile"
                                       place-holder="请填写一个手机号码"
                                       :areacode.sync="areaKey"
                                       default-area-key="94"
                                       :area-code-list="areaList"></y-cell-mobile>
                    </y-cell-group>
                </li>
                <li class="section">
                    <y-cell-group>
                        <y-cell-field title="标题" v-model="titlea" type="password"></y-cell-field>
                        <y-cell-field title="disable" v-model="titlea" disabled></y-cell-field>
                        <y-cell-field v-model="titlea"></y-cell-field>
                        <y-cell-field v-model="titlea">
                            <div slot="title">
                                <span style="background: #f60;display: inline-block;width: 20px;height: 20px;"></span>
                                <span>这是title slot sadfasdfsdafsdaf</span>
                            </div>
                        </y-cell-field>
                        <y-cell-field title="选择" v-model="titlea" type="select"></y-cell-field>
                        <y-cell-field title="标题" v-model="title" placeHolder="sds"></y-cell-field>
                        <y-cell-mobile title="手机号码"
                                       v-model="mobile"
                                       place-holder="请填写一个手机号码"
                                       :areacode.sync="areaKey"
                                       default-area-key="94"
                                       :area-code-list="areaList"></y-cell-mobile>
                        <y-cell-field title="获取验证码" v-model="titlea" type="input"></y-cell-field>
                        <y-cell-mobile title="手机号码"
                                       v-model="mobile"
                                       place-holder="请填写一个手机号码"
                                       :lang-package="langPackage"
                                       :areacode.sync="areaKey"
                                       :area-code-list="areaList"></y-cell-mobile>
                        <y-cell-field title="获取验证码" v-model="titlea" type="vaild"></y-cell-field>
                        <y-cell-field title="获取验证码" v-model="titlea" type="vaild" @vaild="fnVaild" ref="vaild" :vaild-mobile="mobile"></y-cell-field>

                    </y-cell-group>
                </li>

                <h1>宠物主题</h1>

                <li class="section">
                    <y-cell-group dis-border bottom-border topic="pet" dis-split-border>
                        <y-cell-select title="国家" :list="areaList" v-model="ccc" placeholder="请选择一个国家" dis-padding-horizontal></y-cell-select>
                        <y-cell-field title="标题" v-model="titlea" dis-padding-horizontal place-holder="sdfsadf"></y-cell-field>
                        <y-cell-mobile title="手机号码"
                                       dis-padding-horizontal
                                       v-model="mobile"
                                       place-holder="请填写一个手机号码"
                                       :areacode.sync="areaKey"
                                       default-area-key="94"
                                       :area-code-list="areaList"></y-cell-mobile>
                    </y-cell-group>
                </li>

                <h1>换行主题+宠物</h1>

                <li class="section" style="background: #f60">
                    <y-cell-group split-alignment
                                  dis-border
                                  dis-radius
                                  is-broke
                                  dis-split-border
                                  topic="petBig">
                        <y-cell-select title="国家" :list="areaList" v-model="ccc" placeholder="请选择一个国家" dis-padding-horizontal></y-cell-select>
                        <y-cell title="cell" value="测试" is-link></y-cell>
                        <y-cell-field title="标题" v-model="titlea"
                                      topic="gray"
                                      dis-padding-horizontal
                                      place-holder="sdfsadf"></y-cell-field>
                        <y-cell-mobile title="手机号码"
                                       dis-padding-horizontal
                                       v-model="mobile"
                                       place-holder="请填写一个手机号码"
                                       :areacode.sync="areaKey"
                                       default-area-key="94"
                                       :area-code-list="areaList"></y-cell-mobile>
                        <y-cell-field title="标题"
                                      v-model="titlea"

                                      topic="gray"
                                      dis-padding-horizontal
                                      place-holder="sdfsadf"></y-cell-field>
                    </y-cell-group>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {NavBar} from 'vant';
    import yCell from '../components/yCell'
    import yCellGroup from '../components/yCellGroup'
    import yCellField from '../components/yCellField'
    import yCellSelect from '../components/yCellSelect'
    import yButton from '../components/yButton'
    import yCellMobile from '../components/yCellMobile'
    import yCheckbox from '../components/yCheckbox'
    import yCheckGroup from '../components/yCheckGroup'

    export default {
        components: {
            [NavBar.name]: NavBar,
            yCell,
            yCellField,
            yCellGroup,
            yCellMobile,
            yCheckbox,
            yCheckGroup,
            yCellSelect,
            yButton
        },
        data: () => {
            return {
                areaKey: "998",
                ccc: [],
                areaListMore:[
                    {
                        comboNum: 3,
                        values: [
                            {
                                value:"广东省",
                                key:"广东省",
                                children:[
                                    {
                                        value:"广东省",
                                        key:"广东省",
                                        children:[
                                            {
                                                value:"广州1",
                                                key:"广州1",
                                                children:[
                                                    {
                                                        value:"越秀区1",
                                                        key:"越秀区1",
                                                    },
                                                    {
                                                        value:"越秀区11",
                                                        key:"越秀区11",
                                                    },
                                                ]
                                            },
                                            {
                                                value:"广州2",
                                                key:"广州2",
                                                children:[
                                                    {
                                                        value:"越秀区2",
                                                        key:"越秀区2",
                                                    },
                                                    {
                                                        value:"越秀区21",
                                                        key:"越秀区21",
                                                    },
                                                ]
                                            },
                                            {
                                                value:"广州3",
                                                key:"广州3",
                                                children:[
                                                    {
                                                        value:"越秀区3",
                                                        key:"越秀区3",
                                                    },
                                                    {
                                                        value:"越秀区31",
                                                        key:"越秀区31",
                                                    },
                                                ]
                                            },
                                        ]
                                    }
                                ]
                            },
                            {
                                value:"广东省2",
                                key:"广东省2",
                                children:[
                                    {
                                        value:"广州8",
                                        key:"广州8",
                                        children:[
                                            {
                                                value:"越秀区9",
                                                key:"越秀区9",
                                            },
                                            {
                                                value:"越秀区91",
                                                key:"越秀区91",
                                            },
                                        ]
                                    },
                                    {
                                        value:"广州88",
                                        key:"广州88",
                                        children:[
                                            {
                                                value:"越秀区881",
                                                key:"越秀区881",
                                            },
                                            {
                                                value:"越秀区882",
                                                key:"越秀区882",
                                            },
                                        ]
                                    },
                                ]
                            },
                        ],
                    }
                ],
                areaList: [
                    {
                        value: "994",
                        key: "Am"
                    },
                    {
                        value: "995",
                        key: "Bae"
                    },
                    {
                        value: "94",
                        key: "Wse"
                    },
                    {
                        value: "998",
                        key: "Qes"
                    },
                    {
                        value: "294",
                        key: "Swe"
                    },
                    {
                        value: "333",
                        key: "Sce"
                    },
                    {
                        value: "+94",
                        key: "wpe"
                    }
                ],
                birth: new Date("2015-08-04").getTime(),
                langPackage: {
                    yCellMobile: {
                        enter: 'enter',
                        areacode: 'choose areacode'
                    }
                },
                mobile: "",
                sex: "1",
                tipsShow: false,
                title: "sss",
                titlea: "22",
                sexList: ""
            }
        },
        methods: {
            "fn_click"(e) {
                //yToast.success("success");
                //yToast.error("error");
                yToast.loading();
                setTimeout(yToast.clear, 100000);
            },
            fnVaild(){
                const self = this;
                setTimeout(time=>{
                    self.$refs["vaild"].fnvaildFail();
                },1000)
            },
            back: () => {
                window.history.go(-1);
            }
        },
        mounted() {
            const self = this;
            setTimeout(time=>{
                // self.ccc = ["广东省5","广州88","越秀区882"];
            },5000)
        }
    }
</script>

<style lang="scss">
    .page {
        padding: 10px;
        height: 3000px;
    }

    .test {
        width: 400px;
        text-align: left;
    }
</style>
