<template>
  <div>
    <h1>集值选择组件</h1>
    <Form v-model="modelForm" ref="editForm" class="ivu-form-no-margin-bottom" :rules="rule" :label-width="100">
      <FormBlock title="基础用法">
        <Row :gutter="16" class="code-row-bg">
          <Col span="24" style="border:none;">
            <Form-item prop="代码示例" label="代码示例">
              <span><font size="2">{{sample1}}</font></span>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border:none;">
            <Form-item prop="国家" label="国家">
              <Select-Value-Set v-model="modelForm.country1" code="country"></Select-Value-Set>
            </Form-item>
          </Col>
          <Col span="12" style="border:none;">
            <Form-item prop="国家的key" label="国家的key">
              <Input v-model="modelForm.country1" size="small"/>
            </Form-item>
          </Col>
        </Row>
      </FormBlock>
      <FormBlock title="有父值集的用法">
        <Row :gutter="16" class="code-row-bg">
          <Col span="24" style="border:none;">
            <Form-item prop="代码示例" label="代码示例">
              <span><font size="2">{{sample2}}</font></span>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border:none;">
            <Form-item prop="省份" label="省份">
              <Select-Value-Set v-model="modelForm.province" code="province"></Select-Value-Set>
            </Form-item>
          </Col>
          <Col span="12" style="border:none;">
            <Form-item prop="省份的key" label="省份的key">
              <Input v-model="modelForm.province" size="small"/>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border:none;">
            <Form-item prop="市" label="市">
              <Select-Value-Set v-model="modelForm.city" :parentKey="modelForm.province" code="city"></Select-Value-Set>
            </Form-item>
          </Col>
          <Col span="12" style="border:none;">
            <Form-item prop="市的key" label="市的key">
              <Input v-model="modelForm.city" size="small"/>
            </Form-item>
          </Col>
        </Row>
      </FormBlock>
      <FormBlock title="有change事件的用法">
        <Row :gutter="16" class="code-row-bg">
          <Col span="24" style="border:none;">
            <Form-item prop="代码示例" label="代码示例">
              <span><font size="2">{{sample3}}</font></span>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border:none;">
            <Form-item prop="国家" label="国家">
              <Select-Value-Set v-model="modelForm.country3" code="country" :onValueSetChange="onValueSetChange"></Select-Value-Set>
            </Form-item>
          </Col>
        </Row>
      </FormBlock>
      <FormBlock title="禁用选择的用法">
        <Row :gutter="16" class="code-row-bg">
          <Col span="24" style="border:none;">
            <Form-item prop="代码示例" label="代码示例">
              <span><font size="2">{{sample4}}</font></span>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border:none;">
            <Form-item prop="国家" label="国家">
              <Select-Value-Set v-model="modelForm.country4" code="country" :disabled="true"></Select-Value-Set>
            </Form-item>
          </Col>
        </Row>
      </FormBlock>
      <FormBlock title="可以清空选项的用法">
        <Row :gutter="16" class="code-row-bg">
          <Col span="24" style="border:none;">
            <Form-item prop="代码示例" label="代码示例">
              <span><font size="2">{{sample5}}</font></span>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border:none;">
            <Form-item prop="国家" label="国家">
              <Select-Value-Set v-model="modelForm.country5" code="country" :clearable="true"></Select-Value-Set>
            </Form-item>
          </Col>
        </Row>
      </FormBlock>
      <FormBlock title="支持搜索选项的用法">
        <Row :gutter="16" class="code-row-bg">
          <Col span="24" style="border:none;">
            <Form-item prop="代码示例" label="代码示例">
              <span><font size="2">{{sample6}}</font></span>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border:none;">
            <Form-item prop="国家" label="国家">
              <Select-Value-Set v-model="modelForm.country6" code="country" :filterable="true"></Select-Value-Set>
            </Form-item>
          </Col>
        </Row>
      </FormBlock>
    </Form>
    <h2 id="API">API</h2>
    <div class="single-table-con">
      <Table :columns="columns" :data="data1" border ></Table>
    </div>
  </div>
</template>
<script>
export default{
  components:{

  },
  props:{
  },
  data(){
    return{
      sample1: '<Select-Value-Set v-model="modelForm.country" code="country"></Select-Value-Set>',
      sample2: '<Select-Value-Set v-model="modelForm.city" :parentKey="modelForm.province" code="city"></Select-Value-Set>',
      sample3: '<Select-Value-Set v-model="modelForm.country" code="country" :onValueSetChange="onValueSetChange"></Select-Value-Set>',
      sample4: '<Select-Value-Set v-model="modelForm.country" code="country" :disabled="true"></Select-Value-Set>',
      sample5: '<Select-Value-Set v-model="modelForm.country" code="country" :clearable="true"></Select-Value-Set>',
      sample6: '<Select-Value-Set v-model="modelForm.country" code="country" :filterable="true"></Select-Value-Set>',
      modelForm: {
        country1: 'CNY',
        province: '',
        city: '',
        country3: 'CNY',
        country4: 'CNY',
        country5: 'CNY',
        country6: 'CNY',
      },
      columns: [
        {
          title: '属性',
          key: 'property',
          width: 140,
        },
        {
          title: '说明',
          key: 'description'
        },
        {
          title: '类型',
          key: 'type',
          width: 100,
        },
        {
          title: '默认值',
          key: 'default',
          width: 100,
        },
      ],
      data1: [
        {
          property: 'model',
          description: '可以使用 model 双向绑定数据',
          type: 'String',
          default: '空'
        },
        {
          property: 'parentKey',
          description: '值来源：值集管理中父值集的 值集代码',
          type: 'String',
          default: '空'
        },
        {
          property: 'code',
          description: '值来源：值集管理中 值集代码',
          type: 'String',
          default: '空'
        },
        {
          property: 'onValueSetChange',
          description: '选中的Option变化时触发，返回 value',
          type: 'Function',
          default: '空'
        },
        {
          property: 'disabled',
          description: '是否禁用',
          type: 'Boolean',
          default: 'false'
        },
        {
          property: 'clearable',
          description: '是否可以清空选项',
          type: 'Boolean',
          default: 'false'
        },
        {
          property: 'filterable',
          description: '是否支持搜索',
          type: 'Boolean',
          default: 'false'
        },
      ]
    }
  },
  computed:{

  },
  created:function(){

  },
  beforeMount:function(){

  },
  mounted:function(){

  },
  beforeDestroy:function(){

  },
  destroyed:function(){

  },
  methods:{
    onValueSetChange(value){
      this.$Message.info(`我变了 `+ value);
    }
  },
  watch:{

  },
  directives:{

  }
}
</script>
