<template>
  <div class="extend-option">
    <FormItem label="是否支持筛选" :label-width="110">
      <i-switch v-model="value.search.show" />
    </FormItem>
    <div v-if="value.search.show" class="bg-grey">
      <FormItem label="筛选排序">
        <InputNumber :max="9999" :min="1" v-model="value.search.sort"></InputNumber>
      </FormItem>
      <FormItem label="layout">
        <InputNumber :max="24" :min="1" v-model="value.search.layout"></InputNumber>
      </FormItem>
      <FormItem label="搜索展示">
        <Input v-model="value.search.label"></Input>
      </FormItem>
      <FormItem label="搜索类型">
        <RadioGroup
          v-model="value.search.type"
          type="button"
          button-style="solid">
          <Radio label="simple">基础型</Radio>
          <Radio label="between">范围型</Radio>
        </RadioGroup>
      </FormItem>
    </div>
    <FormItem label="是否列表展示" :label-width="110">
      <i-switch v-model="value.table.show" />
    </FormItem>
    <div v-if="value.table.show" class="bg-grey">
      <FormItem label="展示排序">
        <InputNumber :max="9999" :min="1" v-model="value.table.sort"></InputNumber>
      </FormItem>
      <FormItem label="列头显示">
        <Input v-model="value.table.label"></Input>
      </FormItem>
      <FormItem label="列表宽度">
        <InputNumber :max="9999" :min="1" v-model="value.table.width"></InputNumber>
      </FormItem>
      <FormItem label="是否固定">
        <RadioGroup
          v-model="value.table.fixed"
          type="button"
          button-style="solid">
          <Radio label="">不固定</Radio>
          <Radio label="left">左固定</Radio>
          <Radio label="right">右固定</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="ellipsis">
        <i-switch v-model="value.table.ellipsis" />
      </FormItem>
      <FormItem label="开启排序">
        <i-switch v-model="value.table.sortable" />
      </FormItem>
      <FormItem label="render">
        <Input type="textarea" v-model="value.table.render"></Input>
      </FormItem>
    </div>

    <FormItem label="是否可导入" :label-width="110">
      <i-switch v-model="value.isImport.show" />
    </FormItem>

    <FormItem label="可见性">
      <Checkbox v-model="value.controller.visible.update">编辑可见</Checkbox>
      <Checkbox v-model="value.controller.visible.view">详情可见</Checkbox>
    </FormItem>
    <FormItem label="可用性">
      <Checkbox v-model="value.controller.disabled.update"> 编辑可用 </Checkbox>
      <Checkbox v-model="value.controller.disabled.view"> 详情可用 </Checkbox>
    </FormItem>
  </div>
</template>
<script>
export default {
  name: 'ExtendOption',
  props: {
    value: Object,
  },
  methods: {

  },
}
</script>
<style lang="scss" scoped>
.extend-option{
  .ivu-form-item {
    margin-bottom: 16px;
  }
  .bg-grey{
    background: #f8f8f8;
    padding: 10px;
    border-radius:4px;
  }
}
</style>