<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(row, col, index) {
                            if (index === 0) {
                                return '尺码';
                            } else {
                                return row.sizeName;
                            }
                        },
                        fixed: 'left'
                    });
                    columns.push({
                        width: 220,
                        render(row, col, index) {
                            if (index === 0) {
                                return `参考尺码(${sizeInfo.genderName})`;
                            } else {
                                return `<i-input class="size-inpt" v-model="row.referenceNameA"></i-input>/
                                    <i-input class="size-inpt" width="50" v-model="row.referenceNameB"></i-input>`;
                            }
                        },
                        fixed: 'left'
                    });
                    _.each(attrs, (attr, colIndex) => {
                        columns.push({
                            width: 120,
                            noMeasure: _.some(noMeasureIds, id => +id === attr.sizeAttributeId),
                            sizeAttributeId: attr.sizeAttributeId,
                            render(row, col, index) {
                                if (index === 0) {
                                    return `<span>${attr.sizeAttributeName}</span>
                                        <Checkbox v-model="column.noMeasure">无需测量</Checkbox>`;
                                } else {
                                    return `<i-input class="size-inpt" 
                                        v-model="row.prdSizeAttributeBoList[${colIndex}].sizeValue" 
                                        :disabled="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;
                }
            });
        },
        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;
            background-color: #f5f7f9;
        }
    }
    
}
.size-modal {
    .ivu-modal {
        width: 90%;
    }
}
</style>