<template>
    <lj-win-index-common-list :title="title" api-name="GetL1MtrldefBJ"
        :data-reset-callback="handleDataReset"
        :data-loaded-callback="handleDataLoaded"
        ifShowSearchbar
        :query-fields="queryFields"
        :queryHardParms="queryHardParms"
        hint="编码/品名/规格/产品系列/子型号"
        :searchText="keyword"
        v-on:update:searchText="emitChangeKeyword"
        :query-quick="queryQuick"
        :search-actions="searchActions"
        @scan-click="handleSearchScan"
        ref="baseWin">
        <mu-button icon slot="header_right" @click="gotoHis">
            <i class="iconfont icon-historical_quotes"></i>
        </mu-button>
        <div slot="body_list">
            <template v-for="item in allData">
                <product-index-item :item="item" @click.native="handleCellClick(item)" :baseMsg="baseMsg"></product-index-item>
                <mu-divider style="margin:0px 0px 5px 0px;"></mu-divider>
            </template>
        </div>
    </lj-win-index-common-list>
</template>

<script>
    import LjWinIndexCommonList from "components/lj-win-index-common-list";
    import LjSearchbar from "components/lj-searchbar";
    import ProductIndexItem from './product-index-item';
    export default {
        components: {
            LjSearchbar,
            LjWinIndexCommonList,
            ProductIndexItem
        },
        data() {
            return {
                open: false,
                docked: false,
                position: true,
                allData: [],
                selectedItems: [],
                winMode: "",
                ifch: false,
                title: "产品列表",
                mtrltype: "",
                mtrltypeHis: "报价历史",
                mtrltypeList: [], //'经理椅','职员椅','会议椅','休闲椅','电竞椅','办公网椅','办公布椅'
                saletypeList:[],
                queryHardParms: {
                    mtrlorigin: 0, // 自制
                },
                baseMsg: {
                    mtrlsectypename: "自定义1",
                    zxmtrlmodename: "自定义2",
                    usermtrlmodename: "自定义3"
                },

                queryFields: [
                    {
                        title: "产品编码",
                        property: "mtrlcode",
                        initValue: "",
                        group: "常规属性"
                    },
                    {
                        title: "产品名称",
                        property: "mtrlname",
                        initValue: "",
                        group: "常规属性"
                    },
                    {
                        title: "规格",
                        property: "mtrlmode",
                        initValue: "",
                        group: "常规属性"
                    },
                    {
                        title: "子型号",
                        property: "sub_model",
                        initValue: "",
                        group: "常规属性"
                    },
                    {
                        title: "全部状态",
                        property: "isuse",
                        type: 'radio2',
                        initValue: -1,
                        selectOptions: {
                            options: [
                                {
                                    isuse: 1,
                                    dscrp: "有效"
                                },
                                {
                                    isuse: 0,
                                    dscrp: "无效"
                                }
                            ], 
                            valueMap: { text: 'dscrp', value: 'isuse'},
                        },
                        group: "状态"
                    },
                ],
                queryQuick: [
                    {
                        title: "产品分类",
                        property: "mtrltype",
                        type: 'radioFree',
                        initValue: "",
                        selectOptions: {}
                    },
                    {
                        title: "畅销类型",
                        property: "saletype",
                        type: 'radioFree',
                        initValue: "",
                        selectOptions: {}
                    },
                    {
                        title: "产品系列",
                        property: "band",
                        type: 'radioFree',
                        initValue: "",
                        selectOptions: {}
                    },
                ],
                searchActions: [
                    { 
                        title: '全部',
                        property: 'keyword'
                    },
                    { 
                        title: '产品编码',
                        property: 'mtrlcode' 
                    },
                    { 
                        title: '产品名称',
                        property: 'mtrlname'
                    },
                    { 
                        title: '规格',
                        property: 'mtrlmode'
                    },
                    { 
                        title: '产品系列',
                        property: 'band'
                    },
                    { 
                        title: '子型号',
                        property: 'sub_model'
                    },
                ],
                keyword: ''
            }
        },
        created() {
            let pageParam = $lj.getPageParam();
            if (pageParam.winMode) {
                this.winMode = pageParam.winMode;
            }
            // this.refreshType();
            this.getType();

            let userInfo = $lj.getStorage('userInfo');
            this.baseMsg.mtrlsectypename = userInfo.mtrlsectypename || "";
            this.baseMsg.zxmtrlmodename = userInfo.zxmtrlmodename || "";
            this.baseMsg.usermtrlmodename = userInfo.usermtrlmodename || "";
        },
        methods: {
            /**搜索栏-扫描 */
            handleSearchScan(searchState) {
                $lj.openScanner((ret) => {
                    setTimeout(() => {
                        let obj = {};
                        obj[searchState] = ret.content.trim();
                        this.$refs.baseWin.handleSearchbar(obj, true);
                    }, 200);
                })
            },
            /**回调绑定值 */
            emitChangeKeyword(val) {
                this.keyword = val;
            },
            getType() {
                let self = this;
                let userInfo = $lj.getStorage('userInfo');
                if (userInfo.mtrltypeList) {
                    for (let i = 0; i < self.queryQuick.length; i++) {
                        if (self.queryQuick[i].property == 'mtrltype') {
                            self.$set(self.queryQuick[i].selectOptions, 'options', userInfo.mtrltypeList);
                            break;
                        }
                    }
                }
                if (userInfo.saletypeList) {
                    for (let i = 0; i < self.queryQuick.length; i++) {
                        if (self.queryQuick[i].property == 'saletype') {
                            self.$set(self.queryQuick[i].selectOptions, 'options', userInfo.saletypeList);
                            break;
                        }
                    }
                }
                if (userInfo.bandList) {
                    for (let i = 0; i < self.queryQuick.length; i++) {
                        if (self.queryQuick[i].property == 'band') {
                            self.$set(self.queryQuick[i].selectOptions, 'options', userInfo.bandList);
                            break;
                        }
                    }
                }
            },
            handleDataReset(response) {
                this.allData = [];
                this.addList(response.mtrldefList);
            },
            handleDataLoaded(response) {
                let moreItems = response.mtrldefList;
                if (moreItems.length > 0) {
                    this.addList(moreItems);
                    return true;
                }
                return false;
            },
            // handleSearchbar(text) {
            //     this.allData = [];
            //     this.title = '产品列表';
            //     this.$refs.baseWin.refresh(Object.assign({
            //         keyword: text,
            //         isuse: 1
            //     }, this.queryHardParms));
            // },
            addList(list) {
                this.allData = this.allData.concat(list);
            },
            handleCellClick(mainObject) {
                //0-默认打开，为编辑状态 1-非编辑状态 2-再次报价
                // $lj.openWin("mtrl-configuration", {
                //     mainObject: mainObject,
                //     openMode:0,
                // });
                $lj.openWin("product-preview", {
                    mainObject: mainObject,
                });
            },
            // handleQuerySubmit(queryParams) {
            //     this.allData = [];
            //     this.title = '产品列表'
            // },
            opensheet() {
                this.ifch = true;
            },
            gotoHis() {
                $lj.openWin("quote-history");
            },
            // onItemClick(value) {
            //     this.allData = [];
            //     this.ifch = false;
            //     if (value == '') {
            //         this.title = '产品列表'
            //     } else {
            //         this.title = value;
            //     }
            //     // this.queryHardParms.mtrltype = value;
            //     // alert(JSON.stringify(this.queryHardParms))
            //     this.$refs.baseWin.refresh(Object.assign({
            //         mtrltype: value,
            //         isuse: 1
            //     }, this.queryHardParms));
            // },
        },
        computed: {
            // title() {
            //     return "产品列表"
            // }
        }
    }
</script>

<style>
    .topbar {
        min-height: 44px;
        border-bottom: 1px solid #e5e5e5;
        background: #fff;
        position: fixed;
        width: 100%;
        z-index: 9999;
        display: flex;
        font-size: 18px;
        align-items: center;
        margin-top: 25px;
    }

    .topbar_left {
        flex: 0 0 20px;
        margin-left: 10px;
    }

    .topbar_middle {
        text-align: center;
        flex: 0 0 89%;
    }

    .topbar_right {
        flex: 0 0 20px;
        position: absolute;
        right: 10px;
    }

    .quote_mask {
        margin-top: 60px;
        padding: 10px 10px 30px 10px;
    }

    .demo4-item {
        background-color: #ddd;
        color: #222;
        font-size: 14px;
        padding: 5px 10px;
        margin: 5px;
        line-height: 18px;
        border-radius: 15px;
    }

    .demo4-item-selected {
        background-color: #FF3B3B;
        color: #fff;
    }
</style>