<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" :options="keywords.options" :disabled="shareDisableUrl(item, keywords)" v-model="item[keywords.key]" @input="handleModelChange($event, keywords.key, index)" />
        </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';
import { SHOP_CART_CONFIG, SHARE_CONFIG, DEFAULT_CONFIG } from '@service/staticData.service';
import { v4 as uuid } from 'uuid';

const CONFIG_MAP = {
  ['购物车']: SHOP_CART_CONFIG,
  ['分享']: SHARE_CONFIG,
  ['自定义']: DEFAULT_CONFIG
};
  export default {
    name: 'BackTopPicker',
    mixins: [FormList],
    data() {
      return {
        oldPersets: []
      };
    },
    methods: {
      shareDisableUrl(item, keywords) {
        return item.persets === '分享' && keywords.key === 'url';
      },
      handleModelChange(e, key, index) {
        if (key !== 'persets') return;
        if (e !== this.oldPersets[index]) {
          this.$set(this.list, index, JSON.parse(JSON.stringify(CONFIG_MAP[e])));
          this.oldPersets[index] = e;
        }
      },
      add() {
        const object = this.formControl.reduce((pre, cur) => {
          pre[cur.key] = this.formDefault[cur.key] || '';
          return pre;
        }, {});
        if (object.persets === '自定义') {
          object.name = '自定义-' + uuid().slice(19);
        }
        this.list.push(object);
      },
      del(index) {
        const list = JSON.parse(JSON.stringify(this.list));
        list.splice(index, 1);
        this.list = [];
        this.$nextTick(() => {
          this.list = list;
        });
      }
    }
  }
</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;
      }
    }

    &-button {
      // margin-top: 20px;
      // text-align: center;
    }
  }
</style>