<template>
    <div>
        <br>
        <div class="top">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
               
                <el-form-item label="客户批次：">
                    <el-input placeholder="请输入批次" v-model="searchInfo.batchNo"></el-input>
                </el-form-item>
               
                <el-form-item label="分配状态：">
                    <el-select v-model="searchInfo.fstatus" clearable placeholder="全部">
                        <el-option v-for="item in this.$enumUtils.toValue('ServiceMarketEnums')" :key="item.value"
                         :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item >
                <el-form-item label="营销组：">
                    <el-select v-model="searchInfo.mstatus" clearable placeholder="全部">
                        <el-option v-for="item in userGroupList" :key="item.value"
                         :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
              
                <div class="btn">
                    <el-button @click="reset" type="primary">重置</el-button>
                    <el-button @click="querySearchRemind" type="primary">查询</el-button>
                </div>
            </el-form>

            <br/>
            <br/>
            <br/>
             <el-button @click="importMarketPhone" type="primary" style="margin-left:80px">导入客户</el-button>
        </div>
        <div>
            <el-table :data="tablePlanRemindData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
                <el-table-column prop="batchNo" label="客户批次" sortable ></el-table-column>
                <el-table-column prop="status" label="分配状态" :formatter="getStatus" ></el-table-column>
               
                <el-table-column prop="gmtCreated" label="导入时间" :formatter="dateFormat" sortable
                                 ></el-table-column>
                <el-table-column prop="gmtBlack" label="收回时间" :formatter="dateFormat" sortable
                                ></el-table-column>
                 <el-table-column prop="group" label="已分配营销组" :formatter="marketFormat" ></el-table-column>
                <el-table-column prop="count" label="已导入客户数量"></el-table-column>
                <el-table-column prop="distributionCount" label="已分配客户数量"></el-table-column>
                <el-table-column prop="momo" label="备注"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="assignMarket(scope.row)" v-if = "scope.row.status == 'DISTRIBUTIONFINISH'" disabled>分配</el-button>
                        <el-button type="text" size="small" @click="assignMarket(scope.row)" v-else >分配</el-button>
                        <el-button size="mini" type="text" @click="regainMarket(scope.row)"  >收回</el-button>
                        <el-button size="mini" type="text" @click="exportMarket(scope.row)">导出</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page.sync="page.current"
                    :page-sizes="[20, 50, 80, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
        </div>


        <!--窗口组件-->
        <template>
            <!-- 分配弹窗 -->
            <byhAssignMarket
                    v-if="ui.byhAssignMarket.visible"
                    :batchNo="ui.byhAssignMarket.batchNo"
                    :dialogVisible.sync="ui.byhAssignMarket.visible"  @my-event="getMyMarket">
            </byhAssignMarket>

            <!-- 收回弹窗 -->
            <byhRegainMarket
                    v-if="ui.byhRegainMarket.visible"
                    :batchNo="ui.byhRegainMarket.batchNo"
                    :dialogVisible.sync="ui.byhRegainMarket.visible" @my-event="getMyEvent">

            </byhRegainMarket>

             <!-- 导入弹窗 -->
            <byhImportMarketPhone
                    v-if="ui.byhImportMarketPhone.visible"
                    :batchNo="ui.byhImportMarketPhone.batchNo"
                    :clientCell="ui.byhImportMarketPhone.clientCell"
                    :clientName="ui.byhImportMarketPhone.clientName"
                    :dialogVisible.sync="ui.byhImportMarketPhone.visible">
            </byhImportMarketPhone>

              <!-- 导出弹窗 -->
            <byhExportMarket
                    v-if="ui.byhExportMarket.visible"
                    :batchNo="ui.byhExportMarket.batchNo"
                    :dialogVisible.sync="ui.byhExportMarket.visible">
            </byhExportMarket>


        </template>
    </div>
</template>

<script>
    import * as moment from "moment";
    import byhAssignMarket from './byhAssignMarket';
    import byhRegainMarket from './byhRegainMarket';
    import byhImportMarketPhone from './byhImportMarketPhone';
    import byhExportMarket from './byhExportMarket';

    export default {
        name: "ByhPlanRemindList",
        components: {
            byhAssignMarket,
            byhRegainMarket,
            byhImportMarketPhone,
            byhExportMarket
        },
        data() {
            return {
                flag: false,
                ui:
                    {
                        byhAssignMarket: {
                            visible: false,
                            batchNo: '',
                            clientName: ''
                        },
                        byhRegainMarket: {
                            visible: false,
                            clientNo: '',
                            clientName: '',
                        },
                        byhImportMarketPhone:{
                            visible: false,
                            clientNo: '',
                            clientName: ''
                        },
                        byhExportMarket:{
                            visible: false,
                            clientNo: '',
                            clientName: ''
                        }
                    },
                page: {
                    current: 1,
                    size: 20,
                    total: 0
                },
                searchInfo: {
                    date: [new Date(),new Date()],
                    batchNo: '',
                    fstatus: '',
                    mstatus:'',
                },
                tablePlanRemindData: [],
                record: '',
                userGroupList:[],
            }

        },

        created() {
            if (this.$route != null && this.$route.query != null && this.$route.query.flag) {
                this.flag = this.$route.query.flag;
                this.searchInfo.idCard = this.$route.query.idcard;
                this.searchInfo.name = this.$route.query.name;
                this.searchInfo.phoneNo = this.$route.query.phoneNo;
                this.searchInfo.status = this.$route.query.status;
                this.page.current = parseInt(this.$route.query.current);
                this.searchInfo.date = this.mergeDate(this.$route.query.planDateStart, this.$route.query.planDateEnd);
            }

             // 获取当前用户组
            this.$$get('/group/getGroupList/')
            .then(res => {
                if (res.data.code == 1){
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg);
                        this.userGroupList = '';
                        return
                    }
                    console.log(res.data.data)
                    this.userGroupList = res.data.data;
                }else{
                this.$message({message: res.data.msg, type: 'error'});
                }
            })
            .catch(err => this.$$msg.err(err))
        },

        mounted: function () {
            this.tablePlanRemindData = this.remindData();
        },

        methods: {

            formatter(row, column) {
                return row.address;
            },
            //子组件传值给父组件
            getMyEvent(msg){
                if(msg){
                    this.tablePlanRemindData = this.remindData();
                }
            },
            // 分配后不刷新页面加载数据
            getMyMarket(msg){
                if(msg){
                    this.tablePlanRemindData = this.remindData();
                }
            },

            /** 加载数据 */
            remindData(params) {
                var listsData = [];
                this.$$post('/market/selectBatch', this.buildParam()).then(res => {
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg);
                        return
                    }
                    listsData = res.data.data.records;
                    this.tablePlanRemindData = listsData;
                    this.page.total = res.data.data.total;
                }).catch(error => {
                    this.$Message.error(error || '系统异常');
                });
            },

            //搜索查询
            querySearchRemind() {
                this.remindData();
            },

            /*提醒期数*/
            planIndexFormat: function (row, column) {
                var planIndex = row[column.property]
                if (planIndex == undefined) {
                    return ''
                }
                return planIndex + '/3'
            },
            assignMarket(record) {
                this.ui.byhAssignMarket = {
                    visible: true,
                    batchNo: record.batchNo,
                    clientCell: record.clientCell,
                    clientName: record.clientName
                }
            },
            regainMarket(record){
                this.ui.byhRegainMarket = {
                    visible: true,
                    batchNo: record.batchNo,
                    clientCell: record.clientCell,
                    clientName: record.clientName
                }
            },
            importMarketPhone(record){
                this.ui.byhImportMarketPhone = {
                    visible: true,
                    batchNo: record.batchNo,
                    clientCell: record.clientCell,
                    clientName: record.clientName
                }
            },
            exportMarket(record){
                this.ui.byhExportMarket = {
                    visible: true,
                    batchNo: record.batchNo,
                    clientCell: record.clientCell,
                    clientName: record.clientName
                }
            },
             handleSizeChange(row){
                this.page.size=row
                this.page.current=1;
                this.remindData();
            },
            //参数
            buildParam() {
                var return_hash = {
                    size: this.page.size,
                    current: this.page.current,
                };
                if (this.searchInfo.batchNo != '') {
                    return_hash['batchNo'] = this.searchInfo.batchNo
                }
               
                if (this.searchInfo.mstatus != '') {
                    return_hash['group'] = this.searchInfo.mstatus
                }
                if (this.searchInfo.fstatus != '') {
                    return_hash['status'] = this.searchInfo.fstatus
                }
           

                return return_hash;
            },

            //显示日期
            dateFormat: function (row, column) {

                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },

            //重置
            reset() {
                this.searchInfo.batchNo = '';
                this.searchInfo.fstatus = '';
                this.searchInfo.mstatus = '';
            },

            /** 处理分页操作*/
            handleCurrentChange() {
                this.tablePlanRemindData = this.remindData();
            },

            getStatus(row) {
                let value = row.status;
                if (value === 'DISTRIBUTIONWATING') {
                    return '待分配';
                } else if (value === 'DISTRIBUTIONFINISH') {
                    return '已分配';
                } else if (value === 'RECOVERY') {
                    return '已回收';
                }
            },

             //营销组分类
            marketFormat: function (row, column) {
                var status = row['group'];
                return this.$enumUtils.toMsg('marketEnum', status);
            },

            mergeDate(param1, param2) {
                if (param1 == "") {
                    return ""
                }
                var array = new Array();
                array[0] = new Date(param1)
                array[1] = new Date(param2)
                return array;
            },
            getDate(param, num) {
                if (param && param[num] !== '') {
                    return moment(param[num]).format("YYYY-MM-DD")
                }
                return ""
            },

        }

    }
</script>

<style scoped>

</style>