# Linkage

<template>
  <div>
    <el-select :style="selectStyle" v-model="uiLib">
      <el-option
        v-for="item in uiLibs"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <Former :ui="uiLib" :model="model" :schema="schema" :options="options"></Former>
  </div>
</template>

<script>
export default {
  components: {
    Former: window.Former
  },

  data: () => ({
    selectStyle: {
      marginBottom: '20px'
    },
    uiLib: 'element-ui',
    uiLibs: [
      { value: 'element-ui', label: 'Element UI' },
      { value: 'iview', label: 'iView' }
    ],
    model: { url: '', protocol: 0 },
    schema: [
      {
        label: 'Protocol: ',
        name: 'protocol',
        type: 'radio',
        options: [
          { value: 0, name: 'http' },
          { value: 1, name:'https' }
        ],
        onChange: (e, model) => {
          model.url = e > 0 ? 'https://' : 'http://';
        }
      }, {
        label: 'Url: ',
        name: 'url',
        type: 'input'
      }
    ],
    options: { labelWidth: '80px', labelPosition: 'left' }
  })
}
</script>