<template>
  <div>
     <Form :model="formItem" :label-width="60">
        <FormItem label="标题">
            <Input v-model="formItem.input" placeholder="热门系列"/>
        </FormItem>
        <FormItem label="商品编码">
            <Input v-model="formItem.ids" type="textarea" :rows="4" placeholder="多个商品以英文逗号分隔"/>
        </FormItem>

        <Alert type="warning">
          说明： <br>
          1、前台根据商品编码取商品图片展示 <br>
          2、系列名称取商品对应的系列名称 <br>
          3、一排最多展示四个商品 <br>
          4、多个商品编码用英文逗号分隔 <br>
        </Alert>
    </Form>
  </div>
</template>

<script>
export default {
  props: ['name', 'list'],
  data() {
    return {
      formItem: {
        input: this.name,
        ids: this.list.join(',')
      }
    }
  },
  watch: {
    'formItem.input': function(newVal) {
      this.$emit('update:name', newVal);
    },
    'formItem.ids': function(newVal) {
      this.$emit('update:list', newVal.split(','));
    }
  }
}
</script>

<style>

</style>