<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">
                    <picker
                        :mode="'selector'"
                        :range="platformList"
                        :range-key="'name'"
                        @change="platformChange($event)"
                    >
                        <input
                            type="text"
                            :disabled="true"
                            :value="form.platformName"
                            placeholder="请选择平台"
                        />
                    </picker>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    分类：
                </div>
                <div class="box">
                    <picker
                        :mode="'selector'"
                        :range="classifyList"
                        :range-key="'name'"
                        @change="classifyChange($event)"
                    >
                        <input
                            type="text"
                            :disabled="true"
                            :value="form.categoryName"
                            placeholder="请选择分类"
                        />
                    </picker>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    品牌：
                </div>
                <div class="box">
                    <picker
                        :mode="'selector'"
                        :range="brandList"
                        :range-key="'name'"
                        @change="brandChange($event)"
                    >
                        <input
                            type="text"
                            :disabled="true"
                            :value="form.brandName"
                            placeholder="请选择品牌"
                        />
                    </picker>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <!-- <span class="required">*</span> -->
                    描述：
                </div>
                <div class="box">
                    <textarea
                        v-model="form.description"
                        :maxlength="2048"
                        :auto-height="true"
                        placeholder="请填描述"
                    ></textarea>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    图片：
                </div>
                <div class="box">
                    <easy-upload
                        :types="'image'"
                        v-model="form.banner"
                        :uploadCount="99"
                    ></easy-upload>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <!-- <span class="required">*</span> -->
                    快递说明：
                </div>
                <div class="box">
                    <textarea
                        v-model="form.deliveryDesc"
                        :maxlength="2048"
                        :auto-height="true"
                        placeholder="请填写快递说明"
                    ></textarea>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    开始时间：
                </div>
                <div class="box">
                    <date-time-picker
                        @change="pickerDateChange('beginTime', $event)"
                        placeholder="请选择"
                        :defaultValue="form.beginTime"
                    ></date-time-picker>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    结束时间：
                </div>
                <div class="box">
                    <date-time-picker
                        @change="pickerDateChange('endTime', $event)"
                        placeholder="请选择"
                        :defaultValue="form.endTime"
                    ></date-time-picker>
                </div>
            </section>
            <section class="form-item">
                <div class="label">上下架：</div>
                <div class="box">
                    <radio-group @change="radioChange">
                        <label class="radio"
                            ><radio
                                :value="false"
                                :checked="form.offline === false"
                            />上架</label
                        >
                        <label class="radio"
                            style="margin-left:6px"><radio
                                :value="true"
                                :checked="form.offline === true"
                            />下架</label
                        >
                    </radio-group>
                </div>
            </section>
            <section class="form-item">
                <div class="label">置顶：</div>
                <div class="box">
                    <input type="number" v-model="form.top" />
                </div>
            </section>
            <section class="form-item">
                <div class="label">权重：</div>
                <div class="box">
                    <input type="number" v-model="form.sortOrder" />
                </div>
            </section>
        </div>
        <div class="btns">
            <div class="btn" @click="saveOk">保存</div>
        </div>
    </div>
</template>

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

export default {
    name: "",
    components: { MyImage, DateTimePicker, easyUpload },
    // 数据
    data() {
        return {
            aid: "",
            form: {},
            classifyList: [],
            brandList: [],
            platformList: [],
            submitLoading: false,
        };
    },

    onLoad(opts) {
        if (opts.aid) {
            this.aid = opts.aid;
            this.fn.setTitle("编辑活动");
            this.getActivity();
        }
        this.getCateList();
        this.getPlatformList();
    },

    onShow() {},

    // 函数
    methods: {
        getPlatformList() {
            this.api.get("/Supplier/GetPlatformList", {}).then((res) => {
                this.platformList = res.data;

                if (this.form._id) {
                    for (let item of this.platformList) {
                        if (this.form.platform == item._id) {
                            this.form.platformName = item.name;
                        }
                    }
                }
            });
        },
        getCateList() {
            this.api.get("/Supplier/GetCateList", {}).then((res) => {
                this.classifyList = res.data;
                for (let item of this.classifyList) {
                    item.value = item.name;
                }
            });
        },

        getBrand() {
            this.api
                .get("/Supplier/GetBrandList", {
                    cateId: this.form.categoryId,
                    pass: true,
                })
                .then((res) => {
                    this.brandList = JSON.parse(res.data.list);
                });
        },

        getActivity() {
            uni.showLoading({
                title: "加载中...",
                mask: true,
            });
            this.api
                .get("/Supplier/getActivity", { id: this.aid, pass: true })
                .then((res) => {
                    uni.hideLoading();
                    if (res.success && res.data) {
                        this.form = res.data;
                        if (this.platformList.length) {
                            for (let item of this.platformList) {
                                if (this.form.platform == item._id) {
                                    this.form.platformName = item.name;
                                }
                            }
                        }
                        this.getBrand();
                    } else {
                        this.fn.showModal({
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
        },
        platformChange(e) {
            let index = e.detail.value;
            let val = this.platformList[index];
            this.form.platform = val._id;
            this.form.platformName = val.name;
        },
        classifyChange(e) {
            let index = e.detail.value;
            let val = this.classifyList[index];
            this.form.categoryName = val.name;
            this.form.categoryId = val.categoryId;
            this.form.brandLogo = null;
            this.form.brandName = null;
            this.getBrand();
        },
        brandChange(e) {
            let index = e.detail.value;
            let val = this.brandList[index];
            this.form.brandLogo = val.logo;
            this.form.brandName = val.name;
            this.brandName = null;
        },
        radioChange(e) {
            this.form.offline = Boolean(e.detail.value);
        },
        pickerDateChange(name, e) {
            this.form[name] = e.dt.getTime();
        },
        saveOk() {
            if (this.submitLoading) {
                return;
            }
            if (!this.form.platform && this.form.platform !== 0) {
                return this.fn.showToast("请选择平台");
            }
            if (!this.form.categoryName) {
                return this.fn.showToast("请选择分类");
            }
            if (!this.form.brandName) {
                return this.fn.showToast("请选择品牌");
            }
            if (this.form.banner.length === 0) {
                return this.fn.showToast("请选图片");
            }
            if (!this.form.beginTime) {
                return this.fn.showToast("请选择开始时间");
            }
            if (!this.form.endTime) {
                return this.fn.showToast("请选择结束时间");
            }
            console.log(this.form);
            this.submitLoading = true;
            uni.showLoading({
                title: "提交中...",
            });
            if (this.aid) {
                // 编辑
                let data = { ...this.form };
                delete data._id;
                this.api
                    .post2(
                        "/Supplier/ReplaceActivity",
                        data,
                        { id: this.form._id.$oid },
                        { pass: true }
                    )
                    .then((res) => {
                        this.submitLoading = false;
                        uni.hideLoading();
                        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(120);
    min-height: 100vh;
    background-color: #fff;
}
.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: flex-start;
    font-size: px(44);
    border-top: 1px solid #f1f1f1;
    &.dis-item {
        color: #999;
        background: #f9f9f9;
    }
    .label {
        width: px(340);
        flex-shrink: 0;
        color: #666;
        margin-right: px(10);
        // font-weight: bold;
    }
    .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 {
    width: 100%;
    height: px(120);
    background-color: rgb(0, 188, 38);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btns {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.layout {
    background-color: #eee;
    color: #666;
}
.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);
    }
}

.spec-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
        width: 33.333333%;
        font-size: px(40);
        height: px(100);
        border: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        & ~ li {
            // border-left: none;
        }
        &.on {
            color: rgb(0, 188, 38);
            border-color: rgb(0, 188, 38);
        }
    }
}
.mo-date {
    margin-top: px(20);
    border-bottom: 1px solid #f1f1f1;
    background: #fbfbfb;
    font-size: px(40);
    padding: px(10);
}
.n-date-box {
    margin-top: px(20);
    font-size: px(40);
}
.n-date {
    border-bottom: 1px solid #f1f1f1;
    background: #fbfbfb;
    padding: 0 px(20);
    display: inline-block;
    width: px(200);
    font-size: px(44);
    vertical-align: bottom;
}
.address-icon {
    /deep/ img {
        width: px(60);
        height: px(60);
    }
}
.dis {
    background-color: #f6f6f6;
}
</style>