<template>
  <div class="forms">
    <m-checkbox v-model="city" :data="{label:'aaa', value:'cctv-1'}"></m-checkbox><br>
    <m-checkbox v-model="city" :data="{label:'abc', value:'cctv0'}" disabled></m-checkbox><br>
    <m-checkbox v-model="city" :data="{label:'abcd', value:'cctv1'}"  hide-label></m-checkbox><br>
    <m-checkbox v-model="city" :data="{label:'abcef', value:'cctv2'}"></m-checkbox><br>
    <m-checkbox v-model="read" :data="{label:'abc', value:'cctv3'}"></m-checkbox><br>
    <m-btn type="error" @click.native="addcheckbox">添加</m-btn><br>
    <m-btn type="error" @click.native="changeready">改变阅读</m-btn><br>
    <br>
    <br>
    <!--<m-radio v-model="sex" :data="{label:'男的', value:'0'}"></m-radio>-->
    <!--<m-radio v-model="sex" :data="{label:'女的', value:'1'}"></m-radio>-->
    <m-radio v-model="sex" :data="{label:'中性', value:'2'}"></m-radio>
    <!--<m-radio v-model="sex" label="女的|1"></m-radio>-->
    <!--<m-radio v-model="sex" label="中性|2" disabled></m-radio>-->
    <br>
    <br>
    <m-input v-model="username" type="tel"></m-input>
    <m-input type="text" label-pos="left" :sizeh="48">nihaozhong</m-input>
    <m-input v-model="age" type="number" :max="30" :min="5" :step="5"></m-input>
    <br>
    <br>
    开、关：<m-switch></m-switch>
    <br>
    <br>
    <m-textarea v-model="textarea"></m-textarea>
    <br>
    <br>
    <m-select :datas="selectData" v-model="selectValue" :sizeh="48" :sizew="500"></m-select>
    <!--<m-select listClass="hover" v-model="opps" :datas="selectData"></m-select>-->
    <br>
    <br>
    <!--<m-file></m-file>-->
    <br>
    <br>
    <m-btn @click.native="getModel">获取</m-btn>
  </div>
</template>

<script>
  import MListItem from '../../src/components/list/src/ListItem'
  export default {
    components: {MListItem},
    name: 'Form',
    data: () => ({
      city: ['cctv0', 'cctv-1'],
      sex: '1',
      username: 'aa',
      read: false,
      age: 25,
      saaa: '',
      textarea: 'bbb',
      opps: {},
      selectValue: {
        label: '请选择',
        value: ''
      },
      selectData: [
        {label: 'label1', value: '1'},
        {label: 'label2', value: '2'},
        {label: 'label9', value: '9'},
        {label: 'label10', value: '10'}
      ]
    }),
    methods: {
      getModel () {
        console.log(this.city)
        console.log(this.read)
        console.log(this.username)
//        console.log(this.selectValue)
        console.log(this.sex)
        console.log(this.textarea)
      },
      addcheckbox () {
        this.city.push('cctv1')
      },
      changeready () {
        this.read = !this.read
        this.sex = '1'
      }
    },
    mounted () {
      const timeout = setTimeout( _ => {
        this.selectData = [
          {label: 'label1', value: '1'},
          {label: 'label2', value: '2'},
          {label: 'label3', value: '3'},
          {label: 'label4', value: '4'},
          {label: 'label5', value: '5'},
          {label: 'label6', value: '6'},
          {label: 'label7', value: '7'},
          {label: 'label8', value: '8'},
          {label: 'label9', value: '9'},
          {label: 'label10', value: '10'}
        ]
        clearTimeout(timeout)
      }, 1000)
    }
  }
</script>
