{"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.a3d8286b.js","sourcesContent":["<template>\r\n    <div id=\"SupplyChainCompanies\">\r\n        <h1 class=\"h1 w90-mb\">{{ title }}</h1>\r\n        <div v-if=\"item === null\" class=\"no-company\">尚無合作業者</div>\r\n        <div v-else>\r\n            <section class=\"company-info\">\r\n                <div class=\"img-wrap\">\r\n                    <img\r\n                        :src=\"item.company.logoUrl\"\r\n                        :alt=\"item.company.name + 'Logo'\"\r\n                    />\r\n                </div>\r\n                <h3>{{ item.company.name }}</h3>\r\n                <ul class=\"table\">\r\n                    <li>\r\n                        <span class=\"head\">聯絡窗口</span>\r\n                        <span class=\"body\">\r\n                            {{\r\n                                item.contact.department +\r\n                                item.contact.name +\r\n                                item.contact.jobTitle +\r\n                                '\\n' +\r\n                                item.contact.phone +\r\n                                '\\n' +\r\n                                item.contact.email\r\n                            }}\r\n                        </span>\r\n                    </li>\r\n                    <li v-if=\"item.recycle && item.recycle.types\">\r\n                        <span class=\"head\">處理材質</span>\r\n                        <span class=\"body\">\r\n                            {{ item.recycle.types.join('、') }}\r\n                        </span>\r\n                    </li>\r\n                    <li v-if=\"item.recycle && item.recycle.allowedRange\">\r\n                        <span class=\"head\">收受區域</span>\r\n                        <span class=\"body\">{{\r\n                            item.recycle.allowedRange\r\n                        }}</span>\r\n                    </li>\r\n                    <li v-if=\"item.recycle && item.recycle.allowedStandard\">\r\n                        <span class=\"head\">允收標準</span>\r\n                        <span class=\"body\">{{\r\n                            item.recycle.allowedStandard\r\n                        }}</span>\r\n                    </li>\r\n                    <li v-if=\"item.product && item.product.types\">\r\n                        <span class=\"head\">產品類型</span>\r\n                        <span class=\"body\">\r\n                            {{ item.product.types.join('、') }}\r\n                        </span>\r\n                    </li>\r\n                </ul>\r\n            </section>\r\n            <section class=\"company-article w90-mb\">\r\n                <p\r\n                    class=\"p1\"\r\n                    v-for=\"(\r\n                        paragraph, subindex\r\n                    ) in item.company.introduction.split('\\n')\"\r\n                    :key=\"item.company.name + '-' + subindex\"\r\n                >\r\n                    {{ paragraph }}\r\n                </p>\r\n            </section>\r\n            <section class=\"other-companies w90-mb\">\r\n                <h2 class=\"h2\">所有{{ title }}</h2>\r\n                <ul>\r\n                    <li\r\n                        v-for=\"(company, index) in supplyChainData[type]\"\r\n                        :key=\"type + '-company-' + index\"\r\n                        :class=\"{\r\n                            active:\r\n                                company.company.companyId ==\r\n                                route.params.companyId,\r\n                        }\"\r\n                        @keypress.enter=\"\r\n                            changeCompany(company.company.companyId)\r\n                        \"\r\n                        @click=\"changeCompany(company.company.companyId)\"\r\n                        tabindex=\"0\"\r\n                        role=\"button\"\r\n                    >\r\n                        <img\r\n                            :src=\"company.company.logoUrl\"\r\n                            :alt=\"company.company.name + 'Logo'\"\r\n                        />\r\n                    </li>\r\n                </ul>\r\n            </section>\r\n        </div>\r\n    </div>\r\n</template>\r\n<script>\r\nimport { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'\r\nimport getSupplyChainCompanies from '@/data/getSupplyChainCompanies'\r\nimport { computed, ref } from 'vue-demi'\r\nexport default {\r\n    name: 'SupplyChainCompanies',\r\n    setup() {\r\n        const router = useRouter()\r\n        const route = useRoute()\r\n        const type = ref(route.params.type)\r\n        const companyId = ref(route.params.companyId)\r\n        const { supplyChainData } = getSupplyChainCompanies()\r\n        let item = ref({})\r\n\r\n        const title = computed(() => {\r\n            if (type.value === 'brand') return '合作品牌業者'\r\n            else if (type.value === 'recycle') return '合作回收業者'\r\n            else return '合作處理/製造業者'\r\n        })\r\n        function changeCompany(index) {\r\n            router.push({\r\n                name: 'SupplyChainCompanies',\r\n                params: {\r\n                    type: type.value,\r\n                    companyId: index,\r\n                },\r\n            })\r\n        }\r\n        function initItem() {\r\n            function getItem(item) {\r\n                return item.company.companyId == companyId.value\r\n            }\r\n            if (supplyChainData[type.value].length === 0) item.value = null\r\n            else item.value = supplyChainData[type.value].find(getItem)\r\n        }\r\n\r\n        initItem()\r\n        onBeforeRouteUpdate((to, from, next) => {\r\n            type.value = to.params.type\r\n            companyId.value = to.params.companyId\r\n            initItem()\r\n            window.scroll({\r\n                top: 0,\r\n                left: 0,\r\n            })\r\n            next()\r\n        })\r\n\r\n        return {\r\n            supplyChainData,\r\n            type,\r\n            companyId,\r\n            title,\r\n            item,\r\n            changeCompany,\r\n            route,\r\n        }\r\n    },\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.no-company {\r\n    text-align: center;\r\n    color: $grayB;\r\n    font-size: 20px;\r\n    font-weight: 900;\r\n    margin: 20px 0 80px;\r\n}\r\n.company-info {\r\n    background-color: $grayF;\r\n    padding: 50px 30px 30px;\r\n    .img-wrap {\r\n        margin: 0 auto;\r\n        width: 240px;\r\n        height: 240px;\r\n        border-radius: 50%;\r\n        background-color: $white;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        img {\r\n            position: relative;\r\n            top: 2%;\r\n            max-width: 80%;\r\n            max-height: 80%;\r\n        }\r\n    }\r\n    h3 {\r\n        margin: 30px 0;\r\n        color: $gray6;\r\n        text-align: center;\r\n        font-size: 28px;\r\n        font-weight: 700;\r\n        line-height: 1.5em;\r\n        letter-spacing: 0.05em;\r\n    }\r\n}\r\n.company-article {\r\n    margin: 30px auto;\r\n}\r\n.other-companies {\r\n    ul {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        margin: 20px 0 50px;\r\n    }\r\n    li {\r\n        margin: 5px;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        width: 100px;\r\n        height: 100px;\r\n        border-radius: 50%;\r\n        box-shadow: $shadow1;\r\n        cursor: pointer;\r\n\r\n        &.active {\r\n            border: 3px solid $theme3;\r\n            cursor: default;\r\n        }\r\n    }\r\n    img {\r\n        max-width: 80%;\r\n        max-height: 80%;\r\n    }\r\n}\r\n</style>\r\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 \"C:\\\\Users\\\\danie\\\\Documents\\\\Octave\\\\production\\\\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":""}