{"version":3,"file":"aD8KhjUL.js","sources":["../../../../components/tariffs-page/TariffsTable.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"tariffs && tariffs.length\"\n    class=\"t-table white--bg\"\n  >\n    <div class=\"container\">\n      <h2 class=\"tariffs-table__title headline-2\">\n        {{ textAggReplace(title, { ...getAddressText, cityOnlyLoc: houseUrl ? ' по вашему адресу' : getAddressText.cityOnlyLoc }, { ...textAgg, tariffsAgg: { ...textAgg.tariffsAgg, availableProviders: providers }, groupedTariffs: { ...textAgg.groupedTariffs, popularProviders: { data: providers.map(el => { return { provider: el } }).filter((e, i) => i < 3) }, cheapestProviders: { data: providers.map(el => { return { provider: el } }).filter((e, i) => i < 3) } } }) }}\n        <!--      <template v-if=\"(title.includes('%CITY_LOC%') || title.includes('%CITY%')) && !houseUrl\"> -->\n        <!--        <span class=\"secondary-dark&#45;&#45;text\" @click=\"showDialogCity\">{{ getAddressText.cityOnlyLoc }}</span> -->\n        <!--      </template> -->\n      </h2>\n      <p\n        class=\"tariffs-table__subtitle title-5\"\n        v-html=\"textAggReplace(subtitle, { ...getAddressText, cityOnlyLoc: houseUrl ? ' по вашему адресу' : getAddressText.cityOnlyLoc }, { ...textAgg, tariffsAgg: { ...textAgg.tariffsAgg, availableProviders: providers }, groupedTariffs: { ...textAgg.groupedTariffs, popularProviders: { data: providers.map(el => { return { provider: el } }).filter((e, i) => i < 3) }, cheapestProviders: { data: providers.map(el => { return { provider: el } }).filter((e, i) => i < 3) } } })\"\n      />\n      <div class=\"tariffs-table__wrap\">\n        <table class=\"tariffs-table\">\n          <thead>\n            <tr class=\"title-5\">\n              <td>Тариф, провайдер</td>\n              <td\n                v-for=\"column in columns\"\n                :key=\"'header' + column.value\"\n              >\n                {{ column.title }}\n              </td>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              v-for=\"(tariff, index) in tariffs.filter((e, i) => i < showTariffs)\"\n              :key=\"tariff.id + index\"\n            >\n              <td class=\"title-5\">\n                <p>{{ tariff.provider.name }}</p>\n                <span\n                  class=\"gray-dark--text text-no-wrap hidden\"\n                  style=\"max-width: 180px\"\n                >{{ tariff.name }}</span>\n              </td>\n              <template v-for=\"column in columns\">\n                <td\n                  v-if=\"column.value === 'price'\"\n                  :key=\"tariff.id + column.value\"\n                  class=\"title-4\"\n                >\n                  <template v-if=\"tariff.payment.promoDisplayPercents\">\n                    <span class=\"subhead-6 gray-dark--text\">{{ tariff.payment.promoDisplayPercents }}</span>\n                    <p>{{ tariff.payment.promoPrice + ' ₽/мес' }} <span class=\"title-5 crossed\">{{ tariff.payment.price }} ₽</span></p>\n                  </template>\n                  <p v-else>\n                    {{ tariff.payment.price + ' ₽/мес' }}\n                  </p>\n                </td>\n                <td\n                  v-else\n                  :key=\"tariff.id + column.value\"\n                  class=\"title-5\"\n                >\n                  {{ column.value === 'internet' ? tariff.services.internetSpeed + ' Мбит/с' : column.value === 'tv' ? (tariff.services.tvChannelsCount ? tariff.services.tvChannelsCount + ' Кн.' : '') : column.value === 'mobile' ? (tariff.services.mobileGigabytes ? tariff.services.mobileGigabytes + ' Гб' + (tariff.services.mobileMinutes ? ' ' + tariff.services.mobileMinutes + ' Мин.' : '') : '') : column }}\n                </td>\n              </template>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <p\n        v-if=\"!houseUrl\"\n        class=\"t-table__subtable title-5\"\n      >\n        <button\n          class=\"secondary-dark--text relative\"\n          @click=\"showDialogAddress\"\n        >\n          <img\n            loading=\"lazy\"\n            src=\"@/assets/images/svg/info_sec.svg\"\n            alt=\"info\"\n          >Узнайте\n        </button>, какие тарифы доступны для подключения в вашем доме\n      </p>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { textAggReplace } from '~/helpers'\nimport { useCities } from '~/store/cites/cities.store'\n\nconst props = defineProps({\n  tariffs: {},\n  title: {\n    type: String,\n  },\n  subtitle: {\n    type: String,\n  },\n  textAgg: {},\n})\n\nconst showTariffs = ref(3)\nconst ctx = useNuxtApp()\nconst cityStore = useCities()\nconst getAddressText = computed(() => cityStore.getAddressText)\nconst houseUrl = computed(() => cityStore.getHouseUrl)\nconst columnsRef = ref([\n  {\n    title: 'Абонентская плата',\n    value: 'price',\n  },\n  {\n    title: 'Интернет',\n    value: 'internet',\n  },\n  {\n    title: 'Телевидение',\n    value: 'tv',\n  },\n  {\n    title: 'Моб. связь',\n    value: 'mobile',\n  },\n])\nconst columns = computed(() => {\n  const columnShow = {\n    price: true,\n    internet: true,\n    tv: !!props.tariffs?.filter(el => el.services.tvChannelsCount).length,\n    mobile: !!props.tariffs?.filter(el => el.services.mobileGigabytes).length,\n  }\n  return columnsRef.value.filter(el => columnShow[el.value])\n})\nconst showDialogAddress = () => {\n  ctx.$event('addressDialog', { redirect: true, label: 'tariffs-table' })\n}\n\nconst providers = computed(() => {\n  const arr = props.tariffs?.map(el => el.provider)\n  const providers = arr.filter((el, i) => i === arr.indexOf(arr.find(e => e.id === el.id)))\n  return providers\n})\n</script>\n\n<style scoped lang=\"scss\">\n.t-table {\n  padding-top: 48px;\n  padding-bottom: 48px;\n  @media (max-width: getBreakpoint(tablet)) {\n    padding-top: 40px;\n    padding-bottom: 36px;\n  }\n  &__subtable {\n    margin-top: 16px;\n    button {\n      transition: color .24s;\n      padding-left: 28px;\n      &:hover {\n        color: color(primary);\n      }\n    }\n    img {\n      margin-right: 4px;\n      position: absolute;\n      left: 0;\n      top: -2px;\n      width: 24px;\n      height: 24px;\n    }\n  }\n}\n.tariffs-table {\n  border-spacing: 0;\n  border-radius: 16px;\n  overflow: hidden;\n  width: 100%;\n  @media (max-width: getBreakpoint(tablet)) {\n    border-radius: 12px;\n  }\n\n  &__title {\n    margin-bottom: 8px;\n  }\n  &__subtitle {\n    margin-bottom: 24px;\n    @media (max-width: getBreakpoint(tablet)) {\n      margin-bottom: 16px;\n    }\n  }\n\n  td {\n    height: 60px;\n    padding: 0 24px;\n    white-space: nowrap !important;\n    .crossed {\n      margin-left: 4px;\n      position: relative;\n      &:after {\n        content: '';\n        position: absolute;\n        left: -2px;\n        right: -2px;\n        height: 1px;\n        background-color: color(gray-dark);\n        top: 50%;\n      }\n    }\n    p {\n      text-overflow: ellipsis;\n    }\n    a, button {\n      transition: color .24s;\n      .d-icon {\n        transition: color .24s;\n      }\n      &:hover {\n        color: color(primary);\n        .d-icon {\n          color: color(primary);\n        }\n      }\n    }\n  }\n  thead {\n    background: #686868;\n    color: color(white);\n  }\n  tbody {\n    tr:nth-child(odd) {\n      background: color(gray-light-3);\n    }\n    tr:nth-child(even) {\n      background: color(white);\n    }\n    tr:not(:last-child) {\n      td:first-child {\n        border-left: 1px solid color(gray-light-3);\n      }\n      td:last-child {\n        border-right: 1px solid color(gray-light-3);\n      }\n    }\n    tr:last-child {\n      td {\n        border-bottom: 1px solid color(gray-light-3);\n      }\n      td:first-child {\n        border-left: 1px solid color(gray-light-3);\n        border-radius: 0 0 0 16px;\n        @media (max-width: getBreakpoint(tablet)) {\n          border-radius: 0 0 0 12px;\n        }\n      }\n      td:last-child {\n        border-right: 1px solid color(gray-light-3);\n        border-radius: 0 0 16px 0;\n        @media (max-width: getBreakpoint(tablet)) {\n          border-radius: 0 0 12px 0;\n        }\n      }\n    }\n  }\n\n  &__wrap {\n    overflow-x: auto;\n    scrollbar-width: 5px;\n    &::-webkit-scrollbar {\n      width: 0;\n      height: 5px;\n      background-color: color(gray-light-3);\n    }\n  }\n}\n</style>\n"],"names":["props","__props","showTariffs","ref","ctx","useNuxtApp","cityStore","useCities","getAddressText","computed","houseUrl","columnsRef","columns","columnShow","_a","el","_b","showDialogAddress","providers","arr","i","e"],"mappings":"6tBA0FA,MAAMA,EAAQC,EAWRC,EAAcC,EAAI,CAAC,EACnBC,EAAMC,EAAW,EACjBC,EAAYC,EAAU,EACtBC,EAAiBC,EAAS,IAAMH,EAAU,cAAc,EACxDI,EAAWD,EAAS,IAAMH,EAAU,WAAW,EAC/CK,EAAaR,EAAI,CACrB,CACE,MAAO,oBACP,MAAO,OACT,EACA,CACE,MAAO,WACP,MAAO,UACT,EACA,CACE,MAAO,cACP,MAAO,IACT,EACA,CACE,MAAO,aACP,MAAO,QAAA,CACT,CACD,EACKS,EAAUH,EAAS,IAAM,SAC7B,MAAMI,EAAa,CACjB,MAAO,GACP,SAAU,GACV,GAAI,CAAC,GAACC,EAAAd,EAAM,UAAN,MAAAc,EAAe,OAAaC,GAAAA,EAAG,SAAS,iBAAiB,QAC/D,OAAQ,CAAC,GAACC,EAAAhB,EAAM,UAAN,MAAAgB,EAAe,OAAaD,GAAAA,EAAG,SAAS,iBAAiB,OACrE,EACA,OAAOJ,EAAW,MAAM,UAAaE,EAAWE,EAAG,KAAK,CAAC,CAAA,CAC1D,EACKE,EAAoB,IAAM,CAC9Bb,EAAI,OAAO,gBAAiB,CAAE,SAAU,GAAM,MAAO,gBAAiB,CACxE,EAEMc,EAAYT,EAAS,IAAM,OAC/B,MAAMU,GAAML,EAAAd,EAAM,UAAN,YAAAc,EAAe,IAAIC,GAAMA,EAAG,UAEjCG,OADWC,EAAI,OAAO,CAACJ,EAAIK,IAAMA,IAAMD,EAAI,QAAQA,EAAI,KAAUE,GAAAA,EAAE,KAAON,EAAG,EAAE,CAAC,CAAC,CACjF,CACR"}