<template>
  <div class="carousel-config">
    <div class="config-header">设置</div>
    <widgetFormitem>
      卖点
      <el-switch slot="right" v-model="currentSub.sellingPoint" />
    </widgetFormitem>
    <widgetFormitem>
      原价
      <el-switch slot="right" v-model="currentSub.originalPrice" />
    </widgetFormitem>
    <widgetFormitem>
      售价
      <el-switch slot="right" v-model="currentSub.sellingPrice" />
    </widgetFormitem>
    <widgetFormitem>
      购买人数
      <el-switch slot="right" v-model="currentSub.paymentNumber" />
    </widgetFormitem>
    <div class="config-header">内容</div>
    <div class="config-item">
      <div class="config-setting">
        <div class="collapse-list">
          <div
            v-for="(item, index) in currentSub.list"
            :key="index"
            class="collapse-item"
          >
            <div class="collapse-item-header">
              <div class="title">商品来源</div>
              <div class="right">
                <i
                  class="el-icon-delete"
                  @click="delectItem(currentSub.list, index)"
                ></i>
              </div>
            </div>
            <div class="collapse-item-content">
              <div class="config-title">标签名称</div>
              <el-input
                v-model="item.name"
                placeholder="请选择"
                class="full-input"
              />
              <div
                v-for="(category, index1) in item.categoryList"
                :key="index1"
                class="class-item"
              >
                <div class="left">
                  类别
                </div>
                <div class="content text-overflow">
                  {{ category.categoryName }}
                </div>
                <div class="right">
                  <i
                    class="el-icon-delete"
                    @click="delectItem(item.categoryList, index1)"
                  ></i>
                </div>
              </div>
              <div
                v-for="(category, index2) in item && item.goodsList"
                :key="index + '-' + index2"
                class="class-item"
              >
                <div class="left">
                  商品
                </div>
                <div class="content  text-overflow">
                  {{ category.productName }}
                </div>
                <div class="right">
                  <i
                    class="el-icon-delete"
                    @click="delectItem(item.goodsList, index2)"
                  ></i>
                </div>
              </div>
              <a
                class="add-shop"
                href="javascript:;"
                @click="addGoodsClass(index)"
              >
                <i class="el-icon-plus"></i>
                添加类别
              </a>
              <a class="add-shop" href="javascript:;" @click="addGoods(index)">
                <i class="el-icon-plus"></i>
                添加商品
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class="add-widget" href="javascript:;" @click="addCarousel">
      <i class="el-icon-plus"></i>
      添加标签
    </a>
    <goods-class
      ref="edit"
      :dialog-visible="dialog1.isVisible"
      :type="dialog1.type"
      :exclude="exclude1"
      @close="close1"
      @success="success1"
    />
    <goods-dialog
      ref="edit"
      :dialog-visible="dialog2.isVisible"
      :type="dialog2.type"
      :exclude="exclude2"
      @close="close2"
      @success="success2"
    />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import widgetFormitem from '../components/widgetFormitem'
import GoodsClass from '@/components/applet/GoodsClass'
import GoodsDialog from '@/components/applet/Goods'
import db from '@/utils/localstorage'
export default {
  components: {
    widgetFormitem,
    GoodsClass,
    GoodsDialog
  },
  data() {
    return {
      arrangementList: [
        {
          value: 1,
          label: '网格'
        },
        {
          value: 2,
          label: '列表'
        }
      ],
      carouselList: [],
      value: '',
      Slidervalue1: 100,
      headers: {
        Authorization: ''
      },
      dataObj: {
        folderId: 1
      },
      dialog1: {
        type: 'add',
        isVisible: false
      },
      dialog2: {
        type: 'add',
        isVisible: false
      },
      addClassIndex: null,
      addGoodsIndex: null,
      exclude2: []
    }
  },
  computed: {
    ...mapState('creationCamp', [
      'currentComponentKeyCode',
      'currentComponentConfig'
    ]),
    currentSub() {
      return this.currentComponentConfig
    },
    exclude1() {
      const exclude = []
      this.currentSub.list.map(i => {
        i.categoryList.map(category => {
          exclude.push(category.id)
        })
      })
      return exclude
    }
  },
  watch: {
    currentSub: {
      handler: function handler() {
        this.setComponentConfig({
          keyCode: this.currentComponentKeyCode,
          content: this.currentSub
        })
      },
      deep: true
    }
  },
  created() {
    this.headers.token = 'Bearer ' + db.get('TOKEN', '')
    this.headers.tenant = 'MDAwMA=='
  },
  methods: {
    ...mapMutations('creationCamp', ['setComponentConfig']),
    addGoodsClass(index) {
      this.addClassIndex = index
      this.dialog1.isVisible = true
    },
    addGoods(index) {
      this.addGoodsIndex = index
      this.dialog2.isVisible = true
      const exclude = []
      this.currentSub.list[this.addGoodsIndex].goodsList.map(goods => {
        exclude.push({
          productName: goods.productName,
          id: goods.id
        })
      })
      this.exclude2 = exclude
    },
    delectItem(list, index) {
      list.splice(index, 1)
    },
    success1(obj) {
      this.currentSub.list[this.addClassIndex].categoryList.push(obj)
    },
    close1() {
      this.dialog1.isVisible = false
    },
    success2(obj) {
      console.log(obj)
      this.currentSub.list[this.addGoodsIndex].goodsList = obj
    },
    close2() {
      this.dialog2.isVisible = false
    },
    addCarousel() {
      if (this.currentSub.list.length >= 20) {
        return
      }
      this.currentSub.list = this.currentSub.list.map(item => {
        item.collapseState = false
        return item
      })
      this.currentSub.list.push({
        name: '',
        categoryList: [],
        goodsList: []
      })
    }
  }
}
</script>

<style lang="less" scoped>
.collapse-item-header {
  display: flex;
  align-items: center;
  padding: 0 12px;
  .title {
    flex: 1;
  }
}
.add-shop {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #409eff;
  border: 1px dashed #ccc;
  text-align: center;
  display: block;
  cursor: pointer;
  margin-bottom: 20px;
}
.full-input {
  margin-bottom: 12px;
}
.class-item {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  margin-bottom: 10px;
  border: 1px solid #eee;
  font-size: 12px;
  .left {
    color: #409eff;
  }
  .content {
    flex: 1;
    margin: 0 8px;
  }
}
</style>
