<template>
  <div class="swiperListSelector">
    <div class="listItem" v-for="(item, index) in lists" :key="index">
      <p>素材{{index + 1}}</p>
      <Form @submit.native.prevent ref="formCustom" :model="item" :label-width="90" label-position="left">
        <FormItem label="素材名称" prop="name">
          <Input v-model="item.name" placeholder="请输入素材名称" />
        </FormItem>
        <FormItem label="轮播图" prop="img">
          <Upload v-model="item.img" />
        </FormItem>
        <FormItem label="跳转链接" prop="link">
          <Input v-model="item.link" placeholder="请输入跳转链接" />
        </FormItem>
      </Form>
      <Button type="error" @click="del(index)" class="delete">删除</Button>
    </div>
    <Button type="dashed" icon="plus-round" @click="add">添加素材</Button>
    <!-- <Button type="primary" @click="save">保存</Button> -->
  </div>
</template>
<script>
import ColorSelector from '@editor/component/DynamicForm/component/ColorSelector/index.vue';
import Upload from '@editor/component/DynamicForm/component/Upload/index.vue';

export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Upload,
    ColorSelector
  },
  data() {
    return {
      lists: [],
    }
  },
  watch: {
    value(val) {
      this.lists = val;
    },
    lists: {
      handler(val) {
        this.$emit('input', val);    
      },
      deep: true
    }
  },
  created() {
    this.lists = JSON.parse(JSON.stringify(this.value));
  },
  methods: {
    add() {
      if (this.lists && this.lists.length >= 8) {
        this.$toast('最多允许添加8个素材');
        return
      }
      this.lists.push({
        name: '',
        img: '',
        link: ''
      })
    },
    del(index) {
      this.lists.splice(index, 1)
    }
  }
}
</script>
<style scoped lang="less">
.swiperListSelector{
  .listItem{
    border: 1px solid #dddee1;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 5px;
    .delete{
      width: 100%;
      margin-top: 10px;
    }
    /deep/ .ivu-form-item{
      margin-bottom: 10px;
    }
  }
}
</style>
