<template>
  <div class="jump-component">
    <div class="config-title">跳转至</div>
    <el-select
      v-model="item.href"
      placeholder="请选择"
      class="full-input"
      @change="selectHref(item)"
    >
      <el-option
        v-for="link in templatePage"
        :key="link.value"
        :label="link.label"
        :value="link.value"
      />
    </el-select>
    <div v-if="item.detailId && item.detailId.length">
      <div
        v-for="(category, index1) in item.detailId"
        :key="index1"
        class="class-item"
      >
        <div class="left">
          商品
        </div>
        <div class="content  text-overflow">{{ category.productName }}</div>
        <div class="right">
          <i class="el-icon-delete" @click="delectGoods(item)"></i>
        </div>
      </div>
    </div>
    <a
      v-if="item.hasOwnProperty('detailId') && !item.detailId"
      class="add-shop"
      href="javascript:;"
      @click="addGoods()"
    >
      <i class="el-icon-plus"></i>
      添加商品
    </a>
    <div v-if="item.category3Id && item.category3Id.length">
      <div
        v-for="(category, index2) in item.category3Id"
        :key="index2"
        class="class-item"
      >
        <div class="left">
          类别
        </div>
        <div class="content  text-overflow">{{ category.categoryName }}</div>
        <div class="right">
          <i class="el-icon-delete" @click="delectCategory(item)"></i>
        </div>
      </div>
    </div>
    <a
      v-if="item.hasOwnProperty('category3Id') && !item.category3Id"
      class="add-shop"
      href="javascript:;"
      @click="addGoodsClass()"
    >
      <i class="el-icon-plus"></i>
      添加类别
    </a>
    <div v-if="item.shopId && item.shopId.length">
      <div
        v-for="(shop, index3) in item.shopId"
        :key="index3"
        class="class-item"
      >
        <div class="left">
          店铺
        </div>
        <div class="content  text-overflow">{{ shop.storeName }}</div>
        <div class="right">
          <i class="el-icon-delete" @click="delectShop(item)"></i>
        </div>
      </div>
    </div>
    <a
      v-if="item.hasOwnProperty('shopId') && !item.shopId"
      class="add-shop"
      href="javascript:;"
      @click="addShop()"
    >
      <i class="el-icon-plus"></i>
      添加店铺
    </a>
    <goods-class
      ref="edit"
      :dialog-visible="dialog1.isVisible"
      :type="dialog1.type"
      :deep="3"
      @close="close1"
      @success="success1"
    />
    <goods-dialog
      ref="edit"
      :dialog-visible="dialog2.isVisible"
      :type="dialog2.type"
      :radio-state="true"
      @close="close2"
      @success="success2"
    />
    <shop-dialog
      ref="edit"
      :dialog-visible="dialog3.isVisible"
      :type="dialog3.type"
      :radio-state="true"
      @close="close3"
      @success="success3"
    />
  </div>
</template>
<script>
import GoodsClass from '@/components/applet/GoodsClass'
import GoodsDialog from '@/components/applet/Goods'
import ShopDialog from '@/components/applet/Shops'
import { mapState } from 'vuex'
export default {
  components: {
    GoodsClass,
    GoodsDialog,
    ShopDialog
  },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialog1: {
        type: 'add',
        isVisible: false
      },
      dialog2: {
        type: 'add',
        isVisible: false
      },
      dialog3: {
        type: 'add',
        isVisible: false
      }
    }
  },
  computed: {
    ...mapState('creationCamp', ['templatePage']),
    currentSub() {
      return this.currentComponentConfig
    }
  },
  methods: {
    addGoodsClass() {
      this.dialog1.isVisible = true
    },
    addGoods() {
      this.dialog2.isVisible = true
    },
    addShop() {
      this.dialog3.isVisible = true
    },
    success1(obj) {
      this.item.category3Id = [obj]
    },
    close1() {
      this.dialog1.isVisible = false
    },
    success2(obj) {
      this.item.detailId = obj
    },
    close2() {
      this.dialog2.isVisible = false
    },
    success3(obj) {
      this.item.shopId = obj
    },
    close3() {
      this.dialog3.isVisible = false
    },
    selectHref(item) {
      const { href } = item
      var re = /{(.*?)}/g
      const execArray = re.exec(href)
      delete item.detailId
      delete item.category3Id
      delete item.shopId
      if (execArray) {
        this.$set(item, execArray[1], '')
      }
      if (href.indexOf('/') > -1) {
        item.isCustom = false
      } else {
        item.isCustom = true
      }
    },
    delectGoods(item) {
      item.detailId = ''
    },
    delectCategory(item) {
      item.category3Id = ''
    },
    delectShop(item) {
      item.shopId = ''
    }
  }
}
</script>
<style lang="less" scoped>
.jump-component {
  .class-item {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    margin-top: 10px;
    border: 1px solid #eee;
    font-size: 12px;
    .left {
      color: #409eff;
    }
    .content {
      flex: 1;
      margin: 0 8px;
    }
  }
  .add-shop {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #409eff;
    border: 1px dashed #ccc;
    text-align: center;
    display: block;
    cursor: pointer;
    margin-top: 10px;
  }
}
</style>
