{"version":3,"sources":["webpack:///./src/components/page/QuickBuilder/SuperBuilderStep3.vue?e01d","webpack:///src/components/page/QuickBuilder/SuperBuilderStep3.vue","webpack:///./src/components/page/QuickBuilder/SuperBuilderStep3.vue?5f21","webpack:///./src/components/page/QuickBuilder/SuperBuilderStep3.vue","webpack:///./src/components/page/QuickBuilder/SuperBuilderStep3.vue?7dd5"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","staticStyle","_v","_m","_l","pack","p_idx","key","class","selectedItem","id","isSelected","on","$event","clickItem","style","iconStyle","attrs","icon","_s","name","img","_f","price","org_price","clickSelect","domProps","info","_e","staticRenderFns","component"],"mappings":"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","file":"js/chunk-d676b6cc.2faeda69.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"flex\",staticStyle:{\"height\":\"100%\"}},[_c('div',{staticClass:\"background left\"},[_c('div',{staticClass:\"size-14 font-text2\"},[_vm._v(\"서비스 운영을 위한 주문 방식을 추가할 수 있어요.\")]),_vm._m(0),_c('div',{staticClass:\"flex-align wrap margin-top-32\",staticStyle:{\"margin-left\":\"-6px\"}},_vm._l((_vm.packages),function(pack,p_idx){return _c('div',{key:(\"pack-\" + p_idx),staticClass:\"package-box-st unselect\",class:{'clicked': _vm.selectedItem && pack.id === _vm.selectedItem.id, 'selected': _vm.isSelected(pack)},staticStyle:{\"width\":\"150px\",\"height\":\"150px\"},on:{\"click\":function($event){return _vm.clickItem(pack)}}},[_c('img',{staticStyle:{\"margin-top\":\"20px\"},style:(_vm.iconStyle(pack)),attrs:{\"src\":pack.icon}}),_c('div',{staticClass:\"margin-top-12\"},[_vm._v(_vm._s(pack.name))])])}),0)]),(_vm.selectedItem.name !== '')?_c('div',{staticClass:\"right\"},[_c('div',{staticClass:\"text-center\"},[_c('img',{staticStyle:{\"width\":\"220px\"},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:\"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._e()])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"size-24\"},[_vm._v(\"내 서비스에 \"),_c('b',[_vm._v(\"적합한 주문 방식\")]),_vm._v(\"을 선택해주세요.\")])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"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\">내 서비스에 <b>적합한 주문 방식</b>을 선택해주세요.</div>\r\n\r\n      <div class=\"flex-align wrap margin-top-32\" style=\"margin-left:-6px\">\r\n        <div v-for=\"(pack, p_idx) in packages\"\r\n             :key=\"`pack-${p_idx}`\"\r\n             :class=\"{'clicked': selectedItem && pack.id === selectedItem.id, 'selected': isSelected(pack)}\"\r\n             class=\"package-box-st unselect\" style=\"width:150px;height:150px\" @click=\"clickItem(pack)\">\r\n          <!--<i class=\"material-icons size-34\" style=\"margin:16px\">{{ pack.icon }}</i>-->\r\n          <img :src=\"pack.icon\" style=\"margin-top:20px\" :style=\"iconStyle(pack)\">\r\n          <div class=\"margin-top-12\">{{ pack.name }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- right -->\r\n    <div class=\"right\" v-if=\"selectedItem.name !== ''\">\r\n      <div class=\"text-center\">\r\n        <img style=\"width:220px\" :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=\"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\"/>\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\n  export default {\r\n    name: \"SuperBuilderStep3\",\r\n    props: {\r\n      service: {\r\n        type: Object\r\n      },\r\n      alreadyPacks: {\r\n        type: Array,\r\n        default() {\r\n          return [];\r\n        }\r\n      }\r\n    },\r\n    created() {\r\n      this.getData();\r\n    },\r\n    data() {\r\n      return {\r\n        packages: [],\r\n        selectedItem: {\r\n          name: '',\r\n          id:0\r\n        }\r\n      }\r\n    },\r\n    methods: {\r\n      iconStyle(pack) {\r\n        let index = this.service.conversions.findIndex(item => { return item.id === pack.id });\r\n        if(index === -1) {\r\n          return {}\r\n        } else {\r\n          return {\r\n            filter: 'invert(53%) sepia(86%) saturate(1648%) hue-rotate(344deg) brightness(100%) contrast(99%)'\r\n          }\r\n        }\r\n      },\r\n      isSelected(pack) {\r\n        return this.service.conversions.findIndex(item => { return item.id === pack.id }) > -1;\r\n      },\r\n      clickSelect() {\r\n        let index = this.service.conversions.findIndex(item => { return item.id === this.selectedItem.id });\r\n        if(index === -1) {\r\n          this.service.conversions.push(this.selectedItem);\r\n        } else {\r\n          this.service.conversions.remove(index);\r\n        }\r\n      },\r\n      clickItem(item) {\r\n        this.selectedItem = item;\r\n      },\r\n      getData() {\r\n        this.$axios.get('/user/0/mapping/product?category=6&fields=id,name,params,img,price,category,info&page_length=100&ordering=name').then(res=>{\r\n          res.data.data = res.data.data.filter(item=>{\r\n            item.icon = item.params.filter(param => { return param.name === '아이콘' })[0].value;\r\n            item.key = item.params.filter(param => { return param.name === 'key' })[0].value;\r\n            item.pay_type = item.params.filter(param => { return param.name === '결제방식' })[0].value[0].name;\r\n            item.price.org_price = item.price.price;\r\n            item.price.price = item.price.price - item.price.discount_price;\r\n            let packIndex = this.alreadyPacks.findIndex(pack => { return pack.key === item.key });\r\n\r\n            if(packIndex === -1) {\r\n              return true;\r\n            } else if(this.alreadyPacks[packIndex].setting.payment_type !== item.pay_type && item.pay_type !== '결제없음') {\r\n              return true;\r\n            }\r\n            return false;\r\n          });\r\n          this.packages = res.data.data;\r\n          this.selectedItem = this.packages[0];\r\n        });\r\n      },\r\n    }\r\n  }\r\n</script>\r\n<style lang=\"stylus\" scoped>\r\n  @import '~assets/css/lp_main'\r\n  .package-box-st\r\n    text-align center\r\n    padding 12px 18px\r\n    border 1px solid $border2\r\n    border-radius 8px\r\n    margin 6px\r\n  .clicked\r\n  .package-box-st:hover\r\n    background #f9f9f9\r\n    border 0\r\n    box-shadow 0 5px 5px 0 rgba(0,0,0,0.16)\r\n\r\n  .selected\r\n    border 1px solid $primary\r\n    color $primary\r\n\r\n  .left\r\n    width 65%\r\n    height 100%\r\n    padding-left 15%\r\n    overflow-y auto\r\n    padding-top 30px\r\n    padding-bottom 300px\r\n\r\n  .right\r\n    width 35%\r\n    background-color white\r\n    padding 24px 54px\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!./SuperBuilderStep3.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!./SuperBuilderStep3.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SuperBuilderStep3.vue?vue&type=template&id=0c434fb8&scoped=true&\"\nimport script from \"./SuperBuilderStep3.vue?vue&type=script&lang=js&\"\nexport * from \"./SuperBuilderStep3.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SuperBuilderStep3.vue?vue&type=style&index=0&id=0c434fb8&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  \"0c434fb8\",\n  null\n  \n)\n\nexport default component.exports","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!./SuperBuilderStep3.vue?vue&type=style&index=0&id=0c434fb8&lang=stylus&scoped=true&\""],"sourceRoot":""}