<template>
    <Modal 
        class="size-modal" 
        width="auto" 
        v-model="showModal"
        :saveLoading="saveLoading"
        @on-ok="modalOK" 
        @on-cancel="modalCancel" 
        :title="title"
        ok-text="保存">
        <div class="size-edit">
            <Checkbox v-model="sizeImgFlag">隐藏测量方式图</Checkbox>
            <Table ref="tableSize" v-if="loadingOk" :row-class-name="rowClassName" :show-header="false" :data="data" :columns="columns">
            </Table>
        </div>
    </Modal>
</template>

<script>
import productService from 'product-service';
import _ from 'lodash';

export default {
    name: 'ModalSizeEdit',
    props: {
    },
    data() {
        return {
            showModal: false,
            saveLoading: true,
            title: '编辑尺码信息',
            sizeImgFlag: false,
            skn: 0,
            gender: '',
            data: [],
            columns: [{}],
            noMeasureIds: {},
            loadingOk: false,
        };
    },
    watch: {
        columns: {
            handler(col) {
                if (_.get(this.$refs, 'tableSize.rebuildData.length')) {
                    this.data = this.$refs.tableSize.rebuildData;
                    let noMeasureIds = _.filter(col, c => c.noMeasure).map(c => {
                        return c.sizeAttributeId;
                    });

                    _.each(this.data, row => {
                        _.each(row.prdSizeAttributeBoList, attr => {
                            if (_.some(noMeasureIds, id => id === attr.sizeAttributeId)) {
                                attr.sizeValue = '';
                            }
                        });
                    });
                }
            },
            deep: true
        }
    },
    methods: {
        show(skn) {
            let columns = [];

            this.skn = skn;
            this.showModal = true;
            productService.queryProdSize(this.skn).then(sizeInfo => {
                if (_.get(sizeInfo, 'sizeRelationsList.length', 0)) {
                    let noMeasureIds = sizeInfo.noMeasureIds;
                    let attrs = sizeInfo.sizeRelationsList[0].prdSizeAttributeBoList;

                    columns.push({
                        width: 70,
                        render: (h, params) => {
                            if (params.index === 0) {
                                return (
                                    <span>尺码</span>
                                );
                            } else {
                                return (
                                    <span>{params.row.sizeName}</span>
                                );
                            }
                        },
                        fixed: 'left'
                    });
                    columns.push({
                        width: 220,
                        render: (h, params) => {
                            if (params.index === 0) {
                                return (
                                    <span>参考尺码({sizeInfo.genderName})</span>
                                );
                            } else {
                                return (
                                    <div>
                                        <i-input
                                            class="size-inpt"
                                            value={params.row.referenceNameA}
                                            onInput={val => (params.row.referenceNameA = val)} />
                                        /
                                        <i-input
                                            class="size-inpt"
                                            value={params.row.referenceNameB}
                                            onInput={val => (params.row.referenceNameB = val)} />
                                    </div>
                                );
                            }
                        },
                        fixed: 'left'
                    });
                    _.each(attrs, (attr, colIndex) => {
                        columns.push({
                            width: 120,
                            noMeasure: _.some(noMeasureIds, id => +id === attr.sizeAttributeId),
                            sizeAttributeId: attr.sizeAttributeId,
                            render: (h, params) => {
                                if (params.index === 0) {
                                    return h('div', {}, [
                                        h('span', {}, attr.sizeAttributeName),
                                        h('Checkbox', {
                                            props: {
                                                value: params.column.noMeasure
                                            },
                                            on: {
                                                input: val => (params.column.noMeasure = val)
                                            }
                                        }, '无需测量')]);
                                } else {
                                    return (
                                        <i-input
                                            class="size-inpt"
                                            value={params.row.prdSizeAttributeBoList[colIndex].sizeValue}
                                            onInput={val => (params.row.prdSizeAttributeBoList[colIndex].sizeValue = val)}
                                            disabled={params.column.noMeasure}></i-input>
                                    );
                                }
                            }
                        });
                    });
                    this.columns = columns;
                    this.data = _.concat({}, sizeInfo.sizeRelationsList);
                    this.sizeImgFlag = sizeInfo.sizeImgFlag !== 0;
                    this.gender = sizeInfo.gender;
                    this.loadingOk = true;
                }
            });
        },
        getColumns() {

        },
        rowClassName(row, index) {
            if (index === 0) {
                return 'table-header';
            }
        },
        modalOK() {
            let data = _.drop(this.$refs.tableSize.rebuildData, 1);
            let columns = this.$refs.tableSize.cloneColumns;
            let noMeasureIds = [],
                sizeInfoList = [],
                productSizeReferList = [];

            _.each(columns, col => {
                if (col.sizeAttributeId && col.noMeasure) {
                    noMeasureIds.push(col.sizeAttributeId);
                }
            });
            sizeInfoList = _.concat([], ..._.map(data, row => {
                return _.map(row.prdSizeAttributeBoList, size => {
                    return {
                        productSkn: this.skn,
                        sizeId: row.sizeId,
                        sizeAttributeId: size.sizeAttributeId,
                        sizeValue: size.sizeValue
                    };
                });
            }));
            productSizeReferList = _.map(data, row => {
                return {
                    sizeId: row.sizeId,
                    gender: this.gender,
                    referenceName: `${row.referenceNameA}/${row.referenceNameB}`
                };
            });

            let postData = {
                productSkn: this.skn,
                noMeasureIds: JSON.stringify(noMeasureIds),
                sizeInfoList: JSON.stringify(sizeInfoList),
                productSizeReferList: JSON.stringify(productSizeReferList),
                sizeImgFlag: this.sizeImgFlag ? 1 : 0
            };

            productService.saveProdSizeInfo(postData).then(result => {
                if (result.code === 200) {
                    this.loadingOk = false;
                    this.showModal = false;
                    this.$Message.success('尺码保存成功!');
                } else {
                    this.$Message.error('尺码保存失败!');
                }
            });
        },
        modalCancel() {
            this.loadingOk = false;
            this.showModal = false;
        }
    }
};
</script>

<style lang="scss">
.size-edit {
    min-height: 200px;
    position: relative;
    display: inline-block;
    width: 100%;

    .ivu-spin {
        margin-top: 50px;
    }

    .size-inpt {
        width: 70px;
    }

    .table-header {
        border-bottom: 1px solid #e3e8ee;
        background-color: #f5f7f9;

        td {
            background-color: #f5f7f9;
            white-space: nowrap;
            overflow: hidden;
        }
    }
}

.size-modal {
    .ivu-modal {
        width: 90%;
    }
}
</style>