<template>
  <div class="discountGoodsContainer">
    <div class="discountGoodsItem" v-for="(item, index) in goods" :key="index">
      <p>商品{{index + 1}}<span v-if="item.status == 2">(已隐藏，商品已下架)</span></p>
      <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" placeholder="请输入商品sku编码" @on-focus="setPrevVal(item.skuNo)" @on-blur="getSkuInfo(item.skuNo, index)"></Input>
        </FormItem>
        <FormItem label="商品名称" prop="skuName">
          <Input v-model="item.skuName" placeholder="请输入商品名称"></Input>
        </FormItem>
        <FormItem label="商品横幅文案" prop="subtitle">
          <Input v-model="item.subtitle" placeholder="请输入商品横幅文案"></Input>
        </FormItem>
        <FormItem label="商品标签文案" prop="tag">
          <Input v-model="item.tag" placeholder="请输入商品标签文案"></Input>
        </FormItem>
        <FormItem label="商品标签文案颜色" prop="tagColor">
          <ColorSelector v-model="item.goodsTagFontColor" @input="updateStyle($event, 'tagColor', item)"></ColorSelector>
        </FormItem>
        <FormItem label="商品标签背景" prop="tagBg" title="要求尺寸：134px * 46px">
          <Upload v-model="item.goodsTagBgImg" @change="updateStyle($event, 'tagBg', item)"></Upload>
        </FormItem>
      </Form>
      <Button type="error" @click="del(index)" class="deleteGood">删除</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';
import operationApi from '@api/operation.api';
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Upload,
    ColorSelector
  },
  data() {
    return {
      goods: [],
      prevEditSkuNo: ''
    }
  },
  watch: {
    value(val) {
      this.goods = val;
    },
    goods: {
      handler(val) {
        this.$emit('input', val);    
      },
      deep: true
    }
  },
  created() {
    this.goods = JSON.parse(JSON.stringify(this.value));
  },
  methods: {
    setPrevVal(skuNo) {
      this.prevEditSkuNo = skuNo;
    },
    async getSkuInfo(skuNo, index) {
      if (skuNo === this.prevEditSkuNo) return;
      if (isNaN(parseInt(skuNo))) return;
      const res = await operationApi.getGoods({
        skus: [skuNo]
      });
      const result = res.skus[0];
      if (!result) return;
      const item = {
        skuNo: result.skuNo || '',
        skuName: result.skuName || '',
        skuImg: result.skuUrl || '',
        marketPrice: result.marketPrice || '',
        salePrice: result.salePrice || '',
        goodsTagFontColor: this.goods[index].goodsTagFontColor || '',
        subtitle: this.goods[index].subtitle || '',
        tag: this.goods[index].tag || '',
        goodsTagBgImg: this.goods[index].goodsTagBgImg || '',
        status: result.status || 2
      }
      this.$set(this.goods, index, item);
      // const goods = JSON.parse(JSON.stringify(this.goods));
      // goods[index] = item;
      // this.goods = goods;
      console.log(this.goods, index);
    },
    updateStyle(e, key, item) {
      item[key] = e;
    },
    add() {
      this.goods.push({
        skuNo: '',
        skuName: '',
        skuImg: '',
        subtitle: '',
        marketPrice: '',
        salePrice: '',
        tag: '',
        goodsTagFontColor: '',
        goodsTagBgImg: ''
      })
    },
    del(index) {
      this.goods.splice(index, 1)
    }
  }
}
</script>
<style scoped lang="less">
.discountGoodsContainer{
  .discountGoodsItem{
    border: 1px solid #dddee1;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 5px;
    .deleteGood{
      width: 100%;
      margin-top: 10px;
    }
    /deep/ .ivu-form-item{
      margin-bottom: 10px;
    }
  }
}
</style>
