<template>
  <div class="single-item-config">
    <div class="config-header">设置</div>
    <widgetFormitem>
      卖点
      <el-switch
        slot="right"
        v-model="currentSub.sellingPoint"
        @change="change('sellingPoint', $event)"
      />
    </widgetFormitem>
    <widgetFormitem>
      原价
      <el-switch
        slot="right"
        v-model="currentSub.originalPrice"
        @change="change('originalPrice', $event)"
      />
    </widgetFormitem>
    <widgetFormitem>
      售价
      <el-switch
        slot="right"
        v-model="currentSub.sellingPrice"
        @change="change('sellingPrice', $event)"
      />
    </widgetFormitem>
    <widgetFormitem>
      按钮
      <el-switch
        slot="right"
        v-model="currentSub.button"
        @change="change('button', $event)"
      />
    </widgetFormitem>
    <div class="config-header">内容</div>
    <div class="config-item">
      <div class="config-setting">
        <div class="collapse-list">
          <div v-if="currentSub.goodsList.length" class="collapse-item">
            <div class="collapse-item-header">
              <div class="title">商品来源</div>
              <div class="right">
                <i
                  class="el-icon-delete"
                  @click="delectItem(currentSub.goodsList, 0)"
                ></i>
              </div>
            </div>
            <div class="collapse-item-content">
              <div
                v-for="(category, index2) in currentSub.goodsList"
                :key="index2"
                class="class-item"
              >
                <div class="left">
                  商品
                </div>
                <div class="content  text-overflow">
                  {{ category.productName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a
      v-if="!currentSub.goodsList.length"
      class="add-widget"
      href="javascript:;"
      @click="addGoods"
    >
      <i class="el-icon-plus"></i>
      添加商品
    </a>
    <goods-dialog
      ref="edit"
      :dialog-visible="dialog2.isVisible"
      :type="dialog2.type"
      :radio-state="true"
      @close="close2"
      @success="success2"
    />
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import widgetFormitem from '../components/widgetFormitem'
import GoodsDialog from '@/components/applet/Goods'
export default {
  components: {
    widgetFormitem,
    GoodsDialog
  },
  data() {
    return {
      value1: true,
      dialog2: {
        type: 'add',
        isVisible: false
      }
    }
  },
  computed: {
    ...mapState('creationCamp', [
      'currentComponentKeyCode',
      'currentComponentConfig'
    ]),
    currentSub() {
      return this.currentComponentConfig
    }
  },
  methods: {
    ...mapMutations('creationCamp', ['setComponentConfig']),
    change(key, value) {
      const temporary = {}
      temporary[key] = value
      this.setComponentConfig({
        keyCode: this.currentComponentKeyCode,
        content: temporary
      })
    },
    addGoods() {
      this.dialog2.isVisible = true
    },
    success2(obj) {
      this.currentSub.goodsList = obj
    },
    close2() {
      this.dialog2.isVisible = false
    },
    delectItem(list, index) {
      list.splice(index, 1)
    }
  }
}
</script>
<style lang="less" scoped>
.single-item-config {
  .collapse-item-header {
    display: flex;
    align-items: center;
    padding: 0 12px;
    .title {
      flex: 1;
    }
  }
  .single-from-item {
    margin-bottom: 10px;
  }
  .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>
