{"version":3,"file":"SalaryCalculatorDetail.2c07f79a.js","sources":["../../../../components/Calc.vue","../../../../components/SalaryCalculatorDetail.vue"],"sourcesContent":["<template>\n  <div class=\"computer-container\">\n    <div class=\"title\">计算薪资</div>\n    <a-form class=\"form\" ref=\"formRef\" size=\"large\" :model=\"formData\" :label-col-props=\"{ span: 0 }\"\n      :wrapper-col-props=\"{ span: 24 }\">\n      <a-form-item field=\"countryCode\" :rules=\"[{ required: true, message: '国家为必填' }]\" :validate-trigger=\"['change']\"\n        hide-asterisk>\n        <a-select v-model=\"formData.countryCode\" placeholder=\"请选择\" allow-search>\n          <a-option v-for=\"c in concatCountryList\" :key=\"c.name\" :value=\"c.code\">{{\n            c.desc\n          }}</a-option>\n          <template #prefix>\n            <div class=\"amount-prefix\">\n              国家\n            </div>\n          </template>\n        </a-select>\n      </a-form-item>\n      <a-form-item field=\"amount\" :rules=\"[\n        { required: true, message: '年度薪资为必填' },\n        { type: 'number', maxLength: 6, max: 1000000, message: '年度薪资不能大于100万' },\n        { type: 'number', min: 0, message: '年度薪资不能小于0' }\n      ]\" :validate-trigger=\"['change']\" hide-asterisk model-event=\"input\">\n        <a-input-number v-model=\"formData.amount\" hide-button placeholder=\"请输入（默认使用美元换算）\">\n          <template #prefix>\n            <div class=\"amount-prefix\">\n              年度薪资\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\">开始计算</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';\n\ninterface IFormData {\n  amount?: number\n  countryCode: string\n}\ninterface IProps {\n  showDeelCountry?: boolean\n  tip: string\n}\n\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  formData.amount = Number(route.query.amount) || undefined;\n  formData.countryCode = route.query.countryCode as string || '';\n});\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\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, .arco-input-wrapper {\n          height: 48px;\n          .arco-select-view-prefix, .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 field=\"countryCode\" :rules=\"[{ required: true, message: '国家为必填' }]\" :validate-trigger=\"['change']\"\n            hide-asterisk>\n            <a-select v-model=\"formData.countryCode\" :options=\"concatCountryList\" :style=\"{ width: '130px' }\"\n              placeholder=\"请选择国家\" />\n          </a-form-item>\n          <a-form-item field=\"amount\" :rules=\"[\n            { required: true, message: '年度薪资为必填' },\n            { type: 'number', maxLength: 6, max: 1000000, message: '年度薪资不能大于100万' },\n            { type: 'number', min: 0, message: '年度薪资不能小于0' },\n          ]\" :validate-trigger=\"['change']\" hide-asterisk model-event=\"input\">\n            <a-input v-model=\"formData.amount\" :style=\"{ width: '200px' }\" placeholder=\"请输入薪资\" />\n          </a-form-item>\n          <a-button type=\"primary\" @click=\"handleCalc\">\n            开始计算\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';\n\nconst formRef = ref<FormInstance | null>(null);\nconst concatCountryList = computed(() => {\n  if (props.showDeelCountry) {\n    return countryList.concat(deelCountryList).map(item => ({\n      label: item.desc,\n      value: item.code,\n    }));\n  } else {\n    return countryList.map(item => ({\n      label: item.desc,\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":["route","useRoute","btnLoading","ref","formData","reactive","concatCountryList","computed","props","countryList","deelCountryList","formRef","handleCalc","_a","countryName","_c","_b","c","useLogger","navigateTo","onMounted","item"],"mappings":"4lCAmDAA,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,CACEhB,EAAA,OAAA,OAAAJ,EAAA,MAAA,MAAA,GAAA,OACAI,EAAA,YAAAJ,EAAA,MAAA,aAAA,EAA4D,CAAA,szDChD9DW,EAAAR,EAAA,IAAA,EACAG,EAAAC,EAAA,IACEC,EAAA,gBACEC,EAAA,OAAAC,CAAA,EAAA,IAAAW,IAAA,CAAwD,MAAAA,EAAA,KAC1C,MAAAA,EAAA,IACA,EAAA,EAGdZ,EAAA,IAAAY,IAAA,CAAgC,MAAAA,EAAA,KAClB,MAAAA,EAAA,IACA,EAAA,CAEhB,EAUFrB,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"}