<template>
  <div class="ap-dev-style-container">
    <el-form
      :model="opts"
      label-position="left"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="style" prop="labelName">
        <el-input v-model="opts.styleStr" />
      </el-form-item>
      <div />
      <el-form-item label="class" prop="labelName">
        <el-input v-model="opts.classStr" />
      </el-form-item>

      <el-form-item label="flex布局" prop="isFlex">
        <el-switch v-model="opts.isFlex" />
      </el-form-item>
      <div v-if="opts.isFlex" class="ap-dev-style-box">
        <el-form-item label="排列方式" prop="flexLayout">
          <el-radio-group v-model="opts.flexLayout">
            <el-radio label="row">水平(默认)</el-radio>
            <el-radio label="column">垂直</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="对齐方式">
          <el-checkbox-group v-model="opts.flexAlign" class="ap-dev-checkbox">
            <el-checkbox label="flexHorizontal">水平居中</el-checkbox>
            <el-checkbox label="flexVertical">垂直居中</el-checkbox>
            <el-checkbox label="flexBetween">两端对齐</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="flex-1" prop="flex1">
          <el-switch v-model="opts.flex1" />
        </el-form-item>
      </div>


      <el-button @click="test">容器</el-button>

    </el-form>
  </div>

</template>

<script>
import ApDevPropBase from './ApDevPropBase'
import ElButton from 'element-ui/packages/button/src/button'

// 注意点：1、表单必须绑定opts。
export default {
  name: 'ApDevPropStyle',
  components: { ElButton },
  extends: ApDevPropBase,
  data() {
    return {
      rules: {
        type: [
          { required: true, message: 'type必填' }
        ],
        vModel: [
          { required: true, message: 'v-model必填' }
        ]
      }
    }
  },
  methods: {
    test() {
      console.log(this.opts)
    }
  }
}
</script>


<style scoped>
    .ap-dev-style-container {
        padding: 0px 10px;
    }

    .ap-dev-checkbox {
        line-height: 1;
    }

    .ap-dev-style-box {
        border: 1px dashed #eeeeee;
        padding: 5px 0px 5px 20px;
    }
</style>
