{"version":3,"sources":["webpack:///./src/components/component/CardProductPluginPc.vue?23f6","webpack:///src/components/component/CardProductPluginPc.vue","webpack:///./src/components/component/CardProductPluginPc.vue?db73","webpack:///./src/components/component/CardProductPluginPc.vue","webpack:///./src/components/component/CardProductPluginPc.vue?b5dc"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","on","$event","clickDetail","card","attrs","icon","name","staticStyle","_v","_s","_e","simple_desc","discountedPrice","isDiscount","_f","price","discount_type","discountText","is_subscription","category2","class","status","statusText","staticRenderFns","component"],"mappings":"gJAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,0BAA0BC,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOR,EAAIS,YAAYT,EAAIU,SAAS,CAACN,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAACF,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,MAAM,CAACE,YAAY,YAAY,CAACF,EAAG,MAAM,CAACO,MAAM,CAAC,IAAMX,EAAIY,KAAK,IAAMZ,EAAIU,KAAKG,UAAUT,EAAG,MAAM,CAACU,YAAY,CAAC,KAAO,IAAI,eAAe,SAAS,CAACV,EAAG,MAAM,CAACE,YAAY,2CAA2C,CAACN,EAAIe,GAAGf,EAAIgB,GAAGhB,EAAIU,KAAKG,OAAQb,EAAW,QAAEI,EAAG,OAAO,CAACE,YAAY,aAAa,CAACN,EAAIe,GAAG,SAASf,EAAIiB,OAAOb,EAAG,MAAM,CAACE,YAAY,yBAAyB,CAACN,EAAIe,GAAGf,EAAIgB,GAAGhB,EAAIU,KAAKQ,oBAAoBd,EAAG,MAAM,CAACE,YAAY,YAAYF,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAAEN,EAAImB,gBAAgBnB,EAAIU,MAAM,EAAGN,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAAEN,EAAIoB,WAAWpB,EAAIU,MAAON,EAAG,MAAM,CAACE,YAAY,gCAAgC,CAACN,EAAIe,GAAGf,EAAIgB,GAAGhB,EAAIqB,GAAG,WAAPrB,CAAmBA,EAAIU,KAAKY,MAAMA,WAAWtB,EAAIiB,KAAKb,EAAG,MAAM,CAACE,YAAY,cAAc,CAAiC,IAA/BN,EAAIU,KAAKY,MAAMC,cAAmBnB,EAAG,MAAM,CAACE,YAAY,qCAAqC,CAACN,EAAIe,GAAGf,EAAIgB,GAAGhB,EAAIwB,aAAaxB,EAAIU,UAAUV,EAAIiB,KAAKb,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,OAAO,CAACE,YAAY,OAAO,CAACN,EAAIe,GAAGf,EAAIgB,GAAGhB,EAAIqB,GAAG,cAAPrB,CAAsBA,EAAImB,gBAAgBnB,EAAIU,WAAWN,EAAG,OAAO,CAACE,YAAY,cAAc,CAACN,EAAIe,GAAG,OAAQf,EAAIU,KAAKY,MAAqB,gBAAElB,EAAG,OAAO,CAACE,YAAY,cAAc,CAACN,EAAIe,GAAG,QAAUf,EAAIU,KAAKY,MAAMG,gBAAsEzB,EAAIiB,KAAzDb,EAAG,OAAO,CAACE,YAAY,cAAc,CAACN,EAAIe,GAAG,QAAuC,KAArBf,EAAIU,KAAKgB,UAAgBtB,EAAG,OAAO,CAACE,YAAY,4BAA4B,CAACN,EAAIe,GAAG,OAAOf,EAAIiB,WAAWjB,EAAIiB,KAAKb,EAAG,MAAM,CAACuB,MAAO,eAAiB3B,EAAI4B,QAAS,CAAe,IAAb5B,EAAI4B,OAAYxB,EAAG,MAAM,CAACO,MAAM,CAAC,MAAQ,KAAK,OAAS,KAAK,QAAU,YAAY,KAAO,SAAS,CAACP,EAAG,OAAO,CAACO,MAAM,CAAC,EAAI,kBAAkB,OAAS,UAAU,eAAe,IAAI,iBAAiB,QAAQ,kBAAkB,aAAaX,EAAIiB,KAAKjB,EAAIe,GAAGf,EAAIgB,GAAGhB,EAAI6B,WAAW7B,EAAI4B,SAAS,cACl9DE,EAAkB,GCwCtB,G,4DAAA,CACE,KAAF,sBACE,MAAF,CACI,KAAJ,CACM,KAAN,SAGE,QAPF,WAQI,KAAJ,gBAEE,KAVF,WAWI,MAAJ,CACM,OAAN,IAGE,MAAF,CACI,YADJ,WAEM,KAAN,iBAGE,SAAF,CACI,OADJ,WAIM,OAAN,kBAEI,KANJ,WAOM,OAAN,qCAAQ,MAAR,QAAe,EAAf,kBAEI,MATJ,WAUM,IAAN,uCAAQ,MAAR,sBACM,OAAN,oCACA,KAGA,oBAGI,QAAJ,WACM,IAAN,uCACQ,MAAR,yBAEM,OAAN,sCAGA,qDAIE,QAAF,CACI,aADJ,WACM,IAAN,OAEM,GADA,KAAN,SACA,yBACQ,IAAR,IACA,KACQ,KAAR,+BACU,GAAV,SACA,MACY,EAAZ,SACY,EAAZ,uBAIA,kBACQ,KAAR,WAGI,WAlBJ,SAkBA,GACM,IAAN,GACQ,EAAR,KACQ,EAAR,OACQ,EAAR,QAGM,MAAN,wCAEI,aA3BJ,SA2BA,GACM,IAAN,KAQM,OAPN,qBACA,qDACU,EAAV,0BACA,wDACU,EAAV,6BAGA,GAGI,WAvCJ,SAuCA,GACM,GAAN,iFACQ,IAAR,0CACQ,QAAR,kDACA,+DACQ,IAAR,0CACQ,OAAR,0BACA,+DACQ,IAAR,0CACQ,OAAR,wBAEQ,OAAR,GAII,gBAtDJ,SAsDA,GACM,IAAN,IAQM,OAPN,mBACA,qDACU,EAAV,4CACA,wDACU,EAAV,sCAEA,gBACA,GAEI,SAjEJ,SAiEA,GACM,IAAN,GACQ,gBAAR,iCACQ,eAAR,QACQ,mBAAR,OAEM,OAAN,GAEI,YAzEJ,SAyEA,GACM,KAAN,iDACA,qCACQ,KAAR,gDACA,yCACQ,KAAR,oDAEQ,KAAR,oDC1K4W,I,wBCQxWC,EAAY,eACd,EACAhC,EACA+B,GACA,EACA,KACA,WACA,MAIa,aAAAC,E,2CCnBf","file":"js/chunk-799f688c.7f0f2a98.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"card-container unselect\",on:{\"click\":function($event){return _vm.clickDetail(_vm.card)}}},[_c('div',{staticClass:\"card-content\"},[_c('div',{staticClass:\"flex-align\"},[_c('div',{staticClass:\"card-img\"},[_c('img',{attrs:{\"src\":_vm.icon,\"alt\":_vm.card.name}})]),_c('div',{staticStyle:{\"flex\":\"1\",\"padding-left\":\"12px\"}},[_c('div',{staticClass:\"subtitle6 main margin-top-12 ellipsis-1\"},[_vm._v(_vm._s(_vm.card.name)),(_vm.isAdmin)?_c('span',{staticClass:\"tag-admin\"},[_vm._v(\"관리자\")]):_vm._e()]),_c('div',{staticClass:\"body5 sub3 ellipsis-2\"},[_vm._v(_vm._s(_vm.card.simple_desc))])])]),_c('div',{staticClass:\"divider\"}),_c('div',{staticClass:\"flex-between\"},[(_vm.discountedPrice(_vm.card)>0)?_c('div',{staticClass:\"margin-top-8\"},[(_vm.isDiscount(_vm.card))?_c('div',{staticClass:\"body6 sub4 text-line-through\"},[_vm._v(_vm._s(_vm._f(\"currency\")(_vm.card.price.price)))]):_vm._e(),_c('div',{staticClass:\"flex-align\"},[(_vm.card.price.discount_type===0)?_c('div',{staticClass:\"margin-right-4 primary body4-bold\"},[_vm._v(_vm._s(_vm.discountText(_vm.card)))]):_vm._e(),_c('div',{staticClass:\"body4-bold\"},[_c('span',{staticClass:\"sub\"},[_vm._v(_vm._s(_vm._f(\"currencyNum\")(_vm.discountedPrice(_vm.card))))]),_c('span',{staticClass:\"body4 sub2\"},[_vm._v(\"원\")]),(_vm.card.price.is_subscription)?_c('span',{staticClass:\"body4 sub3\"},[_vm._v(\"/월\")]):(!_vm.card.price.is_subscription)?_c('span',{staticClass:\"body4 sub3\"},[_vm._v(\"/건\")]):_vm._e(),(_vm.card.category2!==42)?_c('span',{staticClass:\"body4 sub2 margin-left-4\"},[_vm._v(\"~\")]):_vm._e()])])]):_vm._e(),_c('div',{class:(\"card-status-\" + _vm.status)},[(_vm.status===2)?_c('svg',{attrs:{\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\"}},[_c('path',{attrs:{\"d\":\"M20 6L9 17L4 12\",\"stroke\":\"#ffffff\",\"stroke-width\":\"4\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}})]):_vm._e(),_vm._v(_vm._s(_vm.statusText(_vm.status))+\" \")])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"card-container unselect\" @click=\"clickDetail(card)\">\r\n    <div class=\"card-content\">\r\n      <!--<div class=\"tag-prime\" v-if=\"grade !== '기본'\">{{ grade }}</div>-->\r\n      <div class=\"flex-align\">\r\n        <div class=\"card-img\">\r\n          <img :src=\"icon\" :alt=\"card.name\">\r\n        </div>\r\n        <div style=\"flex:1;padding-left:12px\">\r\n          <div class=\"subtitle6 main margin-top-12 ellipsis-1\">{{ card.name }}<span class=\"tag-admin\" v-if=\"isAdmin\">관리자</span></div>\r\n          <div class=\"body5 sub3 ellipsis-2\">{{ card.simple_desc }}</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"divider\"></div>\r\n      <div class=\"flex-between\">\r\n        <!-- 가격 정보 -->\r\n        <div v-if=\"discountedPrice(card)>0\" class=\"margin-top-8\">\r\n          <div class=\"body6 sub4 text-line-through\" v-if=\"isDiscount(card)\">{{ card.price.price | currency }}</div>\r\n          <div class=\"flex-align\">\r\n            <div class=\"margin-right-4 primary body4-bold\" v-if=\"card.price.discount_type===0\">{{ discountText(card) }}</div>\r\n            <div class=\"body4-bold\">\r\n              <span class=\"sub\">{{ discountedPrice(card) | currencyNum }}</span>\r\n              <span class=\"body4 sub2\">원</span>\r\n              <span class=\"body4 sub3\" v-if=\"card.price.is_subscription\">/월</span>\r\n              <span class=\"body4 sub3\" v-else-if=\"!card.price.is_subscription\">/건</span>\r\n              <span class=\"body4 sub2 margin-left-4\" v-if=\"card.category2!==42\">~</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!--<div class=\"card-status-prime\" v-if=\"grade!=='기본'\"><span class=\"weight-700\">{{ grade }}</span> 전용</div>-->\r\n        <div :class=\"`card-status-${status}`\">\r\n          <svg v-if=\"status===2\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n            <path d=\"M20 6L9 17L4 12\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>{{ statusText(status) }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    name: \"CardProductPluginPc\",\r\n    props: {\r\n      card: {\r\n        type: Object\r\n      }\r\n    },\r\n    created() {\r\n      this.setTagLength();\r\n    },\r\n    data() {\r\n      return {\r\n        tagLen: 0\r\n      }\r\n    },\r\n    watch: {\r\n      'card.tags'() {\r\n        this.setTagLength();\r\n      }\r\n    },\r\n    computed: {\r\n      status() {\r\n        /*const key = this.card.params.filter(i => { return i.name === 'key'})[0].value;\r\n        return this.userService.plugins.indexOf(key) > -1 ? 1 : 0;*/\r\n        return this.card.status;\r\n      },\r\n      icon() {\r\n        return this.card.params.filter(i=>{ return i.name === '아이콘'})[0].value;\r\n      },\r\n      grade() {\r\n        let grade = this.card.params.filter(i=> { return i.name === '플러그인 등급' });\r\n        if(grade.length === 0 || grade[0].value.length === 0) {\r\n          return '기본';\r\n        }\r\n        else {\r\n          return grade[0].value[0].name;\r\n        }\r\n      },\r\n      isAdmin: function () {\r\n        let arr = this.card.params.filter(i => {\r\n          return i.name === '플러그인 적용 범위'\r\n        });\r\n        if (arr.length === 0 || arr[0].value.length === 0) {\r\n          return false;\r\n        } else {\r\n          return arr[0].value.length === 1 && arr[0].value[0].name === '관리자';\r\n        }\r\n      }\r\n    },\r\n    methods: {\r\n      setTagLength() {\r\n        this.tagLen = 0;\r\n        if(this.card.tags.length>0) {\r\n          let len = 0;\r\n          let limit = 20;\r\n          this.card.tags.forEach(tag => {\r\n            len += tag.length;\r\n            if(len < limit) {\r\n              this.tagLen++;\r\n              limit = this.tagLen === 1 ? 19 : 16;\r\n            }\r\n          });\r\n        }\r\n        if(this.tagLen===0) {\r\n          this.tagLen = 1;\r\n        }\r\n      },\r\n      statusText(status) {\r\n        const arr = {\r\n          0: '추가',\r\n          1: '신청 중',\r\n          2: '이용 중'\r\n        };\r\n\r\n        return this.grade === '기본' ? arr[status] : status === 0 ? '신청' : arr[status];\r\n      },\r\n      discountText(product) {\r\n        let text = '';\r\n        if (this.isDiscount(product)) {\r\n          if (product.price.discount_rate !== 0 && product.price.discount_type === 0) {\r\n            text = product.price.discount_rate + '%'\r\n          } else if (product.price.discount_price !== 0 && product.price.discount_type === 1) {\r\n            text = product.price.discount_price + '원';\r\n          }\r\n        }\r\n        return text;\r\n      },\r\n      // 할인 여부\r\n      isDiscount(product) {\r\n        if (product.price.is_discount && product.price.discount_start !== null && product.price.discount_end !== null) {\r\n          let currentDate = this.dayjs().format('YYYY-MM-DD HH:mm');\r\n          return !(currentDate < product.price.discount_start || currentDate > product.price.discount_end);\r\n        } else if (product.price.discount_start !== null && product.price.discount_end === null) {\r\n          let currentDate = this.dayjs().format('YYYY-MM-DD HH:mm');\r\n          return currentDate >= product.price.discount_start;\r\n        } else if (product.price.discount_start === null && product.price.discount_end !== null) {\r\n          let currentDate = this.dayjs().format('YYYY-MM-DD HH:mm');\r\n          return currentDate <= product.price.discount_end;\r\n        } else {\r\n          return false;\r\n        }\r\n      },\r\n      // 상품 가격\r\n      discountedPrice(product) {\r\n        let total = 0;\r\n        if (this.isDiscount(product)) {\r\n          if (product.price.discount_rate !== 0 && product.price.discount_type === 0) {\r\n            total = product.price.price * (1 - (product.price.discount_rate / 100))\r\n          } else if (product.price.discount_price !== 0 && product.price.discount_type === 1) {\r\n            total = product.price.price - product.price.discount_price;\r\n          }\r\n        } else total = product.price.price;\r\n        return total;\r\n      },\r\n      imgField(img) {\r\n        let style = {\r\n          backgroundImage: `url(${this.image(img)})`,\r\n          backgroundSize: 'cover',\r\n          backgroundPosition: 'top'\r\n        };\r\n        return style;\r\n      },\r\n      clickDetail(card) {\r\n        this.routeGa('',`플러그인 카드(${card.name})`, card.name);\r\n        if (this.$route.path.search('detail') > -1) {\r\n          this.$router.push(`/market/detail?id=${card.id}`)\r\n        } else if(this.$route.path.search('app_market') > -1) {\r\n          this.$router.push(`/app_market/detail?id=${card.id}`)\r\n        }  else {\r\n          this.$router.push(`/market/detail?id=${card.id}`)\r\n        }\r\n      },\r\n    }\r\n  }\r\n</script>\r\n\r\n<style lang=\"stylus\" scoped>\r\n  @import '~assets/css/lp_main'\r\n\r\n  .card-container\r\n    background-color white\r\n    border-radius 8px\r\n    border 1px solid $gray2\r\n\r\n  .card-img\r\n    width 60px\r\n    height 60px\r\n    border-radius 10px\r\n    background-color $gray3\r\n    display flex\r\n    align-items center\r\n    justify-content center\r\n    img\r\n      width 26.67px\r\n      height 26.67px\r\n\r\n  .card-content\r\n    position relative\r\n    padding 20px\r\n\r\n  .tag\r\n    border 1px solid $gray1\r\n    border-radius 50px\r\n    padding 2px 8px\r\n    margin-right 4px\r\n\r\n  .card-status-0\r\n  .card-status-1\r\n  .card-status-2\r\n  .card-status-prime\r\n    border-radius 50px\r\n    padding 0 20px\r\n    line-height 32px\r\n    height 32px\r\n    margin-top 12px\r\n\r\n  .card-status-0\r\n    background-color $primary\r\n    color white\r\n  .card-status-1\r\n    background-color $gray2\r\n    color $sub2\r\n  .card-status-2\r\n    background-color $main\r\n    color white\r\n    svg\r\n      margin-right 4px\r\n      width 12px\r\n      height 12px\r\n\r\n  .card-status-prime\r\n    background-color $gray2\r\n    color $sub3\r\n    font-weight 500\r\n\r\n  .divider\r\n    width 100%\r\n    height 1px\r\n    background-color $gray2\r\n    margin 12px 0\r\n\r\n  .tag-prime\r\n    position absolute\r\n    top 0\r\n    left 0\r\n    border-top-left-radius 8px\r\n    border-bottom-right-radius 8px\r\n    padding 4px 10px 6px\r\n    color white\r\n    font-size 13px\r\n    font-weight 700\r\n    background radial-gradient(96.38% 94.12% at 96.38% 94.12%, #FFAD0E 18.75%, #FF6600 72.51%)\r\n\r\n  .tag-admin\r\n    padding 2px 4px\r\n    color $primary\r\n    font-size 12px\r\n    font-weight 500\r\n    border-radius 4px\r\n    margin-left 6px\r\n    background-color $primary-light2\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!./CardProductPluginPc.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!./CardProductPluginPc.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CardProductPluginPc.vue?vue&type=template&id=08bd6322&scoped=true&\"\nimport script from \"./CardProductPluginPc.vue?vue&type=script&lang=js&\"\nexport * from \"./CardProductPluginPc.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CardProductPluginPc.vue?vue&type=style&index=0&id=08bd6322&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  \"08bd6322\",\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!./CardProductPluginPc.vue?vue&type=style&index=0&id=08bd6322&lang=stylus&scoped=true&\""],"sourceRoot":""}