<template>
    <Table ref="sellerGoods"
        class="table-good-size" 
        :data="table.data" 
        :columns="table.columns" 
        stripe 
        border></Table>
</template>

<script>
export default {
    name: 'table-good-size',
    props: {
        value: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            table: {
                columns: [
                    {
                        title: '色系名称',
                        render: (h, params) => {
                            if (this.isExist(params.index)) {
                                return h('div', {}, [
                                    h('p', {}, this.table.data[params.index].goodsName.name),
                                    h('Radio', {
                                        props: {
                                            value: this.table.data[params.index].goodsName.isDefault
                                        },
                                        on: {
                                            'on-change': () => {
                                                this.clickDefault(params.index);
                                            }
                                        }
                                    }, '主推')
                                ]);
                            }
                            return null;
                        },
                        renderHeader(h) { //eslint-disable-line
                            return <span>色系名称</span>;
                        }
                    },
                    {
                        title: '颜色展示名称',
                        render: (h, params) => {
                            if (this.isExist(params.index)) {
                                return h('input-safe', {
                                    props: {
                                        value: params.row.factoryGoodsName
                                    },
                                    attrs: {
                                        placeholder: params.row.goodsName.name
                                    },
                                    style: {
                                        width: '100%'
                                    },
                                    on: {
                                        'on-blur': () => this.changeFactoryGoodsName(params.row, params.index),
                                        input: val => (params.row.factoryGoodsName = val)
                                    }
                                });
                            }
                            return null;
                        },
                        renderHeader(h) { //eslint-disable-line
                            return <span>颜色展示名称</span>;
                        }
                    },
                    {
                        title: '商品封面图片',
                        width: 200,
                        render: (h, params) => {
                            let row = params.row;

                            return (
                                <div class={{'table-upload-item': true}}>
                                    <drag-file-upload
                                        id={{index: params.index}}
                                        default-file={row.goodsColorImage.value}
                                        skn={row.productSkn}
                                        onSuccess={this.uploadSuccess}
                                        onError={this.uploadError}></drag-file-upload>
                                    {(row.goodsColorImage.showValidate && row.goodsColorImage.validate) ? (
                                        <div class={{'table-upload-item-tip': true}}>
                                            必须上传图片
                                        </div>
                                    ) : null}
                                </div>
                            );
                        },
                        renderHeader(h, params) { //eslint-disable-line
                            return (
                                <div>
                                    <span class="table-header-req">
                                        {params.column.title}
                                        <poptip trigger="hover" placement="right-start">
                                            <icon type="help-circled"></icon>
                                            <div class="example-pop" slot="content">
                                                <div class="title">
                                                    图片尺寸建议 1050*1400，不大于 500KB 。
                                                </div>

                                                <div class="title">
                                                    色卡图片会被自动设置为商品的正面图片，要求必须拍摄商品正面照，且图片底色为 <strong>F5F7F6</strong> 。
                                                </div>

                                                <div class="text-center"><img class="image" /></div>
                                            </div>
                                        </poptip>
                                    </span>
                                </div>
                            );
                        }
                    },
                    {
                        title: '款型编码',
                        key: 'factoryCode',
                        render: (h, params) => {
                            if (this.isExist(params.index)) {
                                return (
                                    <input-safe
                                        value={params.row.factoryCode}
                                        placeholder='请输入...'
                                        onInput={val => (params.row.factoryCode = val)}
                                        style={{width: '100%'}}></input-safe>
                                );
                            }
                            return null;
                        },
                        renderHeader(h) { //eslint-disable-line
                            return (
                                <div>
                                    <span>款型编码
                                        <poptip trigger="hover" placement="right-start">
                                            <icon type="help-circled"></icon>
                                            <div slot="content">
                                                <span>入库识别码填写规范</span><a href="/instore_code_rule.pdf">下载</a>
                                            </div>
                                        </poptip>
                                    </span>
                                </div>
                            );
                        }
                    },
                    {
                        title: '尺码',
                        key: 'sizeId',
                        render: (h, params) => {
                            return (
                                <div class={{'size-id': true}}>
                                    {params.row.sizeId.map(size => {
                                        return <div class={{'row-span': true}}>{size.name}</div>;
                                    })}
                                </div>
                            );
                        },
                        renderHeader(h) { //eslint-disable-line
                            return <span>尺码</span>;
                        }
                    },
                    {
                        title: '商品条码',
                        key: 'sizeCode',
                        render: (h, params) => {
                            return (
                                <div class={{'size-code': true}}>
                                    {params.row.sizeCode.map((size, i) => {
                                        return (
                                            <div class={{'row-span': true}}>
                                                <div style={{position: 'relative'}}>
                                                    <div class={{'size-code-error': size.validate && !size.name}}>
                                                        <input-safe
                                                            value={size.name}
                                                            onInput={val => (size.name = val)}
                                                            disabled={!params.row.operator[i].value}
                                                            placeholder="请输入..."
                                                            style={{width: '100%'}}
                                                        />
                                                    </div>
                                                    {(size.validate && !size.name) ? (
                                                        <div class={{'size-code-tip': true}}>
                                                            不能为空
                                                        </div>
                                                    ) : null}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            );
                        },
                        renderHeader(h, params) { //eslint-disable-line
                            return <span class="table-header-req">{params.column.title}</span>;
                        }
                    },
                    {
                        title: 'SKU',
                        key: 'productSku',
                        render: (h, params) => {
                            return (
                                <div class={{'prod-sku': true}}>
                                    {params.row.sizeId.map(size => {
                                        return (
                                            <div class={{'row-span': true}}>
                                                {size.productSku || '-'}
                                            </div>
                                        );
                                    })}
                                </div>
                            );
                        },
                        renderHeader(h) { //eslint-disable-line
                            return <span>SKU</span>;
                        }
                    },
                    {
                        title: '库存',
                        render: (h, params) => {
                            return (
                                <div class={{'prod-sku': true}}>
                                    {params.row.sizeId.map(size => {
                                        return (
                                            <div class={{'row-span': true}}>
                                                {size.storageNum || '-'}
                                            </div>
                                        );
                                    })}
                                </div>
                            );
                        },
                        renderHeader(h) { //eslint-disable-line
                            return <span>库存</span>;
                        }
                    },
                    {
                        title: '操作',
                        key: 'operator',
                        render: (h, params) => {
                            if (this.isExist(params.index) && this.table.data[params.index]) {
                                return (
                                    <div class={{'size-operator': true}}>
                                        {this.table.data[params.index].operator.map((op, i) => {
                                            return (
                                                <div class={{'row-span': true}}>
                                                    {this.table.data[params.index].operator[i].value ? (
                                                        <i-button
                                                            type="warning"
                                                            style={this.table.data[params.index].sizeId[i].productSku ? {
                                                                visibility: 'hidden'
                                                            } : {}}
                                                            onClick={() => this.clickOperator(params.row, i)}>禁用</i-button>
                                                    ) : (
                                                        <i-button v-else type="primary"
                                                            onClick={() => this.clickOperator(params.row, i)}>启用</i-button>
                                                    )}
                                                </div>
                                            );
                                        })}
                                    </div>
                                );
                            }
                            return null;
                        },
                        renderHeader(h) { //eslint-disable-line
                            return <span>操作</span>;
                        }
                    }
                ],
                data: this.value
            }
        };
    },
    methods: {
        clickDefault(index) {
            this.refreshTable();
            let color = this.table.data[index];

            color.goodsName.isDefault = true;
            this.table.data.forEach((c) => {
                if (c.colorId && c.colorId !== color.colorId) {
                    c.goodsName.isDefault = false;
                }
            });
        },
        changeFactoryGoodsName(row, index) {
            this.$emit('on-factory-name', index, row.factoryGoodsName);
        },
        uploadSuccess(attach, file) {
            this.refreshTable();

            this.table.data[attach.index].goodsColorImage.value = file.url;
            this.onUploadGoodImage({
                index: attach.index
            }, file.url);

            this.table.data[attach.index].goodsColorImage.validate = true;
            if (this.table.data[attach.index].goodsColorImage.value) {
                this.table.data[attach.index].goodsColorImage.showValidate = false;
            } else {
                this.table.data[attach.index].goodsColorImage.showValidate = true;
            }
        },
        onUploadGoodImage(attach, file) {
            this.$emit('on-upload', attach, file);
        },
        uploadError() {
        },
        clickOperator(row, itemIndex) {
            this.refreshTable();
            row.operator[itemIndex].value = row.operator[itemIndex].value ? false : true;

            if (row.operator[itemIndex].value) {
                row.sizeCode[itemIndex].name = '';
                row.sizeCode[itemIndex].validate = true;
            } else {
                row.sizeCode[itemIndex].name = '';
                row.sizeCode[itemIndex].validate = false;
            }
        },
        refreshTable() {
            this.table.data = this.$refs.sellerGoods.rebuildData;
        },
        isExist(index) {
            let row = this.table.data[index];

            if (row) {
                return true;
            }

            return false;
        },
        syncData() {
            this.$emit('input', this.$refs.sellerGoods.rebuildData);
        }
    },
    watch: {
        value(newVal) {
            this.table.data = newVal;
        }
    }
};
</script>
<style lang="scss">

@mixin row-span {
    min-height: 30px;

    .row-span {
        min-height: 30px;
        border-bottom: 1px solid #e3e8ee;
        margin-left: -18px;
        margin-right: -18px;
        padding: 20px 18px;

        &:last-child {
            border-bottom: none;
        }
    }
}

.prod-sku {
    @include row-span;
}

.size-code {
    @include row-span;

    &-error {
        border: 1px solid #f30;
    }

    &-tip {
        position: absolute;
        line-height: 1;
        padding-top: 6px;
        color: #f30;
    }
}

.size-id {
    @include row-span;

    text-align: center;
}

.size-operator {
    @include row-span;

    text-align: center;
}

.table-header-req {
    &:after {
        content: "*";
        display: inline-block;
        margin-left: 4px;
        line-height: 1;
        font-family: SimSun;
        font-size: 12px;
        color: #f30;
    }
}

.table-upload-item-error {
    border: 1px solid #f30;
}

.table-upload-item-tip {
    padding-top: 6px;
    color: #f30;
    top: 100%;
}

.table-upload-item {
    text-align: center;
    padding: 10px;
}

.example-pop {
    padding: 10px;

    .title {
        color: #c90;
        width: 155px;
        white-space: normal;
        margin-bottom: 10px;
    }

    .text-center {
        text-align: center;
    }

    .image {
        width: 100px;
        height: 134px;
        background-image: url(../../statics/images/example/1.png);
    }

    .ivu-poptip-body {
        padding: 8px 16px;
    }
}
</style>