<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"
                        class="inp-dis"
                        v-model="form.activityName"
                    />
                </div>
            </section>

            <section class="form-item">
                <div class="label">
                    <span class="required hide">*</span>
                    活动备注：
                </div>
                <div class="box">
                    <input type="text" v-model="form.activityRemark" />
                </div>
                <div class="tool">
                    <!-- <span class="">元</span> -->
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    开始时间：
                </div>
                <div class="box">
                    <date-time-picker
                        :end="pickerDateRange.endReceiveTime"
                        placeholder="请选择"
                        @change="pickerDateChange('startReceiveTime', $event)"
                    ></date-time-picker>
                </div>
                <div class="tool">
                    <!-- <span class="">元</span> -->
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    结束时间：
                </div>
                <div class="box">
                    <date-time-picker
                        :start="pickerDateRange.startReceiveTime"
                        placeholder="请选择"
                        @change="pickerDateChange('endReceiveTime', $event)"
                    ></date-time-picker>
                </div>
                <div class="tool">
                    <!-- <span class="">元</span> -->
                </div>
            </section>

            <section class="form-item" stype>
                <div class="label">
                    <span class="required hide">*</span>
                    用券时间：
                </div>
                <div class="box">
                    <ul class="spec-list">
                        <li
                            :class="{ on: form.couponTime === 0 }"
                            @click="couponTimeClick(0)"
                        >
                            同步发券
                        </li>
                        <li
                            :class="{ on: form.couponTime === 1 }"
                            @click="couponTimeClick(1)"
                        >
                            自定义
                        </li>
                        <li
                            :class="{ on: form.couponTime === 2 }"
                            @click="couponTimeClick(2)"
                        >
                            n天内有效
                        </li>
                    </ul>
                    <!-- 自定义时间 -->
                    <black v-if="form.couponTime === 1">
                        <div class="mo-date">
                            <date-time-picker
                                :end="pickerDateRange.endUseTime"
                                placeholder="劵生效时间"
                                @change="
                                    pickerDateChange('startUseTime', $event)
                                "
                            ></date-time-picker>
                        </div>
                        <div class="mo-date">
                            <date-time-picker
                                :start="pickerDateRange.startUseTime"
                                placeholder="券结束日期"
                                @change="pickerDateChange('endUseTime', $event)"
                            ></date-time-picker>
                        </div>
                    </black>
                    <!-- 多少天内有效 -->
                    <div v-if="form.couponTime === 2" class="n-date-box">
                        领取成功后
                        <div class="n-date">
                            <input
                                type="number"
                                v-model="form.expiredDays"
                                placeholder=""
                            />
                        </div>
                        天有效
                    </div>
                </div>
            </section>

            <!-- <section class="form-item">
                <div class="label">
                    <span class="required hide 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">
                    <picker
                        :mode="'selector'"
                        :range="opts.grantMethod"
                        :range-key="'key'"
                        @change="pickerChange('grantMethod', $event)"
                    >
                        <input
                            type="text"
                            :disabled="true"
                            :value="pickerView('grantMethod', form.grantMethod)"
                            placeholder="请选择"
                        />
                    </picker>
                </div>
                <div class="tool"></div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required hide">*</span>
                    重复领取：
                </div>
                <div class="box">
                    <picker
                        :mode="'selector'"
                        :range="opts.repeatClaim"
                        :range-key="'key'"
                        @change="pickerChange('repeatClaim', $event)"
                    >
                        <input
                            type="text"
                            :disabled="true"
                            :value="pickerView('repeatClaim', form.repeatClaim)"
                            placeholder="请选择"
                        />
                    </picker>
                </div>
                <div class="tool"></div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required hide">*</span>
                    活动范围：
                </div>
                <div class="box">
                    <picker
                        :mode="'selector'"
                        :range="opts.isCurrency"
                        :range-key="'key'"
                        @change="pickerChange('isCurrency', $event)"
                    >
                        <input
                            type="text"
                            :disabled="true"
                            :value="pickerView('isCurrency', form.isCurrency)"
                            placeholder="请选择"
                        />
                    </picker>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required hide">*</span>
                    面向人群：
                </div>
                <div class="box">
                    <picker
                        :mode="'selector'"
                        :range="opts.facingForCrowd"
                        :range-key="'key'"
                        @change="pickerChange('facingForCrowd', $event)"
                    >
                        <input
                            type="text"
                            :disabled="true"
                            :value="
                                pickerView(
                                    'facingForCrowd',
                                    form.facingForCrowd
                                )
                            "
                            placeholder="请选择"
                        />
                    </picker>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required hide">*</span>
                    支持赠送：
                </div>
                <div class="box">
                    <picker
                        :mode="'selector'"
                        :range="opts.giveToFriends"
                        :range-key="'key'"
                        @change="pickerChange('giveToFriends', $event)"
                    >
                        <input
                            type="text"
                            :disabled="true"
                            :value="
                                pickerView('giveToFriends', form.giveToFriends)
                            "
                            placeholder="请选择"
                        />
                    </picker>
                </div>
            </section>
        </div>
        <div class="btn" @click="saveOk">下一步</div>
    </div>
</template>

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

import DateTimePicker from "../../../components/biaofun-datetime-picker/biaofun-datetime-picker";
export default {
    name: "",
    components: { MyImage, DateTimePicker },
    // 数据
    data() {
        return {
            form: {
                activityName: "",
                activityRemark: "",
                startReceiveTime: "",
                endReceiveTime: "",
                couponTime: 0, //用券时间 0-同步发券时间，1-自定义时间，2-领取成功后多少天内有效
                startUseTime: "", // -自定义时间使用
                endUseTime: "", // -自定义时间使用
                expiredDays: 0, // 领取成功后多少天内有效使用
                grantMethod: 0,
                repeatClaim: true,
                isCurrency: true,
                facingForCrowd: 0,
                giveToFriends: true,
            },
            pickerDateRange: {
                startReceiveTime: "",
                endReceiveTime: "",
                startUseTime: "",
                endUseTime: "",
            },
            opts: {
                grantMethod: [
                    { key: "公开发放", value: 0 },
                    { key: "自行发放", value: 1 },
                ],
                repeatClaim: [
                    { key: "可以", value: true },
                    { key: "不可以", value: false },
                ],
                isCurrency: [
                    { key: "全店商品", value: true },
                    { key: "部分商品", value: false },
                ],
                facingForCrowd: [
                    { key: "所有用户", value: 0 },
                    { key: "所有会员", value: 2 },
                    { key: "新人专享", value: 3 },
                ],
                giveToFriends: [
                    { key: "支持", value: true },
                    { key: "不支持", value: false },
                ],
            },
        };
    },

    onLoad() {},

    onShow() {},

    // 函数
    methods: {
        couponTimeClick(v) {
            this.form.couponTime = v;
            switch (v) {
                case 0:
                    this.startUseTime = "";
                    this.endUseTime = "";
                    this.expiredDays = "";
                    break;
                case 1:
                    this.expiredDays = "";
                    break;
                case 2:
                    this.startUseTime = "";
                    this.endUseTime = "";
                    break;
            }
        },

        pickerChange(name, e) {
            let index = e.detail.value;
            this.form[name] = this.opts[name][index].value;
        },
        pickerDateChange(name, e) {
            console.log(e);
            this.form[name] = e.f3;
            this.pickerDateRange[name] = e.f3;
        },
        pickerView(name, v) {
            for (let item of this.opts[name]) {
                if (item.value === v) {
                    return item.key;
                }
            }
        },

        saveOk() {
            if (!this.form.activityName) {
                return this.fn.showToast("请输入活动名称");
            }
            if (!this.form.startReceiveTime) {
                return this.fn.showToast("请选择开始时间");
            }
            if (!this.form.endReceiveTime) {
                return this.fn.showToast("请选择结束时间");
            }

            let data = { ...this.form };
            switch (this.form.couponTime) {
                case 0:
                    delete data.startUseTime;
                    delete data.endUseTime;
                    delete data.expiredDays;
                    break;
                case 1:
                    delete data.expiredDays;
                    break;
                case 2:
                    delete data.startUseTime;
                    delete data.endUseTime;
                    break;
            }
            this.$store.commit("common/update", {
                couponData: data,
            });
            this.router.push({
                path: "/pages/manage/coupon/form2",
            });
        },
    },

    // 数据计算
    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);
    }
}

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