<template>
  <div class="main">
    <div style="padding: 5px; background: #ff5257">
      input
    </div>
    <md-input-item
      title="数字"
      name="数字1"
      placeholder="数字"
      v-validate="'required'"
      v-model="text"
      :error="errors.first('数字1')"
    >
    </md-input-item>
    <div style="padding: 5px; background: #ff5257">
      check box
    </div>
    <div class="md-example-child md-example-child-check md-example-child-check-0">
      <md-check v-model="checked" label="复选项"  name="f1" v-validate="'required'"/>
      <md-check label="禁用" disabled  name="f1" v-validate="'required'"/>
    </div>
    <div class="md-example-child md-example-child-check md-example-child-check-2" name="f2">
      <md-check-box name="day" v-model="pay" label="日缴" v-validate="'required'" disabled />
      <md-check-box name="month" v-model="pay" label="月付" v-validate="'required'" />
      <md-check-box name="season" v-model="pay" label="季度费" v-validate="'required'" />
    </div>
    <div class="md-example-child md-example-child-check md-example-child-check-4">
      <md-field title="复选列表">
        <md-check-list name="f3" v-validate="'required'"
                       v-model="favorites3"
                       icon="right"
                       icon-inverse=""
                       :options="fruits1"
        />
      </md-field>
    </div>
    <div class="md-example-child md-example-child-check md-example-child-check-1">
      <md-check-group v-model="favorites1" name="f4" v-validate="'required'">
        <md-check name="watermelon" label="西瓜" />
        <md-check name="apple" label="苹果" />
        <md-check name="banana" label="香蕉" />
        <md-check name="orange" label="橙子" />
        <md-check name="tomato" label="西红柿" disabled />
      </md-check-group>
    </div>
    <div class="md-example-child md-example-child-check md-example-child-check-3">
      <md-check-group v-model="insurants" name="f5" v-validate="'required'">
        <md-check-box name="self" disabled>自己</md-check-box>
        <md-check-box name="couple">配偶</md-check-box>
        <md-check-box name="parent">父母</md-check-box>
        <md-check-box name="child">子女</md-check-box>
      </md-check-group>
    </div>
    <div class="md-example-child md-example-child-check md-example-child-check-4">
      <md-field title="复选列表">
        <md-check-list
          v-model="favorites2"
          iconPosition="left"
          :options="fruits2"
          name="f6" v-validate="'required'"
        />
      </md-field>
    </div>
    <div style="padding: 5px; background: #ff5257">
      agree
    </div>
    <div class="md-example-child md-example-child-agree md-example-child-1">
      <md-agree
        name="f7" v-validate="'required'"
        v-model="agreeConf.checked"
        :disabled="agreeConf.disabled"
        :size="agreeConf.size"
        @change="onChange(agreeConf.name, agreeConf.checked, $event)"
      >
        本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意
      </md-agree>
    </div>
    <div style="padding: 5px; background: #ff5257">
      radio
    </div>
    <div class="md-example-child md-example-child-radio md-example-child-radio-0">
      <md-radio name="q0" v-model="checked1" label="单选项1" v-validate="'required'" />
      <md-radio name="q1" v-model="checked1" label="单选项2" v-validate="'required'" />
    </div>
    <div class="md-example-child md-example-child-radio md-example-child-radio-1">
      <md-field>
        <md-field-item title="婚姻状况" solid>
          <md-radio name="w1" v-model="marriage" label="已婚" inline v-validate="'required'"  />
          <md-radio name="w1" v-model="marriage" label="未婚" inline v-validate="'required'"  />
          <md-radio name="w1" v-model="marriage" label="保密" inline v-validate="'required'"  />
        </md-field-item>
      </md-field>
    </div>
    <div class="md-example-child md-example-child-radio md-example-child-radio-2">
      <md-field title="简单选择列表" class="radio-field">
        <md-radio-list name="f8" v-validate="'required'"
                       v-model="myBank"
                       :options="banks"
                       icon-size="lg"
        />
      </md-field>
      {{errors.first("f8")}}
      <md-field title="输入项" class="radio-field">
        <md-radio-list
          name="f9" v-validate="'required'"
          :options="reasons"
          v-model="myReason"
          icon="right"
          icon-inverse=""
          icon-disabled=""
          icon-position="right"
          has-input
          input-label="其他"
          input-placeholder="请输入原因"
        />
      </md-field>
    </div>
    <br>
    <md-button @click="submit">表单验证</md-button>
  </div>
</template>

<script>
  export default {
    name: 'test',
    data() {
      return {
        checked: '',
        pay: '',
        favorites1: [],
        favorites2: [],
        favorites3: [],
        insurants: [],
        fruits1: [
          {value: 'watermelon', label: '西瓜'},
          {value: 'apple', label: '苹果'},
          {value: 'banana', label: '香蕉'},
          {value: 'orange', label: '橙子'},
          {value: 'tomato', label: '西红柿', disabled: true}
        ],
        fruits2: [
          {value: 'watermelon', label: '西瓜', brief: '选项摘要描述'},
          {value: 'apple', label: '苹果', brief: '选项摘要描述'},
          {value: 'banana', label: '香蕉', brief: '选项摘要描述'},
          {value: 'orange', label: '橙子', brief: '选项摘要描述'},
          {value: 'tomato', label: '西红柿', brief: '选项摘要描述', disabled: true}
        ],
        agreeConf: {
          checked: false,
          name: 'agree1',
          size: 'md',
          disabled: false,
          introduction: '未选中状态'
        },
        checked1: '0',
        marriage: '2',
        myBank: '',
        banks: [
          {
            value: '0',
            text: '交通银行(尾号3089)',
            brief: '选项摘要描述'
          },
          {
            value: '1',
            text: '招商银行(尾号2342)',
            brief: '选项摘要描述'
          },
          {
            value: '2',
            text: '建设银行(尾号4321)',
            brief: '选项摘要描述',
            disabled: true
          }
        ],
        myReason: '',
        reasons: [
          {
            value: '0',
            text: '我有其他保险'
          },
          {
            value: '1',
            text: '每单都扣，我担心扣太多'
          },
          {
            value: '2',
            text: '我身体好，不需要重疾险'
          },
          {
            value: '3',
            text: '接单少，加入这个没什么用'
          },
          {
            value: '4',
            text: '我不了解这是什么计划'
          }
        ]
      }
    },
    methods: {
      submit () {
        console.log(this.errors)
        this.$validator.validate().then(valid => {
          if (valid) {
            // do stuff if not valid.
          }
        })
      },
    }
  }
</script>

<style scoped>
  .main {
    background: #fff;
  }
</style>
