<template>
    <Tabs size="small">
        <TabPane label="基础配置">
            <div class="base-conf">
                <div class="base-left">
                    <Form ref="confForm" :models="conf" :rules="confRules" :label-width="120">
                        <FormItem label="活动规则" prop="rule">
                            <Input type="textarea" v-model="conf.rule"
                                   placeholder="请输入活动规则" :maxlength="2000"></Input>
                        </FormItem>
                        <FormItem label="分享链接" prop="rule">
                            <Input type="text" v-model="conf.share_url"
                                   placeholder="活动分享链接"></Input>
                        </FormItem>
                        <FormItem label="提示文案（上）" prop="btm_tip_one">
                            <Input type="text" v-model="conf.btm_tip_one"
                                   placeholder="提示文案（上）"></Input>
                        </FormItem>
                        <FormItem label="提示文案（下）" prop="btm_tip_two">
                            <Input type="text" v-model="conf.btm_tip_two"
                                   placeholder="提示文案（下）"></Input>
                        </FormItem>
                        <FormItem label="跳转链接（左）" prop="jump_url_left">
                            <Input type="text" v-model="conf.jump_url_left"
                                   placeholder="活动底部链接（左）"></Input>
                        </FormItem>
                        <FormItem label="跳转链接（右）" prop="jump_url_right">
                            <Input type="text" v-model="conf.jump_url_right"
                                   placeholder="活动底部链接（右）"></Input>
                        </FormItem>
                        <FormItem label="活动次数限制" prop="times_type">
                            <Select v-model="conf.times_type">
                                <Option :value="0">只限制每天最大参与次数</Option>
                                <Option :value="1">只限制每人参与活动最大次数</Option>
                                <Option :value="2">同时限制以上两种</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="活动最大参与次数" prop="act_total_times">
                            <Input type="text" v-model="conf.act_total_times"
                                   placeholder="活动最大参与次数"></Input>
                        </FormItem>
                        <FormItem label="每天最大抽奖次数" prop="day_limit_times">
                            <Input type="text" v-model="conf.day_limit_times"
                                   placeholder="每天最大抽奖次数"></Input>
                        </FormItem>
                    </Form>
                </div>
                <div class="base-middle">
                    <Form :label-width="120">
                        <FormItem label="主背景图" prop="main_bg">
                            <img class="preview-img" v-show="conf.main_bg" :src="conf.main_bg">
                            <Button v-show="!conf.main_bg">
                                <span ref="upload_img_mainBg" img-key="main_bg">添加</span>
                            </Button>
                        </FormItem>
                        <FormItem label="转盘背景图" prop="wheel_bg">
                            <img class="preview-img" v-show="conf.wheel_bg" :src="conf.wheel_bg">
                            <Button v-show="!conf.wheel_bg">
                                <span ref="upload_img_wheelBg" img-key="wheel_bg">添加</span>
                            </Button>
                        </FormItem>
                        <FormItem label="活动规则按钮" prop="rule_btn_bg">
                            <img class="preview-img" v-show="conf.rule_btn_bg" :src="conf.rule_btn_bg">
                            <Button v-show="!conf.rule_btn_bg">
                                <span ref="upload_img_ruleBg" img-key="rule_btn_bg">添加</span>
                            </Button>
                        </FormItem>
                        <FormItem label="分享按钮" prop="share_btn_bg">
                            <img class="preview-img" v-show="conf.share_btn_bg" :src="conf.share_btn_bg">
                            <Button v-show="!conf.share_btn_bg">
                                <span ref="upload_img_shareBg" img-key="share_btn_bg">添加</span>
                            </Button>
                        </FormItem>
                        <FormItem label="抽奖按钮" prop="prize_btn_bg">
                            <img class="preview-img" v-show="conf.prize_btn_bg" :src="conf.prize_btn_bg">
                            <Button v-show="!conf.prize_btn_bg">
                                <span ref="upload_img_tryBg" img-key="prize_btn_bg">添加</span>
                            </Button>
                        </FormItem>
                    </Form>
                </div>
                <div class="base-right">
                    <Form :label-width="120">
                        <FormItem label="次数上限背景图" prop="day_over_limit_bg">
                            <img class="preview-img" v-show="conf.day_over_limit_bg" :src="conf.day_over_limit_bg">
                            <Button v-show="!conf.day_over_limit_bg">
                                <span ref="upload_img_overBg" img-key="day_over_limit_bg">添加</span>
                            </Button>
                        </FormItem>
                        <FormItem label="我的奖品" prop="my_prize_btn_bg">
                            <img class="preview-img" v-show="conf.my_prize_btn_bg" :src="conf.my_prize_btn_bg">
                            <Button v-show="!conf.my_prize_btn_bg">
                                <span ref="upload_img_myPrizeBg" img-key="my_prize_btn_bg">添加</span>
                            </Button>
                        </FormItem>
                        <FormItem label="提示中奖背景图" prop="win_prize_bg">
                            <img class="preview-img" v-show="conf.win_prize_bg" :src="conf.win_prize_bg">
                            <Button v-show="!conf.win_prize_bg">
                                <span ref="upload_img_winPrizeBg" img-key="win_prize_bg">添加</span>
                            </Button>
                        </FormItem>
                        <FormItem label="再来一次按钮" prop="try_again_bg">
                            <img class="preview-img" v-show="conf.try_again_bg" :src="conf.try_again_bg">
                            <Button v-show="!conf.try_again_bg">
                                <span ref="upload_img_tryAgainBg" img-key="try_again_bg">添加</span>
                            </Button>
                        </FormItem>
                    </Form>
                </div>
            <div class="bottom-btn">
                <Button type="primary" @click="save" class="save">保存</Button>
                <Button type="warning" @click="save" class="preview">预览</Button>
            </div>
            </div>
        </TabPane>
        <TabPane label="奖品配置">
            <add-prize></add-prize>
        </TabPane>
    </Tabs>
</template>
<script>
    import AddPrize from './components/add-prize';

    export default {
        data () {
            return {
                actId: 0,
                confId: 0,
                conf: {
                    act_id: 0,
                    id: 0,
                    rule: '',
                    share_url: '',
                    day_limit_times: '',
                    act_total_times: '',
                    btm_tip_one: '',
                    btm_tip_two: '',
                    jump_url_left: '',
                    jump_url_right: '',
                    wheel_bg: '',
                    main_bg: '',
                    prize_btn_bg: '',
                    rule_btn_bg: '',
                    share_btn_bg: '',
                    times_type: 0,
                    day_over_limit_bg: '',
                    my_prize_btn_bg: '',
                    win_prize_bg: ''
                },
                confRules: {
                    rule: [
                        { required: true, message: '活动规则不能为空', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '奖品名称不能为空', trigger: 'blur' }
                    ],
                    type: [
                        { required: true}
                    ],
                    value: [
                        { required: true, message: '奖品值不能为空', trigger: 'blur' }
                    ],
                    total: [
                        { required: true, message: '奖品总数不能为空', trigger: 'blur' }
                    ],
                    chance: [
                        { required: true, message: '中奖概率不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            save() {
                $.ajax({
                    method: 'post',
                    url: '/admin/wheelSurf/api/config/modify',
                    contentType: 'application/json',
                    data: JSON.stringify(Object.assign(this.conf, {act_id: this.actId}))
                }).then(res => {
                    if (res.code === 200) {
                        this.$Message.success('基础配置更新成功');
                        this.prizeList();
                    } else {
                        this.$Message.error(res.msg);
                    }
                });
            },
            getConf() {
                $.ajax({
                    url: '/admin/wheelSurf/api/config/detail',
                    data: {act_id: this.actId}
                }).then(res => {
                    if (res.code === 200 && res.data && res.data.id) {
                        this.conf = res.data;
                    } else {
                        this.$Message.error(res.msg);
                    }
                });
            },
            bindUpload() {
                Object.keys(this.$refs)
                    .filter(key => /^upload_img_/ig.test(key))
                    .map(key => {
                        let $el = this.$refs[key];
                        let imgKey = $el.getAttribute('img-key');

                        if (!imgKey) return;
                        window.qn_dynamic_el_upload($el, url => {
                            this.conf[imgKey] = url;
                        });
                });
            }
        },
        mounted() {
            this.actId = this.$route.query.actId;
            this.bindUpload();
            this.getConf();
        },
        components: {
            AddPrize
        }
    }
</script>
<style lang="scss">
    .ivu-tabs {
        height: 100%;
    }

    .bottom-btn {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
    }

    .base-conf {
        padding-bottom: 40px;
        display: flex;

        .base-left {
            display: inline-block;
            box-sizing: border-box;
            flex: 2;
        }

        .base-middle {
            display: inline-block;
            box-sizing: border-box;
            flex: 1;
        }

        .base-right {
            display: inline-block;
            box-sizing: border-box;
            flex: 1;
        }

        .save {
            margin-right: 20px;
        }
    }

    .preview-img {
        height: 60px;
        width: auto;
    }
</style>