<template>
    <Tabs size="small">
        <TabPane label="基础配置">
            <div class="base-conf">
                <div class="base-left">
                    <Form ref="confForm" :model="conf" :rules="confRules" :label-width="120">
                        <FormItem label="活动规则页链接" prop="rule_url">
                            <Input type="text" v-model="conf.rule_url"
                                   placeholder="请输入活动规则" :maxlength="500"></Input>
                        </FormItem>
                        <FormItem label="分享标题" prop="share_title">
                            <Input type="text" v-model="conf.share_title"
                                   placeholder="分享标题" :maxlength="500"></Input>
                        </FormItem>
                        <FormItem label="分享描述" prop="share_desc">
                            <Input type="text" v-model="conf.share_desc"
                                   placeholder="分享描述" :maxlength="100"></Input>
                        </FormItem>
                        <FormItem label="分享链接" prop="share_url">
                            <Input type="text" v-model="conf.share_url"
                                   placeholder="分享链接" :maxlength="500"></Input>
                        </FormItem>
                        <FormItem v-if="false" label="提示文案（下）" prop="btm_tip_two">
                            <Input type="text" v-model="conf.btm_tip_two"
                                   placeholder="提示文案（下）"></Input>
                        </FormItem>
                        <FormItem label="底部按钮1链接" prop="jump_btn_left_url">
                            <Input type="text" v-model="conf.jump_btn_left_url"
                                   placeholder="底部按钮1链接"></Input>
                        </FormItem>
                        <FormItem label="底部按钮2链接" prop="jump_btn_middle_url">
                            <Input type="text" v-model="conf.jump_btn_middle_url"
                                   placeholder="底部按钮2链接"></Input>
                        </FormItem>
                        <FormItem label="底部按钮3链接" prop="jump_btn_right_url">
                            <Input type="text" v-model="conf.jump_btn_right_url"
                                   placeholder="底部按钮3链接"></Input>
                        </FormItem>
                        <FormItem label="每天最大抽奖次数" prop="day_limit_times">
                            <Input type="text"
                                   v-model="conf.day_limit_times"
                                   placeholder="每天最大抽奖次数" number></Input>
                        </FormItem>
                        <FormItem label="底部资源位码" prop="bottomContentCode">
                            <Input type="text" v-model="conf.bottomContentCode"
                                   placeholder="底部资源码"></Input>
                        </FormItem>
                    </Form>
                </div>
                <div class="base-middle">
                    <Form :label-width="120">
                        <FormItem label="主背景图" prop="main_bg">
                            <div class="preview-wrap" v-show="conf.main_bg">
                                <Icon type="ios-close" class="del-img" @click="delPreview" img-key="main_bg"/>
                                <img class="preview-img" :src="conf.main_bg">
                            </div>
                            <Button v-show="!conf.main_bg">
                                <span ref="upload_img_mainBg" img-key="main_bg">添加（750x1680）</span>
                            </Button>
                        </FormItem>
                        <FormItem label="转盘背景图" prop="wheel_bg">
                            <div class="preview-wrap" v-show="conf.wheel_bg">
                                <Icon type="ios-close" class="del-img" @click="delPreview" img-key="wheel_bg"/>
                                <img class="preview-img" :src="conf.wheel_bg">
                            </div>
                            <Button v-show="!conf.wheel_bg">
                                <span ref="upload_img_wheelBg" img-key="wheel_bg">添加（630x630）</span>
                            </Button>
                        </FormItem>
                        <FormItem label="抽奖按钮" prop="prize_btn_bg">
                            <div class="preview-wrap" v-show="conf.prize_btn_bg">
                                <Icon type="ios-close" class="del-img" @click="delPreview" img-key="prize_btn_bg"/>
                                <img class="preview-img" :src="conf.prize_btn_bg">
                            </div>
                            <Button v-show="!conf.prize_btn_bg">
                                <span ref="upload_img_tryBg" img-key="prize_btn_bg">添加（200x218）</span>
                            </Button>
                        </FormItem>
                        <FormItem label="中奖蒙层" prop="win_prize_bg">
                            <div class="preview-wrap" v-show="conf.win_prize_bg">
                                <Icon type="ios-close" class="del-img" @click="delPreview" img-key="win_prize_bg"/>
                                <img class="preview-img" :src="conf.win_prize_bg">
                            </div>
                            <Button v-show="!conf.win_prize_bg">
                                <span ref="upload_img_winPrizeBg" img-key="win_prize_bg">添加（750x1680）</span>
                            </Button>
                        </FormItem>
                    </Form>
                </div>
                <div class="base-right">
                    <Form :label-width="120">
                        <FormItem label="活动规则按钮" prop="rule_btn_bg">
                            <div class="preview-wrap" v-show="conf.rule_btn_bg">
                                <Icon type="ios-close" class="del-img" @click="delPreview" img-key="rule_btn_bg"/>
                                <img class="preview-img" :src="conf.rule_btn_bg">
                            </div>
                            <Button v-show="!conf.rule_btn_bg">
                                <span ref="upload_img_ruleBg" img-key="rule_btn_bg">添加（154x62）</span>
                            </Button>
                        </FormItem>
                        <FormItem label="分享按钮" prop="share_btn_bg">
                            <div class="preview-wrap" v-show="conf.share_btn_bg">
                                <Icon type="ios-close" class="del-img" @click="delPreview" img-key="share_btn_bg"/>
                                <img class="preview-img" :src="conf.share_btn_bg">
                            </div>
                            <Button v-show="!conf.share_btn_bg">
                                <span ref="upload_img_shareBg" img-key="share_btn_bg">添加（154x62）</span>
                            </Button>
                        </FormItem>
                        <FormItem label="分享缩略图" prop="share_img">
                            <div class="preview-wrap" v-show="conf.share_img">
                                <Icon type="ios-close" class="del-img" @click="delPreview" img-key="share_img"/>
                                <img class="preview-img" :src="conf.share_img">
                            </div>
                            <Button v-show="!conf.share_img">
                                <span ref="upload_img_shareImg" img-key="share_img">添加（300x300）</span>
                            </Button>
                        </FormItem>
                        <FormItem label="底部按钮1" prop="jump_btn_left_bg">
                            <div class="preview-wrap" v-show="conf.jump_btn_left_bg">
                                <Icon type="ios-close" class="del-img" @click="delPreview" img-key="jump_btn_left_bg"/>
                                <img class="preview-img" :src="conf.jump_btn_left_bg">
                            </div>
                            <Button v-show="!conf.jump_btn_left_bg">
                                <span ref="upload_img_jumpBtnLeftBg" img-key="jump_btn_left_bg">添加</span>
                            </Button>
                        </FormItem>
                        <FormItem label="底部按钮2" prop="jump_btn_middle_bg">
                            <div class="preview-wrap" v-show="conf.jump_btn_middle_bg">
                                <Icon type="ios-close" class="del-img" @click="delPreview" img-key="jump_btn_middle_bg"/>
                                <img class="preview-img" :src="conf.jump_btn_middle_bg">
                            </div>
                            <Button v-show="!conf.jump_btn_middle_bg">
                                <span ref="upload_img_jumpBtnMiddleBg" img-key="jump_btn_middle_bg">添加</span>
                            </Button>
                        </FormItem>
                        <FormItem label="底部按钮3" prop="jump_btn_right_bg">
                            <div class="preview-wrap" v-show="conf.jump_btn_right_bg">
                                <Icon type="ios-close" class="del-img" @click="delPreview" img-key="jump_btn_right_bg"/>
                                <img class="preview-img" :src="conf.jump_btn_right_bg">
                            </div>
                            <Button v-show="!conf.jump_btn_right_bg">
                                <span ref="upload_img_jumpBtnRightBg" img-key="jump_btn_right_bg">添加</span>
                            </Button>
                        </FormItem>
                    </Form>
                </div>
            <div class="bottom-btn">
                <Button type="primary" @click="save" class="save">保存</Button>
                <Button type="warning" @click="preview" class="preview">预览</Button>
            </div>
            </div>
        </TabPane>
        <TabPane label="奖品配置">
            <add-prize :status="actStatus"></add-prize>
        </TabPane>
    </Tabs>
</template>
<script>
    import AddPrize from './components/add-prize';

    export default {
        data () {
            return {
                actId: 0,
                confId: 0,
                actStatus: 2,
                conf: {
                    act_id: 0,
                    id: 0,
                    rule_url: '',
                    share_url: '',
                    day_limit_times: '',
                    act_total_times: '',
                    btm_tip_one: '',
                    btm_tip_two: '',
                    jump_btn_left_url: '',
                    jump_btn_middle_url: '',
                    jump_btn_right_url: '',
                    jump_btn_left_bg: '',
                    jump_btn_middle_bg: '',
                    jump_btn_right_bg: '',
                    wheel_bg: '',
                    main_bg: '',
                    prize_btn_bg: '',
                    rule_btn_bg: '',
                    share_btn_bg: '',
                    share_img: '',
                    times_type: 1,
                    day_over_limit_bg: '',
                    my_prize_btn_bg: '',
                    win_prize_bg: '',
                    bottomContentCode: ''
                },
                confRules: {
                    share_url: [
                        { required: false, message: '分享链接不能为空'}
                    ],
                    day_limit_times: [
                        { required: true, message: '每天最大次数不能为空'},
                        { type: 'integer', message: '每天最大次数必须是整数', trigger: 'blur'}
                    ],
                    bottomContentCode: [
                        { required: true, message: '底部资源码不能为空'}
                    ]
                }
            }
        },
        methods: {
            save() {
                const form = 'confForm';
                this.validateForm(form).then(() => {
                    $.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);
                        }
                    });
                }).catch(() => {});
            },
            preview() {
                window.open(`https://ad.yoho.cn/html5/2018/10/wheelSurf/home.html?actId=${this.actId}`);
            },
            getConf() {
                $.ajax({
                    url: '/admin/wheelSurf/api/config/detail',
                    data: {act_id: this.actId}
                }).then(res => {
                    this.actStatus = res.data.status;
                    if (res.code === 200 && res.data && res.data.conf && res.data.conf.id) {
                        this.conf = res.data.conf;
                    } else {
                        this.$Message.error(res.msg);
                    }
                });
            },
            delPreview(e) {
                this.conf[e.currentTarget.getAttribute('img-key')] = '';
            },
            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;
                        });
                });
            },
            limitChange() {

            },
            validateForm(name) {
                return new Promise((resolve, reject) => {
                    this.$refs[name].validate(valid => {
                        if (valid) {
                            resolve();
                        } else {
                            reject();
                        }
                    });
                });
            },
        },
        mounted() {
            this.actId = this.$route.query.actId;
            this.bindUpload();
            this.getConf();
        },
        components: {
            AddPrize
        }
    }
</script>
<style lang="scss">
    .ivu-tabs {
        height: 100%;
        overflow-y: auto;
    }

    .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-wrap {
        position: relative;
        max-width: 200px;

        .del-img {
            position: absolute;
            top: -10px;
            left: -4px;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 50%;
            background-color: #000;
            opacity: 0.3;
            width: 24px;
            height: 24px;
            color: #ffffff;
        }
    }

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