<template>
  <div>
    <el-form label-width="70px" label-position="right">
      <el-divider>基础配置</el-divider>
      <el-form-item label="名称">
        <el-input v-model="labDesign.activity.label" clearable />
      </el-form-item>
      <el-form-item label="属性">
        <el-input v-model="labDesign.activity.mapper" clearable />
      </el-form-item>
      <el-form-item label="渲染展示">
        <el-switch v-model="labDesign.activity.visible"></el-switch>
      </el-form-item>
      <el-form-item label="响应式">
        <el-input placeholder="<768px" size="mini" :min="0" :max="24" style="width: 70px;" v-model.number="labDesign.activity.xs"></el-input>
        <el-input placeholder="≥768px" size="mini" :min="0" :max="24" style="width: 70px;" v-model.number="labDesign.activity.sm"></el-input>
        <el-input placeholder="≥1200px" size="mini" :min="0" :max="24" style="width: 70px;" v-model.number="labDesign.activity.lg"></el-input>
      </el-form-item>
      <el-form-item label="展示范围">
        <el-select value="" v-model="labDesign.activity.lifeScope" style="width: 100%" clearable>
          <el-option value="all" label="所有" />
          <el-option value="form" label="仅表单" />
          <el-option value="table" label="仅表格" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="labDesign.renderItem && labDesign.renderItem.level === 1" label="必填标识">
        <el-switch v-model="labDesign.activity.needValue" />
      </el-form-item>
      <el-form-item label="标签宽度">
        <el-input v-model="labDesign.activity.labelWidth" clearable />
      </el-form-item>
      <el-form-item v-if="['select','radio','checkbox'].includes(labDesign.activity.render)" label="静态选项">
        <el-input @focus="visible = true" placeholder="点击配置静态选项" />
      </el-form-item>
      <template v-if="attributes && attributes.length > 0">
        <el-divider>{{ labDesign.renderItem.label }}配置</el-divider>
        <el-form-item v-for="item in attributes" :key="item.prop" :label="item.label">
          <el-select v-if="item.type === 'select'" value="" v-model="labDesign.activity.props[item.prop]" style="width: 100%" clearable>
            <el-option v-for="option in item.options" :key="option.value" :value="option.value" :label="option.label" />
          </el-select>
          <el-input v-else-if="item.type === 'input'" v-model="labDesign.activity.props[item.prop]" clearable />
          <el-input-number v-else-if="item.type === 'number'" v-model="labDesign.activity.props[item.prop]" style="width: 100%" clearable controls-position="right" />
          <el-switch v-else-if="item.type === 'switch'" v-model="labDesign.activity.props[item.prop]" />
          <lab-icon v-else-if="item.type === 'icon'" v-model="labDesign.activity.props[item.prop]" />
        </el-form-item>
      </template>
    </el-form>
    <el-dialog :visible.sync="visible" title="请求配置" width="700px">
      <drag-attribute :element="labDesign.activity"></drag-attribute>
    </el-dialog>
  </div>
</template>

<script>

import DragAttribute from "./DragAttribute";
import LabDesign from "../../../mixins/LabDesign";
export default {
  name: "Attribute",
  components: {DragAttribute},
  mixins: [LabDesign],
  data() {
    return {
      visible: false
    }
  },
  computed:{
    attributes(){
      return this.$LabRender.findAllAttrs(this.labDesign.activity)
    }
  }
}
</script>
