<template>
    <div>
        <el-container>
            <!--搜索-->
            <el-header class="searchBox">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="产品名称">
                        <el-input v-model="searchForm.productName" placeholder="产品名称"/>
                    </el-form-item>
                    <el-form-item label="渠道编码">
                        <el-input v-model="searchForm.fullCode" placeholder="渠道编码"/>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="searchForm.phone" placeholder="手机号"/>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="searchForm.joinActivityResult" placeholder="请选择">
                            <el-option key="1" label="成功" value="1"/>
                            <el-option key="0" label="失败" value="0"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-date-picker
                                v-model="value2"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                align="right"
                                @change="dateChange"
                        />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="searchBtn">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                        <el-button type="warning" @click="value5 = true">手动领取</el-button>
                    </el-form-item>
                </el-form>
            </el-header>

            <!--表格-->
            <el-main class="tableBox">
                <!--批量领取窗口主体-->
                <vxe-modal v-model="value5" width="60%" title="批量领取会员">
                    <template #default>
                        <el-form label-position="left" status-icon :rules="rules" ref="memberForm" label-width="80px"
                                 :model="memberForm">
                            <el-form-item label="名称" prop="index">
                                <el-select filterable v-model="memberForm.index" placeholder="请选择产品">
                                    <el-option v-for="(item, index) in productInfoList"
                                               :key="item.id"
                                               :label="`${item.productName}/${item.remark}/${item.spid}`"
                                               :value="index"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item class="margin-top" label="手机号" prop="phones">
                                <el-input v-model="memberForm.phones"></el-input>
                            </el-form-item>

                            <el-form-item class="margin-top">
                                <el-button type="primary" @click="giveMenmber('memberForm')">提交</el-button>
                                <el-button @click="value5 = false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </vxe-modal>
                <!--表格主体-->
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="parentChannelName" label="一级渠道" width="120">
                        <template slot-scope="ppp">
                            <div style="text-align: center">{{ ppp.row.parentChannelName ? ppp.row.parentChannelName :
                                '后台操作' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="channelName" label="二级渠道" width="120">
                        <template slot-scope="ppp">
                            <div style="text-align: center">{{ ppp.row.channelName ? ppp.row.channelName : '手动领取' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fullCode" label="渠道代码" width="120">
                        <template slot-scope="ppp">
                            <div style="text-align: center">{{ ppp.row.fullCode ? ppp.row.fullCode : '— —' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="产品名称"/>
                    <el-table-column prop="phone" label="会员手机号"/>
                    <el-table-column prop="joinActivityResult" label="领取结果" width="80">
                        <template slot-scope="scope">
                            <span>{{ scope.row.joinActivityResult > 0 ? '成功' : '失败' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="订购时间" width="160"/>
                </el-table>
                <div class="block">
                    <el-pagination
                            :current-page.sync="searchForm['pageNum']"
                            :page-sizes="[20, 50, 100, 300]"
                            :page-size="searchForm['pageSize']"
                            layout="total, sizes, pager"
                            :total="total"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </div>
            </el-main>
        </el-container>
    </div>

</template>

<script>
    import {get, post} from '@/api/common'
    import filter from '@/common/filter'

    export default {
        name: 'RunData',
        data() {
            return {
                searchForm: {
                    productName: '',
                    fullCode: '',
                    phone: '',
                    handleType: '',
                    handleResult: '',
                    startTime: '',
                    endTime: '',
                    pageSize: 20,
                    pageNum: 1
                },
                memberForm: {},
                productInfoList: {},
                value2: '',
                value5: false,
                tableData: [],
                total: 5000,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit('pick', [start, end])
                        }
                    }]
                },
                rules: {
                    index: [
                        {required: true, message: '请选择产品', trigger: 'change'}
                    ],
                    phones: [
                        {required: true, message: '请输入手机号', trigger: 'blur'}
                    ],
                },
            }
        },
        created() {
            var that = this
            that.search()
            get('/productInfo/page', {'pageSize': 9999, 'pageNum': 1}).then(res => {
                this.productInfoList = res.data.list
            });
        },
        methods: {
            giveMenmber(formName) {
                this.$confirm('您确定为这些手机号领取会员么？当前操作不可逆', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let d = this.memberForm
                            let phones = d.phones.split(',')
                            let data = {
                                "activeType": this.productInfoList[d.index].activeType,
                                "givecpId": "",
                                "isCompositeProduct": this.productInfoList[d.index].isCompositeProduct,
                                "phones": phones,
                                "productId": this.productInfoList[d.index].id
                            }
                            post('/vip/batchjoin', data).then((res) => {
                                if (res.code === 10000) {
                                    this.value5 = false
                                    this.reset()
                                    this.$message({
                                        type: 'info',
                                        message: res.data,
                                        duration:3000,
                                        offset: 360
                                    });
                                }
                            }).catch((err) => {
                                this.$message({
                                    type: 'worning',
                                    message: err.message,
                                    offset: 360
                                });
                            })

                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },

            async search() { // 同步搜索
                await get('/joinActivityRecord/page', this.searchForm)
                    .then((res) => {
                        this.tableData = res.data.list
                        this.total = res.data.total
                    }).catch((err) => {
                        console.log(err)
                    })
            },
            searchBtn() { // 搜索按钮
                this.search()
            },
            reset() { // 重置
                this.searchForm = {
                    cpid: '',
                    categoryName: '',
                    pageSize: 20,
                    pageNum: 1
                }
                this.search()
            },
            dateChange(e) {
                console.log(e)
                this.searchForm.startTime = filter.frDateTime(e[0])
                this.searchForm.endTime = filter.frDateTime(e[1])
            },
            handleSizeChange(e) { // 单页数量
                this.searchForm.pageSize = e
                this.search()
            },
            handleCurrentChange(e) { // 跳页
                this.searchForm.pageNum = e
                this.search()
            }
        }
    }
</script>

<style scoped lang="scss">
    .margin-top {
        margin-top: 30px;
    }

    .searchBox {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: #bfbfbf 0 0 2px;
        height: unset !important;

        form {
            margin: auto;

            .el-form-item {
                margin: 5px 5px;
            }
        }
    }

    .el-header {
        padding: 20px
    }

    .el-form-item {
        margin-bottom: unset
    }

    .tableBox {
        margin-top: 10px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: #bfbfbf 0 0 2px;
    }

    .block {
        margin-top: 20px;
        float: right;
    }

    .demo-drawer__content {
        padding: 20px 5%;
        line-height: 32px;

        .el-form-item {
            margin-top: 20px;
        }

        .demo-drawer__footer {
            position: fixed;
            bottom: 30px;
            width: 45%;
            margin-top: 20px;
            display: flex;

            button {
                flex: 1;
            }
        }
    }
</style>
