<template>
  <div>
    <group
      label-width="4.5em"
      label-margin-right="2em"
      label-align="right"
    >
      <cell
        title="Cell"
        value="value"
        is-link
      />
      <cell
        title="Cell"
        value="value"
        is-link
        value-align="left"
      />
      <x-input
        v-model="value1"
        title="上报人"
      />
      <x-input placeholder="I'm placeholder">
        <img
          slot="restricted-label"
          style="display:inline-block;vertical-align:middle;"
          src="http://dn-placeholder.qbox.me/110x110/FF2D55/000"
          width="24"
          height="24"
        >
      </x-input>
      <x-input
        v-model="value1"
        title="上<i class='vux-blank-half'></i>报<i class='vux-blank-half'></i>人"
      />
      <x-number
        v-model="numberValue"
        title="Quantity"
        align="left"
        button-style="round"
        :min="0"
        :max="5"
      />
      <datetime
        v-model="time1"
        title="时&emsp;&emsp;&nbsp;间"
        value-text-align="left"
      />
      <selector
        v-model="value2"
        title="隐患类别"
        :options="['工艺技术', '其他']"
      />
      <selector
        v-model="value7"
        title="隐患类别"
        placeholder="Placeholder"
        :options="['工艺技术', '其他']"
      />
      <selector
        v-model="value8"
        title="隐患类别"
        :options="['工艺技术', '其他']"
      />
      <x-input
        v-model="value3"
        title="隐患部位"
        placeholder="必填"
      />
      <x-input
        v-model="value4"
        title="密码"
        type="password"
        placeholder="必填"
      />
      <popup-picker
        v-model="value5"
        title="请选择"
        :data="list"
        value-text-align="left"
      />
      <popup-picker
        v-model="value6"
        title="请选择"
        placeholder="Required"
        :data="list"
        value-text-align="left"
      />
      <x-address
        v-model="addressValue"
        title="地址选择"
        raw-value
        :list="addressData"
        value-text-align="left"
      />
      <x-textarea
        title="详细信息"
        placeholder="请填写详细信息"
        :show-counter="false"
        :rows="3"
      />
      <x-textarea
        placeholder="请填写详细信息"
        :show-counter="false"
        :rows="3"
      >
        <img
          slot="restricted-label"
          style="display:inline-block;vertical-align:middle;"
          src="http://dn-placeholder.qbox.me/110x110/FF2D55/000"
          width="24"
          height="24"
        >
      </x-textarea>
    </group>
    <br>
    <group>
      <group-title slot="title">
        I'm a title<span style="float:right;">right</span>
      </group-title>
      <cell title="cell" />
    </group>
    <br>
    <group
      title="justify"
      label-width="5.5em"
      label-margin-right="2em"
      label-align="justify"
    >
      <cell
        title="哈哈"
        value="value"
        is-link
      />
      <cell
        title="哈哈哈哈哈"
        value="value"
        is-link
        value-align="left"
      />
      <x-input
        v-model="value1"
        title="上报人"
      />
      <x-number
        v-model="numberValue"
        title="Quantity"
        align="left"
        button-style="round"
        :min="0"
        :max="5"
      />
      <datetime
        v-model="time1"
        title="时间"
        value-text-align="left"
      />
      <selector
        v-model="value2"
        title="隐患类别"
        :options="['工艺技术', '其他']"
      />
      <popup-picker
        v-model="value5"
        title="请选择"
        :data="list"
        value-text-align="left"
      />
      <x-address
        v-model="addressValue"
        title="地址选择"
        raw-value
        :list="addressData"
        value-text-align="left"
        label-align="justify"
      />
      <x-switch title="选择" />
      <x-textarea
        title="详细信息"
        placeholder="请填写详细信息"
        :show-counter="false"
        :rows="3"
      />
    </group>
    <br>
  </div>
</template>

<script>
import { GroupTitle, Group, Cell, XInput, Selector, PopupPicker, Datetime, XNumber, XAddress, XTextarea, XSwitch } from '../components/_index'
import { cvux as ChinaAddressData } from 'city-data/lib/mobile'

export default {
  components: {
    Group,
    GroupTitle,
    Cell,
    XInput,
    Selector,
    PopupPicker,
    XAddress,
    Datetime,
    XNumber,
    XTextarea,
    XSwitch
  },
  data () {
    return {
      addressData: ChinaAddressData,
      addressValue: ['广东省', '深圳市', '南山区'],
      value1: '张三',
      value2: '工艺技术',
      value3: '',
      value7: '',
      value8: '',
      value4: '',
      time1: '2017-06-01',
      value5: ['A'],
      value6: [],
      list: [['A', 'B', 'C']],
      numberValue: 0
    }
  }
}
</script>
