<template>
    <el-dialog title="添加模板" width="840px" :visible.sync="dialogVisible" @close="reset">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="模板名称，如：衣服"></el-input>
            </el-form-item>
            <el-form-item :label="item.name" v-for="(item, index) in form.specList" :key="index">
                <div class="tag_wrap">
                    <el-tag v-for="(val, i) in item.value" :key="i" closable size="medium" :disable-transitions="true"
                        @close="handleClose(index, i)">
                        {{ val }}
                    </el-tag>
                    <el-input class="input-new-tag" v-show="item.inputVisible" v-model="item.inputValue" ref="saveTagInput"
                        size="small" placeholder="请输入规格值，回车添加" @keyup.enter.native="handleInputConfirm(index)"
                        @blur="handleInputConfirm(index)">
                    </el-input>
                    <el-button v-show="!item.inputVisible" size="mini" icon="el-icon-plus" plain @click="showInput(index)">
                        添加
                    </el-button>
                    <el-button size="mini" icon="el-icon-delete" plain @click="deleteTag(index)">删除</el-button>
                </div>
            </el-form-item>
        </el-form>
        <el-form ref="skuForm" :model="skuForm" :rules="skuRules" label-width="80px" label-position="left">
            <el-row :gutter="20" v-if="showSkuForm">
                <el-col :span="10">
                    <el-form-item label="规格" prop="skuValidate1">
                        <el-input v-model="skuForm.label" placeholder="规格，如：尺码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="规格值" prop="skuValidate2">
                        <el-input v-model="skuForm.value" placeholder="规格值，如：S、M"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addSkuSubmit">添加</el-button>
                    <el-button @click="showSkuForm = false">取消</el-button>
                </el-col>
            </el-row>
            <el-form-item v-if="!showSkuForm">
                <el-button type="primary" icon="el-icon-plus" @click="showSkuForm = true">添加规格</el-button>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { tbProductSpecPost, tbProductSpecPut } from '@/api/shop'
export default {
    data() {
        const validateSku1 = (rule, value, callback) => {
            if (!this.skuForm.label) {
                callback(new Error(' '))
            } else {
                callback()
            }
        }
        const validateSku2 = (rule, value, callback) => {
            if (!this.skuForm.value) {
                callback(new Error(' '))
            } else {
                callback()
            }
        }
        return {
            dialogVisible: false,
            showSkuForm: true,
            skuForm: {
                label: '',
                value: ''
            },
            skuRules: {
                skuValidate1: {
                    required: true,
                    validator: validateSku1,
                    trigger: 'blur'
                },
                skuValidate2: {
                    required: true,
                    validator: validateSku2,
                    trigger: 'blur'
                }
            },
            form: {
                id: '',
                name: '',
                shopId: localStorage.getItem('shopId'),
                specList: []
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    methods: {
        onSubmitHandle() {
            console.log(this.form)
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        let res = null
                        if (!this.form.id) {
                            res = await tbProductSpecPost(this.form)
                        } else {
                            res = await tbProductSpecPut(this.form)
                        }
                        this.$emit('success', res)
                        this.close()
                        this.$notify({
                            title: '成功',
                            message: `${this.form.pid ? '编辑' : '添加'}成功`,
                            type: 'success'
                        });
                    } catch (error) {
                        console.log(error)
                    }
                }
            })
        },
        show(obj) {
            this.dialogVisible = true
            if (obj && obj.id) {
                const newObj = JSON.parse(JSON.stringify(obj));
                this.form.id = newObj.id
                this.form.name = newObj.name
                const specList = newObj.specList
                for (let item of specList) {
                    item.inputVisible = false
                    item.inputValue = ''
                }
                this.form.specList = specList
            }
        },
        close() {
            this.dialogVisible = false
        },
        reset() {
            this.form.id = ''
            this.form.name = ''
            this.form.specList = []
        },
        // sku from
        addSkuSubmit() {
            this.$refs.skuForm.validate(async valid => {
                if (valid) {
                    this.form.specList.push({
                        name: this.skuForm.label,
                        value: [this.skuForm.value],
                        inputVisible: false,
                        inputValue: ''
                    })
                    this.skuForm.label = ''
                    this.skuForm.value = ''
                    this.showSkuForm = false
                }
            })
        },
        handleClose(index, i) {
            this.form.specList[index].value.splice(i, 1);
        },
        showInput(index) {
            this.form.specList[index].inputVisible = true;
        },
        handleInputConfirm(index) {
            let inputValue = this.form.specList[index].inputValue;
            if (inputValue) {
                this.form.specList[index].value.push(inputValue);
            }
            this.form.specList[index].inputVisible = false;
            this.form.specList[index].inputValue = '';
        },
        // 删除已添加的规格
        deleteTag(index) {
            this.form.specList.splice(index, 1);
        }
    }
}
</script>

<style scoped lang="scss">
.tag_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.input-new-tag {
    width: 180px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>