import componentSearch from "/static/web/js/components/search.js?v=100";
import componentSlider from "/static/web/js/components/slider.js?v=100";
import componentSelect from "/static/web/js/components/select.js?v=100";
const app = Vue.createApp({
    data () {
        return {
            loading: true,
            selectArr: [],
            sliderArr: [],
            selectArrKey: [],
            load: false,
            table_top: 0,           //table距顶部距离
            table_flex: false,      //table是否浮动
            ctype: 0,
            data: [],
            alldata: [],

            product_class_show: false,   //是否显示产品分类
            product_class_arrange: false, // 是否显示产品列
            cities: {},
            isSeach: {},
            // cities: ['images', 'key_scan', 'supply_voltage', 'Interface', 'Brightness Adjustment', 'Package', 'Operating TemperatureRange'],
            checkedCities: [],
            search_fw: [],
            //分类数据
            product_class: [

            ],
            product_class_props: {
                children: 'children',
                label: 'title',
            },
            // 图片弹窗
            dialogTableVisible: false,
            dialog_header_name: '',
            dialog_header_img: '',
            wrap_id: 1,
            dialog_wrap: [],
            // 申请表弹窗
            dialogapplyfor: false,
            applyfor_num: 1,

            form: {},
            //自定义组件
            componentSearch: 'componentSearch',
            componentSlider: 'componentSlider',
            componentSelect: 'componentSelect',
            //标识是否固定左侧
            fixed: true,
        };
    },
    methods: {
        download () {
            var that = this;
            var ctype = $('input[type="hidden"]').val();
            $.get('/pro/download', { 'ctype': ctype }, function (res) {
                const link = document.createElement('a')
                link.style.display = 'none'
                link.href = res.data.url;
                link.download = res.data.name; // 文件名
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) // 下载完成移除元素
                window.URL.revokeObjectURL(url) // 释放掉blob对象

            })
        },
        downloadtest (response) {
            const disposition = response.headers['content-disposition'].split(';')
            var filename = ''
            if (disposition.length > 2) {
                // 中文文件名
                filename = decodeURI(response.headers['content-disposition'].split("filename*=utf-8''")[1])
            } else {
                // 英文文件名
                filename = decodeURI(disposition[1].split('=')[1])
            }

            // 去掉前后双引号
            filename = filename.replace(/^\"|\"$/g, '')

            const blob = new Blob([response.data])
            if (window.navigator.msSaveOrOpenBlob) {
                // 兼容IE10
                try {
                    window.navigator.msSaveOrOpenBlob(blob, filename) // 保存打开按钮
                } catch (e) {
                    console.log(e)
                }
            } else {
                const url = window.URL.createObjectURL(blob)
                const link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.download = filename // 文件名
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) // 下载完成移除元素
                window.URL.revokeObjectURL(url) // 释放掉blob对象
            }
        },
        onAll () {
            this.product_class_arrange = false
            this.product_class_show = !this.product_class_show
        },
        onArrange () {
            this.product_class_show = false
            this.product_class_arrange = !this.product_class_arrange
        },

        scrolling () {
            let current = document.documentElement.scrollTop || document.body.scrollTop;
            if (this.table_top > 0 && current >= this.table_top) {
                this.table_flex = true
            } else {
                this.table_flex = false
            }
        },
        //筛选
        onFilter (e, type, keys) {

            this.sliderArr[keys] = e;

            var sliderArr = this.sliderArr;
            sliderArr[keys] = e;
            this.sliderArr = sliderArr;

            this.getSelectSearch();

        },
        //选择产品
        onProductClass (e) {

            if (!e.children) {
                // this.getData(e.id);
                location.href = "/product_list/" + e.id + '.html';
            }
        },
        //重置表
        onResert () {
            this.selectArr = []
            this.sliderArr = []
            this.data = this.alldata
        },
        isChecked (column) {
            //  console.log('=====');
            return this.checkedCities.includes(column);
        },
        dialogImages (e, is_location) {
            if (is_location == 0) {
                this.dialog_header_name = this.data[e]['A']
                this.dialog_wrap = this.data[e].img
                if (this.data[e].img.length > 0) {
                    this.dialog_header_img = this.data[e].img[0].url
                }
                this.dialogTableVisible = true
            }

        },
        click_wrap (val) {

            this.wrap_id = val.id
            //  this.dialog_header_name = val.name
            this.dialog_header_img = val.url
        },
        click_applyfor (val) {
            this.form.id = val.id;
            this.form.name = val['A'];
            this.form.applyfor_num = 1;
            this.dialogapplyfor = true
        },
        subForm () {
            var that = this;
            var pro_id = this.form.id;
            var num = this.form.applyfor_num;
            $.post('/api/addCart', { pro_id: pro_id, num: num }, function (res) {
                if (res.code == 20000) {
                    that.dialogapplyfor = false
                    that.$message({
                        offset: 100,
                        duration: 2000,
                        type: 'success',
                        message: '添加成功!'
                    });
                } else {
                    that.$message({
                        type: 'error',
                        message: res.message
                    });
                }
            })
        },

        getSelectSearch (selectarr) {
            var firstdata = [];
            var selectData = '';
            var selectarr = this.selectArr;
            var sliderarr = this.sliderArr;
            var alldata = this.alldata;
            var selectKey = Object.keys(selectarr);
            var sliderKey = Object.keys(sliderarr);
            firstdata.push(this.alldata[0]);
            var newalldata = alldata.filter((item, keys) => {
                var selectData = '';
                var selectData1 = '';
                var isselectData2 = '';
                if (keys == 0) return false;
                if (selectKey) {
                    for (var i = 0; i < selectKey.length; i++) {
                        var sitem = selectKey[i];
                        let cities_value = ''
                        this.cities.forEach((val) => {
                            if (val.key == sitem) {
                                cities_value = val.value
                            }
                        })
                        if (cities_value == 'Package') {
                            var values = selectarr[sitem];
                            isselectData2 = 1;
                            var selectData2 = '';
                            values.forEach((items) => {
                                if (item[sitem].indexOf(items) >= 0) {
                                    selectData = keys;
                                }
                            })
                            if (!selectData) {

                                break;
                            }

                        } else {
                            var values = selectarr[sitem];
                            if (values.includes(item[sitem])) {
                                selectData = keys;
                                // return true;
                            } else {
                                selectData = '';

                                break;
                            }
                        }
                    }
                }
                if (sliderKey) {
                    for (var i = 0; i < sliderKey.length; i++) {
                        var sitem = sliderKey[i];
                        var values = sliderarr[sitem];
                        if ((item[sitem] >= values[0]) && (item[sitem] <= values[1])) {

                            selectData1 = keys;

                        } else {
                            selectData1 = '';
                            break;
                        }

                    }


                }
                if (selectKey.length > 0 && sliderKey.length > 0) {
                    if (selectData && selectData1) {

                        return true;
                    } else {
                        return false;
                    }
                }
                if (selectKey.length > 0) {
                    if (!selectData) {
                        // if(isselectData2 == 1 && selectData2 !=''){
                        //      return true;
                        //  }
                        return false;
                    } else {

                        //  if(isselectData2 == 0){
                        //     return true;
                        //  }
                        //  if(isselectData2 == 1 && selectData2 !=''){
                        //      return true;
                        //   }
                        return true;
                    }
                }

                if (sliderKey.length > 0) {
                    if (!selectData1) {
                        return false;
                    } else {

                        return true;
                    }
                }




            })

            newalldata.forEach((item) => {
                firstdata.push(item);
            })

            this.data = firstdata;
        },

        getSeachList (e, key) {

            var selectArr = this.selectArr;
            selectArr[key] = e.value;
            this.selectArr = selectArr;
            //this.selectArr.push(e);

            this.getSelectSearch(this.selectArr);
            return [];

            var column_id = key;
            var firstdata = [];
            var values = e.value;
            var alldata = this.alldata;
            firstdata.push(this.alldata[0]);

            var newalldata = alldata.filter((item, keys) => {
                if (keys == 0) return false;
                if (this.cities[key].value == 'Package') {
                    var is_exis = false;
                    values.forEach((items) => {
                        if (item[column_id].indexOf(items) >= 0) {
                            is_exis = true;
                        }
                    })
                    return is_exis;
                } else {
                    if (values.includes(item[column_id])) {
                        return true;
                    } else {
                        return false;
                    }
                }

            })
            newalldata.forEach((item) => {
                firstdata.push(item);
            })

            this.data = firstdata;

        },
        getData (ctype) {
            var that = this;
            that.search_fw = [];

            $.get('/api/getProList', { 'ctype': ctype }, function (res) {
                that.loading = false
                if (res.code == 20000) {
                    that.data = res.data.list
                    that.checkedCities = res.data.attrList;
                    that.isSeach = res.data.search
                    that.search_fw = res.data.attr_fw
                    that.alldata = res.data.list

                    //计算宽度
                    const hiddenDiv = document.createElement('div');
                    hiddenDiv.style.visibility = 'hidden';
                    hiddenDiv.style.position = 'absolute';
                    hiddenDiv.style.fontSize = '15px';
                    document.body.appendChild(hiddenDiv);

                    let cities = []
                    for (let k in res.data.attr) {
                        hiddenDiv.style.fontWeight = '600';
                        hiddenDiv.innerHTML = res.data.attr[k];
                        let w = hiddenDiv.offsetWidth;
                        hiddenDiv.style.fontWeight = '400';

                        res.data.list.forEach((value, key) => {
                            if (value[k]) {

                                hiddenDiv.innerHTML = value[k];
                                let hide_width = hiddenDiv.offsetWidth;
                                w = (hide_width > w ? hide_width : w)
                            }
                        })
                        if (k == 'A') {
                            w = 154
                        }
                        cities.push({
                            key: k,
                            value: res.data.attr[k],
                            width: (w + 26) + 'px'
                        })
                    }
                    that.cities = cities;
                }

            })
        },
        //屏幕尺寸变化事件
        resizeScreen () {
            this.fixed = window.innerWidth > 1024
        }
    },
    //页面加载后
    mounted () {
        let _this = this;
        var ctype = $('input[type="hidden"]').val();
        this.ctype = ctype;
        window.onscroll = function (e) {
            _this.scrolling()
        }
        setTimeout(function () {
            _this.table_top = _this.$refs.tableBox.offsetTop
            _this.scrolling()
        }, 500);

        $.get('/api/getAllTypeList', '', function (res) {
            if (res.code == 20000) {
                _this.product_class = res.data.type_list;
            }

        })
        this.getData(ctype);

        //左侧固定
        this.resizeScreen()
        window.addEventListener('resize', function (e) {
            _this.resizeScreen()
        });

    },
});
app.use(ElementPlus);
app.mount("#product-table");
//自定义组件
app.component('componentSearch', componentSearch);
app.component('componentSlider', componentSlider);
app.component('componentSelect', componentSelect);