{"version":3,"sources":["webpack:///./src/components/DialogDropZone/index.vue?fbd4","webpack:///./src/components/DialogDropZone/index.vue?e3e6","webpack:///src/components/DialogDropZone/index.vue","webpack:///./src/components/DialogDropZone/index.vue?e087","webpack:///./src/components/DialogDropZone/index.vue?550f"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_m","_v","_s","message","attrs","exampleFile","class","active","currentStatus","isMatch","on","onChange","dragenter","$event","preventDefault","staticStyle","ref","chooseFiles","_e","importFileCancel","file","name","cancelHandler","disabled","importFiles","staticRenderFns","props","isUplodFilesDialogOpen","type","Boolean","default","String","url","data","methods","init","$emit","formData","append","import","response","currentStep","dragleave","e","isDrag","length","i","indexOf","setFailFileTips","handleFileUpload","setTimeout","$refs","click","component","VIcon"],"mappings":"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","file":"js/chunk-c673fef0.31d74f23.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isUplodFilesDialogOpen)?_c('div',{staticClass:\"productlist-dialog-wrap\"},[_c('div',{staticClass:\"productlist-dialog\"},[_vm._m(0),_vm._m(1),_c('div',{staticClass:\"px-5 pt-5\"},[_c('h5',[_vm._v(\" \"+_vm._s(_vm.message)+\" \"),_c('a',{staticClass:\"ml-2\",attrs:{\"href\":_vm.exampleFile,\"target\":\"_blank\"}},[_vm._v(\" 下載匯入範本 \")])])]),_c('div',{staticClass:\"pa-5\"},[_c('div',{staticClass:\"productlist-dialog__upload-area\",class:{ active: _vm.currentStatus == 2 || _vm.currentStatus == 5 }},[_c('div',{staticClass:\"text-center\",class:{\n               'text-center-body-fail': !_vm.isMatch,\n             },on:{\"drop\":_vm.onChange,\"dragenter\":_vm.dragenter,\"dragover\":function($event){$event.preventDefault();}}},[_c('div',{staticClass:\"mt-42px\"},[_c('v-icon',{staticStyle:{\"font-size\":\"45px\"}},[_vm._v(\"insert_drive_file \")])],1),(_vm.currentStatus == 1)?_c('div',{staticClass:\"mt-14px\"},[_c('input',{ref:\"import\",attrs:{\"type\":\"file\",\"id\":\"file\",\"hidden\":\"\"},on:{\"change\":_vm.onChange}}),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.chooseFiles}},[_vm._v(\"上傳CSV檔案\")])]):_vm._e(),(_vm.currentStatus == 2)?_c('div',{staticClass:\"mt-14px\"},[_c('button',{staticClass:\"btn\"},[_c('v-icon',{staticClass:\"mr-2 ink-01-emphasis--text\"},[_vm._v(\"attach_file\")]),_c('span',{on:{\"click\":_vm.importFileCancel}},[_vm._v(_vm._s(_vm.file.name))]),_c('v-icon',{staticClass:\"ml-2 ink-01-emphasis--text\",on:{\"click\":_vm.importFileCancel}},[_vm._v(\"cancel\")])],1)]):_vm._e(),_c('div',{staticClass:\"mt-10px\"},[_vm._v(\"或將檔案拖曳至此\")])])])]),_c('div',{staticClass:\"pa-5 text-right\"},[_c('button',{staticClass:\"btn w-100px mr-10px\",on:{\"click\":_vm.cancelHandler}},[_vm._v(\"取消\")]),_c('button',{staticClass:\"btn w-100px btn-primary\",class:{ disabled: _vm.currentStatus == 1 },on:{\"click\":_vm.importFiles}},[_vm._v(\" 匯入 \")])])])]):_vm._e()}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"pa-5\"},[_c('h3',[_vm._v(\"批次匯入CSV\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"py-5 pl-5 pr-80px\"},[_c('div',{staticClass:\"stepper\"},[_c('div',{staticClass:\"stepper-header ml-10\"},[_c('div',{staticClass:\"page-divider\"}),_c('div',{staticClass:\"stepper-step active\"},[_c('div',{staticClass:\"stepper-text\"},[_vm._v(\"上傳CSV或XLS\")])]),_c('div',{staticClass:\"page-divider\"})])])])}]\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"productlist-dialog-wrap\" v-if=\"isUplodFilesDialogOpen\">\n    <div class=\"productlist-dialog\">\n      <!-- head -->\n      <div class=\"pa-5\">\n        <h3>批次匯入CSV</h3>\n      </div>\n      <!-- step -->\n      <div class=\"py-5 pl-5 pr-80px\">\n        <div class=\"stepper\">\n          <div class=\"stepper-header ml-10\">\n            <div class=\"page-divider\"></div>\n            <!-- 1 -->\n            <div class=\"stepper-step active\">\n              <div class=\"stepper-text\">上傳CSV或XLS</div>\n            </div>\n            <div class=\"page-divider\"></div>\n          </div>\n        </div>\n      </div>\n      <!-- description -->\n      <div class=\"px-5 pt-5\">\n        <h5>\n          {{ message }}\n          <a :href=\"exampleFile\"\n             class=\"ml-2\"\n             target=\"_blank\">\n            下載匯入範本\n          </a>\n        </h5>\n      </div>\n      <!-- body -->\n      <div class=\"pa-5\">\n        <div\n          class=\"productlist-dialog__upload-area\"\n          :class=\"{ active: currentStatus == 2 || currentStatus == 5 }\"\n        >\n          <div class=\"text-center\"\n               :class=\"{\n                 'text-center-body-fail': !isMatch,\n               }\"\n               @drop=\"onChange\"\n               @dragenter=\"dragenter\"\n               @dragover.prevent>\n            <div class=\"mt-42px\">\n              <v-icon style=\"font-size: 45px\">insert_drive_file </v-icon>\n            </div>\n            <div class=\"mt-14px\" v-if=\"currentStatus == 1\">\n              <input type=\"file\" id=\"file\" ref=\"import\" @change=\"onChange\" hidden>\n              <button class=\"btn\" @click=\"chooseFiles\">上傳CSV檔案</button>\n            </div>\n            <div class=\"mt-14px\" v-if=\"currentStatus == 2\">\n              <button class=\"btn\">\n                <v-icon class=\"mr-2 ink-01-emphasis--text\"\n                >attach_file</v-icon\n                >\n                <span @click=\"importFileCancel\">{{ file.name }}</span>\n                <v-icon class=\"ml-2 ink-01-emphasis--text\" @click=\"importFileCancel\"\n                >cancel</v-icon\n                >\n              </button>\n            </div>\n            <div class=\"mt-10px\">或將檔案拖曳至此</div>\n          </div>\n        </div>\n      </div>\n      <!-- foot -->\n      <div class=\"pa-5 text-right\">\n        <button class=\"btn w-100px mr-10px\" @click=\"cancelHandler\">取消</button>\n        <button\n          class=\"btn w-100px btn-primary\"\n          :class=\"{ disabled: currentStatus == 1 }\"\n          @click=\"importFiles\"\n        >\n          匯入\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n// Zeplin: https://app.zeplin.io/project/5f092773fa16ac9ddd3d2a2f/screen/5f214b051a66767ffd9b99d1\nimport { mapActions } from 'vuex';\n\nexport default {\n  props: {\n    isUplodFilesDialogOpen: {\n      type: Boolean,\n      default: false,\n    },\n    message: {\n      type: String,\n      default: '針對單筆多語言內容批次匯入，請參考範本檔案。',\n    },\n    exampleFile: {\n      type: String,\n      default: '#',\n    },\n    url: {\n      type: String,\n      default: '',\n    },\n  },\n  data: () => ({\n    currentStep: 1,\n    currentStatus: 1,\n    isDrag: false,\n    isMatch: true,\n    file: null,\n  }),\n  methods: {\n    ...mapActions(['import']),\n    ...mapActions('notifications', ['success', 'error']),\n    cancelHandler() {\n      this.init();\n      this.$emit('update:isUplodFilesDialogOpen', false);\n    },\n    importFiles() {\n      if (this.currentStatus === 1) {\n        return;\n      }\n      const formData = new FormData();\n      formData.append('file', this.file, this.file.name);\n      this.import({\n        url: this.url,\n        data: formData,\n      }).then((response) => {\n        if (response.message === 'OK') {\n          this.success('匯入成功');\n        } else {\n          this.error(response.message);\n        }\n        this.$emit('handleReload');\n      });\n      this.init();\n      this.$emit('update:isUplodFilesDialogOpen', false);\n    },\n    importFileCancel() {\n      this.init();\n    },\n    init() {\n      this.currentStep = 1;\n      this.currentStatus = 1;\n      this.file = null;\n    },\n    dragleave(e) {\n      e.preventDefault();\n      this.isDrag = false;\n      this.isMatch = true;\n    },\n    onChange(e) {\n      e.preventDefault();\n      const data = e.target.files || e.dataTransfer.files;\n      if (!data.length) {\n        this.isDrag = false;\n        return;\n      }\n      for (let i = 0; i < data.length; i += 1) {\n        if (data[i].type.indexOf('vnd.openxmlformats-officedocument.spreadsheetml.sheet') === -1) {\n          this.setFailFileTips();\n          return;\n        }\n      }\n      this.handleFileUpload(data[0]);\n    },\n    dragenter(e) {\n      e.preventDefault();\n      this.isDrag = true;\n    },\n    handleFileUpload(data) {\n      this.file = data;\n      this.currentStep = 2;\n      this.currentStatus = 2;\n    },\n    setFailFileTips() {\n      this.isMatch = false;\n      setTimeout(() => {\n        this.isMatch = true;\n        this.isDrag = false;\n      }, 1500);\n    },\n    chooseFiles() {\n      this.$refs.import.click();\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\">\n.stepper {\n  &-header {\n    display: flex;\n    .page-divider {\n      align-self: center;\n      margin-left: 20px;\n      margin-right: 20px;\n      flex-grow: 1;\n      border-bottom: 1px solid #848fa0;\n    }\n  }\n  &-step {\n    display: flex;\n    align-items: center;\n    &.active {\n      .stepper-icon {\n        background-color: #1240a8;\n      }\n      .stepper-text {\n        color: #1240a8;\n      }\n    }\n  }\n  &-icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 32px;\n    height: 32px;\n    margin-right: 10px;\n    color: white;\n    background-color: #848fa0;\n    border-radius: 50%;\n    &.active {\n      background-color: #1240a8;\n    }\n  }\n  &-text {\n    color: #848fa0;\n    &.active {\n      color: #1240a8;\n    }\n  }\n}\n\n.productlist-dialog-wrap {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(133, 133, 133, 0.5);\n  z-index: 100;\n}\n\n.productlist-dialog {\n  width: 720px;\n  margin: 0 auto;\n  margin-top: 136px;\n  background-color: #fff;\n  border-radius: 4px;\n\n  &__upload-area {\n    height: 216px;\n    border: solid 1px #848fa0;\n    border-style: dashed;\n    border-radius: 4px;\n\n    &.active {\n      border: solid 1px #194cc3;\n      border-style: dashed;\n      border-radius: 4px;\n      background-color: #e8efff;\n    }\n  }\n}\n.text-center {\n\n  &-body {\n    height: 216px;\n    border: 1px dashed #848fa0;\n    text-align: center;\n    border-radius: 4px;\n\n    .material-icons {\n      margin-top: 44px;\n      font-size: 40px;\n      width: 40px;\n      height: 40px;\n      color: #848fa0;\n    }\n\n    .btn {\n      margin-top: 9px;\n    }\n\n    div {\n      margin-top: 10px;\n    }\n  }\n\n  &-body-drag {\n    height: 216px;\n    text-align: center;\n    border-radius: 4px;\n    border: 1px dashed #194cc3;\n    background-color: #e8efff;\n    color: #1e50c0;\n\n    .material-icons {\n      margin-top: 44px;\n      font-size: 40px;\n      width: 40px;\n      height: 40px;\n      color: #1e50c0;\n    }\n\n    div {\n      margin-top: 10px;\n    }\n  }\n\n  &-body-fail {\n    height: 216px;\n    text-align: center;\n    border-radius: 4px;\n    border: 1px dashed #f90000;\n    background-color: #ffe7e7;\n    color: #ff0000;\n\n    .material-icons {\n      margin-top: 44px;\n      font-size: 40px;\n      width: 40px;\n      height: 40px;\n      color: #ff0000;\n    }\n\n    div {\n      margin-top: 10px;\n    }\n  }\n}\n</style>\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!./index.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!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=79ffb95e&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&lang=scss&\"\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  null,\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VIcon } from 'vuetify/lib/components/VIcon';\ninstallComponents(component, {VIcon})\n"],"sourceRoot":""}