{"version":3,"sources":["webpack:///./src/components/module/InputFile.vue?54cf","webpack:///./src/components/module/InputFile.vue?c396","webpack:///src/components/module/InputFile.vue","webpack:///./src/components/module/InputFile.vue?ba89","webpack:///./src/components/module/InputFile.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","_v","_s","label","_e","_l","file","idx","key","staticClass","attrs","isImage","extension","style","thumbStyle","extColor","upper","name","on","$event","onDelete","maxLength","files","length","acceptExt","uid","stopPropagation","onFileChange","staticStyle","placeholder","_m","description","staticRenderFns","component"],"mappings":"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","file":"js/chunk-d8a96c1e.3958110c.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!./InputFile.vue?vue&type=style&index=0&id=7ffe1da2&lang=stylus&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.label)?_c('div',[_vm._v(_vm._s(_vm.label))]):_vm._e(),_vm._l((_vm.files),function(file,idx){return _c('div',{key:(\"file-\" + idx),staticClass:\"file-add-list\"},[_c('div',[_c('a',{attrs:{\"target\":\"_blank\",\"href\":file.file}},[(_vm.isImage(file.extension))?_c('div',{staticClass:\"thumb\",style:(_vm.thumbStyle(file.file))}):_c('div',{staticClass:\"thumb ext\",style:(_vm.extColor(file.extension))},[_vm._v(_vm._s(_vm.upper(file.extension)))])])]),_c('div',{staticClass:\"lp-file-name\"},[_vm._v(_vm._s(file.name))]),_c('div',{staticClass:\"trash\",on:{\"click\":function($event){return _vm.onDelete(idx)}}},[_c('i',{staticClass:\"material-icons\"},[_vm._v(\"delete\")])])])}),(_vm.maxLength > _vm.files.length)?_c('div',{staticClass:\"file-add\"},[(_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(),_c('div',{staticClass:\"file-desc\"},[_vm._v(_vm._s(_vm.description))])],2)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"file-attachment\"},[_c('i',{staticClass:\"material-icons sub2\"},[_vm._v(\"link\")])])}]\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    <div\r\n        v-for=\"(file, idx) in files\"\r\n        :key=\"`file-${idx}`\"\r\n        class=\"file-add-list\">\r\n      <!-- 썸네일 -->\r\n      <div>\r\n        <!-- 이미지 -->\r\n        <a target=\"_blank\" :href=\"file.file\">\r\n          <div v-if=\"isImage(file.extension)\"\r\n              class=\"thumb\"\r\n              :style=\"thumbStyle(file.file)\"></div>\r\n          <!-- 이미지 아닐 땐 파일 확장자명 표시 -->\r\n          <div v-else\r\n               :style=\"extColor(file.extension)\"\r\n               class=\"thumb ext\">{{ upper(file.extension) }}</div>\r\n        </a>\r\n      </div>\r\n      <div class=\"lp-file-name\">{{ file.name }}</div>\r\n      <div class=\"trash\" @click=\"onDelete(idx)\">\r\n        <i class=\"material-icons\">delete</i>\r\n      </div>\r\n    </div>\r\n    <!-- 첨부파일 추가하기 -->\r\n    <div v-if=\"maxLength > files.length\" class=\"file-add\">\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          <i class=\"material-icons sub2\">link</i>\r\n        </div>\r\n      </label>\r\n    </div>\r\n    <div class=\"file-desc\">{{ 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: 'InputFile',\r\n\r\n    mixins: [\r\n    ],\r\n\r\n    props: {\r\n      label: {\r\n        type: String,\r\n        required: false\r\n      },\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, .zip'\r\n      },\r\n      maxLength: {\r\n        type: Number,\r\n        required: false,\r\n        default: 5\r\n      },\r\n      description: {\r\n        type: String,\r\n        required: false,\r\n        default: '첨부파일은 최대 5개, 50MB 까지 등록 가능합니다.\\n' +\r\n          '파일형식은 이미지(jpg, gif, png), 오피스 문서(hwp, pdf, pptx, docx, xlsx), 압축파일(zip)만 가능합니다.'\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: [],\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\r\n        let file_data = [];\r\n        n.forEach(item=> {\r\n          file_data.push(item.file);\r\n        })\r\n        this.items = file_data;\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(idx) {\r\n        this.files.splice(idx, 1);\r\n        this.items.splice(idx, 1);\r\n        // removeIndex(this.files, idx);\r\n        // removeIndex(this.items, idx);\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(ext) {\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 또는 파일 maxLength개 까지만 업로드 가능\r\n        let totalSize = 0;\r\n        for(let i=0; i< this.files.length; i++)\r\n          totalSize += this.files[i].size;\r\n\r\n        if((totalSize + this.file.size ) > 1024*1024*50 || this.files.length + 1 > this.maxLength) {\r\n          this.toast(`최대 50MB, ${this.maxLength}개 파일까지만 업로드 가능합니다.`);\r\n          return;\r\n        }\r\n\r\n        if(this.findItem(this.files, 'name', this.file.name) !== undefined) {\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.push({\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.push(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-add\r\n    margin-top 8px\r\n  .file-add:first-child\r\n    margin-top 0\r\n  .file-add-list\r\n  .file-list\r\n    cursor pointer\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-add-list\r\n    margin-top 8px\r\n  .file-add-list:first-child\r\n    margin-top 0\r\n\r\n  .thumb\r\n  .file-attachment\r\n    width 44px\r\n    height 44px\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 $sub4*/\r\n\r\n  .file-attachment\r\n    text-align center\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!./InputFile.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!./InputFile.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./InputFile.vue?vue&type=template&id=7ffe1da2&scoped=true&\"\nimport script from \"./InputFile.vue?vue&type=script&lang=js&\"\nexport * from \"./InputFile.vue?vue&type=script&lang=js&\"\nimport style0 from \"./InputFile.vue?vue&type=style&index=0&id=7ffe1da2&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  \"7ffe1da2\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}