<template>
  <div class="form-list">
    <Card class="form-list-card" :key="index" v-for="(item, index) in list">
      <div slot='title' class="Fl-card-title">
        <h4>项目{{index + 1}}</h4>
        <a @click="del(index)">删除</a>
      </div>
      <Form @submit.native.prevent :model="item" :label-width="50">
        <FormItem :prop="`${keywords.key}`" :label="keywords.name" :key="idx" v-for="(keywords, idx) in formControl">
          <component :is="getComponent(keywords.type)" v-bind="keywords.props" :limit-name="limitName" :options="keywords.options" v-model="item[keywords.key]" />
        </FormItem>
      </Form>
    </Card>
    <div class="form-list-button">
      <Button type="dashed" icon="plus-round" @click="add">添加项目</Button>
    </div>
  </div>
</template>
<script>
import FormList from '../mixins/formList.mixin.ts';
  export default {
    mixins: [FormList],
    props: {
      limitName: String
    },
    
  }
</script>
<style lang="less" scoped>
  .form-list {
    /deep/ .ivu-card {
      margin-bottom: 16px;

      .ivu-form {
        .ivu-form-item {
          display: flex;
          margin-bottom: 12px;
        }

        .ivu-form-item-label {
          text-align: left;
          width: 60px !important;
          font-size: 12px;
        }

        .ivu-form-item-content {
          flex: 1 !important;
        }
      }

      &:hover {
        box-shadow: 0 0 14px 0 rgba(46, 140, 240, 0.2);
        border: 1px solid #2e8cf0 !important;
      }
    }

    h3 {
      padding-bottom: 10px;
      text-align: center;
    }

    &-card {
      /deep/ .ivu-card-head {
        background: #f0f2f5;
      }

      /deep/ .ivu-card-body {
        padding: 10px !important;
      }

      .Fl-card-title {
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>