<style scoped>
  .readme {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 203809;
    padding: 50px 100px;
    background-color: rgba(255, 255, 255, .9);
    overflow: auto;
    color: #04AAB7;
  }
  h3 {
    font-weight: normal;
    font-size: 18px;
    line-height: 2;
    color: #f90;
    border-bottom: 1px solid rgba(0, 0, 0, .5);
  }
  h3::before {
    content: "§";
    font-weight: bold;
    margin-right: 1em;
  }
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .pic {
    width: 60px;
    height: 60px;
    border: 2px solid #58a;
  }
</style>
<template>
  <div class="readme">
    <h3>单选</h3>
    <radio :checked.sync="radio1"></radio>
    <p>行内单选，缺省为是否，当前值为：<b>{{radio1 | enable}}</b></p>
    <p><code>{{radio1code}}</code></p>
    <radio :list="['国产', '进口']" :checked.sync="radio3" :layout="['block']"></radio>
    <radio :list="genders" :checked.sync="radio2" :layout="['block']"></radio>
    <p>独行单选，列表为性别，当前值为：<b>{{radio2}}</b></p>
    <p><code>{{radio2code}}</code></p>
    <p><strong>注意：最后一个属性layout传递的值是一个数组，如果你要面对的业务单选代码上面有多个`radio-xxxx`的class，就需要把多个`xxxx`以数组的方式传递进来，但是`radio-control`这个是默认带的，不需要放进去</strong></p>

    <h3>多选</h3>
    <checkbox :list="hobbyList" :selected.sync="hobby" :layout="['orange']"></checkbox>
    <p>行内多选，无缺省值，当前值为：<b>{{hobby | json}}</b></p>
    <p><code>{{checkboxcode}}</code></p>
    <p><strong>多选的数据对象是一个数组</strong></p>
    <p><strong>注意：同单选，最后一个属性layout传递的值是一个数组，如果你要面对的业务多选代码上面有多个`checkbox-xxxx`的class，就需要把多个`xxxx`以数组的方式传递进来，但是`checkbox-control`这个是默认带的，不需要放进去</strong></p>

    <h3>下拉</h3>
    <select-ui :list="['海淀', '朝阳', '昌平', '丰台']" :selected.sync="area" empty-text="请选择区域"></select-ui>

    <p>下拉选择：目前选择的是：<b>{{area}}</b></p>

    <p><code>{{selectcode}}</code></p>

    <h3>上传头像</h3>
    <avatar class="avatar" :json-str="avatar"></avatar>
    <upload :class="['btn']" :model.sync="avatar" type="avatar" label="选择头像"></upload>

    <pre>
    &lt;avatar class="avatar" :json-str="avatar"&gt;&lt;/avatar&gt;
    &lt;upload :class="['btn']" :model.sync="avatar" type="avatar" label="选择头像"&gt;&lt;/upload&gt;
    </pre>

    <h3>上传图片</h3>

    <img class="pic" :src="picUrl" alt="待上传图片显示位置">
    <upload :model.sync="pic"></upload>

    <pre>
    &lt;img class="pic" :src="picUrl" alt="待上传图片显示位置"&gt;
    &lt;upload :model.sync="pic"&gt;&lt;/upload&gt;

    computed: {
      picUrl: function () {
        return JSON.parse(this.pic || '{}').path;
      }
    }
    </pre>

    <h3>上传附件</h3>
    <upload tag="span" :class="['123','456']" :model.sync="file" type="file" label="选择文件" @file-change="fileChange(file, '这是文件上传组件事件')"></upload>
    {{fileJson|json}}

  </div>
</template>

<script>
  module.exports = {
    data: function () {
      return {
        radio1: '',
        radio1code: '<radio :checked.sync="radio1"></radio>',
        radio2: '',
        radio3: '',
        radio2code: '<radio :list="genders" :checked.sync="radio2" :layout="[\'block\']"></radio>',
        genders: ['男', '女'],

        hobbyList: ['唱歌', '跳舞', '打球', '跑步', '打游戏', '爬山', '吃饭', '睡觉', '学习'],
        hobby: [],
        checkboxcode: '<checkbox :list="hobbyList" :selected.sync="hobby" layout="[\'orange\']"></checkbox>',

        area: '',
        selectcode: '<select-ui :list="[\'海淀\', \'朝阳\', \'昌平\', \'丰台\']" :selected.sync="area" empty-text="请选择区域"></select-ui>',

        avatar: '',
        pic: '',
        file: ''
      };
    },
    computed: {
      picUrl: function () {
        return JSON.parse(this.pic || '{}').path;
      },
      fileJson: function () {
        return JSON.parse(this.file || '{}');
      }
    },
    methods: {
      fileChange: function (file, a) {

      }
    }
  };
</script>