<template>
    <div class="edit_add_page">
        <div class="content">
            <el-form ref="form" :model="form" label-width="150px" :rules="formRules">
                <h2>基础信息</h2>
                <br>
                <el-form-item label="活动名称:" prop="currencyName">
                    <el-input v-model="form.currencyName" maxlength="20" placeholder="请输入活动名称" :disabled="unStart" />
                </el-form-item>
                <el-form-item label="备注:" prop="remark">
                    <el-input v-model="form.remark" maxlength="255" type="textarea" placeholder="请输入活动介绍"
                        :disabled="unStart" style="width: 400px;" />
                </el-form-item>
                <!-- :picker-options="pickerOptions" -->
                <el-form-item label="报名时间:" prop="signTime">
                    <el-date-picker v-model="date2" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" :disabled="applyEnd" />
                    <p class="timeInfo">报名时间不能交叉且报名时间不能大于活动时间</p>
                </el-form-item>
                <el-form-item label="活动时间:" prop="activityTime">
                    <el-date-picker v-model="date1" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" :disabled="applyEnd" />
                    <p class="timeInfo">平台活动时间不能交叉并且活动时间不能小于报名时间</p>
                </el-form-item>
                <el-form-item label="活动保证金:">
                    <el-radio-group v-model="form.ifBond">
                        <el-radio :label="1" :disabled="unStart">需要</el-radio>
                        <el-radio :label="0" :disabled="unStart">不需要</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.ifBond === 1" label="保证金金额:">
                    <el-input v-model="form.bondMoney" maxlength="9" placeholder="请输入活动保证金金额" :disabled="unStart" />
                </el-form-item>
                <h2>赠送规则</h2>
                <br>
                <el-form-item label="设置赠送规则:">
                    <el-radio-group v-model="form.setRules" @input="setRulesChange">
                        <el-radio :label="1" :disabled="unStart">比例金额</el-radio>
                        <el-radio :label="2" :disabled="unStart">固定金额</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="赠送比例/赠送金额:" prop="currencyMoney">
                    <el-input-number v-model="form.currencyMoney" :disabled="unStart" :min="0"
                        :max="form.setRules === 1 ? 100 : 9999"></el-input-number>
                    <span style="margin-left: 20px; font-size: 16px;" v-if="form.setRules === 1">单位为%</span>
                    <span style="margin-left: 20px; font-size: 16px;" v-if="form.setRules === 2">单位为元</span>
                </el-form-item>
                <el-form-item label="是否限购:">
                    <el-radio-group v-model="form.ifLimit">
                        <el-radio :label="2" :disabled="unStart">限购</el-radio>
                        <el-radio :label="1" :disabled="unStart">不限购</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.ifLimit === 2" label="限购(件/人):">
                    <el-input v-model="form.limitNumber" maxlength="9" placeholder="请输入限购数量" :disabled="unStart" />
                </el-form-item>
                <el-form-item label="优惠券叠加:">
                    <el-radio-group v-model="form.ifAdd">
                        <el-radio :label="1" :disabled="unStart">叠加</el-radio>
                        <el-radio :label="0" :disabled="unStart">不叠加</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <div class="footer">
            <div class="btn_list">
                <span @click="cancel">取消</span>
                <span @click="save">保存</span>
                <span @click="reset">重置</span>
            </div>
        </div>
    </div>
</template>

<script>
// import { activeAdd, activeUpdate, activeGetById } from '@/api/active'
// import {
//     getSeckillDetail,
//     editSeckillData,
//     addSeckillData
// } from '@/api/active/active_seckill.js'

import { addBee,getBeeInfo,editBee } from '@/api/active/active_bee.js'
import Form from '../module'
export default {
    props: {
        activityForm: {
            type: Object,
            default: () => { }
        },
        isEdit: {
            type: Number,
            default: 0
        }
    },
    data() {
        const validateSignTime = (rule, value, callback) => {
            if (!(this.date2 && this.date2.length === 2)) {
                callback(new Error('请选择报名时间'))
            } else {
                callback()
            }
        }
        const validateActivityTime = (rule, value, callback) => {
            if (!(this.date1 && this.date1.length === 2)) {
                callback(new Error('请选择活动时间'))
            } else {
                callback()
            }
        }
        return {
            form: new Form(),
            date1: [], // 活动时间
            date2: [], // 报名时间
            type: false,
            title: '',
            formRules: {
                remark: [
                    { max: 255, message: '长度在 255 个字符内', trigger: 'blur' }
                ],
                currencyName: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                signTime: [
                    { validator: validateSignTime, required: true, trigger: 'blur' }
                ],
                activityTime: [
                    { validator: validateActivityTime, required: true, trigger: 'blur' }
                ],
                currencyMoney: [
                    { required: true, message: '请输入金额', trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        // 其他修改
        unStart() {
            const t = this.isEdit ? this.activityForm : null
            console.log(t)
            return t && !(t.state === 0)
        },
        // 时间修改
        applyEnd() {
            const t = this.isEdit ? this.activityForm : null
            return t && (t.state === 3 || t.state === 4)
        }
    },
    watch: {
        isEdit: {
            handler(nVal, oVal) {
                if (nVal) {
                    this.getDetails()
                } else {
                    this.reset()
                }
            },
            deep: true
        },
        activityForm: {
            handler(nVal, oVal) {
                if (nVal) {
                    this.getDetails()
                }
            }
        }
    },
    created() {
        if (this.isEdit) { // 初始化watch无法监听isEdit，手动获取数据
            this.getDetails()
        }
    },
    methods: {
        //  设置规则切换函数
        setRulesChange(e){
            if(e == 1 && this.form.currencyMoney > 100){
                this.form.currencyMoney = 100
            }
        },
        // 查询详情请
        async getDetails() {
            const res = await getBeeInfo(this.activityForm.currencyId)
            if (JSON.stringify(res.data) !== '{}') {
                this.form = res.data
                this.date1 = [res.data.startTime, res.data.endTime]
                this.date2 = [res.data.signStartTime, res.data.signEndTime]
            }
        },
        cancel() { this.$emit('cancel') },
        refersh() { this.$emit('refersh') },
        async save() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    console.log('表单校验成功')
                    const params = Object.assign({}, this.form, {
                        startTime: this.date1[0] || '',
                        endTime: this.date1[1] || '',
                        signStartTime: this.date2[0] || '',
                        signEndTime: this.date2[1] || '',
                        bondMoney: this.form.bondMoney * 1
                    })
                    let errMsg = ''
                    if (params.currencyName === '') {
                        errMsg += ' 活动名称 '
                    }
                    if (params.signStartTime === '' || params.signEndTime === '') {
                        errMsg += ' 报名时间 '
                    }
                    if (params.startTime === '' || params.endTime === '') {
                        errMsg += ' 活动时间 '
                    }
                    if (errMsg.length !== 0) {
                        this.$message.error(`请输入${errMsg}`)
                        return
                    }
                    if (this.isEdit) {
                        // 修改
                        return editBee(Object.assign(params)).then((res) => {
                            if (res.code === '') {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                })
                                this.reset()
                                this.refersh()
                            }
                        })
                    } else {
                        if(params.setRules == 1)  params.currencyMoney = params.currencyMoney / 100
                        // console.log(params)
                        let res2 = await addBee(params)
                        if (res2.code === '') {
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            })
                            this.reset()
                            this.refersh()
                        }
                    }
                    // 添加
                }
            })
        },
        reset() {
            this.form = new Form()
            this.date1 = []
            this.date2 = []
        },
        checkMoney(e) {
            this.form.currencyMoney = e.match(/^\d*(\.?\d{0,2})/g)[0] || null
        }
    }
}
</script>

<style lang='scss' scoped>
.edit_add_page {
    padding: 20px;

    h2 {
        font-size: 24px;
        font-weight: 500;
        position: relative;

        &::before {
            content: "";
            height: 24px;
            width: 4px;
            background-color: #3a68f2;
            position: absolute;
            left: -10px;
            top: 2px;
            display: block;
        }
    }

    .content {
        background-color: #fff;
        padding: 0 50px 20px;
        overflow: hidden;

        .el-form {
            .el-form-item {
                label.el-form-item__label {
                    font-size: 16px !important;
                    color: red !important;
                }
            }
        }

        .photo {
            padding: 70px 100px;

            .avatar-uploader {
                width: 180px;

                .el-icon-plus,
                img {
                    width: 180px;
                    height: 180px;
                    line-height: 180px;
                    border: 1px #bbb solid;
                    border-radius: 4px 4px 0px 4px;
                    margin-bottom: 10px;
                    text-align: center;
                }

                img {
                    border: none;
                }
            }
        }
    }

    .footer {
        height: 100px;
        line-height: 100px;
        font-size: 24px;
        position: relative;
        border-top: 1px solid #e0e5eb;

        .btn_list {
            position: absolute;
            right: 0;
            top: 0;
            height: 50px;

            span {
                padding: 0;
                margin: 0;
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                display: inline-block;
                font-size: 16px;
                border-radius: 4px;
                box-sizing: border-box;

                &:hover {
                    cursor: pointer;
                }

                &:nth-child(1) {
                    background: rgba(255, 255, 255, 1);
                    order: 1px solid rgba(224, 229, 235, 1);
                    margin-right: 20px;
                    border: 1px solid rgba(224, 229, 235, 1);
                }

                &:nth-child(2) {
                    background: rgba(58, 104, 242, 1);
                    color: #fff;
                }
            }
        }
    }

    .timeInfo {
        font-size: 12px;
        color: #999999;
    }

    .el-input {
        width: 400px;
    }
}
</style>