{"version":3,"sources":["webpack:///./src/components/module/InputSingleFile.vue?7a4b","webpack:///src/components/module/InputSingleFile.vue","webpack:///./src/components/module/InputSingleFile.vue?10cf","webpack:///./src/components/module/InputSingleFile.vue","webpack:///./src/components/module/InputSingleFile.vue?2f9e"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","files","file","isImage","style","thumbStyle","_e","_v","_s","name","on","onDelete","acceptExt","uid","$event","stopPropagation","onFileChange","staticStyle","placeholder","_m","description","staticRenderFns","component"],"mappings":"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","file":"js/chunk-90824d96.3b31a81b.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.files)?_c('div',{staticClass:\"file-list\"},[_c('div',[_c('a',{attrs:{\"target\":\"_blank\",\"href\":_vm.files.file}},[(_vm.isImage(_vm.files))?_c('div',{staticClass:\"thumb\",style:(_vm.thumbStyle(_vm.files.file))}):_vm._e()])]),_c('div',{staticClass:\"lp-file-name\"},[_vm._v(_vm._s(_vm.files.name))]),_c('div',{staticClass:\"trash\",on:{\"click\":_vm.onDelete}},[_c('i',{staticClass:\"material-icons\"},[_vm._v(\"delete\")])])]):_vm._e(),(!_vm.files)?_c('div',[(_vm.uploadReady)?_c('input',{staticClass:\"file-input\",attrs:{\"accept\":_vm.acceptExt,\"id\":_vm.uid,\"type\":\"file\"},on:{\"click\":function($event){$event.stopPropagation();},\"change\":_vm.onFileChange}}):_vm._e(),_c('label',{staticClass:\"file-list\",attrs:{\"for\":_vm.uid},on:{\"click\":function($event){$event.stopPropagation();}}},[_c('div',{staticClass:\"body3 sub4\",staticStyle:{\"padding\":\"10px 16px\"}},[_vm._v(_vm._s(_vm.placeholder))]),_vm._m(0)])]):_vm._e(),(_vm.description)?_c('div',{staticClass:\"file-desc\"},[_vm._v(_vm._s(_vm.description))]):_vm._e()])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"file-attachment\"},[_c('img',{staticClass:\"svg-sub2\",staticStyle:{\"width\":\"24px\",\"height\":\"24px\"},attrs:{\"src\":\"/static/icon/u_link-h.svg\"}})])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n\r\n    <!-- 레이블 -->\r\n    <!--<div v-if=\"label\">{{ label }}</div>-->\r\n\r\n\r\n    <!-- 추가된 첨부파일 -->\r\n    <div v-if=\"files\"\r\n         class=\"file-list\">\r\n      <!-- 썸네일 -->\r\n      <div>\r\n        <!-- 이미지 -->\r\n        <a\r\n            target=\"_blank\"\r\n            :href=\"files.file\">\r\n          <div\r\n              v-if=\"isImage(files)\"\r\n              class=\"thumb\"\r\n              :style=\"thumbStyle(files.file)\"></div>\r\n          <!-- 이미지 아닐 땐 파일 확장자명 표시 -->\r\n          <!--<div v-else-->\r\n          <!--:style=\"extColor(files.extension)\"-->\r\n          <!--class=\"thumb ext\">{{ upper(file.extension) }}</div>-->\r\n        </a>\r\n      </div>\r\n      <div class=\"lp-file-name\">{{ files.name }}</div>\r\n      <div class=\"trash\" @click=\"onDelete\">\r\n        <i class=\"material-icons\">delete</i>\r\n      </div>\r\n    </div>\r\n    <!-- 첨부파일 추가하기 -->\r\n    <div v-if=\"!files\">\r\n      <input class=\"file-input\"\r\n             v-if=\"uploadReady\"\r\n             :accept=\"acceptExt\"\r\n             @click.stop\r\n             :id=\"uid\"\r\n             @change=\"onFileChange\"\r\n             type=\"file\">\r\n\r\n      <label :for=\"uid\"\r\n             @click.stop\r\n             class=\"file-list\">\r\n        <div class=\"body3 sub4\" style=\"padding:10px 16px\">{{ placeholder }}</div>\r\n        <div class=\"file-attachment\">\r\n          <img class=\"svg-sub2\" src=\"/static/icon/u_link-h.svg\" style=\"width:24px;height:24px\"/>\r\n<!--          <i class=\"material-icons sub2\">link</i>-->\r\n        </div>\r\n      </label>\r\n    </div>\r\n    <div class=\"file-desc\" v-if=\"description\">{{ description }}</div>\r\n\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import moment from 'moment'\r\n  export default {\r\n    name: 'InputSingleFile',\r\n\r\n    mixins: [\r\n    ],\r\n\r\n    props: {\r\n      value: {\r\n        required: false\r\n      },\r\n      acceptExt: {\r\n        type: String,\r\n        default: 'image/gif, image/jpeg, image/png, .docx, .pptx, .xlsx, .hwp, .pdf'\r\n      },\r\n      description: {\r\n        type: String,\r\n        required: false\r\n      },\r\n      placeholder: {\r\n        type: String,\r\n        required: false,\r\n        default: '+ 첨부파일 추가'\r\n      }\r\n    },\r\n\r\n    created() {\r\n      this.uid = moment().format('SSSS');\r\n      if(this.value) {\r\n        this.files = this.value;\r\n      }\r\n\r\n    },\r\n\r\n    data() {\r\n      return {\r\n        uid: '',\r\n        file: undefined,\r\n        uploadReady: true,        // 초기화 용\r\n        files: undefined,\r\n        items: ''\r\n      };\r\n    },\r\n\r\n    watch: {\r\n      files(n) {\r\n        if(n) this.$emit('update:value', this.files);\r\n      },\r\n      value(n) {\r\n        this.files = n;\r\n        if(n!=='') this.items = n.file;\r\n      },\r\n      items(n) {\r\n        if(n) this.$emit('setValue', this.items)\r\n      }\r\n    },\r\n\r\n    computed: {\r\n    },\r\n\r\n    methods: {\r\n      onDelete() {\r\n        this.files = undefined;\r\n        this.items = '';\r\n      },\r\n\r\n      upper(ext) {\r\n        return ext.toUpperCase();\r\n      },\r\n\r\n      extColor(ext) {\r\n        let deco = { backgroundColor : '' };\r\n        switch(ext.toLowerCase()) {\r\n          case 'hwp':\r\n            deco.backgroundColor = '#2ebcee';\r\n            break;\r\n          case 'pdf':\r\n            deco.backgroundColor = '#ef4037';\r\n            break;\r\n          case 'docx':\r\n            deco.backgroundColor = '#295498';\r\n            break;\r\n          case 'pptx':\r\n            deco.backgroundColor = '#d14425';\r\n            break;\r\n          case 'xlsx':\r\n            deco.backgroundColor = '#207245';\r\n            break;\r\n        }\r\n\r\n        return deco;\r\n      },\r\n\r\n      isImage(files) {\r\n        if(!files) return false;\r\n        let ext = files.extension;\r\n        let isImg = false;\r\n        let imgExt = ['jpg', 'jpeg', 'png', 'bmp', 'gif', 'tiff', 'tif'];\r\n        ext = ext.toLowerCase();\r\n        if(imgExt.indexOf(ext)>-1)\r\n          isImg = true;\r\n\r\n        return isImg;\r\n      },\r\n      thumbStyle(img) {\r\n        let deco = {\r\n          backgroundImage: `url(\"${img}\")`,\r\n          backgroundSize: 'cover',\r\n          backgroundPosition: 'center'\r\n        };\r\n\r\n        return deco;\r\n      },\r\n      onFileChange(e) {\r\n        this.file = e.target.files[0];\r\n        if(this.file === undefined) return;\r\n\r\n        this.uploadReady = false;\r\n        this.$nextTick(() => { this.uploadReady = true; });\r\n\r\n        //10MB까지 업로드 가능\r\n        if(this.file.size  > 1024*1024*10) {\r\n          this.toast(`최대 10MB, 파일까지만 업로드 가능합니다.`);\r\n          return;\r\n        }\r\n\r\n        if(this.files && this.files.name === this.file.name) {\r\n          this.toast('이미 업로드 된 파일입니다.');\r\n          return;\r\n        }\r\n\r\n        let reader = new FileReader();\r\n        reader.readAsDataURL(this.file);\r\n        reader.onload = (f) => {\r\n          let file = this.file.name.split('.');\r\n          let ext = file[file.length-1];\r\n          let file_data = f.srcElement.result;\r\n          // console.log('file_data', file_data)\r\n          this.files = {\r\n            name : this.file.name,\r\n            file : file_data,\r\n            size: this.file.size,\r\n            extension: ext\r\n          };\r\n          this.items = file_data;\r\n          this.$emit('setValue', this.items)\r\n        };\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style lang=\"stylus\" type=\"stylus\" scoped>\r\n  @import '~assets/css/lp_main'\r\n  .file-list\r\n    border 1px solid $gray1\r\n    background-color #ffffff\r\n    display flex\r\n    justify-content space-between\r\n    width 100%\r\n    height 46px\r\n    border-radius 8px\r\n\r\n  .file-list:first-child\r\n    margin-top 0\r\n\r\n  .thumb\r\n\r\n  .ext\r\n    text-align center\r\n    color white\r\n    background-color #064160\r\n    line-height 44px\r\n    font-size 0.7rem\r\n    font-weight 100\r\n\r\n  .file-attachment-text\r\n    padding-left 12px\r\n    line-height 46px\r\n    font-size 0.9rem\r\n    color rgba(162, 174, 186, 1)\r\n\r\n  .file-attachment\r\n    text-align center\r\n    display flex\r\n    align-items center\r\n    margin-right 18px\r\n\r\n  .file-attachment i\r\n    line-height 46px\r\n    font-size 1.6rem\r\n\r\n  .file-desc\r\n    font-size 0.7rem\r\n    color rgba(162, 174, 186, 1)\r\n    white-space pre-line\r\n    padding 8px 0\r\n\r\n  .lp-file-name\r\n    padding 0 20px\r\n    color #303841\r\n    font-size 0.8rem\r\n    text-overflow ellipsis\r\n    overflow hidden\r\n    white-space pre\r\n    line-height 44px\r\n    text-align left\r\n    flex 1\r\n\r\n  .file-input\r\n    width 0\r\n    height 0\r\n    position fixed\r\n    top -100px\r\n    left -100px\r\n\r\n  .trash\r\n    width 44px\r\n    height 44px\r\n    text-align center\r\n\r\n  .trash i\r\n    line-height 44px\r\n    color rgba(162, 174, 186, 1)\r\n    font-size 1.4rem\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!./InputSingleFile.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!./InputSingleFile.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./InputSingleFile.vue?vue&type=template&id=6cf27998&scoped=true&\"\nimport script from \"./InputSingleFile.vue?vue&type=script&lang=js&\"\nexport * from \"./InputSingleFile.vue?vue&type=script&lang=js&\"\nimport style0 from \"./InputSingleFile.vue?vue&type=style&index=0&id=6cf27998&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  \"6cf27998\",\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!./InputSingleFile.vue?vue&type=style&index=0&id=6cf27998&lang=stylus&scoped=true&\""],"sourceRoot":""}