{"version":3,"sources":["webpack:///./src/views/ch/4-1-1-Companies.vue","webpack:///./src/views/ch/4-1-1-Companies.vue?2205","webpack:///./src/views/ch/4-1-1-Companies.vue?09dc"],"names":["id","class","_createElementVNode","_createElementBlock","_toDisplayString","$setup","_hoisted_4","src","company","logoUrl","alt","name","_hoisted_9","contact","department","jobTitle","phone","email","recycle","types","_hoisted_11","_hoisted_12","join","allowedRange","_hoisted_14","_hoisted_15","allowedStandard","_hoisted_17","_hoisted_18","product","_hoisted_20","_hoisted_21","_Fragment","_renderList","introduction","split","paragraph","subindex","key","index","companyId","params","onKeypress","onClick","tabindex","role","setup","router","useRouter","route","useRoute","type","ref","supplyChainData","getSupplyChainCompanies","item","title","computed","value","changeCompany","push","initItem","getItem","length","find","onBeforeRouteUpdate","to","from","next","window","scroll","top","left","__exports__","render"],"mappings":"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","file":"js/chunk-25e80955.8f0f9c2e.js","sourcesContent":["<template>\n    <div id=\"SupplyChainCompanies\">\n        <h1 class=\"h1 w90-mb\">{{ title }}</h1>\n        <div v-if=\"item === null\" class=\"no-company\">尚無合作業者</div>\n        <div v-else>\n            <section class=\"company-info\">\n                <div class=\"img-wrap\">\n                    <img\n                        :src=\"item.company.logoUrl\"\n                        :alt=\"item.company.name + 'Logo'\"\n                    />\n                </div>\n                <h3>{{ item.company.name }}</h3>\n                <ul class=\"table\">\n                    <li>\n                        <span class=\"head\">聯絡窗口</span>\n                        <span class=\"body\">\n                            {{\n                                item.contact.department +\n                                item.contact.name +\n                                item.contact.jobTitle +\n                                '\\n' +\n                                item.contact.phone +\n                                '\\n' +\n                                item.contact.email\n                            }}\n                        </span>\n                    </li>\n                    <li v-if=\"item.recycle && item.recycle.types\">\n                        <span class=\"head\">處理材質</span>\n                        <span class=\"body\">\n                            {{ item.recycle.types.join('、') }}\n                        </span>\n                    </li>\n                    <li v-if=\"item.recycle && item.recycle.allowedRange\">\n                        <span class=\"head\">收受區域</span>\n                        <span class=\"body\">{{\n                            item.recycle.allowedRange\n                        }}</span>\n                    </li>\n                    <li v-if=\"item.recycle && item.recycle.allowedStandard\">\n                        <span class=\"head\">允收標準</span>\n                        <span class=\"body\">{{\n                            item.recycle.allowedStandard\n                        }}</span>\n                    </li>\n                    <li v-if=\"item.product && item.product.types\">\n                        <span class=\"head\">產品類型</span>\n                        <span class=\"body\">\n                            {{ item.product.types.join('、') }}\n                        </span>\n                    </li>\n                </ul>\n            </section>\n            <section class=\"company-article w90-mb\">\n                <p\n                    class=\"p1\"\n                    v-for=\"(\n                        paragraph, subindex\n                    ) in item.company.introduction.split('\\n')\"\n                    :key=\"item.company.name + '-' + subindex\"\n                >\n                    {{ paragraph }}\n                </p>\n            </section>\n            <section class=\"other-companies w90-mb\">\n                <h2 class=\"h2\">所有{{ title }}</h2>\n                <ul>\n                    <li\n                        v-for=\"(company, index) in supplyChainData[type]\"\n                        :key=\"type + '-company-' + index\"\n                        :class=\"{\n                            active:\n                                company.company.companyId ==\n                                route.params.companyId,\n                        }\"\n                        @keypress.enter=\"\n                            changeCompany(company.company.companyId)\n                        \"\n                        @click=\"changeCompany(company.company.companyId)\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                    >\n                        <img\n                            :src=\"company.company.logoUrl\"\n                            :alt=\"company.company.name + 'Logo'\"\n                        />\n                    </li>\n                </ul>\n            </section>\n        </div>\n    </div>\n</template>\n<script>\nimport { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'\nimport getSupplyChainCompanies from '@/data/getSupplyChainCompanies'\nimport { computed, ref } from 'vue-demi'\nexport default {\n    name: 'SupplyChainCompanies',\n    setup() {\n        const router = useRouter()\n        const route = useRoute()\n        const type = ref(route.params.type)\n        const companyId = ref(route.params.companyId)\n        const { supplyChainData } = getSupplyChainCompanies()\n        let item = ref({})\n\n        const title = computed(() => {\n            if (type.value === 'brand') return '合作品牌業者'\n            else if (type.value === 'recycle') return '合作回收業者'\n            else return '合作處理/製造業者'\n        })\n        function changeCompany(index) {\n            router.push({\n                name: 'SupplyChainCompanies',\n                params: {\n                    type: type.value,\n                    companyId: index,\n                },\n            })\n        }\n        function initItem() {\n            function getItem(item) {\n                return item.company.companyId == companyId.value\n            }\n            if (supplyChainData[type.value].length === 0) item.value = null\n            else item.value = supplyChainData[type.value].find(getItem)\n        }\n\n        initItem()\n        onBeforeRouteUpdate((to, from, next) => {\n            type.value = to.params.type\n            companyId.value = to.params.companyId\n            initItem()\n            window.scroll({\n                top: 0,\n                left: 0,\n            })\n            next()\n        })\n\n        return {\n            supplyChainData,\n            type,\n            companyId,\n            title,\n            item,\n            changeCompany,\n            route,\n        }\n    },\n}\n</script>\n<style lang=\"scss\" scoped>\n.no-company {\n    text-align: center;\n    color: $grayB;\n    font-size: 20px;\n    font-weight: 900;\n    margin: 20px 0 80px;\n}\n.company-info {\n    background-color: $grayF;\n    padding: 50px 30px 30px;\n    .img-wrap {\n        margin: 0 auto;\n        width: 240px;\n        height: 240px;\n        border-radius: 50%;\n        background-color: $white;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        img {\n            position: relative;\n            top: 2%;\n            max-width: 80%;\n            max-height: 80%;\n        }\n    }\n    h3 {\n        margin: 30px 0;\n        color: $gray6;\n        text-align: center;\n        font-size: 28px;\n        font-weight: 700;\n        line-height: 1.5em;\n        letter-spacing: 0.05em;\n    }\n}\n.company-article {\n    margin: 30px auto;\n}\n.other-companies {\n    ul {\n        display: flex;\n        flex-wrap: wrap;\n        margin: 20px 0 50px;\n    }\n    li {\n        margin: 5px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100px;\n        height: 100px;\n        border-radius: 50%;\n        box-shadow: $shadow1;\n        cursor: pointer;\n\n        &.active {\n            border: 3px solid $theme3;\n            cursor: default;\n        }\n    }\n    img {\n        max-width: 80%;\n        max-height: 80%;\n    }\n}\n</style>\n","import { render } from \"./4-1-1-Companies.vue?vue&type=template&id=8cdb047c&scoped=true\"\nimport script from \"./4-1-1-Companies.vue?vue&type=script&lang=js\"\nexport * from \"./4-1-1-Companies.vue?vue&type=script&lang=js\"\n\nimport \"./4-1-1-Companies.vue?vue&type=style&index=0&id=8cdb047c&lang=scss&scoped=true\"\n\nimport exportComponent from \"/Users/pj/Desktop/C.Project/Octave_project/marine-debris-2022/frontend/node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-8cdb047c\"]])\n\nexport default __exports__","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--1-1!./4-1-1-Companies.vue?vue&type=style&index=0&id=8cdb047c&lang=scss&scoped=true\""],"sourceRoot":""}