{"version":3,"file":"wage-calculator.ce3d8cdd.js","sources":["../../../../pages/resource/wage-calculator.vue"],"sourcesContent":["<template>\n  <div class=\"wage-calculator-container\">\n    <SalaryCalculator\n      v-if=\"!calcPanel\"\n      :bg-img=\"\n        isMobile()\n          ? 'https://video.reta-inc.com/image/default/1242424075664D888CE01C6F48CCDB76-6-2.jpg'\n          : 'https://video.reta-inc.com/image/default/D6E23E8BDB0945E5924AC94A42AF72AC-6-2.jpg'\n      \"\n      :title=\"$t('员工工资计算器')\"\n      :desc=\"$t('帮助员工了解税后工资，方便您选择有竞争力的全球性职位')\"\n    >\n      <Calc :tip=\"$t('员工实得工资为预估值，且会受不同管辖区的法律政策影响。仅供参考')\" />\n    </SalaryCalculator>\n    <div class=\"main\" v-else>\n      <div>\n        <SalaryCalculator\n          class=\"mobile_computer\"\n          :bg-img=\"\n            isMobile()\n              ? 'https://video.reta-inc.com/image/default/1242424075664D888CE01C6F48CCDB76-6-2.jpg'\n              : 'https://video.reta-inc.com/image/default/D6E23E8BDB0945E5924AC94A42AF72AC-6-2.jpg'\n          \"\n          :title=\"$t('员工工资计算器')\"\n          :desc=\"$t('帮助员工了解税后工资，方便您选择有竞争力的全球性职位')\"\n        >\n          <Calc :tip=\"$t('员工实得工资为预估值，且会受不同管辖区的法律政策影响。仅供参考')\" />\n        </SalaryCalculator>\n        <SalaryCalculatorDetail\n          :countryCode=\"String(query.countryCode)\"\n          :amount=\"Number(query.amount)\"\n          :title=\"$t('员工工资计算器')\"\n          class=\"computer\"\n        />\n        <div class=\"res-container\" ref=\"resContainer\">\n          <div class=\"nav\">\n            <a-radio-group type=\"button\" v-model=\"calcTime\">\n              <a-radio value=\"mouth\">{{ $t('月') }}</a-radio>\n              <a-radio value=\"year\">{{ $t('年') }}</a-radio>\n            </a-radio-group>\n          </div>\n          <div class=\"res-panel\">\n            <div class=\"panel\">\n              <div class=\"title\">{{ calcPanel.country }} {{ $t(calcPanel.suffix) }}</div>\n              <div class=\"content\">\n                <template v-for=\"(item, j) in calcPanel.list\" :key=\"j\">\n                  <div v-if=\"!item.idDetail\" class=\"item\">\n                    <div class=\"label\">{{ item.label }}</div>\n                    <div class=\"money\">{{ item.value }}</div>\n                  </div>\n                  <div v-else class=\"detail-info\">\n                    <div\n                      class=\"detail-item\"\n                      v-for=\"(salaryCalcVo, k) in item.salaryCalcVoList\"\n                      :key=\"k\"\n                      :class=\"{ all: k === item.salaryCalcVoList.length - 1 }\"\n                    >\n                      <div class=\"label\">{{ locale === 'zh-CN' ? salaryCalcVo.ruleName :salaryCalcVo.ruleNameEn }}</div>\n                      <div class=\"money\">USD {{ salaryCalcVo.needPayDollars }}</div>\n                    </div>\n                  </div>\n                </template>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"content-right\">\n        <EmploymentTools />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ICalculatorCalcNewCountryRes, ICalculatorCalcRes } from '~~/common/web-api/types';\nimport { countryList } from '@/common/global';\nimport { isMobile } from '@/common/utils';\nimport { useI18n } from 'vue-i18n';\n\nconst { locale, t } = useI18n();\n\nconst route = useRoute();\n\nconst query = route.query;\nconst calcTime = ref('year');\n\nconst calcResult = ref<ICalculatorCalcRes | ICalculatorCalcNewCountryRes | null>(null);\nif (query.amount && query.countryCode) {\n  const { data } = await useAsyncData(async () => {\n    const { data } = await useFetch<{ data: string }>('https://e.dghire.com/api/a/website/public/v1/calculator', {\n      method: 'POST',\n      body: {\n        amount: Number(query.amount),\n        countryCode: query.countryCode,\n      },\n    });\n    return { data: data.value };\n  });\n  if (data.value?.data) {\n    if (countryList.find(c => c.name === query.countryCode)) {\n      calcResult.value = JSON.parse(data.value.data.data).data as ICalculatorCalcRes;\n    } else {\n      calcResult.value = JSON.parse(data.value?.data?.data) as ICalculatorCalcNewCountryRes;\n    }\n  }\n}\n\nconst currentCountry = computed(() => {\n  if (locale.value === 'zh-CN') {\n    return countryList.find(c => c.name === calcResult.value?.countryCode)?.desc;\n  }\n  return countryList.find(c => c.name === calcResult.value?.countryCode)?.enName;\n});\n\nuseSeoHead({\n  title: `${currentCountry.value ?? ''}`,\n});\n\nconst calcPanel = computed(() => {\n  if (!calcResult.value) {\n    return null;\n  }\n  const isYear = calcTime.value === 'year';\n  const isYearLabel = isYear ? t('年度') : t('月度');\n  if (countryList.find(c => c.name === query.countryCode)) {\n    const { employeeCostForYear, employeeCostForMonth } = calcResult.value as ICalculatorCalcRes;\n    return {\n      country: currentCountry.value,\n      suffix: '员工工资',\n      list: [\n        {\n          label: `${isYearLabel} ${t('薪资')}`,\n          value: `USD ${\n            isYear ? Number(Number(query.amount).toFixed(2)) : Number((Number(query.amount) / 12).toFixed(2))\n          }`,\n        },\n        {\n          label: t('个税及社会保障'),\n          value: '',\n        },\n        {\n          idDetail: true,\n          salaryCalcVoList: (isYear\n            ? employeeCostForYear.salaryCalcVoList\n            : employeeCostForMonth.salaryCalcVoList\n          )?.concat({\n            needPayDollars: isYear ? employeeCostForYear.itemTotalFeeDollars : employeeCostForMonth.itemTotalFeeDollars,\n            ruleName: t('总计'),\n          }),\n        },\n        {\n          label: `${isYearLabel} ${t('净工资')}`,\n          value: `USD ${\n            isYear\n              ? Number((Number(query.amount) - employeeCostForYear.itemTotalFeeDollars).toFixed(2))\n              : Number((Number(query.amount) / 12 - employeeCostForMonth.itemTotalFeeDollars).toFixed(2))\n          }`,\n        },\n      ],\n    };\n  }\n});\n</script>\n\n<style lang=\"less\" scoped>\n@media screen and (min-width: 800px) {\n  .wage-calculator-container {\n    padding-bottom: 80px;\n    background-color: #f5f8ff;\n    .main {\n      display: flex;\n      justify-content: center;\n      .mobile_computer {\n        display: none;\n      }\n\n      .content-right {\n        min-height: 500px;\n        margin-top: 180px;\n        margin-left: 24px;\n      }\n\n      .res-container {\n        position: relative;\n        margin: 12px auto 0px;\n        padding-bottom: 80px;\n\n        .nav {\n          width: 680px;\n          margin: 0px auto;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n\n          .country {\n            font-weight: 500;\n            font-size: 24px;\n            line-height: 34px;\n            color: #1d2129;\n          }\n\n          :deep(.arco-radio-group-button) {\n            border: 1px solid rgba(22, 93, 255, 0.5);\n            border-radius: 4px;\n            height: 32px;\n            padding: 4px;\n            box-sizing: border-box;\n            background-color: transparent;\n\n            .arco-radio-button {\n              margin: 0;\n              border-radius: 4px;\n\n              &.arco-radio-checked {\n                background: #165dff;\n\n                .arco-radio-button-content {\n                  color: #fff;\n                  font-weight: 500;\n                }\n              }\n\n              .arco-radio-button-content {\n                font-weight: 400;\n                font-size: 12px;\n                line-height: 22px;\n                color: #165dff;\n              }\n            }\n          }\n        }\n\n        .res-panel {\n          width: 680px;\n          min-height: 550px;\n          margin: 0px auto;\n          display: flex;\n          justify-content: space-between;\n          margin-top: 12px;\n\n          .panel {\n            width: 100%;\n            background: #ffffff;\n            border-radius: 12px;\n            padding: 24px 40px;\n            box-sizing: border-box;\n            flex-shrink: 0;\n            padding-bottom: 150px;\n\n            .title {\n              font-weight: 500;\n              font-size: 20px;\n              line-height: 28px;\n              color: #000000;\n              padding-bottom: 24px;\n              border-bottom: 1px solid #e3e8f2;\n            }\n\n            .content {\n              display: flex;\n              flex-direction: column;\n              padding-top: 8px;\n\n              .item {\n                margin-top: 24px;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n\n                .label {\n                  font-weight: 400;\n                  font-size: 20px;\n                  line-height: 28px;\n                  color: #4e5969;\n                }\n\n                .money {\n                  font-weight: 700;\n                  font-size: 20px;\n                  line-height: 23px;\n                  color: #1d2129;\n                }\n              }\n\n              .detail-info {\n                width: 100%;\n                padding: 20px;\n                box-sizing: border-box;\n                background: #f5f8ff;\n                border-radius: 8px;\n                margin-top: 20px;\n\n                .detail-item {\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  margin-top: 16px;\n\n                  &:first-child {\n                    margin-top: 0;\n                  }\n\n                  .label {\n                    font-weight: 400;\n                    font-size: 16px;\n                    line-height: 22px;\n                    color: #4e5969;\n                  }\n\n                  .money {\n                    font-weight: 700;\n                    font-size: 16px;\n                    line-height: 19px;\n                    color: #4e5969;\n                  }\n\n                  &.all {\n                    .label {\n                      font-weight: 500;\n                      font-size: 20px;\n                      line-height: 28px;\n                      color: #1d2129;\n                    }\n\n                    .money {\n                      font-weight: 700;\n                      font-size: 20px;\n                      line-height: 23px;\n                      color: #1d2129;\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n<style lang=\"less\" scoped>\n@media screen and (max-width: 800px) {\n  .wage-calculator-container {\n    width: 100%;\n    padding-bottom: 40px;\n    background-color: #f5f8ff;\n\n    .main {\n      .computer {\n        display: none;\n      }\n      .content-right {\n        display: none;\n      }\n\n      .res-container {\n        padding: 0 16px;\n        margin-top: 26px;\n\n        .nav {\n          width: 100%;\n          margin: 0px auto;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n\n          .country {\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 28px;\n            color: #1d2129;\n          }\n\n          :deep(.arco-radio-group-button) {\n            border: 1px solid rgba(22, 93, 255, 0.5);\n            border-radius: 4px;\n            height: 32px;\n            padding: 4px;\n            box-sizing: border-box;\n            background-color: transparent;\n\n            .arco-radio-button {\n              margin: 0;\n              border-radius: 4px;\n\n              &.arco-radio-checked {\n                background: #165dff;\n\n                .arco-radio-button-content {\n                  color: #fff;\n                  font-weight: 500;\n                }\n              }\n\n              .arco-radio-button-content {\n                font-weight: 400;\n                font-size: 12px;\n                line-height: 22px;\n                color: #165dff;\n              }\n            }\n          }\n        }\n\n        .res-panel {\n          width: 100%;\n          min-height: 550px;\n          margin-top: 18px;\n          display: flex;\n          justify-content: space-between;\n          margin-top: 12px;\n\n          .panel {\n            width: 100%;\n            background: #ffffff;\n            border-radius: 12px;\n            padding: 20px 16px;\n            box-sizing: border-box;\n            flex-shrink: 0;\n            // padding-bottom: 150px;\n\n            .title {\n              font-weight: 500;\n              font-size: 20px;\n              line-height: 28px;\n              color: #000000;\n              padding-bottom: 16px;\n              border-bottom: 1px solid #e3e8f2;\n            }\n\n            .content {\n              display: flex;\n              flex-direction: column;\n              padding-top: 4px;\n\n              .item {\n                margin-top: 20px;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n\n                .label {\n                  font-weight: 400;\n                  font-size: 14px;\n                  line-height: 20px;\n                  color: #4e5969;\n                }\n\n                .money {\n                  font-weight: 700;\n                  font-size: 14px;\n                  line-height: 16px;\n                  color: #1d2129;\n                }\n              }\n\n              .detail-info {\n                width: 100%;\n                padding: 16px;\n                box-sizing: border-box;\n                background: #f5f8ff;\n                border-radius: 8px;\n                margin-top: 20px;\n\n                .detail-item {\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  margin-top: 16px;\n\n                  &:first-child {\n                    margin-top: 0;\n                  }\n\n                  .label {\n                    font-weight: 400;\n                    font-size: 12px;\n                    line-height: 17px;\n                    color: #4e5969;\n                  }\n\n                  .money {\n                    font-weight: 700;\n                    font-size: 12px;\n                    line-height: 14px;\n                    color: #4e5969;\n                  }\n\n                  &.all {\n                    .label {\n                      font-weight: 500;\n                      font-size: 14px;\n                      line-height: 20px;\n                      color: #1d2129;\n                    }\n\n                    .money {\n                      font-weight: 700;\n                      font-size: 14px;\n                      line-height: 16px;\n                      color: #1d2129;\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["locale","t","useI18n","query","useRoute","calcTime","ref","calcResult","data","__temp","__restore","_withAsyncContext","useAsyncData","data2","useFetch","_a","countryList","c","_c","_b","currentCountry","computed","useSeoHead","_d","calcPanel","isYear","isYearLabel","employeeCostForYear","employeeCostForMonth"],"mappings":"67DAiFA,KAAA,CAAA,OAAAA,EAAA,EAAAC,CAAA,EAAAC,EAAA,EAIAC,EAFAC,IAEA,MACAC,EAAAC,EAAA,MAAA,EAEAC,EAAAD,EAAA,IAAA,EACA,GAAAH,EAAA,QAAAA,EAAA,YAAA,CACE,KAAA,CAAA,KAAAK,CAAA,GAAA,CAAAC,EAAAC,CAAA,EAAAC,EAAA,SAAAC,EAAA,SAAA,CACE,KAAA,CAAA,KAAAC,CAAA,EAAA,MAAAC,EAAA,0DAAA,CAA6G,OAAA,OACnG,KAAA,CACF,OAAA,OAAAX,EAAA,MAAA,EACuB,YAAAA,EAAA,WACR,CACrB,EAAA,aAAA,EAEF,MAAA,CAAA,KAAAU,EAAA,MAA0B,EAAA,aAAA,CAAA,EAAAJ,EAAA,MAAAA,EAAAC,EAAA,EAAAD,IAE5BM,EAAAP,EAAA,QAAA,MAAAO,EAAA,OACEC,EAAA,KAAAC,GAAAA,EAAA,OAAAd,EAAA,WAAA,EACEI,EAAA,MAAA,KAAA,MAAAC,EAAA,MAAA,KAAA,IAAA,EAAA,KAEAD,EAAA,MAAA,KAAA,OAAAW,GAAAC,EAAAX,EAAA,QAAA,YAAAW,EAAA,OAAA,YAAAD,EAAA,IAAA,EAEJ,CAGF,MAAAE,EAAAC,EAAA,IAAA,SACE,OAAArB,EAAA,QAAA,SACEe,EAAAC,EAAA,KAAAC,UAAA,OAAAA,EAAA,SAAAF,EAAAR,EAAA,QAAA,YAAAQ,EAAA,aAAA,IAAA,YAAAA,EAAA,MAEFI,EAAAH,EAAA,KAAAC,UAAA,OAAAA,EAAA,SAAAF,EAAAR,EAAA,QAAA,YAAAQ,EAAA,aAAA,IAAA,YAAAI,EAAA,MAAwE,CAAA,EAG1EG,EAAA,CAAW,MAAA,IAAAC,EAAAH,EAAA,QAAA,KAAAG,EAAA,IACyB,CAAA,EAGpC,MAAAC,EAAAH,EAAA,IAAA,OACE,GAAA,CAAAd,EAAA,MACE,OAAA,KAEF,MAAAkB,EAAApB,EAAA,QAAA,OACAqB,EAAAzB,EAAAwB,EAAA,eAAA,cAAA,EACA,GAAAT,EAAA,KAAAC,GAAAA,EAAA,OAAAd,EAAA,WAAA,EAAA,CACE,KAAA,CAAA,oBAAAwB,EAAA,qBAAAC,GAAArB,EAAA,MACA,MAAA,CAAO,QAAAa,EAAA,MACmB,OAAA,2BAChB,KAAA,CACF,CACJ,MAAA,GAAAM,KAAAzB,EAAA,cAAA,IACiC,MAAA,OAAA,OAAAwB,EAAA,OAAAtB,EAAA,MAAA,EAAA,QAAA,CAAA,GAAA,OAAAA,EAAA,MAAA,EAAA,IAAA,QAAA,CAAA,CAAA,GAEmE,EAEpG,CACA,MAAAF,EAAA,4CAAA,EACoB,MAAA,EACX,EACT,CACA,SAAA,GACY,kBAAAc,EAAAU,EAAAE,EAAA,iBAAAC,EAAA,mBAAA,YAAAb,EAAA,OAAA,CAIA,eAAAU,EAAAE,EAAA,oBAAAC,EAAA,oBACgF,SAAA3B,EAAA,cAAA,CACxE,EACjB,EACH,CACA,MAAA,GAAAyB,KAAAzB,EAAA,oBAAA,IACkC,MAAA,OAAA,OAAAwB,GAAA,OAAAtB,EAAA,MAAA,EAAAwB,EAAA,qBAAA,QAAA,CAAA,GAAA,OAAAxB,EAAA,MAAA,EAAA,GAAAyB,EAAA,qBAAA,QAAA,CAAA,CAAA,GAI8D,CAEhG,CACF,CACF,CACF,CAAA"}