{"version":3,"sources":["webpack:///./src/components/commons/ListItem.vue?73be","webpack:///src/components/commons/ListItem.vue","webpack:///./src/components/commons/ListItem.vue?724f","webpack:///./src/components/commons/ListItem.vue","webpack:///./src/components/commons/ListItem.vue?545c","webpack:///./src/components/miniapp/home/FollowingList.vue?12e8","webpack:///src/components/miniapp/home/FollowingList.vue","webpack:///./src/components/miniapp/home/FollowingList.vue?a5dd","webpack:///./src/components/miniapp/home/FollowingList.vue","webpack:///./src/components/miniapp/home/FollowingList.vue?b0fb"],"names":["render","_vm","this","_h","$createElement","_c","_self","class","showBadge","attrs","dataAction","dataListname","dataStockname","dataFundname","on","$event","action","query","staticClass","_v","_s","index","_e","type","goldStyle","name","_f","date","color","change","period","price","staticRenderFns","props","String","default","Number","Function","Object","Boolean","computed","methods","filters","calendar","timestamp","currency","arg1","toNumber","minimumFractionDigits","maximumFractionDigits","percent","val","parseFloat","toFixed","component","getAllWatchlist","length","_m","getCountWatchlistAsset","count","topStockWatchlist","_l","stock","key","id","data_date","navigateToStock","topFundWatchlist","fund","navigateToFund","getGoldWatchlist","item","navigateToGold","assign","isActiveTab","slot","getActiveTab","viewAll","components","ListItem","Tab","Tabs","BoxAsset","data","page","defaultSize","pageOffset","objPeriod","watch","$router","replace","navigateTo","push"],"mappings":"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","file":"js/chunk-372aca3e.09f1fc48.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[_vm.showBadge ? 'list-item list-badge' : 'list-item'],attrs:{\"data-action\":_vm.dataAction,\"data-listname\":_vm.dataListname,\"data-stockname\":_vm.dataStockname,\"data-fundname\":_vm.dataFundname},on:{\"click\":function($event){return _vm.action(_vm.query)}}},[(_vm.index)?_c('div',{staticClass:\"index vertical-center\"},[_vm._v(_vm._s(_vm.index))]):_vm._e(),(_vm.showBadge)?_c('div',{staticClass:\"small-left vertical-center\"},[_c('div',{staticClass:\"badge\"},[_vm._v(_vm._s(_vm.query.type))])]):_vm._e(),_c('div',{staticClass:\"left vertical-center\",class:_vm.goldStyle},[_c('h3',[_vm._v(_vm._s(_vm.name))]),_c('p',[_c('i',{staticClass:\"far fa-clock\"}),_vm._v(\" \"+_vm._s(_vm._f(\"calendar\")(_vm.date))+\" \")])]),_c('div',{staticClass:\"middle vertical-center\",class:_vm.goldStyle},[_c('h4',{class:_vm.color},[_vm._v(_vm._s(_vm._f(\"percent\")(_vm.change)))]),_c('p',[_vm._v(_vm._s(_vm.period))])]),_c('div',{staticClass:\"right vertical-center\",class:_vm.goldStyle},[_c('div',{staticClass:\"row\"},[_c('h4',[_vm._v(_vm._s(_vm._f(\"currency\")(_vm.price,_vm.dataAction))+\" ฿\")]),_c('i',{staticClass:\"fas fa-chevron-right\"})])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div\n    :class=\"[showBadge ? 'list-item list-badge' : 'list-item']\"\n    :data-action=\"dataAction\"\n    :data-listname=\"dataListname\"\n    :data-stockname=\"dataStockname\"\n    :data-fundname=\"dataFundname\"\n    @click=\"action(query)\"\n  >\n    <div v-if=\"index\" class=\"index vertical-center\">{{ index }}</div>\n    <div v-if=\"showBadge\" class=\"small-left vertical-center\">\n      <div class=\"badge\">{{query.type}}</div>\n    </div>\n    <div class=\"left vertical-center\" :class=\"goldStyle\">\n      <h3>{{ name }}</h3>\n      <p>\n        <i class=\"far fa-clock\"></i>\n        {{ date | calendar }}\n      </p>\n    </div>\n    <div class=\"middle vertical-center\" :class=\"goldStyle\">\n      <h4 :class=\"color\">{{ change | percent }}</h4>\n      <p>{{ period }}</p>\n    </div>\n    <div class=\"right vertical-center\" :class=\"goldStyle\">\n      <div class=\"row\">\n        <h4>{{ price | currency(dataAction) }} ฿</h4>\n        <i class=\"fas fa-chevron-right\"></i>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport moment from \"moment\"\n\nexport default {\n  name: \"list-item\",\n  props: {\n    name: {\n      type: String,\n      default: \"loading\"\n    },\n    dataFundname: {\n      type: String,\n      default: null\n    },\n    dataStockname: {\n      type: String,\n      default: null\n    },\n    dataListname: {\n      type: String,\n      default: null\n    },\n    dataAction: {\n      type: String,\n      default: null\n    },\n    date: {\n      type: String,\n      default: null\n    },\n    change: {\n      type: [Number, String],\n      default: null\n    },\n    period: {\n      type: String,\n      default: \"\"\n    },\n    price: {\n      type: [Number, String],\n      default: null\n    },\n    action: {\n      type: Function\n    },\n    query: {\n      type: Object\n    },\n    index: {\n      type: Number\n    },\n    showBadge: {\n      type: Boolean,\n      default: false\n    },\n    goldStyle: {\n      type: String,\n      default: \"\"\n    }\n  },\n  computed: {\n    color: function() {\n      if (this.change > 0) {\n        return { green: true }\n      } else if (this.change < 0) {\n        return { red: true }\n      }\n\n      return { normal: true }\n    }\n  },\n  methods: {},\n  filters: {\n    calendar(timestamp) {\n      if (timestamp) {\n        return moment(timestamp).format(\"DD/MM/YY\")\n      }\n      return \"\"\n    },\n    currency: function(val,arg1) {\n      let toNumber = parseFloat(val)\n      if (arg1 == \"open_fund\") {\n        return toNumber\n        .toLocaleString(\"th\", {\n          minimumFractionDigits: 4,\n          maximumFractionDigits: 4\n        })\n      } else {\n        return toNumber\n        .toLocaleString(\"th\", {\n          minimumFractionDigits: 2,\n          maximumFractionDigits: 2\n        })\n        .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")\n      }\n    },\n    percent: function(val) {\n      if (val > 0) {\n        return \"+\" + parseFloat(val).toFixed(2) + \" %\"\n      }\n\n      return parseFloat(val).toFixed(2) + \" %\"\n    }\n  }\n}\n</script>\n\n<style lang='scss' scoped>\n.list-item {\n  display: flex;\n  justify-content: space-between;\n  color: $color-normal-text;\n  height: 67px;\n  position: relative;\n  padding-left: 16px;\n  pointer-events: auto;\n\n  .badge {\n    @extend %font-size-ss;\n    text-transform: uppercase;\n    transform: rotate(-90deg);\n    color: #d1d1d1;\n    font-weight: bold;\n    pointer-events: none;\n    text-align: center;\n    width: 64px;\n    position: absolute;\n    left: -16px;\n  }\n\n  .index {\n    color: $color-secondary;\n    @extend %font-size-m;\n    pointer-events: none;\n    margin-right: 14px;\n    font-weight: bold;\n  }\n\n  border-bottom-right-radius: 4px;\n  border-bottom-left-radius: 4px;\n  box-shadow: 0 0 4px 0 rgba(186, 186, 186, 0.24), 0 0 6px 0 rgba(228, 232, 234, 0);\n  background-color: $base-white;\n\n  .vertical-center {\n    pointer-events: none;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  .small-left {\n    pointer-events: none;\n    background-color: #f9f9f9;\n    width: 10%;\n    margin-right: 16px;\n  }\n  .left {\n    pointer-events: none;\n    width: 32%;\n    p {\n      @extend %font-size-ss;\n      color: $color-secondary-text;\n    }\n  }\n\n  .middle {\n    pointer-events: none;\n    width: 20%;\n    text-align: center;\n    p {\n      color: $color-secondary-text;\n    }\n  }\n\n  .gold-style {\n    pointer-events: none;\n    h3 {\n      @extend %font-size-ss;\n    }\n    h4 {\n      @extend %font-size-ss;\n    }\n  }\n\n  .right {\n    pointer-events: none;\n    width: 38%;\n    display: flex;\n    text-align: right;\n\n    .row {\n      h4 {\n        font-weight: normal;\n        display: inline-block;\n      }\n      i {\n        font-weight: normal;\n        display: inline-block;\n        // iphone 5\n        @media screen and (device-aspect-ratio: 40/71) {\n          margin-left: 10px;\n          margin-right: 10px;\n        }\n        margin-left: 18px;\n        margin-right: 16px;\n        color: $color-light-grey-2;\n        font-size: 12px;\n      }\n    }\n  }\n}\n\nh3 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  @extend %font-size-s;\n  margin: 0px;\n}\n\nh4 {\n  margin: 0px;\n  @extend %font-size-s;\n}\n\np {\n  margin: 0px;\n  @extend %font-size-ss;\n}\n\n.green {\n  color: $color-plus;\n}\n\n.red {\n  color: $color-minus;\n}\n\n.list-item:last-child {\n  border-bottom: none;\n}\n\n.list-badge {\n  padding-left: 0px !important;\n  margin: 16px 0;\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ListItem.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ListItem.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ListItem.vue?vue&type=template&id=64bc8952&scoped=true&\"\nimport script from \"./ListItem.vue?vue&type=script&lang=js&\"\nexport * from \"./ListItem.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ListItem.vue?vue&type=style&index=0&id=64bc8952&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"64bc8952\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ListItem.vue?vue&type=style&index=0&id=64bc8952&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ListItem.vue?vue&type=style&index=0&id=64bc8952&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.getAllWatchlist && _vm.getAllWatchlist.length)?_c('div',{attrs:{\"id\":\"following\"}},[_vm._m(0),(_vm.getCountWatchlistAsset.count === 1)?_c('div',[(_vm.topStockWatchlist && _vm.topStockWatchlist.length)?_c('div',{staticClass:\"one-item-list\"},[_c('div',{staticClass:\"one-item-list__title\"},[_vm._v(\"หุ้น\")]),_vm._l((_vm.topStockWatchlist),function(stock,index){return _c('list-item',{key:stock.id,attrs:{\"data-action\":'open_stock',\"data-listname\":'home_following_stock',\"data-stockname\":stock.name,\"index\":index + 1,\"name\":stock.name,\"date\":stock.data_date,\"period\":'1 Day',\"price\":stock.price,\"change\":stock.percent,\"action\":_vm.navigateToStock,\"query\":{name: stock.name}}})})],2):_vm._e(),(_vm.topFundWatchlist && _vm.topFundWatchlist.length)?_c('div',{staticClass:\"one-item-list\"},[_c('div',{staticClass:\"one-item-list__title\"},[_vm._v(\"กองทุน\")]),_vm._l((_vm.topFundWatchlist),function(fund,index){return _c('list-item',{key:fund.id,attrs:{\"data-action\":'open_fund',\"data-listname\":'home_following_fund',\"data-fundname\":fund.name,\"index\":index + 1,\"name\":fund.name,\"date\":fund.data_date,\"period\":'1 Day',\"price\":fund.price,\"change\":fund.percent,\"action\":_vm.navigateToFund,\"query\":{id:fund.id}}})})],2):_vm._e(),(_vm.getGoldWatchlist && _vm.getGoldWatchlist.length)?_c('div',{staticClass:\"one-item-list\"},[_c('div',{staticClass:\"one-item-list__title\"},[_vm._v(\"ทอง\")]),_vm._l((_vm.getGoldWatchlist),function(item){return _c('BoxAsset',{key:item.id,staticClass:\"one-item-list__content\",attrs:{\"data-action\":'open_gold',\"data-listname\":'following_gold',\"data-assettype\":'gold',\"data-assetname\":item.name,\"item\":item,\"action\":_vm.navigateToGold,\"query\":Object.assign({}, item)}})})],2):_vm._e()]):_c('tabs',{staticClass:\"modal-item-list\",attrs:{\"slot\":\"body\"},on:{\"is-active\":_vm.isActiveTab},slot:\"body\"},[(_vm.topFundWatchlist && _vm.topFundWatchlist.length)?_c('tab',{attrs:{\"name\":\"กองทุน\",\"data-tab\":\"home_following_fund\",\"selected\":_vm.getActiveTab === 'fund' ? true : false}},_vm._l((_vm.topFundWatchlist),function(fund,index){return _c('list-item',{key:fund.id,attrs:{\"data-action\":'open_fund',\"data-listname\":'home_following_fund',\"data-fundname\":fund.name,\"index\":index + 1,\"name\":fund.name,\"date\":fund.data_date,\"period\":'1 Day',\"price\":fund.price,\"change\":fund.percent,\"action\":_vm.navigateToFund,\"query\":{id:fund.id}}})}),1):_vm._e(),(_vm.topStockWatchlist && _vm.topStockWatchlist.length)?_c('tab',{attrs:{\"name\":\"หุ้น\",\"data-tab\":\"home_following_stock\",\"selected\":_vm.getActiveTab === 'stock' ? true : false}},_vm._l((_vm.topStockWatchlist),function(stock,index){return _c('list-item',{key:stock.id,attrs:{\"data-action\":'open_stock',\"data-listname\":'home_following_stock',\"data-stockname\":stock.name,\"index\":index + 1,\"name\":stock.name,\"date\":stock.data_date,\"period\":'1 Day',\"price\":stock.price,\"change\":stock.percent,\"action\":_vm.navigateToStock,\"query\":{name: stock.name}}})}),1):_vm._e(),_c('tab',{attrs:{\"name\":\"ทอง\",\"data-tab\":\"home_following_gold\",\"selected\":_vm.getActiveTab === 'gold' ? true : false}},_vm._l((_vm.getGoldWatchlist),function(item){return _c('BoxAsset',{key:item.id,staticClass:\"modal-item-list-tab\",attrs:{\"data-action\":'open_gold',\"data-listname\":'home_following_gold',\"data-assettype\":'gold',\"data-assetname\":item.name,\"item\":item,\"action\":_vm.navigateToGold,\"query\":Object.assign({}, item)}})}),1)],1),_c('div',{attrs:{\"id\":\"view-all\"}},[_c('a',{staticClass:\"view-indice\",attrs:{\"href\":\"javascript:;\",\"data-action\":\"view_all_following\"},on:{\"click\":function($event){return _vm.viewAll()}}},[_vm._v(\"ดูทั้งหมด\")])])],1):_vm._e()}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('h2',{staticClass:\"header\"},[_c('i',{staticClass:\"fa fa-star\"}),_vm._v(\" สินทรัพย์ที่ติดตาม \")])}]\n\nexport { render, staticRenderFns }","<template>\n  <div id=\"following\" v-if=\"getAllWatchlist && getAllWatchlist.length\">\n    <h2 class=\"header\">\n      <i class=\"fa fa-star\"></i>\n      สินทรัพย์ที่ติดตาม\n    </h2>\n    <div v-if=\"getCountWatchlistAsset.count === 1\">\n      <div class=\"one-item-list\" v-if=\"topStockWatchlist && topStockWatchlist.length\">\n        <div class=\"one-item-list__title\">หุ้น</div>\n        <list-item\n          v-for=\"(stock,index) in topStockWatchlist\"\n          :data-action=\"'open_stock'\"\n          :data-listname=\"'home_following_stock'\"\n          :data-stockname=\"stock.name\"\n          :key=\"stock.id\"\n          :index=\"index + 1\"\n          :name=\"stock.name\"\n          :date=\"stock.data_date\"\n          :period=\"'1 Day'\"\n          :price=\"stock.price\"\n          :change=\"stock.percent\"\n          :action=\"navigateToStock\"\n          :query=\"{name: stock.name}\"\n        ></list-item>\n      </div>\n      <div class=\"one-item-list\" v-if=\"topFundWatchlist && topFundWatchlist.length\">\n        <div class=\"one-item-list__title\">กองทุน</div>\n        <list-item\n          v-for=\"(fund,index) in topFundWatchlist\"\n          :data-action=\"'open_fund'\"\n          :data-listname=\"'home_following_fund'\"\n          :data-fundname=\"fund.name\"\n          :key=\"fund.id\"\n          :index=\"index + 1\"\n          :name=\"fund.name\"\n          :date=\"fund.data_date\"\n          :period=\"'1 Day'\"\n          :price=\"fund.price\"\n          :change=\"fund.percent\"\n          :action=\"navigateToFund\"\n          :query=\"{id:fund.id}\"\n        ></list-item>\n      </div>\n      <div class=\"one-item-list\" v-if=\"getGoldWatchlist && getGoldWatchlist.length\">\n        <div class=\"one-item-list__title\">ทอง</div>\n        <BoxAsset\n          :data-action=\"'open_gold'\"\n          :data-listname=\"'following_gold'\"\n          :data-assettype=\"'gold'\"\n          :data-assetname=\"item.name\"\n          class=\"one-item-list__content\"\n          v-for=\"item in getGoldWatchlist\"\n          :key=\"item.id\"\n          :item=\"item\"\n          :action=\"navigateToGold\"\n          :query=\"{...item}\"\n        />\n      </div>\n    </div>\n    <tabs v-else @is-active=\"isActiveTab\" class=\"modal-item-list\" slot=\"body\">\n      <tab\n        v-if=\"topFundWatchlist && topFundWatchlist.length\"\n        name=\"กองทุน\"\n        data-tab=\"home_following_fund\"\n        :selected=\"getActiveTab === 'fund' ? true : false\"\n      >\n        <list-item\n          v-for=\"(fund,index) in topFundWatchlist\"\n          :data-action=\"'open_fund'\"\n          :data-listname=\"'home_following_fund'\"\n          :data-fundname=\"fund.name\"\n          :key=\"fund.id\"\n          :index=\"index + 1\"\n          :name=\"fund.name\"\n          :date=\"fund.data_date\"\n          :period=\"'1 Day'\"\n          :price=\"fund.price\"\n          :change=\"fund.percent\"\n          :action=\"navigateToFund\"\n          :query=\"{id:fund.id}\"\n        ></list-item>\n      </tab>\n      <tab\n        v-if=\"topStockWatchlist && topStockWatchlist.length\"\n        name=\"หุ้น\"\n        data-tab=\"home_following_stock\"\n        :selected=\"getActiveTab === 'stock' ? true : false\"\n      >\n        <list-item\n          v-for=\"(stock,index) in topStockWatchlist\"\n          :data-action=\"'open_stock'\"\n          :data-listname=\"'home_following_stock'\"\n          :data-stockname=\"stock.name\"\n          :key=\"stock.id\"\n          :index=\"index + 1\"\n          :name=\"stock.name\"\n          :date=\"stock.data_date\"\n          :period=\"'1 Day'\"\n          :price=\"stock.price\"\n          :change=\"stock.percent\"\n          :action=\"navigateToStock\"\n          :query=\"{name: stock.name}\"\n        ></list-item>\n      </tab>\n      <tab name=\"ทอง\" data-tab=\"home_following_gold\" :selected=\"getActiveTab === 'gold' ? true : false\">\n        <BoxAsset\n          :data-action=\"'open_gold'\"\n          :data-listname=\"'home_following_gold'\"\n          :data-assettype=\"'gold'\"\n          :data-assetname=\"item.name\"\n          class=\"modal-item-list-tab\"\n          v-for=\"item in getGoldWatchlist\"\n          :key=\"item.id\"\n          :item=\"item\"\n          :action=\"navigateToGold\"\n          :query=\"{...item}\"\n        />\n      </tab>\n    </tabs>\n\n    <div id=\"view-all\">\n      <a href=\"javascript:;\" data-action=\"view_all_following\" @click=\"viewAll()\" class=\"view-indice\">ดูทั้งหมด</a>\n    </div>\n  </div>\n</template>\n\n<script>\nimport _orderBy from 'lodash/orderBy'\nimport ListItem from '../../commons/ListItem'\nimport Tab from '../../commons/Tab'\nimport Tabs from '../../commons/Tabs'\nimport { mapGetters, mapActions } from 'vuex'\nimport { BoxAsset } from '../../organisms'\n\nexport default {\n  components: {\n    ListItem,\n    Tab,\n    Tabs,\n    BoxAsset\n  },\n  data() {\n    return {\n      page: 20,\n      defaultSize: 10,\n      pageOffset: 1,\n      objPeriod: {\n        '1D': '1 Day',\n        '1W': '1 Week',\n        '1M': '1 Month',\n        '3M': '3 Months',\n        '6M': '6 Months',\n        '1Y': '1 Year',\n        '3Y': '3 Years',\n        '5Y': '5 Years',\n        '10Y': '10 Years'\n      }\n    }\n  },\n  watch: {\n    async getIslogin() {\n      if (this.getIslogin) {\n        await this.findWatchlist('fund')\n        await this.findWatchlist('stock')\n        await this.findWatchlist('gold')\n      }\n    }\n  },\n  computed: {\n    ...mapGetters('watchlist', [\n      'getCountWatchlistAsset',\n      'getAllWatchlist',\n      'getFundWatchlist',\n      'getStockWatchlist',\n      'getGoldWatchlist'\n    ]),\n    topFundWatchlist() {\n      return _orderBy(\n        this.getFundWatchlist,\n        item => {\n          return new Number(item.percent)\n        },\n        ['desc']\n      ).slice(0, 3)\n    },\n    topStockWatchlist() {\n      return _orderBy(\n        this.getStockWatchlist,\n        item => {\n          return new Number(item.percent)\n        },\n        ['desc']\n      ).slice(0, 3)\n    },\n    getActiveTab() {\n      return this.getCountWatchlistAsset.type[0]\n    }\n  },\n  methods: {\n    ...mapGetters('auth', ['getIslogin']),\n    ...mapActions('watchlist', ['findWatchlist']),\n    ...mapActions('gold', ['findGoldTraderPresent', 'findGoldSpotPreviousClose']),\n    ...mapActions('stock', ['findStockQuote']),\n    viewAll() {\n      this.$router.replace({ name: 'miniapp-watch-list' })\n    },\n    navigateTo({ id, name, type }) {\n      switch (type) {\n        case 'fund':\n          this.$router.push({ name: 'miniapp-fund-quote', query: { id: id } })\n          break\n        case 'stock':\n          this.$router.push({\n            name: 'miniapp-stock-quote',\n            query: { name: name }\n          })\n          break\n        case 'indice':\n          this.$router.push({\n            name: 'miniapp-indices-quote',\n            query: { name: name }\n          })\n          break\n        case 'gold':\n          this.$router.push({\n            name: 'miniapp-indices-gold'\n          })\n          break\n        default:\n          this.$router.push({ name: 'miniapp-market' })\n          break\n      }\n    },\n    navigateToGold({ name }) {\n      switch (name) {\n        case 'spot':\n          this.$router.push({ name: 'miniapp-market-gold-spot' })\n          break\n        default:\n          this.$router.push({ name: 'miniapp-market-gold-trader' })\n          break\n      }\n    },\n    navigateToFund(query) {\n      this.$router.push({ name: 'miniapp-fund-quote', query: query })\n    },\n    async navigateToStock(query) {\n      const hasInfo = await this.findStockQuote(query.name)\n      hasInfo\n        ? this.$router.push({\n            name: 'miniapp-stock-quote',\n            query: query\n          })\n        : null\n    },\n    async isActiveTab(val) {\n      if (val === 'ทอง' && this.getGoldWatchlist.length) {\n        await this.findGoldTraderPresent()\n        await this.findGoldSpotPreviousClose('C:XAUUSD')\n      }\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#following {\n  .header {\n    i {\n      color: $color-normal-text;\n    }\n    display: inline-block;\n    @extend %font-size-m;\n    font-weight: bold;\n    color: $color-normal-text;\n  }\n  .modal-item-list {\n    margin-top: 8px;\n    box-shadow: 0 0 4px 0 rgba(186, 186, 186, 0.34), 0 0 6px 0 rgba(228, 232, 234, 0);\n    .modal-item-list-tab {\n      padding: 8px 16px;\n      border: 1px solid #efefef;\n    }\n  }\n  .one-item-list {\n    &__title {\n      margin-top: 8px;\n      padding: 8px 16px;\n      box-shadow: 0 0 4px 0 rgba(186, 186, 186, 0.34), 0 0 6px 0 rgba(228, 232, 234, 0);\n      border-top-left-radius: 4px;\n      border-top-right-radius: 4px;\n      @extend %font-size-s;\n      font-weight: bold;\n    }\n    &__content {\n      border-bottom-right-radius: 4px;\n      border-bottom-left-radius: 4px;\n      padding: 16px;\n      box-shadow: 0 0 4px 0 rgba(186, 186, 186, 0.24), 0 0 6px 0 rgba(228, 232, 234, 0);\n      background-color: $base-white;\n    }\n    i {\n      pointer-events: none;\n    }\n  }\n  #view-all {\n    margin-top: 16px;\n    text-align: center;\n    a {\n      text-decoration: none;\n      border-bottom: 1px solid #999999;\n      @extend %font-size-ss;\n      font-weight: bold;\n      font-style: normal;\n      line-height: normal;\n      letter-spacing: normal;\n      text-align: center;\n      color: #999999;\n    }\n  }\n}\n</style>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FollowingList.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FollowingList.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./FollowingList.vue?vue&type=template&id=7e07496b&scoped=true&\"\nimport script from \"./FollowingList.vue?vue&type=script&lang=js&\"\nexport * from \"./FollowingList.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FollowingList.vue?vue&type=style&index=0&id=7e07496b&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"7e07496b\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FollowingList.vue?vue&type=style&index=0&id=7e07496b&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FollowingList.vue?vue&type=style&index=0&id=7e07496b&lang=scss&scoped=true&\""],"sourceRoot":""}