{"version":3,"sources":["webpack:///./src/components/page/QuickBuilder/SuperBuilderStep4.vue?f2b2","webpack:///./src/components/page/QuickBuilder/SuperBuilderStep4.vue?de29","webpack:///src/components/page/QuickBuilder/SuperBuilderStep4.vue","webpack:///./src/components/page/QuickBuilder/SuperBuilderStep4.vue?4600","webpack:///./src/components/page/QuickBuilder/SuperBuilderStep4.vue?2a1d"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","staticStyle","_v","_m","_l","tab","tab_idx","key","class","selectedTab","value","on","$event","clickTab","_s","label","content","idx","products","length","child","child_idx","selectedItem","id","isSelected","clickItem","_e","name","attrs","img","_f","price","org_price","clickSelect","domProps","info","item","clickDelete","staticRenderFns","component"],"mappings":"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","file":"js/chunk-4f80d694.ca2bf16c.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/stylus-loader/index.js??ref--11-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SuperBuilderStep4.vue?vue&type=style&index=0&id=79a5d70b&lang=stylus&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"quickbuilder-step4 flex\",staticStyle:{\"height\":\"100%\"}},[_c('div',{staticClass:\"background left\"},[_c('div',{staticClass:\"size-14 font-text2\"},[_vm._v(\"주문방식 외에도 플러그인을 추가할 수 있습니다.\")]),_vm._m(0),_c('div',{staticClass:\"position-relative\"},[_c('div',{staticClass:\"flex-align\"},_vm._l((_vm.tabArr),function(tab,tab_idx){return _c('div',{key:(\"tab-\" + tab_idx),staticClass:\"unselect tab size-14\",class:{ 'active': _vm.selectedTab && _vm.selectedTab.value === tab.value },on:{\"click\":function($event){return _vm.clickTab(tab)}}},[_vm._v(_vm._s(tab.label)+\" \"),_c('div',{staticClass:\"line\"})])}),0),(_vm.tabContent)?_c('div',{staticClass:\"tab-content\"},[_vm._l((_vm.tabContent),function(content,idx){return [_c('div',{key:'tab-content-'+idx,staticClass:\"grid-content\"},[_c('div',{staticClass:\"margin-bottom-12\"},[_vm._v(_vm._s(content.label))]),(content.products.length>0)?_c('div',{staticClass:\"grid-container\"},_vm._l((content.products),function(child,child_idx){return _c('div',{key:(\"tab-content-\" + child_idx),staticClass:\"grid-item unselect\",class:{'clicked':_vm.selectedItem && _vm.selectedItem.id === child.value.id, 'selected': _vm.isSelected(child.value)},on:{\"click\":function($event){return _vm.clickItem(child)}}},[_vm._v(_vm._s(child.label))])}),0):_vm._e()])]})],2):_vm._e()])]),(_vm.selectedItem.name !== '')?_c('div',{staticClass:\"right\"},[_c('div',{staticStyle:{\"background-color\":\"white\",\"padding\":\"24px 54px\"}},[_c('div',{staticClass:\"text-center\"},[_c('img',{staticStyle:{\"width\":\"100%\"},attrs:{\"src\":_vm.selectedItem.img}})]),_c('div',{staticClass:\"flex-between\",staticStyle:{\"min-width\":\"200px\"}},[_c('div',[_c('div',{staticClass:\"weight-600 size-18\"},[_vm._v(_vm._s(_vm.selectedItem.name))]),_c('div',{staticClass:\"margin-top-12\"},[_c('div',{staticClass:\"discount-price size-13\"},[_vm._v(_vm._s(_vm._f(\"currency\")(_vm.selectedItem.price.org_price)))]),_c('div',{staticClass:\"weight-600 font-primary\"},[_vm._v(_vm._s(_vm._f(\"currency\")(_vm.selectedItem.price.price)))])])]),_c('button',{staticClass:\"unselect button\",class:{'is-primary-2': !_vm.isSelected(_vm.selectedItem), 'is-primary': _vm.isSelected(_vm.selectedItem)},on:{\"click\":_vm.clickSelect}},[_vm._v(_vm._s(_vm.isSelected(_vm.selectedItem) ? '선택됨' : '선택하기'))])]),_c('div',{staticClass:\"font-text2 margin-top-20\",domProps:{\"innerHTML\":_vm._s(_vm.selectedItem.info)}})]),_vm._m(1),_c('div',{staticStyle:{\"background-color\":\"white\",\"padding\":\"24px 54px\"}},[_c('div',{staticStyle:{\"margin-bottom\":\"12px\"}},[_vm._v(\"장바구니\")]),_vm._l((_vm.cart),function(item,idx){return _c('div',{key:'cart-'+idx,staticClass:\"flex-between\",staticStyle:{\"margin-bottom\":\"4px\"}},[_c('div',{staticClass:\"font-primary\"},[_vm._v(_vm._s(item.name))]),_c('div',{staticClass:\"flex-align\"},[_c('div',{staticClass:\"margin-right-12 font-text2\"},[(item.price.price === 0)?_c('span',[_vm._v(\"무료\")]):_c('span',[_vm._v(_vm._s(_vm._f(\"currency\")(item.price.price)))])]),_c('i',{staticClass:\"btn-delete unselect material-icons font-border2\",on:{\"click\":function($event){return _vm.clickDelete(item)}}},[_vm._v(\"close\")])])])})],2)]):_vm._e()])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"size-24 margin-bottom-24\"},[_vm._v(\"내 서비스에 \"),_c('b',[_vm._v(\"플러그인\")]),_vm._v(\"을 추가해보세요!\")])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"position-relative\",staticStyle:{\"padding\":\"0 54px\",\"background-color\":\"white\"}},[_c('div',{staticClass:\"divide-dashed\"}),_c('div',{staticClass:\"rotate-rectangle\"})])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"quickbuilder-step4 flex\" style=\"height:100%\">\r\n    <!-- left -->\r\n    <div class=\"background left\">\r\n      <div class=\"size-14 font-text2\">주문방식 외에도 플러그인을 추가할 수 있습니다.</div>\r\n      <div class=\"size-24 margin-bottom-24\">내 서비스에 <b>플러그인</b>을 추가해보세요!</div>\r\n\r\n      <div class=\"position-relative\">\r\n        <!-- 탭 제목 -->\r\n        <div class=\"flex-align\">\r\n          <div class=\"unselect tab size-14\" v-for=\"(tab, tab_idx) in tabArr\"\r\n               :class=\"{ 'active': selectedTab && selectedTab.value === tab.value }\"\r\n               :key=\"`tab-${tab_idx}`\"\r\n               @click=\"clickTab(tab)\">{{ tab.label }}\r\n            <div class=\"line\"></div>\r\n          </div>\r\n        </div>\r\n        <!-- 탭 컨텐츠 -->\r\n        <div class=\"tab-content\" v-if=\"tabContent\">\r\n          <template v-for=\"(content,idx) in tabContent\">\r\n            <div :key=\"'tab-content-'+idx\" class=\"grid-content\">\r\n              <div class=\"margin-bottom-12\">{{ content.label }}</div>\r\n              <div class=\"grid-container\" v-if=\"content.products.length>0\">\r\n                <div v-for=\"(child, child_idx) in content.products\" :key=\"`tab-content-${child_idx}`\"\r\n                     class=\"grid-item unselect\"\r\n                     :class=\"{'clicked':selectedItem && selectedItem.id === child.value.id, 'selected': isSelected(child.value)}\"\r\n                     @click=\"clickItem(child)\">{{ child.label }}</div>\r\n              </div>\r\n            </div>\r\n          </template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- right -->\r\n    <div class=\"right\" v-if=\"selectedItem.name !== ''\">\r\n      <div style=\"background-color:white;padding:24px 54px\">\r\n        <div class=\"text-center\">\r\n          <img style=\"width:100%\" :src=\"selectedItem.img\"/>\r\n        </div>\r\n\r\n        <div class=\"flex-between\" style=\"min-width:200px\">\r\n          <div>\r\n            <div class=\"weight-600 size-18\">{{ selectedItem.name }}</div>\r\n            <div class=\"margin-top-12\">\r\n              <div class=\"discount-price size-13\">{{ selectedItem.price.org_price|currency }}</div>\r\n              <div class=\"weight-600 font-primary\">{{ selectedItem.price.price | currency }}</div>\r\n            </div>\r\n          </div>\r\n          <button class=\"unselect button\" @click=\"clickSelect\"\r\n                  :class=\"{'is-primary-2': !isSelected(selectedItem), 'is-primary': isSelected(selectedItem)}\"\r\n          >{{ isSelected(selectedItem) ? '선택됨' : '선택하기' }}</button>\r\n        </div>\r\n\r\n        <div class=\"font-text2 margin-top-20\" v-html=\"selectedItem.info\"></div>\r\n      </div>\r\n      <div class=\"position-relative\" style=\"padding:0 54px;background-color:white\">\r\n        <div class=\"divide-dashed\"></div>\r\n        <div class=\"rotate-rectangle\"></div>\r\n      </div>\r\n      <!-- 장바구니 영역 -->\r\n      <div style=\"background-color:white;padding:24px 54px\">\r\n        <div style=\"margin-bottom:12px\">장바구니</div>\r\n        <div class=\"flex-between\" v-for=\"(item,idx) in cart\" :key=\"'cart-'+idx\" style=\"margin-bottom:4px\">\r\n          <div class=\"font-primary\">{{item.name }}</div>\r\n          <div class=\"flex-align\">\r\n            <div class=\"margin-right-12 font-text2\">\r\n              <span v-if=\"item.price.price === 0\">무료</span><span v-else>{{ item.price.price|currency }}</span>\r\n            </div>\r\n            <i class=\"btn-delete unselect material-icons font-border2\" @click=\"clickDelete(item)\">close</i>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\n  export default {\r\n    name: \"SuperBuilderStep4\",\r\n    created() {\r\n      this.getData();\r\n    },\r\n    props: {\r\n      service: {\r\n        type: Object\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        tabArr: [],\r\n        selectedTab: undefined,\r\n        selectedItem: {\r\n          name: '',\r\n          id:0\r\n        }\r\n      }\r\n    },\r\n    computed: {\r\n      tabContent() {\r\n        let content = undefined;\r\n        if(this.selectedTab) {\r\n          if(this.selectedTab.value === 0) {\r\n            content = this.tabArr.slice(1);\r\n          } else {\r\n            content = [this.selectedTab];\r\n          }\r\n        }\r\n        return content;\r\n      },\r\n      cart() {\r\n        return this.service.conversions.concat(this.service.plugins);\r\n      },\r\n    },\r\n    methods: {\r\n      clickItem(item) {\r\n        this.selectedItem = item.value;\r\n      },\r\n      isSelected(plugin) {\r\n        return this.service.plugins.findIndex(item => { return item.id === plugin.id }) > -1;\r\n      },\r\n      clickSelect() {\r\n        let index = this.service.plugins.findIndex(item => { return item.id === this.selectedItem.id });\r\n        if(index === -1) {\r\n          this.service.plugins.push(this.selectedItem);\r\n        } else {\r\n          this.service.plugins.remove(index);\r\n        }\r\n      },\r\n      getData() {\r\n        this.$axios.get('public/category?depth=2').then(async res=>{\r\n          // 플러그인 카테고리(id=7)에 해당하는 상품목록\r\n          let products = await this.$axios.get('user/0/mapping/product?category=7&fields=name,img,info,price,id,category,params&page_length=100&ordering=id');\r\n\r\n          products.data.data.forEach(item=>{\r\n            item.price.org_price = item.price.price;\r\n            item.price.price = item.price.price - item.price.discount_price;\r\n          });\r\n          let plugin = res.data.filter(item => { return item.name === '플러그인' })[0];\r\n          let child = plugin.child.map(item => {\r\n            return {\r\n              label: item.name,\r\n              value: item.id,\r\n              products: this.setProducts(products.data.data.filter(prod => { return prod.category.indexOf(item.name) > -1 }))\r\n            }\r\n          });\r\n          this.tabArr = child.filter(item => { return item.products.length > 0 });\r\n\r\n          // 카테고리에 전체보기 추가\r\n          this.tabArr.splice(0,0, {\r\n            label: '전체보기',\r\n            value: 0\r\n          });\r\n          this.selectedTab = this.tabArr[0];\r\n          this.selectedItem = this.tabContent[0].products[0].value;\r\n        });\r\n      },\r\n      setProducts(data) {\r\n        data = data.map(data => {\r\n          return {\r\n            label: data.name,\r\n            value: data\r\n          }\r\n        });\r\n        // 강제로 빈 갯수 만큼 채우기\r\n        let remain = 4 - Math.round(data.length % 4);\r\n        if (remain < 4) {\r\n          for (let i = 0; i < remain; i++) {\r\n            data.push({\r\n              label: '',\r\n              value: ''\r\n            })\r\n          }\r\n        }\r\n        return data;\r\n      },\r\n      clickTab(tab) {\r\n        this.selectedTab = tab;\r\n      },\r\n      clickDelete(item) {\r\n        let name = item.category === '주문전환' ? 'conversions' : 'plugins';\r\n        let index = this.service[name].findIndex(s => { return s.id === item.id });\r\n        this.service[name].remove(index);\r\n      }\r\n    }\r\n  }\r\n</script>\r\n<style lang=\"stylus\" scoped>\r\n  @import '~assets/css/lp_main'\r\n  .left\r\n    width 65%\r\n    height 100%\r\n    padding-left 15%\r\n    padding-right 2%\r\n    padding-top 30px\r\n\r\n  .right\r\n    width 35%\r\n    background-color white\r\n\r\n  .package-box-st\r\n    text-align center\r\n    padding 12px\r\n    border 1px solid $border2\r\n    border-radius 4px\r\n    margin 6px\r\n\r\n  .tab\r\n    padding 12px 16px\r\n\r\n  .tab.active\r\n    position relative\r\n    font-weight bold\r\n    box-shadow 0 -4px 6px 0 rgba(0, 0, 0, 0.1)\r\n    border-top-left-radius $radius\r\n    border-top-right-radius $radius\r\n\r\n    .line\r\n      height 14px\r\n      width 100%\r\n      position absolute\r\n      bottom -5px\r\n      left 0\r\n      background-color $background\r\n\r\n  .grid-container\r\n    display flex\r\n    flex-wrap wrap\r\n    border-radius $radius\r\n    border 1px solid $border2\r\n    overflow hidden\r\n    margin-bottom 20px\r\n  .grid-content:last-child\r\n    .grid-container\r\n      margin-bottom 0\r\n\r\n\r\n  .grid-item\r\n    border-right 1px solid $border2\r\n    border-top 1px solid $border2\r\n    width 25%\r\n    padding 20px 0\r\n    text-align center\r\n  .clicked\r\n    background-color #ffffff\r\n  .selected\r\n    color $primary\r\n\r\n  .grid-item:nth-child(4n)\r\n    border-right 0\r\n\r\n  .grid-item:nth-child(-n+4)\r\n    border-top 0\r\n\r\n  .divide-dashed\r\n    border-top 2px dashed $border2\r\n    padding 0 54px\r\n\r\n  .rotate-rectangle\r\n    width: 15px;\r\n    height: 15px;\r\n    background-color: $background;\r\n    transform: rotate(45deg);\r\n    position: absolute;\r\n    left: -6px;\r\n    top: -6px;\r\n\r\n  .tab-content\r\n    padding 16px\r\n    border-radius $radius\r\n    box-shadow 0 2px 12px #d4d4d4\r\n  .btn-delete:hover\r\n    color $primary\r\n\r\n  .discount-price\r\n    text-decoration line-through\r\n    color #797979\r\n</style>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SuperBuilderStep4.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SuperBuilderStep4.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SuperBuilderStep4.vue?vue&type=template&id=79a5d70b&scoped=true&\"\nimport script from \"./SuperBuilderStep4.vue?vue&type=script&lang=js&\"\nexport * from \"./SuperBuilderStep4.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SuperBuilderStep4.vue?vue&type=style&index=0&id=79a5d70b&lang=stylus&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"79a5d70b\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}