<template>
    <div>
        <el-dialog title="新增推广" :visible.sync="dialog" center width="600px" top="50px">
            <el-form ref="form" :model="form" :rules="formRules" label-width="120px">
                
                <el-form-item label="是否使用相同的目标URL：" label-width="160">
                    <el-radio-group v-model="isSameUrl" clearable placeholder="请填写备注">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="isSameUrl" label="目标URL：">
                    <el-input v-model="form.promote_list[0].properties" clearable placeholder="推广时所指向您网站的URL"> </el-input>
                </el-form-item>
                <div class="properties-group">
                    <div v-for="(item, index) in form.promote_list" :key="index" class="flex properties-group-item">
                        <div style="flex: 7">
                            <el-form-item v-if="!isSameUrl" :label="`目标URL${index + 1}：`">
                                <el-input v-model="form.promote_list[index].properties" clearable placeholder="推广时所指向您网站的URL"> </el-input>
                            </el-form-item>
                            <el-form-item :label="`推广名称${index + 1}：`">
                                <el-input v-model="form.promote_list[index].promotion_name" clearable placeholder="推广的名称，如：春季福利"> </el-input>
                            </el-form-item>
                        </div>
                        <div class="marginL-10" style="flex: 2">
                            <el-button type="text" @click="del(index)">删除</el-button>
                            <el-button type="text" @click="add">新增</el-button>
                        </div>
                    </div>
                </div>
                <el-form-item class="marginT-20" label="推广备注：">
                    <el-input type="textarea" :rows="3" v-model="properties_remark" > </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer text-center">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: true,
        },
        exData: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            isSameUrl: true,
            properties_remark: '',
            form: {
                channel_id: undefined,
                promote_list: [
                    {
                        properties: '',
                        promotion_name: '',
                    }
                ]
            },
            promote_list_remark: '',
            dialog: !!this.value,
        }
    },
    methods: {
        async handleSubmit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    let promote_list = this.form.promote_list
                    let new_promote = []
                    for (const key in promote_list) {
                        new_promote.push({
                            promotion_url: promote_list[this.isSameUrl ? 0 : key].properties,
                            promotion_name: promote_list[key].promotion_name,
                            remark: this.properties_remark
                        })
                    }

                    const data = await this.$fetch('/addUserPromote', {...this.form, promote_list: new_promote})
                    if (data.code == 200) {
                        this.$message.success('成功')
                        this.dialog = false
                        this.$emit('success')
                    }
                }
            })
        },
        add() {
            this.form.promote_list.push({
                properties: '',
                promotion_name: '',
            })
        },
        del(index) {
            if (this.form.promote_list.length == 1) {
                this.$message.error('无法继续删除')
                return
            }
            this.form.promote_list.splice(index, 1)
        }
    },
    mounted() {
        // this.show = true
        this.form.channel_id = this.exData.id
    },
    watch: {
        dialog(val) {
            if (!val) this.$emit('input', val)
        },
    },
}
</script>
<style lang="scss">
.form-title {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: bold;
    border-left: 2px solid #409EFF;
    background: #409EFF33;
    padding-left: 30px;
}
.properties-group {
    background: #409EFF33;
    padding: 4px 10px;
    .el-form-item {
        margin-bottom: 0;
    }
    .properties-group-item {
        & + .properties-group-item {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #ddd;
        }
    }
}
</style>
