<template>
    <div class="prize-add">
        <div class="add-area-split">
            <Split v-model="split">
                <div slot="left" class="split-pane">
                    <Form ref="prizeForm" :model="prize" :rules="prizeRules" :label-width="120">
                        <FormItem label="奖品位置" prop="prize_idx">
                            <Input v-model="prize.prize_idx" placeholder="奖品位置序号(竖直方向顺时针从1开始)"></Input>
                        </FormItem>
                        <FormItem label="奖品名称" prop="name">
                            <Input v-model="prize.name" placeholder="奖品名称"></Input>
                        </FormItem>
                        <FormItem label="奖品类型" prop="type">
                            <Select v-model="prize.type">
                                <Option :value="1">谢谢惠顾</Option>
                                <Option :value="2">红包</Option>
                                <Option :value="3">优惠券</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="奖品值" prop="value">
                            <Input v-model="prize.value" placeholder="口令或面值等"></Input>
                        </FormItem>
                        <FormItem label="奖品总数" prop="total">
                            <Input v-model="prize.total" placeholder="奖品总数"></Input>
                        </FormItem>
                        <FormItem label="中奖概率" prop="chance">
                            <Input v-model="prize.chance" placeholder="中奖概率"></Input>
                        </FormItem>
                        <FormItem label="中奖背景图" prop="prize_bg">
                            <img class="win-prize-bg" v-show="prize.prize_bg" :src="prize.prize_bg">
                            <Button v-show="!prize.prize_bg">
                                <span ref="winPrizeBg">添加中奖背景图</span>
                            </Button>
                        </FormItem>
                    </Form>
                    <div class="add-btn">
                        <Button type="primary" @click="addPrize">添加</Button>
                    </div>
                </div>
                <div slot="right" class="split-pane right">
                    <Table :columns="prizeColumns" :data="prizes"></Table>
                </div>
            </Split>
        </div>
    </div>
</template>
<script>
    const pirzeType = {
        1: '谢谢惠顾',
        2: '红包',
        3: '优惠券'
    };

    export default {
        name: 'AddPrize',
        data () {
            return {
                actId: 0,
                split: 0.3,
                prizeColumns: [
                    {
                        title: '位置序号',
                        key: 'prize_idx'
                    },
                    {
                        title: '奖品名称',
                        key: 'name'
                    },
                    {
                        title: '奖品类型',
                        render: (h, {row}) => {
                            return h('span', {}, pirzeType[row.type]);
                        }
                    },
                    {
                        title: '奖品值',
                        key: 'value'
                    },
                    {
                        title: '奖品总数',
                        key: 'total'
                    },
                    {
                        title: '中奖概率',
                        key: 'chance'
                    },
                    {
                        title: '中奖背景图',
                        key: 'prize_bg',
                        render: (h, {row}) => {
                            return h('img', {
                                attrs: {
                                    src: row.prize_bg
                                },
                                style: {
                                    width: '100%',
                                    height: 'auto'
                                }
                            });
                        }
                    },
                    {
                        title: '奖品操作',
                        render: (h, {row}) => {
                            return h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.deletePrize(row.id);
                                    }
                                }
                            }, '删除');
                        }
                    }
                ],
                prize: {
                    act_id: '',
                    name: '',
                    type: 1,
                    value: '',
                    img: '',
                    total: '',
                    chance: '',
                    prize_bg: '',
                    prize_idx: ''
                },
                prizeRules: {
                    prize_idx: [
                        { 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' }
                    ]
                },
                prizes: []
            }
        },
        methods: {
            addPrize() {
                const form = 'prizeForm';

                this.validateForm(form).then(() => {
                    $.ajax({
                        method: 'post',
                        url: '/admin/wheelSurf/api/prize/create',
                        contentType: 'application/json',
                        data: JSON.stringify([this.prize])
                    }).then(res => {
                        if (res.code === 200) {
                            this.$Message.success('奖品新增成功');
                            this.formReset(form);
                            this.prizeList();
                        } else {
                            this.$Message.error(res.msg);
                        }
                    });
                }).catch(() => {});
            },
            deletePrize(id) {
                this.$Modal.warning({
                    title: '删除',
                    content: '奖品删除后不可恢复，确认删除？',
                    onOk: () => {
                        $.ajax({
                            url: '/admin/wheelSurf/api/prize/delete',
                            data: {id}
                        }).then(res => {
                            if (res.code === 200) {
                                this.$Message.success('奖品删除成功')
                            }
                            this.prizeList();
                        });
                    }
                });
            },
            prizeList() {
                $.ajax({
                    url: '/admin/wheelSurf/api/prize/list',
                    data: {act_id: this.actId}
                }).then(res => {
                    if (res.code === 200) {
                        this.prizes = res.data;
                    }
                });
            },
            bindUpload() {
                window.qn_dynamic_el_upload(this.$refs.winPrizeBg, url => {
                    this.prize.prize_bg = url;
                });
            },
            validateForm (name) {
                return new Promise((resolve, reject) => {
                    console.log(this)
                    this.$refs[name].validate(valid => {
                        if (valid) {
                            resolve();
                        } else {
                            reject();
                        }
                    })
                });
            },
            formReset (name) {
                this.$refs[name].resetFields();
            }
        },
        mounted() {
            this.actId = this.$route.query.actId;
            this.prize.act_id = this.actId;
            this.bindUpload();
            this.prizeList();
        }
    }
</script>
<style lang="scss" scoped>
    .split-pane {
        padding: 10px;

    &
    .right {
        padding-left: 20px;
    }

    }
    .add-btn {
        text-align: center;
        margin: 0 auto;
    }

    .save {
        text-align: center;
        padding-top: 20px;
    }

    .win-prize-bg {
        width: 100%;
        max-width: 150px;
        height: auto;
    }
</style>