<template>
  <div class="formcon">
    <div class="formtop">
      <div class="left">
        <el-form-item label="字典类型：" prop="type">
          <el-input v-model="form.type" class="fadeDom"></el-input>
          <el-select v-model="form.type" placeholder="请选择" style="width:100%">
            <el-option v-for="item in collectionTypes" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="字典名称：" prop="name">
          <el-input placeholder="请输入藏品名称" :maxlength="INPUTLENGTH" show-word-limit v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="排序号：" prop="sort">
          <el-input placeholder="请输入排序号，从0开始" :maxlength="INPUTLENGTH" show-word-limit v-model="form.sort"></el-input>
        </el-form-item>

        <el-form-item label="是否显示：">
          <el-switch :active-value='1' :inactive-value='0' v-model="form.display"> </el-switch>
        </el-form-item>

      </div>

    </div>


  </div>
</template>

<script>

export default {
  props: ["data", "rule"],
  data() {
    return {
      id: this.$route.params.id,
      form: this.data,
      radio: "选中且禁用",
      collectionTypes: [{
        id: 'age',
        name: '藏品年代'
      }, {
        id: 'texture',
        name: '藏品种类'
      }],
    };
  },
  methods: {

  },
  mounted() {

  },
};
</script>

<style lang="less" scoped>
.formcon {
  width: 100%;

  .formtop,
  .formbom {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    position: relative;

    >div {
      width: 40%;

      &:first-of-type {
        margin-right: 5%;
      }
    }
  }

  .formbom {
    align-items: center;
  }
}
</style>

<style lang="less">
.el-date-editor .el-range-input {
  width: 49%;
}
</style>