<template>
    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
        <div class="form-card">
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    类目名称：
                </div>
                <div class="box">
                    <input type="text" v-model="form.name" />
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    类目简称：
                </div>
                <div class="box">
                    <input type="text" v-model="form.abbreviation" />
                </div>
            </section>
        </div>

        <div class="form-card img-card">
            <section class="form-img-item">
                <div class="tit">
                    <span class="required hide">*</span>类目图片
                </div>
                <div class="list">
                    <easy-upload
                        :types="'image'"
                        v-model="iconImg"
                        :uploadCount="1"
                        @change="imageChange"
                    ></easy-upload>
                </div>
            </section>
        </div>

        <div class="btns">
            <button type="button" class="btn" @click="save()">保存</button>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import easyUpload from "../../components/easy-upload/easy-upload";

export default {
    name: "",
    components: { MyImage, easyUpload },

    // 数据
    data() {
        return {
            editId: "",
            oldData: {},
            form: {
                storeId: "",
                parentId: "0",
                companyId: "0",
                name: "",
                abbreviation: "",
                icon: "",
                status: 1,
            },
            iconImg: [],
        };
    },
    onLoad(opts) {
        // 新增二级
        this.iconImg = [];
        if (opts.parentId) {
            this.form.parentId = opts.parentId;

            if (this.user.storeId) {
                this.form.storeId = this.user.storeId;
            }
        }
        // 编辑
        if (opts.id) {
            let data = this.$store.state.common.editClassify;
            if (!data) {
                this.router.back();
            }
            this.editId = opts.id;
            this.form.name = data.name;
            this.form.abbreviation = data.abbreviation;
            this.form.icon = data.icon;
            this.oldData = data;
            if (this.form.icon) {
                setTimeout(()=>{
                    this.iconImg = [this.form.icon];
                },50)
            }
            this.fn.setTitle("编辑分类");
        }
        this.$forceUpdate();
    },

    async onShow() {},

    // 函数
    methods: {
        // 图
        imageChange(e) {
            this.form.icon = e[0] || "";
        },

        save() {
            if (!this.form.name) {
                return this.fn.showToast("请输入类目名称");
            }
            if (!this.form.abbreviation) {
                return this.fn.showToast("请输入类目简称");
            }
            if (this.editId) {
                let sendData = { ...this.oldData };
                sendData.name = this.form.name;
                sendData.abbreviation = this.form.abbreviation;
                sendData.icon = this.form.icon;
                this.api.post("/product/EditType", sendData).then((res) => {
                    if (res.success) {
                        this.fn.showToast("保存成功");
                        this.router.back();
                    } else {
                        this.fn.showModal({
                            title: "保存失败",
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
            } else {
                this.api.post("/product/AddType", this.form).then((res) => {
                    if (res.success) {
                        this.fn.showToast("保存成功");
                        this.router.back();
                    } else {
                        this.fn.showModal({
                            title: "保存失败",
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
            }
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    padding-bottom: px(180);
}
.form-card {
    background-color: #fff;
    padding: 0 px(30);
    & ~ .form-card {
        margin-top: px(25);
    }
    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: px(140);
        background-color: #fbfbfb;
        border-bottom: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1;
        font-size: px(48);
    }
}
.required {
    color: #f00;
    font-size: px(44);
    &.hide {
        visibility: hidden;
    }
}
.form-item {
    display: flex;
    min-height: px(140);
    padding: px(30) 0;
    box-sizing: border-box;
    align-items: center;
    font-size: px(44);
    & ~ .form-item {
        border-top: 1px solid #f1f1f1;
    }
    .label {
        width: px(240);
        flex-shrink: 0;
        color: #999;
        margin-right: px(10);
    }
    .box {
        width: 100%;
        position: relative;
        input {
            width: 100%;
        }
    }
    .tool {
        flex-shrink: 0;
        color: #999;
        margin-left: px(10);
    }
    textarea,
    input {
        max-width: 100%;
        width: 100%;
    }
}
.code-tool {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .scan-img {
        flex-shrink: 0;
        width: px(80);
        height: px(80);
        /deep/ img {
            width: px(80);
            height: px(80);
        }
    }
    .generate {
        color: #0097d1;
        margin-right: px(30);
        flex-shrink: 0;
    }
}
radio-group {
    label ~ label {
        margin-left: px(40);
    }
}
.img-card {
    padding-top: px(30);
    padding-bottom: px(30);
}
.form-img-item {
    .tit {
        padding: px(30);
        font-size: px(44);
    }
}
.btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
button::after {
    border: none;
    display: none;
}
button::before {
    border: none;
    display: none;
}
.page--iphoneX {
    .btns {
        padding-bottom: px(30);
        background-color: rgb(0, 188, 38);
    }
}
.btn {
    background-color: rgb(0, 188, 38);
    color: #fff;
    border-radius: 0;
    font-size: px(50);
    border: none;
    width: 100%;
}
.add-type {
    width: 100%;
    font-size: px(40);
    color: #0097d1;
    padding: px(20) 0;
}
.type-item {
    padding: px(20) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    .remove-text {
        color: red;
        flex-shrink: 0;
        margin-left: px(10);
        padding-left: px(30);
    }
}
.type-tip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: px(44);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
</style>