{"version":3,"file":"SalaryCalculatorDetail.fe4d198f.js","sources":["../../../../components/Calc.vue","../../../../components/SalaryCalculatorDetail.vue"],"sourcesContent":["<template>\n  <div class=\"computer-container\">\n    <div class=\"title\">{{ $t('计算薪资') }}</div>\n    <a-form\n      class=\"form\"\n      ref=\"formRef\"\n      size=\"large\"\n      :model=\"formData\"\n      :label-col-props=\"{ span: 0 }\"\n      :wrapper-col-props=\"{ span: 24 }\"\n    >\n      <a-form-item\n        field=\"countryCode\"\n        :rules=\"[{ required: true, message: $t('国家为必填') }]\"\n        :validate-trigger=\"['change']\"\n        hide-asterisk\n      >\n        <a-select v-model=\"formData.countryCode\" :placeholder=\"$t('请选择')\" allow-search>\n          <a-option v-for=\"c in concatCountryList\" :key=\"c.name\" :value=\"c.code\">{{\n            locale === 'zh-CN' ? c.desc : c.enName\n          }}</a-option>\n          <template #prefix>\n            <div class=\"amount-prefix\">\n              {{ $t('国家') }}\n            </div>\n          </template>\n        </a-select>\n      </a-form-item>\n      <a-form-item\n        field=\"amount\"\n        :rules=\"[\n          { required: true, message: $t('年度薪资为必填') },\n          { type: 'number', maxLength: 6, max: 1000000, message: $t('年度薪资不能大于100万') },\n          { type: 'number', min: 0, message: $t('年度薪资不能小于0') },\n        ]\"\n        :validate-trigger=\"['change']\"\n        hide-asterisk\n        model-event=\"input\"\n      >\n        <a-input-number v-model=\"formData.amount\" hide-button :placeholder=\"$t('请输入（默认使用美元换算）')\">\n          <template #prefix>\n            <div class=\"amount-prefix\">\n              {{ $t('年度薪资') }}\n            </div>\n          </template>\n        </a-input-number>\n      </a-form-item>\n    </a-form>\n    <a-button class=\"btn\" type=\"primary\" :loading=\"btnLoading\" @click=\"handleCalc\">{{ $t('开始计算') }}</a-button>\n    <div class=\"tip\">{{ tip }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { countryList, deelCountryList } from '@/common/global';\nimport { FormInstance } from '@arco-design/web-vue';\nimport { useI18n } from 'vue-i18n';\n\ninterface IFormData {\n  amount?: number;\n  countryCode: string;\n}\ninterface IProps {\n  showDeelCountry?: boolean;\n  tip: string;\n}\nconst { locale } = useI18n();\nconst props = defineProps<IProps>();\nconst route = useRoute();\nconst btnLoading = ref(false);\nconst formData = reactive<IFormData>({\n  amount: undefined,\n  countryCode: '',\n});\n\nconst concatCountryList = computed(() => {\n  return props.showDeelCountry ? countryList.concat(deelCountryList) : countryList;\n});\n\nconst formRef = ref<FormInstance | null>(null);\nconst handleCalc = async () => {\n  const res = await formRef.value?.validate();\n  if (res) {\n    return false;\n  }\n  const countryName = concatCountryList.value?.find(c => c.name === formData.countryCode)?.desc;\n  useLogger().track('calculator', {\n    country: countryName,\n    salary: formData.amount,\n  });\n  btnLoading.value = true;\n  await navigateTo({\n    path: route.path,\n    query: {\n      ...route.query,\n      ...formData,\n    },\n  });\n  window.location.reload();\n};\n\nonMounted(() => {\n  const lang = localStorage.getItem('lang') || 'zh-CN';\n  locale.value = lang;\n  formData.amount = Number(route.query.amount) || undefined;\n  formData.countryCode = (route.query.countryCode as string) || '';\n});\n</script>\n\n<style lang=\"less\" scoped>\n.computer-container {\n  width: 680px;\n  height: 350px;\n  background: #ffffff;\n  border-radius: 12px;\n  margin: -50px auto 0px;\n  overflow: hidden;\n\n  .title {\n    font-weight: 500;\n    font-size: 24px;\n    line-height: 34px;\n    text-align: center;\n    color: #1d2129;\n    margin-top: 32px;\n  }\n\n  .form {\n    width: 400px;\n    margin: 0 auto;\n    margin-top: 28px;\n\n    :deep(.arco-row) {\n      .arco-input-wrapper,\n      .arco-select {\n        background-color: #fff;\n        border: 1px solid #c9cdd4;\n        border-radius: 4px;\n        padding: 0px 12px 0px 20px;\n\n        .arco-input,\n        .arco-select-view-input,\n        .arco-select-view-value {\n          font-size: 16px;\n\n          &::placeholder {\n            color: #86909c;\n            font-size: 16px;\n          }\n        }\n\n        .arco-select-view-prefix,\n        .arco-input-prefix {\n          padding-right: 43px;\n          position: relative;\n\n          .amount-prefix {\n            font-weight: 400;\n            font-size: 18px;\n            line-height: 22px;\n            color: #1d2129;\n          }\n\n          &::after {\n            content: '';\n            position: absolute;\n            width: 1px;\n            height: 20px;\n            background-color: #e5e6eb;\n            right: 23px;\n          }\n        }\n      }\n    }\n  }\n\n  .btn {\n    width: 400px;\n    height: 48px;\n    margin: 12px auto;\n    display: block;\n    font-weight: 500;\n    font-size: 16px;\n    border-radius: 4px;\n  }\n\n  .tip {\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 16px;\n    text-align: center;\n    color: #86909c;\n  }\n}\n@media screen and (max-width: 800px) {\n  .computer-container {\n    width: calc(100% - 32px);\n    margin: -49px auto 0;\n    padding: 0 16px 24px;\n    box-sizing: border-box;\n    height: auto;\n    .title {\n      font-size: 20px;\n      line-height: 28px;\n      margin-top: 24px;\n    }\n    .form {\n      margin-top: 24px;\n      width: 100%;\n      :deep(.arco-form-item-content-wrapper) {\n        .arco-select-view-single,\n        .arco-input-wrapper {\n          height: 48px;\n          .arco-select-view-prefix,\n          .arco-input-prefix {\n            padding-right: 24px;\n            &::after {\n              right: 11px;\n            }\n            .amount-prefix {\n              font-size: 16px;\n            }\n          }\n        }\n      }\n      :deep(.arco-form-item) {\n        margin-bottom: 16px;\n      }\n    }\n    .btn {\n      width: 100%;\n      margin-top: 8px;\n    }\n  }\n}\n</style>\n","<!--\n * @Author: luxiangqiang\n * @Date: 2023-04-26 14:08:33\n * @LastEditors: luxiangqiang\n * @LastEditTime: 2023-05-15 10:30:33\n-->\n<template>\n  <div class=\"calculation-wrapper\">\n    <h2 class=\"title\">{{ title }}</h2>\n    <div class=\"calculation\">\n      <a-form class=\"form\" ref=\"formRef\" size=\"large\" :model=\"formData\">\n        <a-input-group>\n          <a-form-item\n            field=\"countryCode\"\n            :rules=\"[{ required: true, message: $t('国家为必填') }]\"\n            :validate-trigger=\"['change']\"\n            hide-asterisk\n          >\n            <a-select\n              v-model=\"formData.countryCode\"\n              :options=\"concatCountryList\"\n              :style=\"{ width: '130px' }\"\n              :placeholder=\"$t('请选择国家')\"\n            />\n          </a-form-item>\n          <a-form-item\n            field=\"amount\"\n            :rules=\"[\n              { required: true, message: $t('年度薪资为必填') },\n              { type: 'number', maxLength: 6, max: 1000000, message: $t('年度薪资不能大于100万') },\n              { type: 'number', min: 0, message: $t('年度薪资不能小于0') },\n            ]\"\n            :validate-trigger=\"['change']\"\n            hide-asterisk\n            model-event=\"input\"\n          >\n            <a-input v-model=\"formData.amount\" :style=\"{ width: '200px' }\" placeholder=\"请输入薪资\" />\n          </a-form-item>\n          <a-button type=\"primary\" @click=\"handleCalc\">\n            {{ $t('开始计算') }}\n            <img style=\"width: 25px\" src=\"@/assets/icons/arrow.svg\" alt=\"arrow\" />\n          </a-button>\n        </a-input-group>\n      </a-form>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { countryList, deelCountryList } from '@/common/global';\nimport { FormInstance } from '@arco-design/web-vue';\nimport { useI18n } from 'vue-i18n';\n\nconst { locale } = useI18n();\nconst formRef = ref<FormInstance | null>(null);\nconst concatCountryList = computed(() => {\n  if (props.showDeelCountry) {\n    return countryList.concat(deelCountryList).map(item => ({\n      label: locale.value === 'zh-CN' ? item.desc : item.enName ?? item.name,\n      value: item.code,\n    }));\n  } else {\n    return countryList.map(item => ({\n      label: locale.value === 'zh-CN' ? item.desc : item.enName,\n      value: item.code,\n    }));\n  }\n});\n\nconst props = defineProps<{\n  title: string;\n  countryCode: string;\n  amount: number;\n  showDeelCountry?: boolean;\n}>();\n\nconst route = useRoute();\nconst formData = reactive({\n  countryCode: '',\n  amount: '',\n});\n\nonMounted(() => {\n  formData.countryCode = props.countryCode;\n  formData.amount = String(props.amount);\n});\n\nconst handleCalc = async () => {\n  const res = await formRef.value?.validate();\n  if (res) {\n    return false;\n  }\n  const countryName = concatCountryList.value?.find(c => c.label === formData.countryCode)?.label;\n  useLogger().track('calculator', {\n    country: countryName,\n    salary: formData.amount,\n  });\n\n  await navigateTo({\n    path: route.path,\n    query: {\n      ...route.query,\n      ...formData,\n    },\n  });\n  window.location.reload();\n};\n</script>\n\n<style scoped lang=\"less\">\n:deep(.arco-form-item-label-col) {\n  display: none;\n}\n\n:deep(.arco-form-item-message) {\n  margin-bottom: -30px;\n}\n\n.calculation-wrapper {\n  padding-top: 25px;\n  width: 680px;\n  margin: 0px auto;\n\n  .title {\n    color: #1d2129;\n  }\n\n  :deep(.arco-row) {\n    margin-bottom: 0;\n  }\n\n  .calculation {\n    margin-top: 20px;\n    border: 1px solid #e5e6eb;\n    border-radius: 4px;\n    width: fit-content;\n    display: flex;\n    align-items: center;\n    height: 40px;\n    padding: 4px;\n    box-sizing: border-box;\n    background-color: #fff;\n\n    :deep(.arco-input-wrapper),\n    :deep(.arco-input-focus) {\n      border: 0;\n    }\n\n    :deep(.arco-select-view-single) {\n      position: relative;\n      background-color: #fff;\n      border: 0;\n\n      &::after {\n        position: absolute;\n        top: 20%;\n        right: 0;\n        content: '';\n        display: block;\n        width: 1px;\n        height: 20px;\n        background-color: #e5e6eb;\n      }\n    }\n\n    :deep(.arco-input-wrapper) {\n      background-color: #fff;\n    }\n  }\n}\n</style>\n"],"names":["locale","useI18n","route","useRoute","btnLoading","ref","formData","reactive","concatCountryList","computed","props","countryList","deelCountryList","formRef","handleCalc","_a","countryName","_c","_b","c","useLogger","navigateTo","onMounted","lang","item"],"mappings":"27BAkEA,CAAA,OAAAA,GAAAC,IAEAC,EAAAC,IACAC,EAAAC,EAAA,EAAA,EACAC,EAAAC,EAAA,CAAqC,OAAA,OAC3B,YAAA,EACK,CAAA,EAGfC,EAAAC,EAAA,IACEC,EAAA,gBAAAC,EAAA,OAAAC,CAAA,EAAAD,CAAqE,EAGvEE,EAAAR,EAAA,IAAA,EACAS,EAAA,SAAA,WAEE,GADA,OAAAC,EAAAF,EAAA,QAAA,YAAAE,EAAA,YAEE,MAAA,GAEF,MAAAC,GAAAC,GAAAC,EAAAV,EAAA,QAAA,YAAAU,EAAA,KAAAC,GAAAA,EAAA,OAAAb,EAAA,eAAA,YAAAW,EAAA,KACAG,EAAA,EAAA,MAAA,aAAA,CAAgC,QAAAJ,EACrB,OAAAV,EAAA,MACQ,CAAA,EAEnBF,EAAA,MAAA,GACA,MAAAiB,EAAA,CAAiB,KAAAnB,EAAA,KACH,MAAA,CACL,GAAAA,EAAA,MACI,GAAAI,CACN,CACL,CAAA,EAEF,OAAA,SAAA,QAAuB,EAGzB,OAAAgB,EAAA,IAAA,CACE,MAAAC,EAAA,aAAA,QAAA,MAAA,GAAA,QACAvB,EAAA,MAAAuB,EACAjB,EAAA,OAAA,OAAAJ,EAAA,MAAA,MAAA,GAAA,OACAI,EAAA,YAAAJ,EAAA,MAAA,aAAA,EAA8D,CAAA,mjECpDhE,CAAA,OAAAF,GAAAC,IACAY,EAAAR,EAAA,IAAA,EACAG,EAAAC,EAAA,IACEC,EAAA,gBACEC,EAAA,OAAAC,CAAA,EAAA,IAAAY,GAAA,OAAA,OAAwD,MAAAxB,EAAA,QAAA,QAAAwB,EAAA,MAAAT,EAAAS,EAAA,SAAA,KAAAT,EAAAS,EAAA,KACY,MAAAA,EAAA,IACtD,EAAA,EAGdb,EAAA,IAAAa,IAAA,CAAgC,MAAAxB,EAAA,QAAA,QAAAwB,EAAA,KAAAA,EAAA,OACqB,MAAAA,EAAA,IACvC,EAAA,CAEhB,EAUFtB,EAAAC,IACAG,EAAAC,EAAA,CAA0B,YAAA,GACX,OAAA,EACL,CAAA,EAGVe,EAAA,IAAA,CACEhB,EAAA,YAAAI,EAAA,YACAJ,EAAA,OAAA,OAAAI,EAAA,MAAA,CAAqC,CAAA,EAGvC,MAAAI,EAAA,SAAA,WAEE,GADA,OAAAC,EAAAF,EAAA,QAAA,YAAAE,EAAA,YAEE,MAAA,GAEF,MAAAC,GAAAC,GAAAC,EAAAV,EAAA,QAAA,YAAAU,EAAA,KAAAC,GAAAA,EAAA,QAAAb,EAAA,eAAA,YAAAW,EAAA,MACAG,EAAA,EAAA,MAAA,aAAA,CAAgC,QAAAJ,EACrB,OAAAV,EAAA,MACQ,CAAA,EAGnB,MAAAe,EAAA,CAAiB,KAAAnB,EAAA,KACH,MAAA,CACL,GAAAA,EAAA,MACI,GAAAI,CACN,CACL,CAAA,EAEF,OAAA,SAAA,QAAuB"}