{"version":3,"sources":["webpack:///./src/views/admin/ImageCroper/Image.vue","webpack:///src/views/admin/ImageCroper/Image.vue","webpack:///./src/views/admin/ImageCroper/Image.vue?6238","webpack:///./src/views/admin/ImageCroper/Image.vue?24f3","webpack:///./src/views/admin/ImageCroper/Image.vue?7bd3"],"names":["render","_vm","this","_c","_self","staticClass","attrs","mData","fileUploadOption","Anh","limit","accept","fn_uploadChangeAlbumAnh","dialogVisible","on","$event","model","value","myCroppa","callback","$$v","expression","imageSrc","slot","_v","uploadCroppedImage","staticRenderFns","name","data","imgURL","ExtensionService","urlImg","dialogImageUrl","fileList","methods","a","generateDataUrl","console","log","file","_this","fileName","upload","then","res","result","catch","created","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,mBAAmB,CAACF,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,MAAM,CAACE,YAAY,aAAa,CAACF,EAAG,YAAY,CAACG,MAAM,CAAC,OAAS,GAAG,eAAc,EAAM,kBAAiB,EAAM,YAAY,eAAe,MAAQL,EAAIM,MAAMC,iBAAiBC,IAAIC,MAAM,OAAST,EAAIM,MAAMC,iBAAiBC,IAAIE,OAAO,YAAYV,EAAIW,0BAA0B,CAACT,EAAG,IAAI,CAACE,YAAY,mBAAmBF,EAAG,YAAY,CAACE,YAAY,iBAAiBC,MAAM,CAAC,MAAQ,OAAO,QAAUL,EAAIY,eAAeC,GAAG,CAAC,iBAAiB,SAASC,GAAQd,EAAIY,cAAcE,KAAU,CAACZ,EAAG,MAAM,CAACA,EAAG,SAAS,CAACG,MAAM,CAAC,MAAQ,IAAI,OAAS,IAAI,YAAc,kBAAkB,wBAAwB,EAAE,UAAW,EAAM,uBAAsB,EAAK,sBAAqB,GAAOU,MAAM,CAACC,MAAOhB,EAAIiB,SAAUC,SAAS,SAAUC,GAAMnB,EAAIiB,SAASE,GAAKC,WAAW,aAAa,CAAClB,EAAG,MAAM,CAACG,MAAM,CAAC,KAAO,UAAU,YAAc,YAAY,IAAML,EAAIqB,UAAUC,KAAK,YAAYpB,EAAG,IAAI,CAACF,EAAIuB,GAAG,yCAAyC,GAAGrB,EAAG,OAAO,CAACE,YAAY,gBAAgBC,MAAM,CAAC,KAAO,UAAUiB,KAAK,UAAU,CAACpB,EAAG,YAAY,CAACW,GAAG,CAAC,MAAQ,SAASC,GAAQd,EAAIY,eAAgB,KAAS,CAACZ,EAAIuB,GAAG,YAAYrB,EAAG,YAAY,CAACG,MAAM,CAAC,KAAO,WAAWQ,GAAG,CAAC,MAAQb,EAAIwB,qBAAqB,CAACxB,EAAIuB,GAAG,WAAW,MAAM,QAE/yCE,EAAkB,G,wBCiDP,G,UAAA,CACfC,KAAA,QACAC,KAAA,WACA,OACAC,OAAAC,OAAAC,OACAT,SAAA,GACAJ,SAAA,GACAL,eAAA,EACAN,MAAA,CACAC,iBAAA,CACAC,IAAA,CACAC,MAAA,KACAC,OAAA,sCACAqB,eAAA,GACAnB,eAAA,EACAoB,SAAA,QAMAC,QAAA,CACAT,mBAAA,WACA,IAAAU,EAAA,KAAAjB,SAAAkB,gBAAA,cACAC,QAAAC,IAAA,uBAAAH,IAEAvB,wBAAA,SAAA2B,GAAA,IAAAC,EAAA,KACAC,EAAAF,EAAAZ,KACAG,OAAAY,OAAAH,EAAA,YACAI,MAAA,SAAAC,GACAJ,EAAAlB,SAAAkB,EAAAX,OAAAe,EAAAC,OACAR,QAAAC,IAAA,gBAAAG,GACAD,EAAA3B,eAAA,KAEAiC,OAAA,iBAGAC,QAAA,WACAV,QAAAC,IAAA,KAAApB,aCzF6W,I,wBCQzW8B,EAAY,eACd,EACAhD,EACA0B,GACA,EACA,KACA,WACA,MAIa,aAAAsB,E,2CCnBf,W","file":"js/chunk-0163ea26.ab5af588.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"animated fadeIn\"},[_c('div',{staticClass:\"card\"},[_c('div',{staticClass:\"card-body\"},[_c('el-upload',{attrs:{\"action\":\"\",\"auto-upload\":false,\"show-file-list\":false,\"list-type\":\"picture-card\",\"limit\":_vm.mData.fileUploadOption.Anh.limit,\"accept\":_vm.mData.fileUploadOption.Anh.accept,\"on-change\":_vm.fn_uploadChangeAlbumAnh}},[_c('i',{staticClass:\"el-icon-plus\"})]),_c('el-dialog',{staticClass:\"cropper-dialog\",attrs:{\"title\":\"Tips\",\"visible\":_vm.dialogVisible},on:{\"update:visible\":function($event){_vm.dialogVisible=$event}}},[_c('div',[_c('croppa',{attrs:{\"width\":400,\"height\":500,\"placeholder\":\"Choose an image\",\"placeholder-font-size\":0,\"disabled\":false,\"prevent-white-space\":true,\"show-remove-button\":false},model:{value:(_vm.myCroppa),callback:function ($$v) {_vm.myCroppa=$$v},expression:\"myCroppa\"}},[_c('img',{attrs:{\"slot\":\"initial\",\"crossOrigin\":\"anonymous\",\"src\":_vm.imageSrc},slot:\"initial\"}),_c('p',[_vm._v(\"Kéo ảnh vừa với khung để tải lên\")])])],1),_c('span',{staticClass:\"dialog-footer\",attrs:{\"slot\":\"footer\"},slot:\"footer\"},[_c('el-button',{on:{\"click\":function($event){_vm.dialogVisible = false}}},[_vm._v(\"Cancel\")]),_c('el-button',{attrs:{\"type\":\"primary\"},on:{\"click\":_vm.uploadCroppedImage}},[_vm._v(\"Save\")])],1)])],1)])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div class=\"animated fadeIn\">\r\n        <div class=\"card\">\r\n            <div class=\"card-body\">\r\n                <el-upload\r\n                    action\r\n                    :auto-upload=\"false\"\r\n                    :show-file-list=\"false\"\r\n                    list-type=\"picture-card\"\r\n                    :limit=\"mData.fileUploadOption.Anh.limit\"\r\n                    :accept=\"mData.fileUploadOption.Anh.accept\"\r\n                    :on-change=\"fn_uploadChangeAlbumAnh\"\r\n                >\r\n                    <i class=\"el-icon-plus\"></i>\r\n                </el-upload>\r\n                <el-dialog\r\n                    title=\"Tips\"\r\n                    :visible.sync=\"dialogVisible\"\r\n                    class=\"cropper-dialog\"\r\n                >\r\n                    <div>\r\n                        <croppa \r\n                            v-model=\"myCroppa\"\r\n                            :width=\"400\"\r\n                            :height=\"500\"\r\n                            placeholder=\"Choose an image\"\r\n                            :placeholder-font-size=\"0\"\r\n                            :disabled=\"false\"\r\n                            :prevent-white-space=\"true\"\r\n                            :show-remove-button=\"false\"\r\n                        >\r\n                            <img crossOrigin=\"anonymous\"\r\n                                :src=\"imageSrc\"\r\n                                slot=\"initial\"\r\n                            >\r\n                            <p>Kéo ảnh vừa với khung để tải lên</p>\r\n                        </croppa>\r\n                    </div>\r\n                    <span slot=\"footer\" class=\"dialog-footer\">\r\n                        <el-button @click=\"dialogVisible = false\">Cancel</el-button>\r\n                        <el-button @click=\"uploadCroppedImage\" type=\"primary\">Save</el-button>\r\n                    </span>\r\n                </el-dialog>\r\n                \r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n<script>\r\nimport ExtensionService from \"../../../service/ExtensionService\";\r\nimport MethodService from '../../../service/MethodService';\r\nexport default {\r\n    name: \"cards\",\r\n    data: function () {\r\n        return {\r\n            imgURL: ExtensionService.urlImg,\r\n            imageSrc:\"\",\r\n            myCroppa: {},\r\n            dialogVisible: false,\r\n            mData:{\r\n                fileUploadOption:{\r\n                    Anh:{\r\n                        limit: null,\r\n                        accept: \".jpg, .png, .jpeg, .mp4, .avi, .mov\",\r\n                        dialogImageUrl: \"\",\r\n                        dialogVisible: false,\r\n                        fileList: []\r\n                    }\r\n                }\r\n            }\r\n        };\r\n    },\r\n    methods: {\r\n        uploadCroppedImage() {\r\n            let a = this.myCroppa.generateDataUrl('image/jpeg')\r\n            console.log(\"qiewuriuerwuerwioeur\",a);\r\n        },\r\n        fn_uploadChangeAlbumAnh(file) {\r\n            let fileName = file.name;\r\n            ExtensionService.upload(file, \"anhAlbum\")\r\n            .then((res) => {\r\n                this.imageSrc = this.imgURL + res.result;\r\n                console.log(\"this.fileName\",fileName);\r\n                this.dialogVisible = true;\r\n            })\r\n            .catch(() => {});\r\n        },\r\n    },\r\n    created: function(){\r\n        console.log(this.myCroppa);\r\n    }\r\n};\r\n</script>\r\n<style scoped>\r\n::v-deep .cropper-dialog .el-dialog{\r\n    margin-top: 10vh !important;\r\n    width: 35%;\r\n}\r\n::v-deep .cropper-dialog .el-dialog__body{\r\n    padding-top: 25px;\r\n}\r\n::v-deep .cropper-dialog .el-dialog__body .croppa-container{\r\n    text-align: center;\r\n}\r\n::v-deep .cropper-dialog .el-dialog__body canvas{\r\n        width: 400px ;\r\n        height: 500px ;\r\n    }\r\n::v-deep .cropper-dialog .el-dialog__body canvas:hover{\r\n    cursor: all-scroll;\r\n}\r\n::v-deep .cropper-dialog .el-dialog__footer{\r\n    text-align: center;\r\n}\r\n@media (max-width: 1238px) {\r\n    ::v-deep .cropper-dialog .el-dialog{\r\n        width: 50%;\r\n    }\r\n}\r\n@media (max-width: 870px) {\r\n    ::v-deep .cropper-dialog .el-dialog{\r\n        width: 65%;\r\n    }\r\n}\r\n@media (max-width: 660px) {\r\n    ::v-deep .cropper-dialog .el-dialog{\r\n        width: 80%;\r\n    }\r\n}\r\n@media (max-width: 540px) {\r\n    ::v-deep .cropper-dialog .el-dialog{\r\n        width: 98%;\r\n    }\r\n}\r\n@media (max-width: 440px) {\r\n    ::v-deep .cropper-dialog .el-dialog__body canvas{\r\n        width: 320px !important;\r\n        height: 420px !important;\r\n    }\r\n}\r\n@media (max-width: 356px) {\r\n    ::v-deep .cropper-dialog .el-dialog__body canvas{\r\n        width: 273px !important;\r\n        height: 345px !important;\r\n    }\r\n}\r\n</style>","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!./Image.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!./Image.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Image.vue?vue&type=template&id=6de8818f&scoped=true&\"\nimport script from \"./Image.vue?vue&type=script&lang=js&\"\nexport * from \"./Image.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Image.vue?vue&type=style&index=0&id=6de8818f&prod&scoped=true&lang=css&\"\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  \"6de8818f\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Image.vue?vue&type=style&index=0&id=6de8818f&prod&scoped=true&lang=css&\""],"sourceRoot":""}