{"id":1225,"date":"2023-07-18T15:31:22","date_gmt":"2023-07-18T07:31:22","guid":{"rendered":"https:\/\/www.taiwansemi.com\/zh_cn\/?page_id=1225"},"modified":"2023-07-18T15:33:04","modified_gmt":"2023-07-18T07:33:04","slug":"product-filter","status":"publish","type":"page","link":"http:\/\/www.taiwansemi.com\/zh_cn\/product-filter\/","title":{"rendered":"Product Filter"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1225\" class=\"elementor elementor-1225\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-92e009a e-con-full e-flex e-con e-parent\" data-id=\"92e009a\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;,&quot;jet_parallax_layout_list&quot;:[]}\" data-core-v316-plus=\"true\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d021ed elementor-widget elementor-widget-shortcode\" data-id=\"8d021ed\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<link rel=\"stylesheet\" href=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/css\/product-filter-page.css\" type=\"text\/css\" \/>\n<style>\n    body {\n        margin: 0px;\n    }\n<\/style>\n\n<div id=\"app\">\n    <div class=\"crumbs-box\">\n        <span>\n            <a href=\"\/zh_cn\/\">\n                <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-home.svg\">\n                <span>Home<\/span>\n            <\/a>\n        <\/span>\n        <span class=\"slash\">\/<\/span>\n        <span><a href=\"\/zh_cn\/product\/\">Products<\/a><\/span>\n        <template v-for=\"(belongsCategory, index) in category_line\">\n            <span class=\"slash\">\/<\/span>\n            <a v-if=\"index === 0\" :href=\"'\/zh_cn\/product-categories\/' + belongsCategory + '\/'\"><span v-text=\"category_slug_mapping[belongsCategory].name\"><\/span><\/a>\n            <span v-else v-text=\"category_slug_mapping[belongsCategory].name\"><\/span>\n        <\/template>\n    <\/div>\n\n    <div class=\"page-title-box\">\n        <div class=\"top-box\">\n            <!-- Category Name -->\n            <div class=\"title\" v-text=\"category_name\"><\/div>\n            <el-button type=\"primary\" round @click=\"open_category_lightbox = true\">\n                <template v-slot:icon>\n                    <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-hierarchy.svg\">\n                    <img decoding=\"async\" class=\"for-hover\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-hierarchy-hover.svg\">\n                <\/template>\n                Product Hierarchy\n            <\/el-button>\n            <div class=\"dec-animation-box\">\n                <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-dec-animation.png\">\n            <\/div>\n        <\/div>\n        <!-- Category Description -->\n        <div v-text=\"category_description\" class=\"description\"><\/div>\n    <\/div>\n\n    <!-- Filter Feature Bar -->\n    <div class=\"btn-box\">\n        <div class=\"wrap\">\n            <div class=\"left-box\">\n                <div class=\"title\">Parametric Search<\/div>\n                <!-- <div class=\"hint\">\n                    <i><\/i>\n                    <span>Add Parameters<\/span>\n                <\/div> -->\n            <\/div>\n            <div class=\"right-box\">\n                <el-button\n                    :disabled=\"filterable_properties === null || filterable_properties === {} || Object.keys(filterable_properties).length === 0\"\n                    type=\"primary\"\n                    round\n                    @click=\"clearFilter\"\n                >\n                    <template v-slot:icon>\n                        <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-clear.svg\">\n                        <img decoding=\"async\" class=\"for-hover\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-clear-hover.svg\">\n                    <\/template>\n                    Clear Filter\n                <\/el-button>\n                <el-button\n                    :disabled=\"filterable_properties === null || filterable_properties === {} || Object.keys(filterable_properties).length === 0\"\n                    type=\"primary\"\n                    round\n                    @click=\"openSaveFilterLightbox\"\n                >\n                    <template v-slot:icon>\n                        <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-star.svg\">\n                        <img decoding=\"async\" class=\"for-hover\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-star-hover.svg\">\n                    <\/template>\n                    Save Filter\n                <\/el-button>\n                <el-button type=\"primary\" round @click=\"showFilterRecords\">\n                    <template v-slot:icon>\n                        <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-record.svg\">\n                        <img decoding=\"async\" class=\"for-hover\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-record-hover.svg\">\n                    <\/template>\n                    Filter Records\n                <\/el-button>\n                <div class=\"dec-line\"><\/div>\n                <el-button\n                    :disabled=\"filterable_properties === null || filterable_properties === {} || Object.keys(filterable_properties).length === 0\"\n                    class=\"primary-reverse btn-close-filter\"\n                    type=\"primary\"\n                    round\n                    @click=\"filterBoxToggle\"\n                >\n                    <template v-slot:icon>\n                        <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-control.svg\">\n                        <img decoding=\"async\" class=\"for-hover\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-control-hover.svg\">\n                    <\/template>\n                    Filter Toggle\n                <\/el-button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Filterable Properties -->\n    <div class=\"filter-box\" v-if=\"is_filter_showing === true\" v-loading=\"filter_mask\" id=\"filter-box\">\n        <div v-if=\"filterable_properties !== null && filterable_properties !== {} && Object.keys(filterable_properties).length > 0\" class=\"wrap\">\n            <ul>\n                <li\n                    v-for=\"filterableProperty in filterable_properties\"\n                    :class=\"filterableProperty.type === filterable_property_type.MULTIPLE_SELECT ? 'type-checkbox' : 'type-range'\"\n                >\n                    <!-- Multiple Select -->\n                    <template v-if=\"filterableProperty.type === filterable_property_type.MULTIPLE_SELECT && typeof filter_controller[filterableProperty.slug] !== 'undefined'\">\n                        <div class=\"filter-title-box\">\n                            <el-checkbox\n                                :disabled=\"typeof filter_controller[filterableProperty.slug] === 'undefined' || filter_controller[filterableProperty.slug].options.length === 0\"\n                                v-model=\"filter_controller[filterableProperty.slug].is_all\"\n                                :indeterminate=\"filter_controller[filterableProperty.slug].is_indeterminate\"\n                                @change=\"handlePropertyCheckIsAll($event, filterableProperty.slug, filterable_property_type.MULTIPLE_SELECT)\"\n                            >\n                                <div v-html=\"property_slug_mapping[filterableProperty.slug].name\"><\/div>\n                            <\/el-checkbox>\n                            <div :class=\"{'btn-arrow': true, 'disabled': typeof filter_controller[filterableProperty.slug] === 'undefined' || filter_controller[filterableProperty.slug].options.length === 0}\">\n                                <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/mobile-dropdown-icon.svg\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"mobile-transform-box\">\n                            <el-checkbox-group\n                                v-if=\"filter_controller[filterableProperty.slug].options.length > 0\"\n                                v-model=\"filter_controller[filterableProperty.slug].checked_options\"\n                                @change=\"handlePropertyCheckOption($event, filterableProperty.slug)\"\n                            >\n                                <el-checkbox\n                                    v-for=\"option in filter_controller[filterableProperty.slug].options\"\n                                    :key=\"option\"\n                                    :label=\"option\"\n                                >\n                                    <span v-html=\"purify(option)\">\n                                <\/el-checkbox>\n                                <template v-if=\"filter_controller[filterableProperty.slug].disabled_options.length > 0\">\n                                    <el-checkbox v-for=\"disabled_option in filter_controller[filterableProperty.slug].disabled_options\" :key=\"disabled_option\" :label=\"disabled_option\"\n                                    disabled\n                                >\n                                    <span v-html=\"purify(disabled_option)\">\n                                <\/el-checkbox>\n                                <\/template>\n                            <\/el-checkbox-group>\n                        <\/div>\n                    <\/template>\n\n                    <!-- Range -->\n                    <template v-if=\"filterableProperty.type === filterable_property_type.RANGE && typeof filter_controller[filterableProperty.slug] !== 'undefined'\">\n                        <div class=\"filter-title-box\">\n                            <el-checkbox\n                                :disabled=\"typeof filter_controller[filterableProperty.slug] === 'undefined' || filter_controller[filterableProperty.slug].options.length === 0 || (filter_controller[filterableProperty.slug].range_limit[0] === filter_controller[filterableProperty.slug].range_limit[1] && Object.keys(search_conditions).includes(filterableProperty.slug) === false)\"\n                                v-model=\"filter_controller[filterableProperty.slug].is_all\"\n                                :indeterminate=\"filter_controller[filterableProperty.slug].is_indeterminate\"\n                                @change=\"handlePropertyCheckIsAll($event, filterableProperty.slug, filterable_property_type.RANGE)\"\n                            >\n                                <div v-html=\"property_slug_mapping[filterableProperty.slug].name\"><\/div>\n                            <\/el-checkbox>\n                            <div :class=\"{'btn-arrow': true, 'disabled': typeof filter_controller[filterableProperty.slug] === 'undefined' || filter_controller[filterableProperty.slug].options.length === 0 || (filter_controller[filterableProperty.slug].range_limit[0] === filter_controller[filterableProperty.slug].range_limit[1] && Object.keys(search_conditions).includes(filterableProperty.slug) === false)}\">\n                                <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/mobile-dropdown-icon.svg\">\n                            <\/div>\n                        <\/div>\n                        <!-- Legal Slider Template -->\n                        <template v-if=\"filter_controller[filterableProperty.slug].options.length > 0\">\n                            <div class=\"range-box mobile-transform-box\">\n                                <div class=\"range-input-box\">\n                                    <el-slider\n                                        v-model=\"filter_controller[filterableProperty.slug].range\"\n                                        range\n                                        :min=\"filter_controller[filterableProperty.slug].range_limit[0]\"\n                                        :max=\"filter_controller[filterableProperty.slug].range_limit[1]\"\n                                        :step=\"filter_controller[filterableProperty.slug].step\"\n                                        :disabled=\"filter_controller[filterableProperty.slug].range_limit[0] === filter_controller[filterableProperty.slug].range_limit[1] && Object.keys(search_conditions).includes(filterableProperty.slug) === false\"\n                                        @change=\"handlePropertyChangeRange($event, filterableProperty.slug)\"\n                                        :marks=\"filter_controller[filterableProperty.slug].mark\"\n                                    >\n                                    <\/el-slider>\n                                    <div class=\"input-box\">\n                                        <el-input-number\n                                            v-model=\"filter_controller[filterableProperty.slug].range[0]\"\n                                            controls-position=\"right\"\n                                            :min=\"filter_controller[filterableProperty.slug].range_limit[0]\"\n                                            :max=\"filter_controller[filterableProperty.slug].range_limit[1]\"\n                                            :step=\"filter_controller[filterableProperty.slug].step\"\n                                            :placeholder=\"'Min. ' + filter_controller[filterableProperty.slug].range_limit[0]\"\n                                            :disabled=\"filter_controller[filterableProperty.slug].range_limit[0] === filter_controller[filterableProperty.slug].range_limit[1] && Object.keys(search_conditions).includes(filterableProperty.slug) === false\"\n                                            @change=\"handlePropertyChangeRange($event, filterableProperty.slug)\"\n                                        ><\/el-input-number>\n                                        <el-input-number\n                                            v-model=\"filter_controller[filterableProperty.slug].range[1]\"\n                                            controls-position=\"right\"\n                                            :min=\"filter_controller[filterableProperty.slug].range_limit[0]\"\n                                            :max=\"filter_controller[filterableProperty.slug].range_limit[1]\"\n                                            :step=\"filter_controller[filterableProperty.slug].step\"\n                                            :placeholder=\"'Max. ' + filter_controller[filterableProperty.slug].range_limit[1]\"\n                                            :disabled=\"filter_controller[filterableProperty.slug].range_limit[0] === filter_controller[filterableProperty.slug].range_limit[1] && Object.keys(search_conditions).includes(filterableProperty.slug) === false\"\n                                            @change=\"handlePropertyChangeRange($event, filterableProperty.slug)\"\n                                        ><\/el-input-number>\n                                    <\/div>\n                                <\/div>\n                                <el-checkbox\n                                    v-model=\"filter_controller[filterableProperty.slug].is_range_or_null\"\n                                    @change=\"handlePropertyCheckIsRangeOrNull($event, filterableProperty.slug)\"\n                                    :disabled=\"filter_controller[filterableProperty.slug].range_limit[0] === filter_controller[filterableProperty.slug].range_limit[1] && Object.keys(search_conditions).includes(filterableProperty.slug) === false\"\n                                >-<\/el-checkbox>\n                            <\/div>\n                        <\/template>\n                        <!-- Illegal Slider Template -->\n                        <template v-else>\n                            <div class=\"range-box mobile-transform-box\">\n                                <div class=\"range-input-box\">\n                                    <el-slider range :min=\"0\" :max=\"0\" disabled><\/el-slider>\n                                    <div class=\"input-box\">\n                                        <el-input type=\"number\" placeholder=\"Min. 0\" disabled><\/el-input>\n                                        <el-input type=\"number\" placeholder=\"Max. 0\" disabled><\/el-input>\n                                    <\/div>\n                                <\/div>\n                                <el-checkbox disabled>-<\/el-checkbox>\n                            <\/div>\n                        <\/template>\n                    <\/template>\n                <\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n\n    <!-- Product List -->\n    <div class=\"table-box\">\n        <div class=\"wrap\">\n            <div class=\"mobile-vertical-hint-box\">\n                <div class=\"btn-close\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><path d=\"M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4L14.6 16L8 22.6L9.4 24L16 17.4L22.6 24L24 22.6L17.4 16L24 9.4Z\" fill=\"black\"><\/path><\/svg>\n                <\/div>\n                <img decoding=\"async\" class=\"\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/mobile-Rotate-icon.svg\">\n            <\/div>\n            <div class=\"top-box\">\n                <div class=\"left-box\">\n                    <div class=\"number\">Part Number: <span v-text=\"pagination.total\"><\/span><\/div>\n                    <div class=\"search-box\">\n                        <el-input\n                            id=\"product-keyword\"\n                            v-model=\"keyword\"\n                            placeholder=\"Search Part Number\"\n                            clearable\n                            @change=\"handleKeywordChange\"\n                            :disabled=\"selected_category.length === 0\"\n                        >\n                            <template #prefix>\n                                <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-search.svg\">\n                            <\/template>\n                        <\/el-input>\n                    <\/div>\n                <\/div>\n                <div class=\"right-box\">\n                    <div class=\"btn-share-box\">\n                        <el-button type=\"primary\" round @click=\"shareBoxToggle\">\n                            <template v-slot:icon>\n                                <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-share.svg\">\n                                <img decoding=\"async\" class=\"for-hover\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-share-hover.svg\">\n                            <\/template>\n                            Share\n                        <\/el-button>\n                        <div class=\"share-box\">\n                            <div class=\"btn-copy-link\" @click=\"shareProductLinks\">\n                                <div><img decoding=\"async\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-copy.svg\"><\/div>\n                                <div>Copy Link<\/div>\n                            <\/div>\n                            <div class=\"btn-share-email\" @click=\"shareBoxToggle\">\n                                <a href=\"mailto:example@google.com\" @click.prevent=\"shareProductLinks(true)\">\n                                    <div>\n                                        <img decoding=\"async\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-email.svg\">\n                                    <\/div>\n                                    <div>Share via Email<\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <el-button type=\"primary\" round @click=\"exportProductTable\">\n                        <template v-slot:icon>\n                            <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-export.svg\">\n                            <img decoding=\"async\" class=\"for-hover\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-export-hover.svg\">\n                        <\/template>\n                        Export\n                    <\/el-button>\n                    <el-button type=\"primary\" round @click=\"compareProducts\">\n                        <template v-slot:icon>\n                            <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-compare.svg\">\n                            <img decoding=\"async\" class=\"for-hover\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-compare-hover.svg\">\n                        <\/template>\n                        Compare\n                    <\/el-button>\n                <\/div>\n            <\/div>\n\n            <el-table\n                v-loading=\"table_mask\"\n                ref=\"productListRef\"\n                :data=\"product_list.items\"\n                :empty-text=\"empty_text\"\n                stripe\n                border\n                style=\"width: 100%; border-radius: 5px;\"\n                :height=\"(product_list.items.length >= 11) ? 600 : (product_list.items.length > 0) ? (product_list.items.length + 1) * 35 + 5 : 280\"\n                @sort-change=\"handleSortChange\"\n            >\n                <el-table-column\n                    v-if=\"product_list.items.length > 0\"\n                    type=\"selection\"\n                    width=\"55\"\n                    fixed\n                ><\/el-table-column>\n                <el-table-column\n                    v-for=\"header in product_list.headers\"\n                    :key=\"'key-' + header.value\"\n                    :prop=\"header.value\"\n                    :label=\"header.text\"\n                    :width=\"product_list.headers.length <= 1 ? '' : typeof column_width[header.value] ? column_width[header.value] : 160\"\n                    :sortable=\"((header.value !== 'datasheet') && (header.value !== 'cart'))\"\n                    :sort-method=\"null\"\n                    :sort-by=\"null\"\n                    :fixed=\"header.value === 'name'\"\n                >\n                    <template #header=\"{ column }\">\n                        <div v-html=\"column.label\"><\/div>\n                    <\/template>\n                    <template v-slot=\"{ row }\">\n                        <div v-if=\"header.value === 'datasheet' || header.value === 'cart'\" class=\"small-td\">\n                            <a v-if=\"header.value === 'datasheet' && row[header.value] !== null\" :href=\"row[header.value]\" target=\"_blank\"><img decoding=\"async\" v-if=\"header.value === 'datasheet' && row[header.value] !== null\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-datasheet.svg\"><\/a>\n                            <a v-if=\"header.value === 'cart'\" :href=\"'\/zh_cn\/stock-check\/' + row['name'] + '\/'\" target=\"_blank\"><img decoding=\"async\" v-if=\"header.value === 'cart'\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-cart.svg\"><\/a>\n                        <\/div>\n                        <div v-else class=\"td\">\n                            <div v-if=\"header.value === 'name' || header.value === 'replacement'\" class=\"td-value\">\n                                <span class=\"product-info-page-link\" @click=\"openInnerPage(row[header.value])\" v-text=\"row[header.value]\"><\/span>\n                            <\/div>\n                            <div v-else class=\"td-value\" v-html=\"((typeof row[header.value] === 'undefined' || row[header.value] === null) && typeof property_slug_mapping[header.value] !== 'undefined' && property_slug_mapping[header.value].type.includes('double') === true) ? '-' : purify(row[header.value])\"><\/div>\n                            <div v-if=\"header.value === 'name' && row.is_new_product == true\" class=\"td-tag\">NEW<\/div>\n                        <\/div>\n                    <\/template>\n                <\/el-table-column>\n                <template #empty>\n                    <p>\n                        <span v-text=\"empty_text\"><\/span><br \/>\n                        <el-button v-if=\"selected_category.length === 0\" @click=\"open_category_lightbox = true\">Choose Category First<\/el-button>\n                    <\/p>\n                <\/template>\n            <\/el-table>\n\n            <div class=\"pagination-box\">\n                <el-pagination\n                    v-model:current-page=\"pagination.page\"\n                    v-model:page-size=\"pagination.limit\"\n                    :page-sizes=\"[5, 20, 50, 100, 500]\"\n                    :pager-count=\"5\"\n                    small\n                    :disabled=\"pagination.total === 0\"\n                    background\n                    layout=\"total, sizes, prev, pager, next, jumper\"\n                    :total=\"pagination.total\"\n                    @size-change=\"handlePageSizeChange\"\n                    @current-change=\"handleCurrentPageChange\"\n                \/>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Hierarchy -->\n    <el-dialog v-model=\"open_category_lightbox\" v-if=\"is_hierarchy_showing === true\" class=\"dialog-product-hierarchy\" title=\"Product Hierarchy\" :before-close=\"handleHierarchyClose\">\n        <div class=\"collapse-box\">\n            <el-collapse v-model=\"active_collapses.root\" class=\"collapse-first-level\">\n                <el-collapse-item v-for=\"mainCategory in category_tree\" :title=\"mainCategory.name\" :name=\"'collapse_' + mainCategory.slug\">\n                    <div class=\"content\">\n                        <ul v-if=\"mainCategory.sub_categories.records.length > 0\">\n                            <li v-for=\"secondFloorCategory in mainCategory.sub_categories.records\">\n                                <div @click=\"pickCategory(secondFloorCategory.slug)\" class=\"li-title\" v-text=\"secondFloorCategory.name\"><\/div>\n                                <ul v-if=\"secondFloorCategory.sub_categories.records.length > 0\">\n                                    <li v-for=\"(thirdFloorCategory, index) in secondFloorCategory.sub_categories.records\">\n                                        <span v-if=\"thirdFloorCategory.sub_categories.records.length === 0\" @click=\"pickCategory(thirdFloorCategory.slug)\" v-text=\"thirdFloorCategory.name\"><\/span>\n                                        <el-collapse v-else v-model=\"active_collapses[thirdFloorCategory.slug]\">\n                                            <el-collapse-item :title=\"thirdFloorCategory.name\" :name=\"'collapse_' + thirdFloorCategory.slug\">\n                                                <template #title>\n                                                    <div v-stop=\"() => pickCategory(thirdFloorCategory.slug)\" v-text=\"thirdFloorCategory.name\"><\/div>\n                                                <\/template>\n                                                <ul v-if=\"thirdFloorCategory.sub_categories.records.length > 0\">\n                                                    <li v-for=\"fourthFloorCategory in thirdFloorCategory.sub_categories.records\" @click.stop=\"pickCategory(fourthFloorCategory.slug)\" v-text=\"fourthFloorCategory.name\"><\/li>\n                                                <\/ul>\n                                            <\/el-collapse-item>\n                                        <\/el-collapse>\n                                    <\/li>\n                                <\/ul>\n                            <\/li>\n                        <\/ul>\n                    <\/div>\n                <\/el-collapse-item>\n            <\/el-collapse>\n        <\/div>\n    <\/el-dialog>\n\n    <!-- Filter Records -->\n    <template v-if=\"open_filter_records_lightbox === true\">\n        <el-dialog v-model=\"open_filter_records_lightbox\" class=\"dialog-filter-records font-bold\" title=\"Filter Records\">\n            <div class=\"filter-records-box\">\n                <div class=\"text\">Recording your Parametric history allows you to search for that filter next time without going through the same process again.<\/div>\n\n                <el-table :data=\"record_table.items\">\n                    <el-table-column\n                        v-for=\"header in record_table.headers\"\n                        :prop=\"header.value\"\n                        :label=\"header.text\"\n                        :width=\"(header.value === 'conditions') ? '425' : (header.value === 'actions') ? 120 : (header.width ? header.width : '')\"\n                    >\n                        <template v-slot=\"{ row, $index }\">\n                            <div v-if=\"header.value === 'conditions'\" class=\"col-properties\">\n                                <div v-for=\"condition in row[header.value]\" class=\"tag\">\n                                    <div class=\"label-name\" v-html=\"condition.key + ': '\"><\/div>\n                                    <div class=\"label-value\" v-html=\"purify(condition.value)\"><\/div>\n                                <\/div>\n                            <\/div>\n                            <div v-else-if=\"header.value === 'actions'\" class=\"col-action\">\n                                <div class=\"btn-apply\" @click=\"openTargetPage(row['uri'])\">Apply<\/div>\n                                <div class=\"btn-delete\" @click=\"deleteFilterRecord(row.id)\">Delete<\/div>\n                            <\/div>\n                            <div v-else :class=\"'col-' + header.value\">\n                                <div v-if=\"(row.is_editing === false && header.value === 'name') || header.value !== 'name'\" v-text=\"row[header.value]\"><\/div>\n                                <el-input\n                                    v-if=\"header.value === 'name' && row.is_editing === true\"\n                                    v-model=\"row[header.value]\"\n                                    placeholder=\"Please input\"\n                                    @change=\"updateFilterRecord(row.id, $index)\"\n                                    maxlength=\"50\"\n                                ><\/el-input>\n                                <div v-if=\"header.value === 'name'\" @click=\"row.is_editing = true\" class=\"btn-edit\">\n                                    <img decoding=\"async\" class=\"default\" src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-edit.svg\">\n                                <\/div>\n                            <\/div>\n                        <\/template>\n                    <\/el-table-column>\n                <\/el-table>\n            <\/div>\n        <\/el-dialog>\n    <\/template>\n\n    <!-- Save Filter -->\n    <template v-if=\"open_save_filter_lightbox === true\">\n        <el-dialog v-model=\"open_save_filter_lightbox\" class=\"dialog-save-filter \" title=\"Save Filter\">\n            <div class=\"filter-records-box\">\n                <div class=\"top-box\">\n                    <div class=\"text\">Saving your favorite filter allows you to search for that filter next time without going through the same process again.<\/div>\n                    <el-form id=\"save-filter\" label-width=\"120px\">\n                        <el-form-item label=\"Activity name\">\n                            <el-input id=\"filter-record-name\" v-model=\"record_name\" placeholder=\"Please enter a record name.\" maxlength=\"50\"><\/el-input>\n                        <\/el-form-item>\n                    <\/el-form>\n                <\/div>\n                <div class=\"bottom-box\">\n                    <div class=\"title\">Selected Parameters:<\/div>\n                    <div class=\"result-box\">\n                        <ul>\n                            <li>\n                                <div class=\"li-title\">Taxonomy:<\/div>\n                                <div class=\"tag-box\">\n                                    <div class=\"tag\" v-text=\"category_name\"><\/div>\n                                <\/div>\n                            <\/li>\n                            <li v-if=\"keyword.length > 0\">\n                                <div class=\"li-title\">Part Number:<\/div>\n                                <div class=\"tag-box\">\n                                    <div class=\"tag\" v-text=\"keyword\"><\/div>\n                                <\/div>\n                            <\/li>\n                            <template v-for=\"(optionController, propertySlug) in filter_controller\">\n                                <li v-if=\"optionController.is_all === true || optionController.is_indeterminate === true\">\n                                    <div class=\"li-title\" v-html=\"property_slug_mapping[propertySlug].name + ':'\"><\/div>\n                                    <div class=\"tag-box\" v-if=\"optionController.type === filterable_property_type.MULTIPLE_SELECT && optionController.checked_options.length > 0\">\n                                        <div class=\"tag\" v-for=\"checkedOption in optionController.checked_options\" v-html=\"purify(checkedOption)\"><\/div>\n                                    <\/div>\n                                    <div class=\"tag-box\" v-if=\"optionController.type === filterable_property_type.RANGE && optionController.range.length === 2\">\n                                        <div class=\"tag\" v-text=\"optionController.range[0] + ' - ' + optionController.range[1]\"><\/div>\n                                        <div class=\"tag\" v-if=\"optionController.is_range_or_null === true\"> - <\/div>\n                                    <\/div>\n                                <\/li>\n                            <\/template>\n                        <\/ul>\n                        \n                    <\/div>\n                <\/div>\n                <el-button type=\"primary\" @click=\"createFilterRecord\" class=\"btn-submit\" :disabled=\"record_name.length === 0\">Save Filter<\/el-button>\n            <\/div>\n        <\/el-dialog>\n    <\/template>\n\n    <!-- Compare -->\n    <el-dialog v-model=\"open_compare_lightbox\" class=\"dialog-compare\" title=\"Compare\">\n        <div class=\"compare-products-box\">\n            <el-table\n                ref=\"multipleTableRef\"\n                :data=\"reversed_table.items\"\n                :empty-text=\"empty_text\"\n                stripe\n                border\n                height=\"450\"\n                style=\"width: 100%; border-radius: 5px;\"\n            >\n                <el-table-column\n                    v-for=\"(header, index) in reversed_table.headers\"\n                    :key=\"index\"\n                    :prop=\"header.value\"\n                    :label=\"header.text\"\n                    :width=\"header.text.length > 15 ? header.text.length * 11 : 200\"\n                    :fixed=\"index === 0 ? 'left' : false\"\n                >\n                    <template #header=\"{ column }\">\n                        <template v-if=\"column.property === 'column'\">\n                            <b>\n                                <span v-text=\"column.label\"><\/span>\n                            <\/b>\n                        <\/template>\n                        <template v-else>\n                            {{ column.label }}\n                        <\/template>\n                    <\/template>\n                    <template v-slot=\"{ row }\">\n                        <b v-if=\"header.value === 'column'\"><span v-html=\"row[header.value]\"><\/span><\/b>\n                        <span v-else v-html=\"purify(row[header.value])\"><\/span>\n                    <\/template>\n                <\/el-table-column>\n            <\/el-table>\n        <\/div>\n    <\/el-dialog>\n<\/div>\n\n<script>\n    const SITE_URL = 'http:\/\/www.taiwansemi.com\/zh_cn'\n    const API_URL = 'https:\/\/services.taiwansemi.com'\n    const SITE_SLUG = 'twsemi'\n    const PRODUCT_RESOURCE_URI = 'products'\n    const PRODUCT_FILTER_RECORD_RESOURCE_URI = 'product-filter-records'\n    const PRODUCT_FILTER_SKELETON_URI = 'product-filter-skeleton'\n    const SERVICE_LANGUAGE = 'CN'\n    const LANGUAGE_PATH = '\/zh_cn'\n\n    <\/script>\n\n<script src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/axios\/axios.min.js\"><\/script>\n<script src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/js-cookie\/js.cookie.min.js\"><\/script>\n<script src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/lodash\/lodash.min.js\"><\/script>\n<script src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/purify\/purify.min.js\"><\/script>\n<script src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/lz-string\/lz-string.min.js\"><\/script>\n<script src=\"\/zh_cn\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/front-stage\/product-filter.js\"><\/script>\n\t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":25,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"folder":[73],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.taiwansemi.com\/zh_cn\/wp-json\/wp\/v2\/pages\/1225"}],"collection":[{"href":"http:\/\/www.taiwansemi.com\/zh_cn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.taiwansemi.com\/zh_cn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.taiwansemi.com\/zh_cn\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"http:\/\/www.taiwansemi.com\/zh_cn\/wp-json\/wp\/v2\/comments?post=1225"}],"version-history":[{"count":0,"href":"http:\/\/www.taiwansemi.com\/zh_cn\/wp-json\/wp\/v2\/pages\/1225\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.taiwansemi.com\/zh_cn\/wp-json\/wp\/v2\/media?parent=1225"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"http:\/\/www.taiwansemi.com\/zh_cn\/wp-json\/wp\/v2\/folder?post=1225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}