<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">
      <div class="title">
        商品{{index + 1}}
      </div>
      <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) {
     let prevDataArr = this.data && this.data.data ? JSON.parse(JSON.stringify(this.data.data)) : [];
     let skuToInfoMaps = {};
     for (let i = 0; i < prevDataArr.length; i++) {
       skuToInfoMaps[prevDataArr[i].skuNo] = prevDataArr[i];
     }
     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;
           if (skuToInfoMaps[goodsList[i].skuNo]) {
             item = Object.assign({}, skuToInfoMaps[goodsList[i].skuNo])
           };
           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 ids = this.data && this.data.ids ? this.data.ids.trim() : '';
     this.data.ids = ids;
     const skus = ids ? ids.split(',') : [];
     if (skus.length) {
       if (skus.length > 15) {
         this.$toast('最多填入15个商品');
         return;
       }
       this.getGoods({
         skus: Array.from(new Set(skus))
       });
     } else {
       this.$set(this.data, 'data', []);
     }
   },
   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;
  }
  .title{
    width: 100%;
    height: 30px;
    font-weight: bold;
  }
}
</style>
