{"version":3,"file":"wage-calculator.73f5e6bd.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=\"员工工资计算器\"\n      desc=\"帮助员工了解税后工资，方便您选择有竞争力的全球性职位\"\n    >\n      <Calc tip=\"员工实得工资为预估值，且会受不同管辖区的法律政策影响。仅供参考\" />\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=\"员工工资计算器\"\n          desc=\"帮助员工了解税后工资，方便您选择有竞争力的全球性职位\"\n        >\n          <Calc tip=\"员工实得工资为预估值，且会受不同管辖区的法律政策影响。仅供参考\" />\n        </SalaryCalculator>\n        <SalaryCalculatorDetail\n          :countryCode=\"String(query.countryCode)\"\n          :amount=\"Number(query.amount)\"\n          title=\"员工工资计算器\"\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\">月</a-radio>\n              <a-radio value=\"year\">年</a-radio>\n            </a-radio-group>\n          </div>\n          <div class=\"res-panel\">\n            <div class=\"panel\">\n              <div class=\"title\">{{ calcPanel.name }}</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\">{{ salaryCalcVo.ruleName }}</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';\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  return countryList.find(c => c.name === calcResult.value?.countryCode)?.desc;\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 ? '年度' : '月度';\n  if (countryList.find(c => c.name === query.countryCode)) {\n    const { employeeCostForYear, employeeCostForMonth } = calcResult.value as ICalculatorCalcRes;\n    return {\n      name: `${currentCountry.value || ''}员工工资`,\n      list: [\n        {\n          label: `${isYearLabel}薪资`,\n          value: `USD ${\n            isYear ? Number(Number(query.amount).toFixed(2)) : Number((Number(query.amount) / 12).toFixed(2))\n          }`,\n        },\n        {\n          label: '个税及社会保障',\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: '总计',\n          }),\n        },\n        {\n          label: `${isYearLabel}净工资`,\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        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":["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":"myDAkFA,MAAAA,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,OACE,OAAAN,EAAAC,EAAA,KAAAC,UAAA,OAAAA,EAAA,SAAAF,EAAAR,EAAA,QAAA,YAAAQ,EAAA,aAAA,IAAA,YAAAA,EAAA,IAAwE,CAAA,EAG1EO,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,EAAAD,EAAA,eAAA,eACA,GAAAT,EAAA,KAAAC,GAAAA,EAAA,OAAAd,EAAA,WAAA,EAAA,CACE,KAAA,CAAA,oBAAAwB,EAAA,qBAAAC,GAAArB,EAAA,MACA,MAAA,CAAO,KAAA,GAAAa,EAAA,OAAA,6BAC4B,KAAA,CAC3B,CACJ,MAAA,GAAAM,gBACY,MAAA,OAAA,OAAAD,EAAA,OAAAtB,EAAA,MAAA,EAAA,QAAA,CAAA,GAAA,OAAAA,EAAA,MAAA,EAAA,IAAA,QAAA,CAAA,CAAA,GAEwF,EAEpG,CACA,MAAA,6CACS,MAAA,EACA,EACT,CACA,SAAA,GACY,kBAAAY,EAAAU,EAAAE,EAAA,iBAAAC,EAAA,mBAAA,YAAAb,EAAA,OAAA,CAIA,eAAAU,EAAAE,EAAA,oBAAAC,EAAA,oBACgF,SAAA,cAC9E,EACX,EACH,CACA,MAAA,GAAAF,sBACY,MAAA,OAAA,OAAAD,GAAA,OAAAtB,EAAA,MAAA,EAAAwB,EAAA,qBAAA,QAAA,CAAA,GAAA,OAAAxB,EAAA,MAAA,EAAA,GAAAyB,EAAA,qBAAA,QAAA,CAAA,CAAA,GAIoF,CAEhG,CACF,CACF,CACF,CAAA"}