<template>
    <Table ref="sellerGoods" :context="self" :data="table.data" :columns="table.columns" stripe border></Table>
</template>

<script>
export default {
    name: 'TableGoodSize',
    props: {
        value: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            self: this,
            table: {
                columns: [
                    {
                        title: '色系名称',
                        key: 'goodsName',
                        render(row, col, index) {
                            return `<div v-if="isExist(${index})">
                                            <p>{{table.data[${index}].goodsName.name}}</p>
                                            <Radio :value="table.data[${index}].goodsName.isDefault"
                                                    @on-change="clickDefault(${index})">主推</Radio>
                                        </div>`;
                        }
                    },
                    {
                        title: '颜色展示名称',
                        key: 'factoryGoodsName',
                        render(row, col, index) {
                            return `<div v-if="isExist(${index})">
                                            <i-input
                                                v-model="row.factoryGoodsName"
                                                :placeholder="row.goodsName.name"
                                                @on-blur="changeFactoryGoodsName(row,${index})">
                                            </i-input>
                                        </div>`;
                        }
                    },
                    {
                        title: '色卡图片*',
                        key: 'goodsColorImage',
                        width: 170,
                        render(row, col, index) {
                            return `<div
                                        :class="{'upload-item': true ,
                                                'upload-item-error':
                                                row.goodsColorImage.showValidate &&  row.goodsColorImage.validate}">
                                            <div class="upload-item-img">
                                                <img v-if="row.goodsColorImage.value"
                                                    :src="row.goodsColorImage.value"
                                                    alt="" width="120px" height="122px">
                                            </div>

                                            <div>
                                                <file-upload :id="{index: ${index}}"
                                                    @on-success="uploadSuccess"
                                                    @on-error="uploadError"></file-upload>
                                            </div>
                                            <div v-if="row.goodsColorImage.showValidate && row.goodsColorImage.validate"
                                                class="upload-item-tip">
                                                    必须上传图片
                                            </div>
                                        </div>`;
                        }
                    },
                    {
                        title: '款型编码',
                        key: 'factoryCode',
                        render(row, col, index) {
                            return `<div v-if="isExist(${index})">
                                            <i-input
                                                v-model="row.factoryCode"
                                                placeholder="请输入..."
                                                >
                                            </i-input>
                                        </div>`;
                        }
                    },
                    {
                        title: '尺码*',
                        key: 'sizeId',
                        width: 80,
                        render() {
                            return `<div class="size-id">
                                            <div v-for="size in row.sizeId" class="row-span">
                                                {{size.name}}
                                            </div>
                                        </div>`;
                        }
                    },
                    {
                        title: '商品条码*',
                        key: 'sizeCode',
                        render() {
                            return `<div class='size-code'>
                                            <div v-for="size,i in row.sizeCode" class="row-span">
                                                <div style="position: relative">
                                                    <div :class="{'size-code-error': size.validate && !size.name}">
                                                        <i-input
                                                            v-model="size.name"
                                                            :disabled="!row.operator[i].value"
                                                            placeholder="请输入..."
                                                            />
                                                    </div>
                                                    <div class="size-code-tip" v-if="size.validate && !size.name">
                                                        不能为空
                                                    </div>
                                                </div>
                                            </div>
                                        </div>`;
                        }
                    },
                    {
                        title: '操作',
                        key: 'operator',
                        width: 100,
                        render(row, col, index) {
                            return `<template v-if="isExist(${index})">
                                            <div class="size-operator" v-if="table.data[${index}]">
                                                <div v-for="op,i in table.data[${index}].operator" class="row-span">
                                                    <i-button v-if="table.data[${index}].operator[i].value"
                                                            type="warning"
                                                            @click="clickOperator(row, i)">禁用</i-button>
                                                    <i-button v-else type="primary"
                                                            @click="clickOperator(row, i)">启用</i-button>
                                                </div>
                                            </div>
                                        </template>`;
                        }
                    }
                ],
                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 !== color.colorId) {
                    c.goodsName.isDefault = false;
                }
            });
        },
        changeFactoryGoodsName(row, index) {
            this.$emit('on-factory-name', index, row.factoryGoodsName);
        },
        uploadSuccess(attach, files) {
            this.refreshTable();
            this.table.data[attach.index].goodsColorImage.value = files[0];
            this.onUploadGoodImage(attach, files[0]);

            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;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;

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


.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;
}

</style>