<template>
    <div class="m-box" v-loading="load">
        <moduleView :propConfig="config" ref="view" @search="search" @pagination="pagination" @resert="resert" />
        <sync ref="sync" />
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import Sync from "./components/sync.vue";
import { productStockKeepingUnit, materialrelevancy } from '@/api/maindataMaterialRelevancy'
@Component({ components: { Sync } })
export default class SynchronousProduct extends Vue {
    load = false;
    currentRow: any = null;
    count = 0;
    time: any = null;
    config: any = {
        attr: {
            calculateH: true
        },
        search: {
            attr: {
                size: 'mini',
                rules: {
                    name: [{
                        required: true, message: '请输入名称', trigger: 'blur'
                    }]
                }
            },
            columns: [
                [{
                    span: 6,
                    label: '商品名称',
                    prop: 'name',
                    component: 'by-input',
                    compConfig: {
                    }
                }]
            ]
        },
        tool: {
            customTools: [
                {
                    name: '商品同步', icon: 'el-icon-setting', event: {
                        click: () => {
                            (this.$refs.sync as any).setShow(true);
                        }
                    }
                }
            ]
        },
        table: {
            attr: {
                size: 'mini',
                align: 'center'
            },
            columns: [{
                title: '商品编码',
                field: 'skuId',
                width: 150
            }, {
                title: '商品名称',
                field: 'name',
                width: 200
            }, {
                title: '商品简称',
                field: 'shortName'
            }, {
                title: '品牌',
                field: 'brand'
            }, {
                title: '单位',
                field: 'unit'
            }, {
                title: '重量',
                field: 'weight'
            }, {
                title: '商品标签',
                field: 'labels'
            }, {
                title: '销售价',
                field: 'salePrice',
                width: 140
            }, {
                title: '市场价',
                field: 'marketPrice',
                width: 140
            }, {
                title: '修改时间',
                field: 'modifyTime',
                width: 180
            },
                // {
                //     title: '操作',
                //     action: true,
                //     width: 170,
                //     plugins: [{
                //         name: '关联商品',
                //         audit: '',
                //         event: {
                //             show: (row: any) => {
                //                 return row.isSync != 1
                //             },
                //             click: (item: any) => {
                //                 (this.$refs.sku as any).setShow(true);
                //                 this.setCurrentRow(item);
                //             }
                //         }
                //     }
                //     ]
                // }
            ]
        }
    }

    mounted() {
        this.$nextTick(() => {
            this.time = setInterval(() => {
                this.getSyncData()
            }, 500)

        })
    }
    setCurrentRow(row: any) {
        this.currentRow = row;
    }
    //商品同步成功
    handleSuccess() {
        let data = (this.$refs.view as any).getPage();
        data.pageNo = 1;
        this.getList(data);
    }
    pagination(page: any) {
        let data: any = (this.$refs.view as any).getQuery();
        this.getList(data);
    }
    resert() {
        let data = (this.$refs.view as any).getPage();
        data.pageNo = 1;
        this.getList(data);
    }
    search() {
        let data: any = (this.$refs.view as any).getQuery();
        data.pageNo = 1;
        this.getList(data);
    }
    getList(data: any) {
        let page: any = {
            pageNo: data.pageNo,
            pageSize: data.pageSize
        }

        this.load = true;

        data.pageNum = data.pageNo;
        delete data.pageNo;
        delete data.total;

        productStockKeepingUnit(data).then((res: any) => {
            this.load = false;
            if (this.$refs.view) {
                (this.$refs.view as any).setTableValue(res.rows);
                page.pageNo = res.pageNum;
                page.total = res.total;
                (this.$refs.view as any).setPage(page);
            }
        }).catch((err: any) => {
            this.load = false;
        })
    }
    //列表数据
    getSyncData() {
        this.count++;
        if (this.count >= 5) {
            clearInterval(this.time)
            return
        }
        if (!this.$refs.view) {
            return
        }
        this.count = 0;
        clearInterval(this.time)
        let data = (this.$refs.view as any).getPage();

        this.getList(data);
    }

    confirmProduct(data: Array<any>) {
        if (data.length == 0) {
            this.$message('请选择商品！');
            return;
        }
        let value: any = {
            lid: this.currentRow.id,
            mskuid: data[0].id
        }
        this.load = true;
        materialrelevancy(value).then((res: any) => {
            this.load = false;
            this.$message({
                message: '商品关联成功！',
                type: 'success'
            })
            this.getSyncData();
        }).catch((err: any) => {
            this.load = false;
            this.$message.error('商品关联失败！')
        })
    }
}
</script>

<style lang="scss" scoped>
.m-box {
    height: 100%;
    width: 100%;
}
</style>