<template>
    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
        <div class="form-card">
            <section class="form-item">
                <div class="label">
                    <span class="required hide">*</span>
                    规格：
                </div>
                <div class="box">
                    <input
                        type="text"
                        class="inp-dis"
                        v-model="form.key"
                        :disabled="true"
                    />
                </div>
            </section>

            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    价格：
                </div>
                <div class="box">
                    <input type="digit" v-model="form.price" />
                </div>
                <div class="tool">
                    <span class="">元</span>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required hide">*</span>
                    进货价：
                </div>
                <div class="box">
                    <input type="digit" v-model="form.supplyPrice" />
                </div>
                <div class="tool">
                    <span class="">元</span>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required hide">*</span>
                    成本：
                </div>
                <div class="box">
                    <input type="digit" v-model="form.cost" />
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required hide">*</span>
                    划线价：
                </div>
                <div class="box">
                    <input type="digit" v-model="form.tagPrice" />
                </div>
                <div class="tool">
                    <span class="">元</span>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    重量：
                </div>
                <div class="box">
                    <input type="number" v-model="form.weight" />
                </div>
                <div class="tool">
                    <span class="">克</span>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    库存：
                </div>
                <div class="box">
                    <input type="number" v-model="form.stock" />
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    sku码：
                </div>
                <div class="box">
                    <input type="text" v-model="form.code" />
                </div>
                <div class="tool code-tool">
                    <span class="generate" @click="generateCode('skuCode')"
                        >生成</span
                    >
                </div>
            </section>
        </div>
        <!-- 图片 -->
        <div class="form-card img-card">
            <section class="form-img-item">
                <div class="tit"><span class="required">*</span>sku图</div>
                <div class="list">
                    <easy-upload
                        :types="'image'"
                        v-model="skuImg"
                        :uploadCount="1"
                        @change="skuImgChange"
                    ></easy-upload>
                </div>
            </section>
        </div>
        <div class="btn" @click="saveOk">完成</div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";

export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            form: {
                key: "",
                price: 0,
                supplyPrice: 0,
                cost: 0,
                tagPrice: 0,
                weight: 0,
                stock: 0,
                code: "",
            },
            skuImg: [],
            oldData: {},
            index: 0, // 判断进入的
        };
    },

    onLoad() {},

    onShow() {
        console.log(this.$store.state.common.skuItem);
        if (this.index !== 0) {
            return;
        }
        if (this.$store.state.common.skuItem) {
            this.index = 1;
            let d = this.$store.state.common.skuItem;
            this.oldData = d;
            this.form.key = d.key;
            this.form.price = d.price;
            this.form.supplyPrice = d.supplyPrice;
            this.form.cost = d.cost;
            this.form.tagPrice = d.tagPrice;
            this.form.weight = d.weight;
            this.form.stock = d.stock;
            this.form.code = d.code;
            this.form.img = d.img;
            setTimeout(() => {
                this.skuImg = [this.form.img];
            }, 100);
            // this.$store.commit("common/update", {
            //     skuItem: null,
            // });
        } else {
            this.router.back();
        }
    },

    // 函数
    methods: {
        // 图
        skuImgChange(e) {
            this.form.img = e[0] || "";
        },
        // 生成编码
        generateCode(name) {
            // 后台编码生成方式
            const timestamp = Date.parse(new Date());
            this.baseInfo[name] = timestamp;
        },
        saveOk() {
            if (!this.form.price) {
                if (String(this.form.price) !== "0") {
                    return this.fn.showToast("请输入价格");
                }
            }
            if (!this.form.weight) {
                if (String(this.form.weight) !== "0") {
                    return this.fn.showToast("请输入重量");
                }
            }
            if (!this.form.stock) {
                if (String(this.form.stock) !== "0") {
                    return this.fn.showToast("请输入库存");
                }
            }
            if (!this.form.code) {
                if (String(this.form.code) !== "0") {
                    return this.fn.showToast("请输入sku码");
                }
            }
            if (!this.form.img) {
                return this.fn.showToast("请上传sku图");
            }
            let data = { ...this.oldData, ...this.form };
            data.stock = Number(data.stock) || 0;
            this.$store.commit("common/update", {
                skuItem: data,
            });
            this.router.back();
        },
    },

    // 数据计算
    computed: {},

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


<style lang="scss" scoped>
.page {
    padding-bottom: px(120);
    min-height: 100vh;
}
.page--iphoneX {
    padding-bottom: px(150);
    .btn {
        padding-bottom: px(30);
        background-color: rgb(0, 188, 38);
    }
}
.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(44);
    }
}
.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%;
    }
}
.list {
    // min-height: 100vh;
    // background-color: #fff;
    // border-bottom: 1px solid #f1f1f1;
    li {
        padding: px(0) px(35);
        height: px(140);
        line-height: px(140);
        font-size: px(44);
        border-top: 1px solid #f1f1f1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .tools {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        span {
            display: inline-block;
            border: 1px solid #f1f1f1;
            font-size: px(36);
            height: px(80);
            width: px(120);
            display: flex;
            justify-content: center;
            align-items: center;
            & ~ span {
                margin-left: px(30);
            }
        }
        .remove {
            color: #f00;
        }
    }
}
.btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: px(120);
    background-color: rgb(0, 188, 38);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.add-btn {
    height: px(120);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: px(50) px(35) 0;
    border: 1px solid #ccc;
    border-radius: px(10);
}
.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;
    }
}
.required {
    color: #f00;
    font-size: px(44);
    &.hide {
        visibility: hidden;
    }
}
.inp-dis {
    color: #999;
}

.img-card {
    padding-top: px(30);
    padding-bottom: px(30);
}
.form-img-item {
    .tit {
        padding: px(30);
        font-size: px(44);
    }
}
</style>