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

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

    export default {
        name: 'TableCreateGoodSize',
        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">
                                    </i-input>
                                </div>`;
                            }
                        },
                        {
                            title: '色卡图片',
                            key: 'goodsColorImage',
                            width: 170,
                            render(row, col, index) {
                                return `<div
                                    :class="{'table-upload-item': true ,
                                             'table-upload-item-error':
                                                row.goodsColorImage.showValidate && row.goodsColorImage.validate}"
                                             >
                                    <div class="table-upload-item-img">
                                        <img v-if="row.goodsColorImage.value"
                                            :src="row.goodsColorImage.value" alt="" width="84px" height="112px">
                                    </div>
                                    <div>
                                        <file-upload :id="{index: ${index}}"
                                            @on-success="uploadSuccess"
                                            @on-error="uploadError"></file-upload>
                                        <example-pop></example-pop>
                                    </div>
                                    <div v-if="row.goodsColorImage.showValidate && row.goodsColorImage.validate"
                                        class="table-upload-item-tip">
                                            必须上传图片
                                    </div>
                                </div>`;
                            },
                            renderHeader(col, index) {
                                return `<span class="table-header">${col.title}</span>`;
                            }
                        },
                        {
                            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(row, col, index) {
                                return `<div class="size-id">
                                    <div v-for="size in row.sizeId" class="row-span">
                                        {{size.name}}
                                    </div>
                                </div>`;
                            }
                        },
                        {
                            title: '商品条码',
                            key: 'sizeCode',
                            render(row, col, index) {
                                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>`;
                            },
                            renderHeader(col, index) {
                                return `<span class="table-header">${col.title}</span>`;
                            }
                        },
                        {
                            title: '操作',
                            key: 'operator',
                            width: 100,
                            render(row, col, index) {
                                return `<template v-if="isExist(${index})">
                                    <div class="size-operator">
                                        <div v-for="op,i in row.operator" class="row-span">
                                            <i-button v-if="row.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: {
            isExist(index) {
                let row = this.table.data[index];

                if (row) {
                    return true;
                }

                return false;
            },
            refreshTable() {
                this.table.data = this.$refs.sellerGoods.rebuildData;
            },
            syncData() {
                this.$emit('input', this.$refs.sellerGoods.rebuildData);
            },
            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;
                    }
                });
            },
            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;
                }

            },
            uploadSuccess: function(attach, files) {
                this.refreshTable();
                this.table.data[attach.index].goodsColorImage.value = 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;
                }
            },
            uploadError: function(attach, err) {
            },
        },
        watch: {
            value(newValue) {
                this.table.data = newValue;
            }
        },
        components: {
            ExamplePop
        }
    };

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

    .table-upload-item {
        display: inline-block;
        height: 220px;
        width: 130px;
        text-align: center;
        margin: 30px 0;
    }

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

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

    .table-upload-item-img {
        display: inline-block;
        height: 116px;
        width: 88px;
        border: 2px solid #e8e8e8;
        box-sizing: border-box;
    }

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

</style>