<template>
  <div class="VerticalAdGoodsSelectorContainer">
    <Input
      v-model="data.ids"
      type="textarea"
      :autosize="{minRows: 3,maxRows: 10}"
      placeholder="请输入skuNo,每个skuNo使用英文逗号隔开"
      @on-blur="changeIds"
    />
  
    <div class="goodsItem" v-for="(item, index) in data.data" :key="index">
      <Form @submit.native.prevent ref="formCustom" :model="item" :label-width="90" label-position="left">
        <FormItem label="sku_no" prop="skuNo">
          <Input v-model="item.skuNo" disabled />
        </FormItem>
        <FormItem label="商品名称" prop="goodsName">
          <Input v-model="item.goodsName" />
        </FormItem>
        <FormItem label="商品主图" prop="img">
          <Upload v-model="item.img"></Upload>
        </FormItem>
        <FormItem label="横幅文案" prop="subtitle">
          <Input v-model="item.subtitle" />
        </FormItem>
        <FormItem label="标签文案" prop="tag">
          <Input v-model="item.tag" />
        </FormItem>
        <FormItem label="标签文案颜色" prop="tagColor">
          <ColorSelector v-model="item.tagColor" />
        </FormItem>
        <FormItem label="标签背景图" prop="tagBgImg">
           <Upload v-model="item.tagBgImg"></Upload>
        </FormItem>
      </Form>
      <Button type="error" long @click="del(index, item.skuNo)" class="deleteGood">删除</Button>
    </div>
  </div>
</template>
<script>
import operationApi from '@api/operation.api';
import ColorSelector from '@editor/component/DynamicForm/component/ColorSelector/index.vue';
import Upload from '@editor/component/DynamicForm/component/Upload/index.vue';
export default {
  inject: ['editor'],
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    value: {
      handler(val) {
        this.data = val;
        // this.$nextTick(() =>this.editor.adjustHeight());
      }
    },
    data: {
      deep: true,
      handler(val) {
        this.$emit('input', val);  
      }
    }
  },
  components: {
    Upload,
    ColorSelector
  },
  data() {
    return {
      data: {}
    }
  },
  created() {
    this.data = JSON.parse(JSON.stringify(this.value));
  },
  methods: {
   init() {
      const data = this.value;
      if (!data.ids) data.ids = '';
      if (!data.data) data.data = [];
      this.data = data;
   }, 
   async getGoods(params) {
     const res = await operationApi.getGoods(params);
     try {
       let goodsList = res.skus || [];
       let arr = [];
       if (goodsList.length) {
         for (let i = 0; i < goodsList.length; i++) {
           let item = {};
           item.goodsName = goodsList[i].skuName;
           item.salePrice = goodsList[i].salePrice;
           item.skuNo = goodsList[i].skuNo;
           item.img = goodsList[i].skuUrl;
           item.subtitle = '';
           item.tag = '';
           item.tagColor = '';
           item.tagBgImg = '';
           item.status = goodsList[i].status;
           arr.push(item)
         }
         this.$set(this.data, 'data', arr);
       } else {
         this.$set(this.data, 'data', []);
       }
     } catch (err) {
       console.log(err);
       this.$set(this.data, 'data', []);
     }
     setTimeout(() => {
       this.$emit('adjust')
     }, 1000)
   },
   changeIds() {
     const skus = this.data.ids ? this.data.ids.split(',') : [];
     if (skus.length) {
       if (skus.length > 15) {
         this.$toast('最多填入15个商品');
         return;
       }
       this.getGoods({
         skus
       });
     }
   },
   del(index, skuNo) {
      this.data.data.splice(index, 1)
      const ids = this.data.ids ? this.data.ids.split(',') : [];
      const idx = ids.indexOf(skuNo);
      if (idx > -1 && ids.length) ids.splice(idx, 1);
      this.data.ids = ids.join();
      if (this.data.data.length == 0) this.data.ids = '';
   }
  }
}
</script>
<style scoped lang="less">
.goodsItem{
  border: 1px solid #dddee1;
  border-radius: 4px;
  margin-top: 10px;
  padding: 5px;
     /deep/ .ivu-form-item{
      margin-bottom: 10px;
    }
}
</style>
