{"version":3,"file":"_category_.e8cdb74c.js","sources":["../../../../pages/resource/global/[countryName]/[category].vue"],"sourcesContent":["<template>\n  <div class=\"tool_container\">\n    <div v-if=\"!data?.attributes?.content || isMobile()\">\n      <div class=\"banner\" :style=\"{ backgroundImage: backImg }\">\n        <div class=\"inner_box\">\n          <Breadcrumb v-if=\"params.countryName !== 'global'\" :routes=\"routes\" reversed-color class=\"bread\" />\n          <div class=\"title\">{{ category.title }}</div>\n          <div class=\"desc\">{{ headerInfo.desc }}</div>\n        </div>\n      </div>\n      <div class=\"content_box\">\n        <div class=\"search_box\">\n          <div class=\"title\">选择查看国家</div>\n          <div class=\"select_box\">\n            <span class=\"country_text\">国家</span>\n            <div class=\"select\">\n              <a-select v-model=\"activeCountry\" placeholder=\"请选择国家\" :bordered=\"false\">\n                <a-option v-for=\"country in countryList\" :key=\"country.id\" :value=\"country.attributes.name\">\n                  {{ country.attributes.cnName }}\n                </a-option>\n              </a-select>\n            </div>\n          </div>\n          <a-button type=\"primary\" class=\"button\" @click=\"onSubmitClick\">查看</a-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"content_result-box\" v-if=\"data?.attributes?.content\">\n      <div class=\"container\">\n        <Breadcrumb v-if=\"params.countryName !== 'global'\" :routes=\"routes\" class=\"bread\" />\n        <div class=\"title\">{{ headerInfo.title }}</div>\n        <div class=\"select_box\">\n          <span class=\"country_text\">国家</span>\n          <div class=\"select\">\n            <a-select v-model=\"activeCountry\" placeholder=\"请选择国家\" :bordered=\"false\" @change=\"onSubmitClick\">\n              <a-option v-for=\"country in countryList\" :key=\"country.id\" :value=\"country.attributes.name\">\n                {{ country.attributes.cnName }}\n              </a-option>\n            </a-select>\n            <!-- <div>\n              <a-button type=\"primary\" class=\"search\" @click=\"onSubmitClick\">\n                查看\n                <img style=\"width: 25px\" src=\"@/assets/icons/arrow.svg\" alt=\"arrow\" />\n              </a-button>\n            </div> -->\n          </div>\n        </div>\n        <div class=\"content-wrapper\">\n          <div ref=\"markdownContainer\" class=\"content markdown-content\"></div>\n          <EmploymentTools class=\"employment-tools\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { marked } from 'marked';\nimport { IEntity } from '~~/@types/cms';\nimport { isMobile } from '~~/common/utils';\nimport qs from 'qs';\nimport { ICountry, IGlobalAddition } from '~~/@types/entities';\n\ntype TMapKey =\n  | 'corporate_tax'\n  | 'labor_employment_regulations'\n  | 'government_departments_relevant_institutions'\n  | 'banks_insurance_companies';\n\ninterface IMap {\n  title: string;\n  desc: string;\n  img: string;\n  mobileImg: string;\n  name: TMapKey;\n  headTitle: string;\n}\n\nconst bannerMap = new Map<TMapKey, IMap>([\n  [\n    'corporate_tax',\n    {\n      title: '全球税收政策',\n      desc: '帮您了解全球各国税收政策',\n      img: 'https://video.reta-inc.com/image/default/F992C3265FD54C1FA82A34AA3776C1B2-6-2.png',\n      mobileImg: 'https://video.reta-inc.com/image/default/933980E0D2DA49688E58A01D80CFBF76-6-2.png',\n      name: 'corporate_tax',\n      headTitle: '用工成本 | 一站式全球用工平台  | dghire',\n    },\n  ],\n  [\n    'labor_employment_regulations',\n    {\n      title: '全球劳动法',\n      desc: '帮您了解全球各国劳动就业法规政策',\n      img: 'https://video.reta-inc.com/image/default/AA3A83B68D2C40158D1C407B4037FEF2-6-2.png',\n      mobileImg: 'https://video.reta-inc.com/image/default/D5EF402ADA4441F2B39C2F6B60B8280E-6-2.png',\n      name: 'labor_employment_regulations',\n      headTitle: '劳动法 | 一站式全球用工平台  | dghire',\n    },\n  ],\n  [\n    'government_departments_relevant_institutions',\n    {\n      title: '全球政府机构',\n      desc: '查看各国政府部门和相关机构联系方式',\n      img: 'https://video.reta-inc.com/image/default/C66741AE0AAF44E1B4B4F723399B8DA9-6-2.png',\n      mobileImg: 'https://video.reta-inc.com/image/default/8D33C8B1ABCD4325A58941727A62CC9F-6-2.png',\n      name: 'government_departments_relevant_institutions',\n      headTitle: '工作签证 | 一站式全球用工平台  | dghire',\n    },\n  ],\n  [\n    'banks_insurance_companies',\n    {\n      title: '全球银行保险机构',\n      desc: '查看各国当地银行、保险公司的名单和联系方式',\n      img: 'https://video.reta-inc.com/image/default/BFE692C337BD44FABD1CB4ADE3871724-6-2.png',\n      mobileImg: 'https://video.reta-inc.com/image/default/697A42C2F6CF40D880802B3160B38A59-6-2.png',\n      name: 'banks_insurance_companies',\n      headTitle: '员工保险 | 一站式全球用工平台  | dghire',\n    },\n  ],\n]);\n\nconst params = useRoute().params;\nif (!params.category || !params.countryName) {\n  throw createError({ statusCode: 404 });\n}\n\nconst { data, refresh } = await useAsyncData(async () => {\n  const { category, countryName } = useRoute().params;\n  const query = {\n    category: (category as string).replace(/-/g, '_'),\n    countryName,\n  };\n  const { data } = await useFetch<IEntity<IGlobalAddition>>(`/api/resource/additional/detail?${qs.stringify(query)}`);\n  return data.value;\n});\nif (!data.value?.id) {\n  throw createError({ statusCode: 404 });\n}\n\nconst {\n  category: {\n    data: { attributes: category },\n  },\n  country: {\n    data: { attributes: country },\n  },\n} = data.value?.attributes as IGlobalAddition;\n\nconst routes = [\n  { text: '资源中心' },\n  { text: '全球雇佣指南', path: '/resource/global' },\n  { text: `${country.cnName}`, path: `/resource/global/${country.name}` },\n  { text: `${category.title}` },\n];\n\nconst activeCountry = ref(country.name);\nconst countryList = ref<IEntity<ICountry>[]>([]);\nonMounted(async () => {\n  const response = await fetch(`/api/resource/additional/countries?category=${category.name}`);\n  const data = (await response.json()) as IEntity<ICountry>[];\n  countryList.value = data;\n});\n\nconst headerInfo = bannerMap.get(category.name as TMapKey)!;\nconst backImg = ref('');\nonMounted(() => {\n  const pcBackGroundImg = `url(${headerInfo.img})`;\n  const mbBackGroundImg = `url(${headerInfo.mobileImg})`;\n  backImg.value = isMobile() ? mbBackGroundImg : pcBackGroundImg;\n});\n\nuseSeoHead({\n  title: country.cnName,\n});\n\n\nconst globalLoading = inject('global-loading', ref(false));\nasync function onSubmitClick() {\n  if (!activeCountry.value) {\n    return;\n  }\n  const route = useRoute();\n  await navigateTo({\n    ...route,\n    params: {\n      countryName: activeCountry.value,\n    },\n  });\n  globalLoading.value = true;\n  await refresh();\n  globalLoading.value = false;\n}\n\nconst markdownContainer = ref<HTMLDivElement>();\nwatchEffect(() => {\n  if (!data.value?.attributes?.content) {\n    return;\n  }\n  const cnName = countryList.value.find(item => item.attributes.name === country.name)?.attributes.cnName ?? '';\n  if (!cnName) {\n    return;\n  }\n  const html = marked.parse(data.value?.attributes?.content);\n  const div = document.createElement('div');\n  div.innerHTML = html;\n  const firstEle = div.firstElementChild!;\n  if (firstEle.tagName !== 'H3') {\n    const h3 = document.createElement('h3');\n    h3.innerHTML = `${cnName}${headerInfo.title}`;\n    div.prepend(h3);\n  } else {\n    firstEle.textContent = cnName + firstEle.textContent;\n  }\n\n  markdownContainer.value?.appendChild(document.adoptNode(div));\n});\n</script>\n\n<style lang=\"less\" scoped>\n@media screen and(min-width: 800px) {\n  .tool_container {\n    .banner {\n      height: 360px;\n      background-size: 100% 100%;\n      background-repeat: no-repeat;\n      color: #ffffff;\n      text-align: center;\n\n      .inner_box {\n        max-width: 1280px;\n        margin: 0 auto;\n        padding-top: 25px;\n\n        .title {\n          margin-top: 53px;\n          font-weight: 600;\n          font-size: 48px;\n          line-height: 67px;\n        }\n\n        .desc {\n          margin-top: 20px;\n          font-size: 24px;\n          line-height: 34px;\n        }\n      }\n    }\n\n    .content_box {\n      background: #f5f8ff;\n      padding: 1px 1px 24px 1px;\n\n      .search_box {\n        margin: -100px auto 0;\n        width: 680px;\n        height: 250px;\n        background: #ffffff;\n        border-radius: 12px;\n        display: flex;\n        flex-direction: column;\n        // justify-content: center;\n        align-items: center;\n\n        .title {\n          font-weight: 500;\n          font-size: 24px;\n          line-height: 34px;\n          color: #1d2129;\n          margin-top: 32px;\n        }\n\n        .select_box {\n          margin-top: 24px;\n          width: 380px;\n          height: 48px;\n          background: #ffffff;\n          border: 1px solid #c9cdd4;\n          border-radius: 4px;\n          padding: 13px 0px 13px 20px;\n          box-sizing: border-box;\n          display: flex;\n          align-items: center;\n\n          .country_text {\n            font-size: 18px;\n            color: #1d2129;\n            line-height: 22px;\n            padding-right: 20px;\n            position: relative;\n\n            &::after {\n              content: '';\n              position: absolute;\n              top: 0;\n              right: 0;\n              width: 1px;\n              height: 100%;\n              background: #e5e6eb;\n              // vertical-align:middle;\n            }\n          }\n\n          .select {\n            flex: 1;\n          }\n        }\n\n        .button {\n          width: 400px;\n          height: 48px;\n          margin-top: 24px;\n        }\n      }\n    }\n\n    .content_result-box {\n      background: #f5f8ff;\n      padding: 25px 40px;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n\n      .container {\n        width: 1280px;\n\n        .title {\n          font-weight: 600;\n          font-size: 20px;\n          line-height: 28px;\n          letter-spacing: 0.02em;\n          color: #1d2129;\n          margin-top: 25px;\n        }\n\n        .content-wrapper {\n          display: flex;\n\n          .content {\n            max-width: 1280px;\n            box-sizing: border-box;\n            background: #ffffff;\n            border-radius: 12px;\n            margin-top: 24px;\n            padding: 15px 40px;\n          }\n\n          .employment-tools {\n            white-space: nowrap;\n            margin-top: 20px;\n            margin-left: 24px;\n          }\n        }\n\n        .select_box {\n          margin-top: 24px;\n          width: 380px;\n          height: 48px;\n          background: #ffffff;\n          border: 1px solid #e5e6eb;\n          border-radius: 4px;\n          padding: 13px 0px 13px 20px;\n          box-sizing: border-box;\n          display: flex;\n          align-items: center;\n\n          .country_text {\n            padding-right: 20px;\n            font-size: 16px;\n            line-height: 22px;\n            color: #1d2129;\n            position: relative;\n\n            &::after {\n              content: '';\n              position: absolute;\n              top: 0;\n              right: 0;\n              width: 1px;\n              height: 100%;\n              background: #e5e6eb;\n            }\n          }\n\n          .select {\n            display: flex;\n            flex: 1;\n\n            .search {\n              flex: 1;\n              height: 40px;\n              margin-right: 4px;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n<style lang=\"less\" scoped>\n@media screen and(max-width: 800px) {\n  .tool_container {\n    .banner {\n      height: 200px;\n      background-size: 100% 100%;\n      background-repeat: no-repeat;\n      color: #ffffff;\n      text-align: center;\n\n      .inner_box {\n        padding: 13px 16px 0;\n\n        .title {\n          margin-top: 21px;\n          font-weight: 600;\n          font-size: 28px;\n          line-height: 39px;\n        }\n\n        .desc {\n          margin-top: 20px;\n          font-size: 24px;\n          line-height: 34px;\n        }\n      }\n    }\n\n    .content_box {\n      background: #f5f8ff;\n      padding: 1px 1px 24px 1px;\n\n      .search_box {\n        margin: -20px 16px 0;\n        height: 250px;\n        background: #ffffff;\n        border-radius: 12px;\n        display: flex;\n        flex-direction: column;\n        // justify-content: center;\n        align-items: center;\n\n        .title {\n          font-weight: 500;\n          font-size: 24px;\n          line-height: 34px;\n          color: #1d2129;\n          margin-top: 32px;\n        }\n\n        .select_box {\n          margin: 24px auto 0;\n          width: 90.6%;\n          height: 48px;\n          background: #ffffff;\n          border: 1px solid #c9cdd4;\n          border-radius: 4px;\n          padding: 13px 0px 13px 20px;\n          box-sizing: border-box;\n          display: flex;\n          align-items: center;\n\n          .country_text {\n            font-size: 18px;\n            color: #1d2129;\n            line-height: 22px;\n            padding-right: 20px;\n            position: relative;\n\n            &::after {\n              content: '';\n              position: absolute;\n              top: 0;\n              right: 0;\n              width: 1px;\n              height: 100%;\n              background: #e5e6eb;\n              // vertical-align:middle;\n            }\n          }\n\n          .select {\n            flex: 1;\n          }\n        }\n\n        .button {\n          width: 90.6%;\n          height: 48px;\n          margin-top: 24px;\n        }\n      }\n\n      .content {\n        margin: 16px 16px 24px;\n        background: #ffffff;\n        border-radius: 12px;\n        padding: 16px;\n        box-sizing: border-box;\n        width: calc(100vw - 32px);\n      }\n    }\n\n    .content_result-box {\n      .container {\n        display: flex;\n        justify-content: center;\n        background-color: #f5f8ff;\n\n        .bread,\n        .title,\n        .select_box {\n          display: none;\n        }\n\n        .content-wrapper {\n          width: calc(100vw - 32px);\n          box-sizing: border-box;\n          background-color: #fff;\n          padding: 16px;\n          border-radius: 12px;\n          margin-bottom: 20px;\n\n          .employment-tools {\n            display: none;\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["bannerMap","params","useRoute","createError","data","refresh","__temp","__restore","_withAsyncContext","useAsyncData","category2","countryName","query","data2","useFetch","qs","_a","category","country","_b","routes","activeCountry","ref","countryList","onMounted","headerInfo","backImg","pcBackGroundImg","mbBackGroundImg","isMobile","useSeoHead","globalLoading","inject","onSubmitClick","route","navigateTo","markdownContainer","watchEffect","cnName","_d","_c","item","html","marked","_f","_e","div","firstEle","h3","_g"],"mappings":"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"}