<template>
    <Modal 
        class="size-modal" 
        width="auto" 
        v-model="showModal"
        :loading="saveing"
        @on-ok="modalOK" 
        @on-cancel="modalCancel" 
        :title="title"
        ok-text="保存">
        <div class="size-edit">
            <Spin v-if="showLoading" fix size="large"></Spin>
            <Checkbox v-model="sizeImgFlag">隐藏测量方式图</Checkbox>
            <Table ref="tableSize" :show-header="false" :data="data" :columns="columns" v-if="!showLoading">
                <div class="" slot="header">
                    <div class="table-header"> 
                        <div :style="{width:column.width+'px', flex:column.width?'inherit':'1'}" class="table-th" v-for="column in columns">
                            <span>{{column.title}}</span>
                            <Checkbox v-model="column.noMeasure" v-if="column.sizeAttributeId">无需测量</Checkbox>
                        </div>
                    </div>
                </div>
            </Table>
        </div>
    </Modal>
</template>

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

export default {
    name: 'SizEdit',
    props: {
    },
    data() {
        return {
            showModal: false,
            showLoading: true,
            saveing: false,
            title: '编辑尺码信息',
            sizeImgFlag: false,
            skn: 0,
            gender: '',
            data: [],
            columns: [{}],
            noMeasureIds: {}
        };
    },
    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({
                        title: '尺码',
                        width: 70,
                        key: 'sizeName'
                    });
                    columns.push({
                        title: `参考尺码(${sizeInfo.genderName})`,
                        width: 220,
                        render() {
                            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>`;
                        }
                    });
                    _.each(attrs, (attr, index) => {
                        columns.push({
                            title: attr.sizeAttributeName,
                            noMeasure: _.some(noMeasureIds, id => +id === index + 2),
                            sizeAttributeId: attr.sizeAttributeId,
                            render() {
                                return `<i-input class="size-inpt" 
                                    v-model="row.prdSizeAttributeBoList[${index}].sizeValue" 
                                    :disabled="column.noMeasure"></i-input>`;
                            }
                        });
                    });
                    this.data = sizeInfo.sizeRelationsList;
                    this.columns = columns;
                    this.sizeImgFlag = sizeInfo.sizeImgFlag !== 0;
                    this.gender = sizeInfo.gender;
                }
                this.showLoading = false;
            });
        },
        modalOK() {
            this.showLoading = true;
            let data = this.$refs.tableSize.rebuildData;
            let noMeasureIds = [],
                sizeInfoList = [],
                productSizeReferList = [];

            _.each(this.columns, (col, index) => {
                if (col.sizeAttributeId && col.noMeasure) {
                    noMeasureIds.push(index);
                }
            });
            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
            };

            this.saveing = true;
            productService.saveProdSizeInfo(postData).then(result => {
                if (result.code === 200) {
                    this.showModal = false;
                    this.showLoading = true;
                }
            });

        },
        modalCancel() {
            this.showLoading = true;
        }
    }
};
</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 {
        width: 100%;
        height: 48px;
        display: flex;
        .table-th {
            flex: 1;
            line-height: initial;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 12px;
            font-weight: bold;
            border-bottom: 1px solid #e3e8ee;
            background-color: #f5f7f9;
            display: flex;
            flex-flow: column;
            justify-content: center;
        }
    }
    
    .ivu-table-wrapper {
        table {
            width: 100%;
        }
        .ivu-table-title {
            table {
                th {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
            }
        }
    }
}
.size-modal {
    .ivu-modal {
        width: 90%;
    }
}
</style>