<template>
    <Table ref="sellerGoods" class="table-good-size" :row-class-name="rowClassName" :show-header="false" :data="table.data" :columns="table.columns" stripe border></Table>
</template>

<script>
import {ExamplePop} from 'components/pop';
import _ from 'lodash';

export default {
    name: 'TableGoodSize',
    props: {
        value: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            table: {
                columns: [
                    {
                        title: '色系名称',
                        key: 'goodsName',
                        render: (h, params) => {
                            if (!params.index) {
                                return <span>色系名称</span>;
                            }
                            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;
                        }
                    },
                    {
                        title: '颜色展示名称',
                        key: 'factoryGoodsName',
                        render: (h, params) => {
                            if (!params.index) {
                                return <span>颜色展示名称</span>;
                            }
                            if (this.isExist(params.index)) {
                                return h('Input', {
                                    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;
                        }
                    },
                    {
                        title: '商品封面图片',
                        key: 'goodsColorImage',
                        width: 200,
                        render: (h, params) => {
                            if (!params.index) {
                                return (
                                    <div>
                                        <span class="table-header-req">{params.column.title}<ExamplePop></ExamplePop></span>
                                    </div>
                                );
                            }
                            return (
                                <div class={{'table-upload-item': true}}>
                                    <drag-file-upload
                                        id={{index: params.index}}
                                        default-file={params.row.goodsColorImage.value}
                                        onSuccess={this.uploadSuccess}
                                        onError={this.uploadError}></drag-file-upload>
                                    {(params.row.goodsColorImage.showValidate && params.row.goodsColorImage.validate) ? (
                                        <div class={{'table-upload-item-tip': true}}>
                                            必须上传图片
                                        </div>
                                    ) : null}
                                </div>
                            );
                        }
                    },
                    {
                        title: '款型编码',
                        key: 'factoryCode',
                        render: (h, params) => {
                            if (!params.index) {
                                return <span>款型编码</span>;
                            }

                            if (this.isExist(params.index)) {
                                return (
                                    <i-input
                                        value={params.row.factoryCode}
                                        placeholder='请输入...'
                                        onInput={val => (params.row.factoryCode = val)}
                                        style={{width: '100%'}}></i-input>
                                );
                            }
                            return null;
                        }
                    },
                    {
                        title: '尺码',
                        key: 'sizeId',
                        render: (h, params) => {
                            if (!params.index) {
                                return <span>尺码</span>;
                            }
                            return (
                                <div class={{'size-id': true}}>
                                    {params.row.sizeId.map(size => {
                                        return <div class={{'row-span': true}}>{size.name}</div>;
                                    })}
                                </div>
                            );
                        }
                    },
                    {
                        title: '商品条码',
                        key: 'sizeCode',
                        render: (h, params) => {
                            if (!params.index) {
                                return <span class="table-header-req">{params.column.title}</span>;
                            }
                            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}}>
                                                        <i-input
                                                            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>
                            );
                        }
                    },
                    {
                        title: 'SKU',
                        key: 'productSku',
                        render: (h, params) => {
                            if (!params.index) {
                                return <span>SKU</span>;
                            }
                            return (
                                <div class={{'prod-sku': true}}>
                                    {params.row.sizeId.map(size => {
                                        return (
                                            <div class={{'row-span': true}}>
                                                {size.productSku || '-'}
                                            </div>
                                        );
                                    })}
                                </div>
                            );
                        }
                    },
                    {
                        title: '操作',
                        key: 'operator',
                        render: (h, params) => {
                            if (!params.index) {
                                return <span>操作</span>;
                            }

                            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;
                        }
                    }
                ],
                data: _.concat({}, this.value)
            }
        };
    },
    methods: {
        rowClassName(row, index) {
            if (index === 0) {
                return 'table-header';
            }
        },
        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 - 1, row.factoryGoodsName);
        },
        uploadSuccess(attach, file) {
            this.refreshTable();

            this.table.data[attach.index].goodsColorImage.value = file.url;
            this.onUploadGoodImage({
                index: attach.index - 1
            }, 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', _.drop(this.$refs.sellerGoods.rebuildData, 1));
        }
    },
    watch: {
        value(newVal) {
            this.table.data = _.concat({}, newVal);
        }
    },
    components: {
        ExamplePop
    }
};
</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;
}

.table-good-size {
    td {
        background-color: #f5f7f9;
    }

    .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
    .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
        background-color: #fff;
    }
}
</style>